Anvil

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

# ANVIL — 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, the blueprint grid system —
that's the paid download at https://studio.smartduke.com*

## Before you start

- Node.js ≥ 20.9 and ffmpeg on PATH.
- You need footage of one vehicle (AI-generated works — Kling):
  1. **hero** — ONE continuous ~10s take: close on the truck, tracking
     to a side profile, pulling up into an aerial reveal. No cuts.
  2. A montage clip you can mine for stills + four ~1–1.5s micro-clips
     (headlight macro, wheel, night charging, sunset pass).
- Encode scrub films all-intra — `-g 1` makes every frame a keyframe:
  `ffmpeg -i in.mp4 -an -vf "scale=1920:-2,hqdn3d=1.5:1.5:3:3,
  eq=contrast=1.07:saturation=1.13,unsharp=5:5:0.65" -c:v libx264
  -preset slow -crf 19 -g 1 -pix_fmt yuv420p -movflags +faststart hero.mp4`
  Micro-clips at 800w / crf 24 / `-g 1`. Total under ~25MB.

## The prompt

> Build me an electric heavy-freight truck marque website in the design
> language of a luxury motorcar site — Awwwards-level, Longbow-style.
>
> **Stack:** Next.js App Router + TypeScript + Tailwind v4 + GSAP
> ScrollTrigger + Lenis (Lenis drives ScrollTrigger's clock via one
> shared gsap.ticker; expose the instance at `window.__lenis`, NOT
> `window.lenis` — the library writes a version marker there).
>
> **Theme — workshop porcelain, not dark:** paper #e6e5df, graphite ink
> #15181b, cold-black chapters #0a0c0e with cool bone text #d9dcd4,
> safety-orange accent #d95b18. ONE rule carries the identity: everything
> is warm analog metal, except electricity — electric blue #4db8ff is
> used ONLY for current (charging, regen, the DC spine). Anton for giant
> wordmarks, Cormorant Garamond italic for serif asides, Space Mono for
> everything technical. Film grain overlay. `overflow-x: clip` on html
> AND body — never hidden (hidden kills position: sticky).
>
> **The blueprint grid (the signature):** every chapter wears hairline
> columns at 25/50/75% with small "+" ticks at intersections — and the
> content LIVES IN the columns. Grids must span the full viewport with
> NO container padding (pad inside cells instead) so cell edges land
> exactly on the lines.
>
> **Global layer:** drafting-crosshair cursor ("+" that swings 45° over
> links, difference blend, fine pointers only) · ~140 orange forge
> sparks on a fixed canvas reacting to scroll velocity · fire-once
> reveal kit (word masks — keep the joining space OUTSIDE each word's
> overflow mask; rising blocks; hairlines drawing scaleX 0→1; clip-path
> wipes) · boot loader: paper sheet, wordmark, mono LOADING 000→100
> (~1.2s), sheet lifts with expo ease · nav = three floating paper tabs:
> burger left, wordmark dead centre, "FLEET +" right; full-screen paper
> menu with serif-italic index.
>
> **The scrub engine (hero + every scrub cell):** tall section, sticky
> h-screen child. ScrollTrigger (top top → bottom bottom) writes a
> target time; a gsap.ticker lerps `current += (target-current)*0.14`
> and seeks only if the delta > 0.004s and readyState ≥ 2. iOS: call
> play()/pause() once on mount to arm the decoder, and RE-ARM after any
> load(). Poster img behind every video.
>
> **Sections, in order:**
>
> **1. Hero — 320vh pin.** The continuous film scrubs close-up → aerial.
> Paper border 10px around the frame. Blueprint grid over the footage.
> Right rail on the 75% line: mono chip "01M /ANVIL", serif italic "Be
> moved — at eighty-two thousand pounds.", mono paragraph on a dark
> blurred card. The giant ANVIL wordmark (Anton, 15vw, leading-none —
> a squeezed line-height paints the feet below the line box and the
> word reads cropped) sits ON the frame's bottom edge and sinks
> yPercent 220 over the FULL pin, landing exactly as the section
> releases. Bottom gradient scrim for legibility.
>
> **2. The idea — paper editorial on the 4-col grid.** Col 1: depot
> still filling the column, mono caption. Col 2: mostly air, serif
> statement floating low + one mono paragraph. Col 3: detail still
> arriving 38vh down. Col 4: serif-italic heading right-aligned
> ("Creating a new class: HEV") + dense mono column. Images wipe in,
> words lift.
>
> **3. A NEW SPECIES OF FREIGHT — cold black chapter.** Wheel micro-clip
> looping in a 21:9 band spanning columns 2–3. Three giant Anton lines
> (~12.5vw) with letterpress extrusion (stack 10 one-px text-shadows in
> steel #31363c + one soft black shadow), left / right / centre aligned,
> shearing horizontally in opposite directions, scrubbed.
>
> **4. Principles — a strict checkerboard on the grid.** Two rows of
> four bordered cells: row 1 = text | film | text | film, row 2
> inverted. Four numbered cards (.01 Adding Range, .02 Precision &
> Weight, .03 Regen Everything, .04 Silence at Speed): orange number,
> serif-italic title, mono body. Four films (headlight, charging,
> truck, sunset) SCRUBBED by scroll — same lerp engine, one trigger per
> cell (top bottom → bottom top), all-intra micro-clips so 1.5s
> stretches into slow motion. Below md: stack only the text cards.
>
> **5. Current — the one blue section. 260vh pin.** Chip "REGEN /.BLUE"
> in electric blue, serif "The only thing blue on an Anvil *is
> electricity*." The battery-pass film scrubs in a window that starts
> on the middle two columns and scales ×1.96 to fill all four. Blue
> 1px inset border, mono "DC SPINE — LIVE" tag.
>
> **6. Fleet — 280vh horizontal gallery.** Mono ticker marquees top and
> bottom ("AN ESCAPE FROM DIESEL / …", CSS translateX(-50%) loop). A
> pinned track of four stills (16:10, mono location codes like "RIDGE
> 18:42") translating x: 0 → -(scrollWidth - innerWidth), ending on a
> serif invitation plate.
>
> **7. The numbers.** Deeper paper panel. Illuminate headline ("Numbers
> a diesel cannot write." — words light up in reading order, scrubbed).
> One count-up per column, borders ON the blueprint lines: 500 mi /
> 82,000 lb / 30 min to 70% / 0 gal. Anton digits, orange suffixes.
>
> **8. Close — full-bleed aerial still.** Dark gradient, blueprint
> grid. Serif-italic nav index in column 1, mono contact card in column
> 4 (chip, address, mailto links, cream Reserve pill). The wordmark
> again — whole word, leading-none, baseline kissing a legal ticker
> strip on cold black.
>
> Every animation respects prefers-reduced-motion. Ship it as one page,
> production build clean.

## Gotchas the paid version already solves

- The wordmark: `leading-[0.8]` paints Anton's feet BELOW the line box —
  the word reads cropped no matter how much margin you add. leading-none.
- Grid containers with horizontal padding shift the four columns off the
  25/50/75% blueprint lines — pad inside the cells, never the container.
- Scrubbed videos that are not all-intra (`-g 1`) seek to the nearest
  keyframe and stutter; verify with ffprobe that every frame is type I.
- iOS Safari never paints a seeked frame on a video that hasn't played —
  play()/pause() once on mount, and re-arm after every load().
- Lenis snaps programmatic window.scrollTo back to its own target — use
  lenis.scrollTo, and expose the instance under a private name.