Villa Sereno

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

# VILLA SERENO — Free Claude Code Prompt

*From SmartDuke Studio (studio.smartduke.com). The exact tested build —
the extracted chapters, the reusable scrub engine — is the paid
download: https://studio.smartduke.com*

## Before you start

1. **Get a property walkthrough video** (a continuous move through a
   home; Coverr/Pexels have free ones, or generate/shoot yours).
2. **Extract to WebP frame sequences, one folder per chapter**
   (desktop 1440px + a mobile 768px set):
   `ffmpeg -i clip.mp4 -vf "fps=24,scale=1440:-1" ch1/%03d.png` →
   convert to WebP. ~80 frames/chapter. (For sunny/foliage footage,
   quality ~52 keeps size down.)
3. Node.js ≥ 20.9.

## The prompt

> Build a luxury real-estate template that plays a HOUSE TOUR as you
> scroll — the walkthrough footage scrubbed frame-by-frame across
> pinned chapters. Awwwards property-showcase style, calm and
> expensive. Warm stone / sky palette; an elegant serif + clean sans.
> `overflow-x: clip` on html AND body.
>
> **Stack:** Next.js + TS + Tailwind v4 + GSAP ScrollTrigger + Lenis +
> a CANVAS frame-scrub engine. Structure it as reusable pieces: a
> `tour-scene` canvas component + a `lenis-provider`, with chapters
> defined in a `chapters.ts` config (each: frame folder, frame count,
> title, copy). This is the engine you reuse for any frame-scrub
> template.
>
> **The engine:** a fixed full-screen <canvas>; for the active chapter,
> map that chapter's scroll band to a frame index and draw it with
> cover-fit math (compute scale + centred offset — never distort).
> Preload and DECODE each chapter's frames one chapter ahead, keep a
> decoded-image cache, and swap to the 768px set under a breakpoint.
>
> ---
>
> **Preloader:** a quiet ivory plate with the villa's wordmark and a
> thin progress line while chapter one decodes — the tour must never
> start on a blank canvas.
>
> **Chapter 1 — Arrival (pinned, ~220vh):** the drive up to the house.
> Serif title ("Villa Sereno") + one line ("A private drive opens onto
> five acres of morning light…") fading in over the footage, timed to
> the START of the pin and exiting on the sticky release — never tied
> to mid-chapter progress.
>
> **Chapter 2 — Living ("Light, framed"):** double-height living room
> glass-and-oak move. Copy block anchored to a lower corner this time
> — alternate copy positions per chapter so the tour doesn't feel
> stamped.
>
> **Chapter 3 — Kitchen ("Basalt & steel"):** the kitchen pass. Add a
> small spec chip row (induction · twin ovens · pantry) that wipes in.
>
> **Chapter 4 — Outside ("The long afternoon"):** colonnade, plunge,
> lap pool. Let the footage breathe: copy is one short line only.
>
> **Chapter 5 — Shoreline ("Two hundred meters of shoreline"):** dock
> and lake. End the scrub on the strongest water frame and hold.
>
> **Between/after the tour:** a serif hero statement above chapter 1;
> an amenities/spec band after the tour (beds · baths · acreage ·
> year, count-up numerals over hairlines); an enquire CTA (serif
> headline + mailto pill); footer with the footage credit.
>
> ---
>
> A right-edge TOUR RAIL: five dots with the current chapter lit and a
> thin fill tracking overall tour progress; clicking a dot scrolls to
> that chapter via Lenis (never native jump).
>
> Respect prefers-reduced-motion (render a key frame per chapter,
> drop the scrub feel, keep the copy readable).

## Gotchas

- Preload/decode each chapter's frames ahead of time and cache the
  decoded images — otherwise the first scrub through a chapter
  stutters.
- Cover-fit the canvas draw (scale + centered offset) so nothing
  distorts across aspect ratios.
- Never CSS `scroll-behavior: smooth` alongside Lenis.
- `history.scrollRestoration = "manual"` in the provider so a restored
  scroll position doesn't fight Lenis on load.
- Tie chapter copy exits to the sticky RELEASE, not chapter progress,
  or titles fade while their footage is still pinned.

---

*Paid version: extracted chapters + the reusable scrub engine +
README/license — studio.smartduke.com*