Cirrus

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

# CIRRUS — 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 masked-wordmark hero, 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 4 short aviation films (8–15s each) plus 4 destination
  photos. Generate the films with an AI video tool (Kling works well) —
  ONE continuous take per clip, slow constant motion, no cuts, every
  clip legible scrubbed backwards:
  1. **hero** — exterior tracking along the fuselage at golden hour,
     ending close on a window (~8s)
  2. **emerge** — the aircraft appearing out of sun flare above a cloud
     sea (~5s)
  3. **cabin** — gliding through a porthole into a luxury cabin, ending
     looking out a window at the wing (~10s)
  4. **window** — down a cabin aisle, portholes glowing (~10s)
- Encode each all-intra:
  `ffmpeg -i in.mp4 -an -vf "scale=1600:-2" -c:v libx264 -preset slow
  -crf 27 -g 1 -pix_fmt yuv420p -movflags +faststart out.mp4`
  (-g 1 makes every frame a keyframe — that's what makes scrubbing
  instant). The full-bleed hero deserves 1920 / crf 19 with a gentle
  `unsharp=5:5:0.35` so it survives browser scaling. Total under ~30MB.

## The prompt

> Build me a premium airline website told as one golden-hour flight —
> Awwwards-level, for a fictional carrier that flies only at sunrise.
>
> **Stack:** Next.js App Router + TypeScript + Tailwind v4 + GSAP
> ScrollTrigger + Lenis smooth scroll (Lenis drives ScrollTrigger's
> clock via one shared gsap.ticker).
>
> **Theme — bright, not dark:** warm ivory canvas #f6f1e7, espresso ink
> text #231a10, ochre accent #c07f1d sampled from the footage's sun.
> Space Grotesk for display type, Space Mono for the instrument layer
> (labels, times, route codes). Faint film grain over everything.
> `overflow-x: clip` on html AND body — never hidden.
>
> **Global layer:**
> - Custom cursor: a rotating instrument reticle — thin ring, four tick
>   marks, gold centre dot, `mix-blend-mode: difference`. Idles at a
>   slow spin, spins faster and scales ×2.2 over links/buttons/films.
>   Only when `(pointer: fine)`.
> - Gold dust: ~140 ochre specks on a fixed 2D canvas, multiply blend,
>   rising slowly, streaming with scroll velocity, twinkling.
> - Reveal kit, all fire-once on entry: per-word masked lifts (put the
>   joining space OUTSIDE each word's overflow mask — a trailing space
>   inside an inline-block is dropped by CSS and glues words together),
>   rising blocks, hairlines that draw themselves scaleX 0→1, clip-path
>   wipes `inset(100% 0 0 0)` → 0 for media.
> - Nav: fixed, ivory gradient scrim fading out by 130px (no solid
>   bar), mono wordmark, items The idea / The aircraft / Cabin /
>   Departures, ink Reserve pill. Full-screen ivory mobile menu.
>
> **The scrub engine (shared by every film section):** a tall section
> with a sticky viewport child; ScrollTrigger (top top → bottom bottom)
> maps progress to a target time; a gsap.ticker lerps
> video.currentTime toward it (factor 0.14, skip deltas < 0.004s, bail
> while readyState < 2). First-frame poster jpg under every video.
> IntersectionObserver gates each ticker and upgrades preload one
> viewport early. iOS: play() then pause() on mount, retry on first
> touch, RE-ARM after any load() call.
>
> ---
>
> **Section 1 — Hero, the masked wordmark (340vh):**
> The page opens as an ivory plate with "CIRRUS" punched out of it at
> viewport-filling size, the hero film playing through the letters.
> Build the mask at runtime: a canvas the size of the viewport, white
> fill, the wordmark drawn with globalCompositeOperation
> 'destination-out' in bold Space Grotesk (regenerate on resize and
> when document.fonts.ready lands), applied to the plate div as
> CSS mask-image (with -webkit- prefix).
> Scroll timeline: over the first 30% the mask-size swells ~10× (you
> fly through a letterform) while the plate's opacity fades out over
> the last quarter of that zoom; the film scrubs the whole time; from
> 34% a huge left-aligned headline rises ("The sky, / first class." —
> second line italic ochre) with sub-copy and a CTA pill, exiting
> upward at 82%. Offset the film scrub to start ~0.9s in (skip the
> clip's dull opening) and regenerate the poster from that offset.
> While the plate is up, give the film a warm bright grade
> (sepia .42, saturate 1.5, brightness 1.16, contrast 1.06) easing to
> natural exactly as the plate dissolves — the letters read golden at
> any sampling position. Put the grade on a wrapper holding BOTH the
> poster img and the video. Corner mono labels top-left/right, a
> scroll-hint hairline bottom-centre that fades on first scroll.
>
> **Section 2 — The idea (text, ivory):**
> A display sentence at clamp(2.1–4.4rem) where small rounded film
> stills sit INLINE between the words (height 0.92em, width 2.1em,
> rounded-full, soft shadow, clip-path wipe on entry): "We fly one hour
> a day — [chip] the golden one. Doors close at first light, [chip]
> wheels down before the glow fades. [chip] Every seat faces the show."
> Words lift from masks; below, three fact columns (One aircraft / One
> hour / Every seat) each behind a self-drawing hairline.
>
> **Section 3 — The aircraft (split, ivory):**
> Left: label, big headline ("Built for / the light." italic ochre),
> body, then a spec sheet — hairline rows where the numbers COUNT UP
> once on entry: Range 8,400 km · Cruise 921 km/h · Wingspan 64 m ·
> Suites 48. Right: the emerge film scrubbing inside an ARCH-shaped
> frame (border-radius 999px 999px 26px 26px, 4/5 aspect, hairline
> border, deep soft shadow) — the sun flare crests at the arch's apex.
>
> **Section 4 — The cabin (full-bleed scrub, 300vh):**
> The porthole-entry film full-bleed. Ivory gradient veils top and
> bottom (the page colour bleeding into the film, no dark scrims); ink
> headline top-left ("Through the / window." italic ochre), mono hint
> top-right ("Scroll — the glass gives way"); at the bottom, body copy
> plus frosted ivory fact pills (Suites 48 · Crew 12 · Middle seats 0).
>
> **Section 5 — Departures (the board, ivory):**
> An airport departures board: header row in mono smallcaps, then four
> hairlined rows — gold mono time, "CIR → HND" route code, the city
> name huge in display type, and a "Golden hour" status with a glowing
> gold dot. Hovering a row tints it ochre, slides the city name right,
> and floats a real destination PHOTO in from the right edge — fixed,
> 260px, 3/4, slightly rotated, settling upright on hover. Tokyo,
> Paris, Dubai, New York.
>
> **Section 6 — Reserve (film CTA, 220vh):**
> The aisle film full-bleed under a frosted ivory veil (gradient ivory
> → 35% opacity → ivory), centred ink headline ("Board the / golden
> hour." italic ochre) with word-mask reveals, ink CTA pill
> ("Reserve — from $1,400"), refund note. Footer: ivory, hairline-top
> columns, mono smallcaps headers.
>
> ---
>
> **A11y + housekeeping:** every video muted playsInline with real
> copy in the DOM for screen readers; prefers-reduced-motion gets
> posters, final states, no cursor/dust; verify scrubbing by reading
> video.currentTime at two scroll depths — never by screenshot.

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

- A grade applied to the video element only still flashes the ungraded
  poster underneath — put the filter on a wrapper that holds both.
- Centred wordmark sampling a grey band of the frame: keep the film
  centred and warm-tint during the letters phase instead of offsetting
  the footage.
- Kling 3.0 will happily insert cuts — prompt "one continuous shot" and
  verify with a scene-change filter before building on a clip.
- The iOS unlock must be re-armed after load() or the hero works and
  every later chapter silently freezes.
- Tie text exits to the sticky RELEASE, not chapter progress.
- `overflow-x: hidden` on html/body silently kills every
  position:sticky — use clip.