SLIABH

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

# SLIABH — 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 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 6–7 short films (6–12s each). Generate them with an AI video
  tool (Veo/Gemini works well) or shoot them: ONE continuous take per
  clip, slow constant motion, no cuts, and every clip must read
  scrubbed backwards as well as forwards. Encode each all-intra:
  `ffmpeg -i in.mp4 -an -vf "scale=1600:-2" -c:v libx264 -preset slow
  -crf 29 -g 1 -pix_fmt yuv420p -movflags +faststart out.mp4`
  (-g 1 makes every frame a keyframe — this is what makes scrubbing
  instant instead of janky). Keep the total under ~30MB.

## The prompt

> Build me a premium single-malt whisky distillery site told as
> scroll-scrubbed films — Awwwards-level, for a fictional Highland
> brand. Each chapter of the page pins a full-viewport film and scroll
> scrubs it: barley field → copper stills → filling the cask →
> a warehouse dolly (the years passing) → amber liquid macro with
> tasting notes → the pour over ice → the bottle with a reserve CTA.
>
> **Stack:** Next.js App Router + TypeScript + Tailwind v4 + GSAP
> ScrollTrigger + Lenis. No 3D libraries — the films are the drama.
>
> **The scrub engine (one reusable component):** a tall section
> (~200vh) with a sticky full-viewport <video muted playsInline>.
> ScrollTrigger (top top → bottom bottom) maps progress to a target
> time; a gsap.ticker lerps video.currentTime toward it (factor ~0.14,
> only seek when the delta exceeds 0.004s, and bail while
> readyState < 2 so seeking never aborts the download). The film must
> complete exactly when the sticky releases.
>
> **The mobile trap (do not skip):** iOS never paints a seeked frame
> on a video that has not played. On mount, call play() then
> immediately pause(); if the browser refuses, retry on the first
> touchstart/pointerdown. Re-arm this after any load() call.
>
> **Seven videos, one page:** gate each chapter's ticker with an
> IntersectionObserver so only the on-screen film does work; ship
> later chapters with preload="metadata" and upgrade to "auto" one
> viewport early. Give every video a first-frame poster jpg so
> chapters paint instantly.
>
> **The dressing:** an in-character age gate as the loader ("You must
> be of legal drinking age — I am, pour me in"), roman-numeral chapter
> marks, serif editorial type (Fraunces italic accents), cream on
> near-black with one amber accent, film grain overlay, soft gradient
> veils at the frame edges for text legibility. All copy in one
> config file. Age gate skippable via ?nogate for automated capture.
>
> **A11y + housekeeping:** prefers-reduced-motion gets still posters,
> no scrubbing; overflow-x uses clip (never hidden — hidden turns body
> into a scroll container and silently kills position:sticky).

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

- A cut inside a clip scrubs as a glitch — every film must be one take.
- Non-all-intra video makes scrubbing feel like a slideshow: without
  -g 1, every seek decodes from the last distant keyframe.
- The iOS play()/pause() unlock must be re-armed after load() — the
  preload upgrade resets the decoder and the hero works while every
  later chapter silently freezes.
- Ease the text overlays in on pin, but tie their exit to the sticky
  RELEASE, not chapter progress — or your copy fades while pinned.