Vesper

Run this with Claude Code to build your own Vesper variant — free. Want the exact, tested code shown in the demo? That’s the $79 download.

# VESPER — Free Claude Code Prompt

*From SmartDuke Studio (studio.smartduke.com). The real prompt behind
our luxury-watch template. The exact tested build — encoded film, all
the section choreography, every fix — is the paid download:
https://studio.smartduke.com*

## Before you start

1. **Generate or shoot one product film** (~10s, 1080p+): a watch that
   goes from **scattered components → assembled movement → finished
   timepiece**. One continuous camera move over black reads best.
2. **Re-encode it all-intra** so scrubbing lands on any frame:
   `ffmpeg -i watch.mp4 -an -c:v libx264 -preset slow -crf 18 -g 1 -pix_fmt yuv420p -movflags +faststart public/film.mp4`
3. **Pull section stills from that same film** (single-product
   coherence is the whole look) at ~1.4s (poster), 4.3s, 5.6s, 6.4s,
   7.0s, 8.3s, 9.7s into `public/img/`.
4. Node.js ≥ 20.9.

## The prompt

> Build a dark, haute-horlogerie luxury-watch website where **scrolling
> assembles the watch** — the product film scrubs frame-by-frame from
> scattered components to the finished timepiece. Awwwards standard,
> editorial, restrained. Near-black (#08080A), porcelain off-white type,
> ONE warm gold accent (#C9A24B). Display font **Bodoni Moda** (a
> high-contrast Didone), body **Outfit**, via next/font.
>
> **Stack:** Next.js App Router + TypeScript + Tailwind v4 + **GSAP**
> (ScrollTrigger for all scroll animation + **SplitText** for line/char
> reveals) + **Lenis** (smooth scroll). No 3D — the "assembly" is the
> all-intra `<video>` scrub. Build these sections in order:
>
> **0 · Preloader** — a black curtain: the maison wordmark fades in, a
> gold hairline draws itself (scaleX 0→1), and a "Calibrating · 000 →
> 319" counter winds up (gsap tween on a number, padStart to 3
> digits). Then the whole curtain lifts away (yPercent -100). Lock
> scroll (and Lenis) while it's up.
>
> **1 · Hero — the assembly scrub (≈440vh pinned).** A full-bleed
> `<video>` (all-intra `film.mp4`) whose `currentTime` is driven by
> scroll: ScrollTrigger onUpdate sets a target time from progress, a
> gsap.ticker lerps `video.currentTime` toward it (factor 0.14). GATE
> the ticker with `if (!duration || video.readyState < 2) return;` — or
> per-frame seeks during download abort the fetch and the video never
> loads. Over it:
> - Opening headline, char-reveal with blur (SplitText chars, from
>   opacity0/yPercent60/blur(10px)), a masthead eyebrow with hairline
>   rules, and a gold underline that draws under it (scaleX).
> - A **live component counter** on the right that ticks 000→319 as you
>   scroll (round(progress*319)), plus a thin progress hairline.
> - **Serif beats that mask through** at fixed progress windows (a scrub
>   timeline: each beat's lines animate yPercent 120→0 then →-120 across
>   its window), synced to the movement forming — e.g. "Forty-two
>   jewels. Six hundred hours of a single pair of hands." → "A window to
>   its beating heart."
> - A final `reveal` at ~86% progress: a huge "THE MASTERPIECE" line
>   mask-reveals at the BOTTOM over the finished-watch beauty frame,
>   with a subtitle.
> - Legibility: a soft **radial ink-pool** (radial-gradient, dark
>   centre → transparent) behind the headline so type reads over the
>   bright movement — never a full-frame wash.
> - **Ambient-on-load:** before the first scroll, play the film in a
>   slow loop of its first ~1.7s (playbackRate 0.55) so the parts drift
>   on their own; on first wheel/touch/scroll, pause and hand to the
>   scrub, syncing the seek position so there's NO jump.
>
> **2 · Manifesto — scroll-fill.** A big serif paragraph, each word
> wrapped in a span; scrub their `color` from grey (ash) to porcelain
> word-by-word (gsap stagger + ScrollTrigger scrub over the section).
>
> **3 · Anatomy — pinned horizontal gallery (≈500vh).** Vertical scroll
> translates a horizontal track (gsap x to -(scrollWidth - innerWidth),
> pinned via ScrollTrigger). Five "studies" — The Movement, The Balance,
> The Dial, The Case, The Bracelet — each a big film-still crop + Roman
> numeral (huge, low-opacity ghost) + spec + description, with a gentle
> parallax on each image (xPercent).
>
> **4 · The Heart** — a two-column pinned macro of the open-heart
> movement: image parallax + scale on scroll (scrub), title line-reveal
> (SplitText mask). "Watch it breathe."
>
> **5 · Heritage — clip-path reveal.** Craftsmanship story; the image
> unmasks with `clip-path: inset(0 0 100% 0)` → `inset(0 0 0% 0)` (wipes
> up) while its inner img scales 1.3→1, and the serif title reveals
> line-by-line. "One bench. One watchmaker. Start to finish."
>
> **6 · Specifications — count-up.** A 4-cell grid (components 319,
> jewels 42, power reserve 72h, frequency 28,800 vph) where each number
> animates from 0 when it scrolls into view (gsap tween + ScrollTrigger
> once).
>
> **7 · Statement — looping-video pull-quote.** A centred italic serif
> quote over a background that reuses the SAME film but loops only its
> **final ~2.7s** (the finished watch turning) — set currentTime to the
> loop-in on a timeupdate handler, dim it (opacity + dark scrim) so the
> quote reads, and only play it while the section is on screen
> (IntersectionObserver). Add a slow parallax (yPercent) and a masked
> line-reveal on the quote.
>
> **8 · Acquire + Footer** — an exclusivity CTA ("Two hundred pieces.
> Then the dies are broken.") with a bordered gold button, and a big
> wordmark footer with maison details.
>
> Global: a fixed nav that gains a translucent background past 60px;
> `history.scrollRestoration = "manual"` in the Lenis provider; respect
> prefers-reduced-motion (skip the idle loop and heavy motion). Put the
> brand, all copy, the BEATS / PARTS / SPECS arrays and image paths in
> config so it re-skins from one place.

## Gotchas (we hit all of these)

- The `readyState < 2` gate on the scrub ticker is mandatory.
- `-g 1` (every frame a keyframe) is what makes `currentTime` land
  anywhere — without it the scrub snaps and judders.
- The hero idle-loop → scrub handover must sync the seek position on
  first scroll, or the film jumps.
- Off-screen `<video>` autoplay is suspended by browsers — drive the
  Statement loop with an IntersectionObserver.
- SplitText line masks clip text-shadow glows and long descenders —
  split without masks where you use a glow.
- Legibility over bright footage = a localized radial ink-pool + text
  shadow, never a full-frame dark wash (it dulls the film).

---

*Paid version: the film + all stills + every section's exact
choreography + README + license — studio.smartduke.com*

Vesper — questions

Related templates

Part of