Travel

Meridian

Meridian is a premium travel website template built with Next.js, TypeScript, Tailwind and Canvas frame-scrub. Fly the Amalfi route — boarding pass and all. The Claude Code prompt that builds it is free; the exact tested source code is $59 with a commercial license.

Next.jsTypeScriptTailwind CSSCanvasLenis

$59

one end product

Live demo ↗

Buy source — $59

Specifications

Framework: Next.js · TypeScript · Tailwind
Motion: Canvas frame-scrub
Category: Travel
Use case: Travel
Responsive: Desktop → mobile
License: Commercial · one end product
Delivery: Instant ZIP download

What the paid download adds

The exact deployed code — tested, not AI-guessed
Config-driven copy, palette & assets
Compressed media included
Deploy README — Vercel or your own VPS
Commercial license — one end product
Free updates to this template

The free Claude Code prompt

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

# 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.
>
> **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 to a full-screen canvas;
> lazy-load per chapter; use the mobile frame set under a breakpoint).
>
> **Hero:** the fly-through scrubbed frame-by-frame with scroll,
> chaptered (departure → coastline → arrival). Over it:
> - A FLIGHT-PATH RAIL — an SVG arc with a moving plane marker whose
>   position tracks scroll progress.
> - BOARDING-PASS itinerary cards fading through at chapter points.
> - A booking CTA at the end.
>
> **Sections after the flight:** destination highlights, a fare/route
> index, a "book the window seat" CTA, footer with footage credit.
>
> Config-driven chapters (frame path, count, copy). Respect
> prefers-reduced-motion (show a representative frame, disable the
> scrub animation-feel but keep it navigable).
>
> Build a small reusable frame-scrub component (canvas + a chapters
> config) — it's the engine you'll reuse for any "scrub a sequence"
> template.

## 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.

---

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

Meridian — questions

What is the Meridian template built with?

Meridian is a Travel website built with Next.js, TypeScript, Tailwind CSS, Canvas, Lenis. The motion is driven by Canvas frame-scrub, with Lenis smooth scrolling and GSAP ScrollTrigger for the scroll choreography.

How much does Meridian cost?

The free Claude Code prompt that builds a Meridian variant is $0. The exact, tested source code — the same site shown in the demo — is $59, delivered as an instant ZIP with a commercial license for one end product.

Can I use Meridian for a client project?

Yes. The $59 download includes a commercial license to use Meridian in one end product, including paid client work. Everything is config-driven, so copy, palette and assets re-skin from a single file.

What's the difference between the free prompt and the paid download?

The free prompt gets Claude Code to build you a Meridian variant — genuinely good, but it costs tokens and debugging time and results vary. The paid download is the exact site in the demo: tested, compressed, documented, licensed, with free updates.