Forma

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

# FORMA — Free Claude Code Prompt

*From SmartDuke Studio (studio.smartduke.com). The exact tested build
is the paid download: https://studio.smartduke.com*

## Before you start

1. **Generate a design-build video** (~8s, 1080p): a holographic house
   sketch over a drafting desk → a physical scale model → the finished
   home at golden hour. Continuous shot preferred.
2. All-intra encode for scrubbing:
   `ffmpeg -i in.mp4 -an -c:v libx264 -preset slow -crf 22 -g 1 -pix_fmt yuv420p -movflags +faststart public/idea.mp4`
3. Pull 3 stills from it (sketch / model / built) for the plates.
4. Node.js ≥ 20.9.

## The prompt

> Build a design-build studio website on a LIGHT "engineering graph
> paper" theme — the opposite of every dark construction site. Paper
> #F4F3EE, ink #17181A, one signal red-orange accent. Space Grotesk +
> Inter. Graph-paper CSS background (fine grid + heavier major lines),
> drafting annotations everywhere ("Fig. 01", "DWG A-001 · Scale
> 1:100").
>
> **Stack:** Next.js + TS + Tailwind v4 + GSAP ScrollTrigger +
> SplitText + Lenis.
>
> **Hero — scrub with a drawing-scale meter (380vh pinned):**
> full-bleed all-intra video scrubbed by scroll (lerp ticker, gated on
> video.readyState < 2 or the download aborts). Because the footage is
> BRIGHT, invert the chrome: thin paper-colored gradient bands top and
> bottom + ink type with layered paper-colored text-shadows (a crisp
> 1px + two soft halos). Stage annotations (Fig 01 The Sketch / Fig 02
> The Model / Fig 03 Built) fade through at progress windows, each
> with a soft blurred paper glow behind the text (a rounded div,
> bg-paper/85 blur-2xl — a cloud, not a box) so they read over dark
> frames. On the right: a SCALE meter — 1:100 → 1:20 → 1:1 — with a
> red fill tracking progress. Closing beat at the bottom over the
> solid band: "We build at every scale."
>
> **Sections:** manifesto with a hand-drawn red SVG underline that
> draws itself (strokeDashoffset); a pinned HORIZONTAL "scale walk"
> (vertical scroll slides three figure plates — sketch 1:100, model
> 1:20, built 1:1 — with a scale rail and decorative single-digit
> numerals cropped by the SCREEN edge, never by a card); "the red
> line" process: a straight center spine drawn by one scrub (div
> scaleY, height measured to end exactly at the last node), nodes
> filling red + stubs striking out to alternating milestone cards the
> moment the ink reaches them — measure node offsets at mount AND on
> refresh; a red CTA sheet; and a footer styled as an engineering
> DRAWING SHEET: double border frame, corner crop marks, title-block
> strip (PROJECT / DRAWN BY / SCALE 1:1 / SHEET A-000).

## Gotchas

- readyState-gate the scrub ticker (download aborts otherwise).
- Progress fills: inline `transform:` only — Tailwind v4 `scale-*-0`
  classes multiply with it (CSS `scale` property) and render zero.
- Fast Refresh resets inline styles without re-running effects —
  hard-reload before you debug a "stuck" scrub fill.
- Light footage → paper bands + ink text; dark footage → the inverse.
  Never a full-frame wash.

---

*Paid version: film + stills + exact choreography + README/license —
studio.smartduke.com*

Forma — questions

Related templates

Part of