Arden

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

# ARDEN — Free Claude Code Prompt

*From SmartDuke Studio (studio.smartduke.com). The exact tested build —
the encoded walkthrough, the sticky gallery — is the paid download:
https://studio.smartduke.com*

## Before you start

1. **Generate a single luxury-property walkthrough video** (~10–20s,
   1080p+): one continuous move through a high-end home / villa,
   golden light. This ONE film supplies the hero AND all the section
   imagery — single-property coherence is the whole look.
2. All-intra encode for scrubbing:
   `ffmpeg -i in.mp4 -an -c:v libx264 -preset slow -crf 19 -g 1 -pix_fmt yuv420p -movflags +faststart public/tour.mp4`
3. Pull 4–6 room stills from the film for the gallery
   (`ffmpeg -ss <t> -i public/tour.mp4 -frames:v 1 room1.jpg`).
4. Node.js ≥ 20.9.

## The prompt

> Build a classic, elegant luxury real-estate template — light and
> restrained, not dark and flashy. Ivory / warm charcoal / bronze.
> Marcellus (display serif) + Manrope (body). Generous air, hairline
> rules, small-caps labels. `overflow-x: clip` on html AND body.
>
> **Stack:** Next.js + TS + Tailwind v4 + GSAP ScrollTrigger +
> SplitText + Lenis (Lenis drives ScrollTrigger.update via one shared
> gsap.ticker).
>
> ---
>
> **Section 1 — Hero, the walkthrough scrub (~350vh):**
> Full-bleed all-intra <video muted playsInline> in a sticky viewport
> child; ScrollTrigger (top top → bottom bottom) maps progress to a
> target time and a gsap.ticker lerps video.currentTime toward it
> (factor ~0.14, skip deltas < 0.004s) — gated on
> `video.readyState < 2` (per-frame seeks during download abort the
> fetch — the video never loads without this gate). iOS: play() then
> pause() on mount, retry on first touchstart, re-arm after any
> load(). First-frame poster jpg underneath. Over it: the property
> name in large serif, one line of provenance ("Lakefront · Five
> acres · 1927, restored"), and a "Scroll to tour" cue that fades on
> first scroll. Keep scrims minimal — thin top/bottom gradients only;
> a light property must not be dulled by a full-frame wash.
>
> **Section 2 — About, the text fill:**
> An editorial paragraph at display size whose words FILL from faint
> charcoal to bronze in reading order as the section scrolls through
> the viewport (SplitText per-word + a scrubbed ScrollTrigger driving
> how many words are lit). One paragraph, max ~45 words — this is a
> statement, not a description. Small-caps kicker above, hairline
> rule that draws itself scaleX 0→1.
>
> **Section 3 — The plate, full-width parallax:**
> A single wide still from the film (the best exterior frame) in a
> full-width frame, the image scaled ~1.15 inside and translating
> yPercent -8→8 on scrub for depth. Over it one short serif quote
> ("The last of its kind on this bank"). Fire-once word-mask reveal.
>
> **Section 4 — The residence, sticky gallery:**
> A two-column section: LEFT, a sticky image frame that stays pinned;
> RIGHT, a scrolling list of rooms (Living · Kitchen · Primary suite ·
> Grounds · Shoreline), each entry with a serif title, one line of
> copy, and a spec (sq m / aspect / detail). As each list entry
> crosses the viewport centre, the pinned image CROSSFADES to that
> room's still (opacity tween ~0.5s, never a hard swap) — all stills
> cut from the ONE walkthrough film so it reads as a single property.
> Dim non-active list entries to ~40% so the current room is obvious.
>
> **Section 5 — Contact + footer:**
> A parallax contact panel: soft ivory card over a slow-moving still,
> agent name, phone, a "Request the brochure" mailto CTA in bronze.
> Footer: hairline top, small-caps columns, and the footage credit.
>
> ---
>
> Config-driven copy + room list (title, copy, spec, still path, film
> timestamp per room). Respect prefers-reduced-motion: posters and
> final states, no scrub feel, no parallax.

## Gotchas

- readyState gate on the scrub ticker — non-negotiable.
- Use imagery ONLY from the one film — mixing stock photos of a
  different property breaks the illusion instantly.
- All-intra (`-g 1`) is what lets currentTime land on any frame;
  without it the scrub snaps and judders.
- Crossfade the sticky gallery with two stacked <img> layers and swap
  which is on top — animating `src` flashes white on slow networks.
- The joining space in word-mask reveals must live OUTSIDE the
  overflow mask, or CSS drops it and the words glue together.

---

*Paid version: the film + room stills + sticky gallery + README/license
— studio.smartduke.com*