Ocean Epicure

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

# OCEAN EPICURE — Free Claude Code Prompt

*From SmartDuke Studio (studio.smartduke.com). The real prompt behind
our fine-dining template. The exact tested build — the encoded scrub
film, the craft clips, every section's choreography, all the fixes — is
the paid download: https://studio.smartduke.com*

## Before you start

1. **Get one continuous "journey" film** (~10s, 1080p+): a single no-cut
   shot where the chef plates a dish, lifts it and carries it through the
   room to a table. The camera *follows* — that walk IS the hero scroll.
2. **Get four short craft clips** (~5s each, close-up): **knife skills**,
   **fire/sear**, **sauce**, **plating**. Same chef, same whites, same
   kitchen, same warm grade so they cross-fade as one world.
3. **Re-encode every film all-intra** so scrubbing lands on any frame:
   `ffmpeg -i in.mp4 -an -c:v libx264 -preset slow -crf 20 -g 1 -pix_fmt yuv420p -movflags +faststart public/vid/out.mp4`
   (`-g 1` — every frame a keyframe — is what kills scrub judder.)
4. **Stills:** a chef portrait, three ingredient shots (ocean / garden /
   fire), your signature dishes, and one set table at golden hour. Pull a
   hero poster from the film: `ffmpeg -ss 0.2 -i journey.mp4 -frames:v 1 -q:v 3 public/img/hero-poster.jpg`.
5. Node.js ≥ 20.9.

## The prompt

> Build a bright, editorial, Awwwards-grade website for a **fictional
> coastal fine-dining restaurant** — one continuous scroll story, not the
> usual Home/About/Menu. Warm cream paper (#F4F0E7), warm near-black ink
> (#17130D), ONE oxblood accent (#7C2A16). Display font **Bricolage
> Grotesque** (bold), body **Newsreader** (serif), labels + index numbers
> **Space Mono** — all via next/font. Magazine layout: section index
> numbers ([ 01 ]), hairline rules, hanging left rails, generous space.
>
> **Stack:** Next.js App Router + TypeScript + Tailwind v4 + **GSAP**
> (ScrollTrigger + **SplitText**) + **Lenis** (smooth scroll). No 3D —
> the motion is the all-intra `<video>` scrub. Put brand, copy, every
> section's arrays and each image/video path in `src/config.ts`; empty
> paths render labelled placeholders.
>
> **0 · Loader** — an editorial curtain on cream paper: wordmark top-left,
> a GIANT grotesque counter bottom-left driven by REAL progress (read the
> hero `<video>` buffer + poster), an oxblood baseline rule that fills,
> then the whole sheet wipes up (yPercent -101). Min-hold so it never
> flashes, hard cap so it never hangs; lock scroll while up.
>
> **1 · Hero — the scrubbed film (≈360vh pinned).** A full-bleed dark
> `<video>` 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 it with `if
> (!duration || video.readyState < 2) return;`. The film rests on its
> poster first frame and only seeks on scroll. Editorial title sits
> BOTTOM-LEFT (index tag, a bold two-line grotesque headline word-masked
> up, an italic sub, a mono CTA) and lifts + fades as the film advances.
>
> **· Marquee** — a running oxblood strip of one-word tags between hero
> and body (CSS keyframe translateX, duplicated content).
>
> **2 · Philosophy** — a big grotesque statement (one line takes the
> oxblood accent), a serif body paragraph, a mono meta table (Founded /
> Covers / Kitchen), and a portrait that reveals via a top-down clip-path
> wipe + scale.
>
> **3 · Ingredients** — an editorial index, NOT a slideshow: three
> numbered rows (i / ii / iii) with huge words (Fresh / Seasonal /
> Exceptional), an em-dash name and a line of copy, hairlines between. A
> sticky preview image on the right cross-fades to the hovered row.
>
> **4 · The Craft (≈400vh pinned).** Left: a mono-numbered list (01–04:
> Knife Skills / Fire / Sauce / Plating) where the active step goes
> oxblood with a growing rule. Right: a bordered media panel that
> cross-fades to the active step's clip (autoplay-loop muted `<video>`,
> or a Frame placeholder). Drive the active index from scroll progress.
>
> **5 · Signature Creations** — alternating full-bleed editorial spreads,
> one per dish: image one side (clip-path inset reveal + slow zoom on
> scrub), caption the other (mono "01 / SIGNATURE", grotesque name, italic
> note, mono ingredient tags). Flip sides each dish.
>
> **6 · The Moment** — one full-bleed emotional image (chef serving,
> guests, sunset) with a slow parallax, the payoff line word-masked up
> bottom-left in cream.
>
> **7 · The Details** — a bordered 4-cell grid (hairline gaps): each cell
> is paper with a mono number + name, and on hover the dish image fades
> in under an ink gradient with the text flipping to cream. Ingredients /
> Cellar / Chef's Table / Private Dining.
>
> **8 · Reservation** — the close: a full-bleed set-table-at-sunset image
> parallaxing under an ink gradient, a few floating cream particles, a
> huge grotesque invitation and a mono CTA (inverts to oxblood on hover).
>
> **Footer** — an oversized grotesque wordmark, hairline columns (hours /
> address / connect), mono micro-labels.
>
> Global: a nav that reads light over the film then flips to ink-on-paper
> past the hero; magnetic buttons (child eases to cursor, springs back);
> `ul-wipe` underline links; `history.scrollRestoration = "manual"`;
> respect prefers-reduced-motion (skip pins/scrubs/parallax).

## Gotchas (we hit all of these)

- The `readyState < 2` gate on the scrub ticker is mandatory — seeking
  while the file downloads aborts the fetch every frame and it stalls.
- `-g 1` on the encode is non-negotiable or `currentTime` snaps to the
  nearest keyframe and the scrub judders.
- The loader must read REAL buffer progress with BOTH a min-hold and a
  hard cap — a fake timer flashes on fast links or traps slow ones.
- Bricolage Grotesque + Newsreader must load via next/font, and after
  changing any font token `rm -rf .next` (Turbopack caches `@theme` font
  vars and silently falls back to serif otherwise).
- Pinned + cross-fade sections need `invalidateOnRefresh: true` so they
  re-measure on resize / font swap.
- Keep the four craft clips one visual world (same chef, whites, grade)
  or the cross-fades read as four different restaurants.

---

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

Ocean Epicure — questions

Related templates

Part of