Vanta

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

# VANTA — 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 an FPV descent video** (~10–15s): starting in orbit /
   high altitude and diving continuously down into a city, ending at
   street level. Trim the end so it stops on a strong street-level
   frame.
2. All-intra encode:
   `ffmpeg -i in.mp4 -an -c:v libx264 -preset slow -crf 19 -g 1 -pix_fmt yuv420p -movflags +faststart public/dive.mp4`
3. Node.js ≥ 20.9.

## The prompt

> Build a venture-capital / fintech site around one idea: the scroll
> is a DESCENT from orbit to street level — "we go from thesis to
> ground truth." Void black, bone type, gold accent. Fonts:
> Instrument Serif (italic display accents) + Inter Tight.
> `overflow-x: clip` on html AND body.
>
> **Stack:** Next.js + TS + Tailwind v4 + GSAP ScrollTrigger +
> SplitText + Lenis (one shared gsap.ticker drives Lenis and
> ScrollTrigger.update).
>
> ---
>
> **Section 1 — The dive (500vh pinned):**
> Full-bleed all-intra video scrubbed by scroll — ScrollTrigger maps
> progress to a target time, a gsap.ticker lerps currentTime toward it
> (factor ~0.14), gated on `video.readyState < 2` (otherwise per-frame
> seeks abort the download and it never loads). Poster frame
> underneath until seekable. Synced to the descent, at fixed progress
> windows, four typographic BEATS timed to what's on screen:
> - orbit (~0–20%): the fund's name + "From thesis…"
> - cloud layer (~25–45%): thesis line two
> - skyline (~50–75%): thesis line three
> - street (~80–100%): "…to ground truth." + the fund's one-line
>   promise, holding on the final frame.
> Each beat fades in and OUT inside its window (never two on screen).
> On the right edge, a live ALTITUDE meter: 420 km → 0 m, the units
> switching km → m as it falls, plus a thin gold fill bar — keep the
> altitude a pure function of scroll progress so meter and footage
> never drift.
>
> **Section 2 — Thesis:**
> Black, generous air. Kicker ("What we believe"), then three short
> serif statements with SplitText LINE reveals (masks lifting on
> entry, fire-once). Each statement gets a hairline underneath that
> draws itself. One italic serif accent word per line in gold.
>
> **Section 3 — Portfolio, the index:**
> Rows, not cards: company · sector · stage · outcome in a hairlined
> table, mono smallcaps header row. Hover tints the row gold at ~8%,
> slides the company name right, and shows a one-line outcome
> ("Acquired 2025 · 14×"). Dim non-hovered rows to ~45% while any row
> is hot.
>
> **Section 4 — The number:**
> One colossal stat: the fund size at ~19vw numerals (count-up once on
> entry), a one-line caption under it. Nothing else in the section —
> the restraint is the design.
>
> **Section 5 — Pitch CTA + footer:**
> A giant mailto: "Pitch us the ground truth" as a full-width serif
> headline that underlines on hover, the email address in mono under
> it. Minimal footer: fund name, legal links, one hairline.
>
> ---
>
> Restraint everywhere: one accent, huge type, lots of black. Config-
> driven copy (beats, thesis lines, portfolio rows, stat). Respect
> prefers-reduced-motion: skip Lenis + entrance anims (the scrub can
> stay — it's user-driven).

## Gotchas

- The readyState gate on the scrub ticker is mandatory.
- SplitText masks clip text-shadow glows and long descenders — if you
  use a glow, split WITHOUT masks.
- Keep the altitude math a pure function of scroll progress so the
  meter and the footage never drift apart.
- Beats belong to progress WINDOWS with their own in/out — a beat tied
  only to "enter" lingers over the wrong footage.

---

*Paid version: the dive film, trimmed + encoded, exact beat timing,
README/license — studio.smartduke.com*