Meridian

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

# MERIDIAN — Free Claude Code Prompt

*From SmartDuke Studio (studio.smartduke.com). The exact tested build —
extracted frames, the flight-path rail — is the paid download:
https://studio.smartduke.com*

## Before you start

1. **Get an aerial fly-through video** of a coastline / destination
   (Coverr and Pexels have free commercial clips; or generate one).
2. **Extract it to WebP frames** for canvas scrubbing (better for
   heavy color grading + lazy per-chapter loading than a video
   element here):
   `ffmpeg -i clip.mp4 -vf "fps=24,scale=1440:-1" frames/%03d.png` then
   convert to WebP (Pillow, since brew ffmpeg often lacks libwebp).
   Also a mobile set at 768px. ~80 frames per chapter.
3. Node.js ≥ 20.9.

## The prompt

> Build a flights / travel website whose hero FLIES THE ROUTE as you
> scroll — an aerial fly-through of a coastal destination (think
> Amalfi). Awwwards travel-editorial style. Marine + sky-wash blues +
> a signal-orange accent. Playfair Display + Inter. `overflow-x: clip`
> on html AND body.
>
> **Stack:** Next.js + TS + Tailwind v4 + GSAP ScrollTrigger + Lenis +
> a CANVAS frame-scrub engine (preload a numbered WebP sequence, draw
> the frame for the current scroll progress with cover-fit math;
> decode one chapter ahead into a cache; swap to the mobile frame set
> under a breakpoint). Build it as a reusable `tour-scene` component
> with chapters in a `chapters.ts` config (frame folder, count, title,
> copy).
>
> ---
>
> **Preloader:** boarding-card styled plate (route code, gate, seat)
> with a thin progress line while chapter one decodes.
>
> **The flight (pinned chapters, ~200vh each):**
> - **Ch 1 — Departure ("The Amalfi Route"):** the climb-out. Serif
>   title + one line ("Twenty-six kilometers of cliff road between
>   Naples and paradise…"), entering on the pin, exiting on the sticky
>   release.
> - **Ch 2 — The crossing ("Seven quiet hours"):** open water. A
>   BOARDING-PASS card fades through at this chapter's midpoint —
>   route, seat, meal — styled like the real thing, slightly rotated.
> - **Ch 3 — The reef ("Water like a promise"):** copy flips to the
>   other side of the frame; a second itinerary card (the boat).
> - **Ch 4 — The coast ("The slow coast"):** the cliff villages; one
>   short line only, let the footage carry it.
> - **Ch 5 — Arrival ("Wheels down by nine"):** end the scrub on the
>   strongest coastline frame and hold; final beat: "Salt air by ten,
>   first swim by noon."
>
> **The flight-path rail (the signature):** a fixed SVG great-circle
> arc on the right edge with a small plane marker whose position
> tracks total flight progress; chapter ticks along the arc light up
> as you pass. Clicking a tick scrolls there via Lenis.
>
> **After the flight:**
> - Destination highlights: three editorial cards (cove · village ·
>   table) with clip-path wipe reveals and slow image parallax inside.
> - A fare/route index: hairlined rows (route code · season · from-
>   price), hover tints a row and slides the name right.
> - "Book the window seat" CTA: serif headline, orange pill, a note
>   that the season runs May–October.
> - Footer with the footage credit.
>
> ---
>
> Config-driven chapters. Respect prefers-reduced-motion (show a
> representative frame per chapter, disable the scrub feel, keep it
> navigable).

## Gotchas

- Preload each chapter's frames before it's needed or the scrub
  stutters on first pass; keep a decoded-image cache.
- Never CSS `scroll-behavior: smooth` with Lenis.
- Draw with `object-fit: cover` math on the canvas (compute scale +
  offset) so frames fill any viewport without distortion.
- Keep the plane marker's position a pure function of scroll progress
  so the rail and the footage never drift apart.
- Tie chapter copy exits to the sticky RELEASE, not progress.

---

*Paid version: extracted frames + the flight-path rail + README/license
— studio.smartduke.com*