Real estate

Villa Sereno

Villa Sereno is a premium real estate website template built with Next.js, TypeScript, Tailwind and Canvas frame-scrub. A house tour that plays as you scroll. The Claude Code prompt that builds it is free; the exact tested source code is $59 with a commercial license.

Next.jsTypeScriptTailwind CSSCanvasLenis

$59

one end product

Live demo ↗

Buy source — $59

Specifications

Framework: Next.js · TypeScript · Tailwind
Motion: Canvas frame-scrub
Category: Real estate
Use case: Real estate
Responsive: Desktop → mobile
License: Commercial · one end product
Delivery: Instant ZIP download

What the paid download adds

The exact deployed code — tested, not AI-guessed
Config-driven copy, palette & assets
Compressed media included
Deploy README — Vercel or your own VPS
Commercial license — one end product
Free updates to this template

The free Claude Code prompt

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

# 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.
>
> **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 tour:** 5 pinned CHAPTERS, each scrubbing its own frame
> sequence (arrival → living → kitchen → primary suite → grounds), the
> chapter title + a line of copy fading in over each. Lazy-load each
> chapter's frames just before it enters; swap to the mobile frame set
> under a breakpoint; draw with cover-fit math so frames fill any
> viewport.
>
> **Around the tour:** a serif hero, an amenities/spec band, an
> enquire CTA, a footer with the footage credit.
>
> Respect prefers-reduced-motion (render a key frame per chapter,
> drop the scrub feel).

## 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.

---

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

Villa Sereno — questions

What is the Villa Sereno template built with?

Villa Sereno is a Real estate website built with Next.js, TypeScript, Tailwind CSS, Canvas, Lenis. The motion is driven by Canvas frame-scrub, with Lenis smooth scrolling and GSAP ScrollTrigger for the scroll choreography.

How much does Villa Sereno cost?

The free Claude Code prompt that builds a Villa Sereno variant is $0. The exact, tested source code — the same site shown in the demo — is $59, delivered as an instant ZIP with a commercial license for one end product.

Can I use Villa Sereno for a client project?

Yes. The $59 download includes a commercial license to use Villa Sereno in one end product, including paid client work. Everything is config-driven, so copy, palette and assets re-skin from a single file.

What's the difference between the free prompt and the paid download?

The free prompt gets Claude Code to build you a Villa Sereno variant — genuinely good, but it costs tokens and debugging time and results vary. The paid download is the exact site in the demo: tested, compressed, documented, licensed, with free updates.