Luxury real estate

Arden

Arden is a premium luxury real estate website template built with Next.js, TypeScript, Tailwind and All-intra video scrub. True video scrub through a single golden property. The Claude Code prompt that builds it is free; the exact tested source code is $69 with a commercial license.

Next.jsTypeScriptTailwind CSSLenisScroll-scrubbed video

$69

one end product

Live demo ↗

Buy source — $69

Specifications

Framework: Next.js · TypeScript · Tailwind
Motion: All-intra video scrub
Category: Real estate
Use case: Luxury 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 Arden variant — free. Want the exact, tested code shown in the demo? That’s the $69 download.

# 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 room stills from the film for the gallery.
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).
>
> **Stack:** Next.js + TS + Tailwind v4 + GSAP ScrollTrigger +
> SplitText + Lenis.
>
> **Hero — true video scrub:** full-bleed all-intra <video>, currentTime
> driven by scroll via a lerp ticker gated on `video.readyState < 2`
> (per-frame seeks during download abort the fetch — the video never
> loads without this gate). Elegant serif headline + a "scroll to tour"
> cue. Keep scrims minimal — a light property shouldn't be dulled.
>
> **Sections:**
> - Text-FILL about: a paragraph whose words fill from bronze as it
>   scrolls into view (per-word or per-char SplitText + scrub).
> - A full-width PARALLAX quote/plate.
> - A STICKY-GALLERY "Residence" section: the image pins and
>   CROSSFADES between rooms as list entries scroll past (each entry
>   triggers the next still) — ALL stills cut from the one walkthrough
>   film for single-property coherence.
> - A parallax CONTACT panel + footer with the footage credit.
>
> Config-driven copy + room list. Respect prefers-reduced-motion.

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

---

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

Arden — questions

What is the Arden template built with?

Arden is a Luxury real estate website built with Next.js, TypeScript, Tailwind CSS, Lenis, Scroll-scrubbed video. The motion is driven by All-intra video scrub, with Lenis smooth scrolling and GSAP ScrollTrigger for the scroll choreography.

How much does Arden cost?

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

Can I use Arden for a client project?

Yes. The $69 download includes a commercial license to use Arden 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 Arden 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.