Monolith

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

# MONOLITH — Free Claude Code Prompt

*From SmartDuke Studio (studio.smartduke.com). The exact tested build —
encoded film, phase timing, every fix — is the paid download:
https://studio.smartduke.com*

## Before you start

1. **Generate one continuous construction video** (any AI video tool,
   ~8–15s, 1080p+): a tower being BUILT — blueprint on the desk →
   steel frame rising → glass curtain wall → finished building.
   One continuous camera move reads best.
2. **Re-encode it all-intra** so scrubbing lands on any frame:
   `ffmpeg -i in.mp4 -an -c:v libx264 -preset slow -crf 19 -g 1 -pix_fmt yuv420p -movflags +faststart public/build.mp4`
   — the `-g 1` (every frame a keyframe) is the whole trick.
3. Node.js ≥ 20.9.

## The prompt

> Build a construction-company website where the building constructs
> itself as you scroll — dark, heavy, premium. Charcoal + concrete
> greys + one safety-amber accent. Display font: Archivo Black (or
> similar ultra-heavy), body Archivo.
>
> **Stack:** Next.js + TS + Tailwind v4 + GSAP ScrollTrigger +
> SplitText + Lenis.
>
> **Hero — the scrub (400vh pinned):** a full-bleed <video> whose
> currentTime is driven by scroll: ScrollTrigger onUpdate sets a
> target time from progress, and a gsap.ticker lerps
> video.currentTime toward it (factor ~0.14). CRITICAL: gate the
> ticker with `if (!duration || video.readyState < 2) return;` —
> seeking every frame while the file is still downloading aborts the
> fetch with a new range request each frame and the video NEVER loads.
> Overlay choreography synced to build phases: PH-01 The Plan / PH-02
> The Frame / PH-03 The Skin cards fading through at fixed progress
> windows, a vertical BUILD % meter riding progress, and a
> "Delivered. On time. On budget." beat near the end.
> **Scrims:** thin localized top/bottom gradient bands + text-shadows
> on the type — NEVER a full-frame wash, it dulls the footage.
> Clamp the display type with vh too: text-[clamp(2.2rem,min(6.8vw,16vh),6.8rem)]
> or short viewports overflow into the nav.
>
> **After the hero:** concrete-light stats band (count-up numbers),
> projects INDEX (rows, not cards) with a cursor-trailing preview
> image that hides while scrolling, capabilities grid with blueprint
> dim-line details, and a "Bring us the napkin sketch" bid form.
>
> Poster image under the video until it's seekable. Respect
> prefers-reduced-motion (scrub can stay — it's user-driven).

## Gotchas

- The readyState gate above is not optional. Symptom without it:
  video stuck black forever, network tab full of aborted requests.
- Progress-driven fills: set transforms inline, never mix with
  Tailwind `scale-*-0` classes (v4 uses the CSS `scale` property —
  they multiply).
- Test on a short/landscape viewport — heroes die there first.

---

*Paid version: the film, the encode, the exact phase timing, README +
license — studio.smartduke.com*