Zest

Run this with Claude Code to build your own Zest variant — free. Want the exact, tested code shown in the demo? It’s in Studio Access, with every other template.

# ZEST — Free Claude Code Prompt

*From SmartDuke Studio (studio.smartduke.com). Run it with Claude Code
and build your own variant. Want the exact tested code — the encoded
films, the finished layout, the scrub engine with the iOS fixes —
that's the paid download at https://studio.smartduke.com*

## Before you start

- Node.js ≥ 20.9 and ffmpeg on PATH.
- You need 6–7 short splash films (about 8s each): a hero product shot,
  one splash film per flavour, a pour, an ice-cold can. Generate them
  with an AI video tool (Kling/Veo work well) — ONE continuous take per
  clip, slow constant motion, no cuts, every clip must read scrubbed
  backwards as well as forwards. Encode each all-intra:
  `ffmpeg -i in.mp4 -an -vf "scale=1600:-2" -c:v libx264 -preset slow
  -crf 29 -g 1 -pix_fmt yuv420p -movflags +faststart out.mp4`
  (-g 1 makes every frame a keyframe — that's what makes scrubbing
  instant instead of janky). Encode the full-bleed hero at 1920/crf 21.
  Keep the total under ~30MB.

## The prompt

> Build me a loud, colourful juice-brand site — Awwwards-level, for a
> fictional citrus brand with three flavours. The page is a sequence of
> vivid duotone chapters: every section floods the ENTIRE page
> background to its own saturated colour (tween document.body's
> backgroundColor on enter/enterBack — never scrubbed), each paired
> with its own accent colour (gold on tangerine, lime on teal, ice on
> electric blue…). Films are scrubbed by scroll.
>
> **Stack:** Next.js App Router + TypeScript + Tailwind v4 + GSAP
> ScrollTrigger + Lenis. Fraunces (opsz/SOFT/WONK axes) for display
> type, light weights with italic accents.
>
> **The scrub engine (one reusable component):** a tall section
> (~220vh) with a sticky viewport frame holding a <video muted
> playsInline>. ScrollTrigger (top top → bottom bottom) maps progress
> to a target time; a gsap.ticker lerps video.currentTime toward it
> (factor ~0.14, only seek when the delta exceeds 0.004s, bail while
> readyState < 2). First-frame poster jpg on every film.
>
> **The signature act — slide-then-scrub flavour line:** one pinned
> 500vh section with a 300vw horizontal track, one panel per flavour.
> Each flavour owns a third of the pin; the first quarter of its
> segment SLIDES the track sideways (eased), the rest SCRUBS that
> flavour's splash film while it holds centre. The page floods to each
> flavour's colour as it arrives. One shared ticker; only the centred
> panel's video seeks.
>
> **The Awwwards dressing:** an intro loader (wordmark + 000→100
> counter on a gradient hairline, curtain lifts); per-character masked
> headline reveal timed to the curtain; a cinematic hero exit where the
> full-bleed film shrinks into a rounded card as you scroll out; a
> custom cursor (dot + trailing ring that swells over interactive
> targets, mix-blend-difference); a giant two-row serif marquee
> drifting in opposite directions that skews with scroll velocity;
> numbers that count up when their section enters; a right-edge scroll
> progress rail with chapter counter; giant outlined index numerals
> bleeding out from behind the film frames; clip-path card reveals and
> slow image parallax in the shop; a magnetic CTA button.
>
> **The mobile trap (do not skip):** iOS never paints a seeked frame
> on a video that has not played. On mount, call play() then
> immediately pause(); if the browser refuses, retry on the first
> touchstart/pointerdown. Re-arm this after any load() call.
>
> **Many videos, one page:** gate each chapter's ticker with an
> IntersectionObserver; ship later chapters preload="metadata" and
> upgrade to "auto" one viewport early.
>
> **Mobile menu:** full-screen overlay where every link is a giant
> flavour-coloured bar — tapping one floods the screen with its colour
> as it navigates. Body scroll locked, Esc closes, aria-expanded wired.
>
> **A11y + housekeeping:** prefers-reduced-motion gets still posters
> and no cursor/marquee tricks; pointer:fine gates the custom cursor;
> overflow-x uses clip (never hidden — hidden turns body into a scroll
> container and silently kills position:sticky).

## Gotchas we hit (the paid version has these fixed)

- Scrubbed background-colour tweens capture wrong start values during
  pinned refresh — flood with plain onEnter/onEnterBack tweens to an
  explicit hex, never scrub them.
- A hard dark nav bar collides with headings on colourful pages — use
  a soft top-down gradient scrim that fades out by ~150px instead.
- 1600px/crf29 is fine for framed films but visibly soft full-bleed —
  encode the hero at 1920/crf21 (still all-intra).
- The iOS play()/pause() unlock must be re-armed after load() — the
  preload upgrade resets the decoder and the hero works while every
  later chapter silently freezes.
- Tie text exits to the sticky RELEASE, not chapter progress — or your
  copy fades while the film is still pinned.