Aurelia

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

# AURELIA — Free Claude Code Prompt

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

## Before you start

1. **Get one cinematic voyage film** (~10–20s, 1440p): a continuous
   aerial-to-onboard journey reads best — above golden clouds → down to
   a ship gliding the open sea. This is the hero scrub; the descent IS
   the scroll story. A second short clip of a couple at a golden-hour
   dinner powers the Dining section.
2. **Re-encode both all-intra** so scrubbing lands on any frame:
   `ffmpeg -i journey.mp4 -an -c:v libx264 -preset slow -crf 20 -g 1 -pix_fmt yuv420p -movflags +faststart public/vid/journey.mp4`
   (repeat for the dining clip). `-g 1` — every frame a keyframe — is
   what lets `currentTime` land anywhere without judder.
3. **Pull the poster + stills from the same films**:
   `ffmpeg -ss 0.2 -i journey.mp4 -frames:v 1 -q:v 3 public/img/hero-poster.jpg`,
   plus destination, suite, onboard and gallery frames (or your own
   photography). An aerial ship-in-clouds frame makes the closing shot.
4. Node.js ≥ 20.9.

## The prompt

> Build a cinematic, Apple-keynote-grade website for a **fictional
> luxury cruise line** where **scrolling sails the ship** — a single
> aerial film scrubs frame-by-frame from above the clouds down to the
> open sea. Awwwards standard, restrained, editorial. Deep navy paper
> (#061423) with a near-black surround (#030A12) for the film moments,
> warm foam white (#F4F1EA) ink, ONE warm-gold accent (#C8A15A).
> Display font **Cormorant Garamond** (high-contrast serif), body
> **Inter**, line-labels **Jost**, all via next/font.
>
> **Stack:** Next.js App Router + TypeScript + Tailwind v4 + **GSAP**
> (ScrollTrigger for all scroll work + **SplitText** for word/char
> reveals) + **Lenis** (smooth scroll). No 3D — the motion is the
> all-intra `<video>` scrub. Put the brand, all copy, every section's
> arrays and image/video paths in `src/config.ts` so it re-skins from
> one file; empty media paths must render labelled placeholders.
>
> **0 · Preloader — the overture.** A near-black curtain: the tagline
> and the AURELIA wordmark fade in, a gold progress rail fills from REAL
> progress (read the hero `<video>` buffer + poster load, not a fake
> timer), then the whole curtain lifts (yPercent -101). A minimum hold
> so it never flashes and a hard cap so it can never hang. Lock scroll
> (Lenis `.stop()` + body/html overflow) while it's up; release on
> reveal so the hero opens already buffered — never a half-loaded pop.
>
> **1 · Hero — the descent scrub (≈420vh pinned).** A full-bleed
> `<video>` (all-intra `journey.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.12). GATE
> the ticker with `if (!duration || video.readyState < 2) return;` — the
> film rests on its poster first frame and only seeks on scroll. Over
> it: the brand line, a word-by-word headline reveal (each word in an
> `overflow-hidden` mask, yPercent 120→0, staggered), an italic sub, a
> CTA that scales 0.9→1, and a bobbing scroll cue. The whole overlay
> fades + rises away over the first ~38% of scroll; a radial vignette
> deepens toward the end so the next act lands.
>
> **2 · Experience — oversized type + masked image + count-up.** A
> big three-line serif statement whose image reveals via a clip-inset
> wipe, beside a 4-cell stat grid where each number counts up from 0 on
> enter (gsap tween + ScrollTrigger once) with a gold suffix.
>
> **3 · Destinations — horizontal-scroll gallery (pinned).** Six
> destination cards translate horizontally as you scroll down (pin the
> section, map vertical progress → x). Each card has a photo, name,
> region and a one-line lure; the section background tint shifts toward
> the active card's tint. `invalidateOnRefresh: true` so the track width
> recomputes on resize.
>
> **4 · Life Onboard — synced image cross-fade (pinned).** A split
> layout: a list of onboard features on one side, a large image on the
> other. Scrolling (or clicking a feature) advances the active feature —
> its image cross-fades in and a gold line marks the active label. Drive
> the active index from scroll progress over a pinned span.
>
> **5 · Suites — stacked reveals.** Four suites stack; each reveals via
> a clip-inset wipe with its name, area and a line of copy, image to one
> side. Alternate the side per item.
>
> **6 · Dining — a golden-hour scrub (≈240vh pinned).** A second
> all-intra `<video>` (the couple-at-dinner clip) scrubbed over its full
> duration (`target = progress * (duration - 0.05)`), same ticker + gate
> as the hero. Over it a letter-reveal headline (SplitText chars) and a
> warm amber wash that intensifies through the section.
>
> **7 · Gallery — masonry.** Six frames in a masonry grid (some tall),
> staggered in with a slight rotate on enter and a gentle scale on
> hover.
>
> **8 · Stories — a quiet testimonial.** ONE guest quote on screen at a
> time with a portrait, name and trip; auto-advance on a `setInterval`
> (~6.5s) with clickable dots, each swap a soft fade-up. Keep it
> simple — no pin, no scrub here; the restraint is the point.
>
> **9 · Book — the cinematic close.** An aerial ship-in-clouds still
> sits full-bleed and parallaxes under a navy gradient, with a few
> slow-floating gold particles; over it a masked two-line invitation, a
> line of copy and a glowing gold CTA (soft box-shadow pulse). Footer:
> wordmark, nav, contact — nothing loud.
>
> Global: a fixed nav that stays legible over both the dark film and the
> lighter sections; `history.scrollRestoration = "manual"` in the Lenis
> provider; respect prefers-reduced-motion (skip the pins, scrubs and
> parallax).

## Gotchas (we hit all of these)

- The `readyState < 2` gate on BOTH scrub tickers is mandatory —
  seeking while the file still downloads aborts the fetch every frame
  and the video stalls grey.
- `-g 1` on the encode is non-negotiable; without an all-keyframe file
  `currentTime` snaps to the nearest keyframe and the scrub judders.
- The preloader must read REAL buffer progress and carry both a minimum
  hold and a hard cap — a fake timer either flashes on fast links or
  traps a slow one; no cap and a stalled video hangs the page forever.
- 31MB of cinematic video is fine for this genre, but only *because* the
  preloader hides the buffer — ship it without one and the hero pops in
  half-loaded and cheap.
- Horizontal-scroll and pinned sections need `invalidateOnRefresh: true`
  or they mis-measure after a resize / font swap.
- Turbopack caches `@theme` font tokens — after changing a font var, `rm
  -rf .next` and restart or the new face silently falls back to serif.

---

*Paid version: both encoded films + all stills + every section's exact
choreography + preloader + README + license — studio.smartduke.com*

Aurelia — questions

Related templates

Part of