Demeure

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

# DEMEURE — Free Claude Code Prompt

*From SmartDuke Studio (studio.smartduke.com). The real prompt behind
our interior-architecture template. The exact tested build — encoded
film, all the section choreography, every fix — is the paid download:
https://studio.smartduke.com*

## Before you start

1. **Generate or shoot one walkthrough film** (~8–10s, 1080p+): one
   continuous camera position where an **empty room fills itself** —
   bare shell → light → surfaces (wood, marble, curtains) → furniture →
   a warm, lit evening. The transformation IS the scroll story.
2. **Re-encode it all-intra** so scrubbing lands on any frame:
   `ffmpeg -i room.mp4 -an -c:v libx264 -preset slow -crf 23 -g 1 -pix_fmt yuv420p -movflags +faststart public/room.mp4`
3. **Pull the poster + portfolio stills from that same film** (or use
   your own project photos): `ffmpeg -ss 0.15 -i room.mp4 -frames:v 1 -q:v 3 public/img/poster.jpg`, and a few furnished frames for the work grid.
4. Node.js ≥ 20.9.

## The prompt

> Build a warm, editorial website for an **interior-architecture studio**
> where **scrolling composes the room** — a single-take film scrubs
> frame-by-frame from an empty shell to a fully furnished home. Awwwards
> standard, restrained, monograph-like. Warm plaster paper (#F1ECE3),
> warm-charcoal ink (#1A1611), a dark espresso surround (#14110D) for the
> film moments, ONE terracotta-clay accent (#B06A3F). Display font
> **Fraunces** (soft modern serif), body **Inter**, via next/font.
>
> **Stack:** Next.js App Router + TypeScript + Tailwind v4 + **GSAP**
> (ScrollTrigger for all scroll animation + **SplitText** for line/char
> reveals) + **Lenis** (smooth scroll). No 3D — the "composition" is the
> all-intra `<video>` scrub. Put the brand, all copy, the HERO `beats` /
> `stages` arrays, the WORK/MATERIALS/STATS arrays and every image path
> in `src/config.ts` so it re-skins from one file; empty image paths must
> render labelled placeholders (a tonal swatch for materials).
>
> **0 · Preloader** — an espresso curtain: the studio wordmark + the
> discipline line fade in, a clay hairline draws itself (scaleX 0→1),
> then the whole curtain lifts (yPercent -100). Lock scroll + Lenis while
> it's up.
>
> **1 · Hero — the composition scrub (≈440vh pinned).** A full-bleed
> `<video>` (all-intra `room.mp4`) whose `currentTime` is driven by
> scroll: ScrollTrigger onUpdate sets a target time from progress, a
> gsap.ticker lerps `video.currentTime` toward it (factor 0.14). GATE the
> ticker with `if (!duration || video.readyState < 2) return;`. The film
> does **NOT** auto-play — it rests on its first frame (the empty shell)
> and only seeks on scroll. Over it:
> - Opening headline, char-reveal with blur (SplitText chars, from
>   opacity0/yPercent60/blur(10px)), an accented italic word ("An empty
>   room is only a *promise.*"), a masthead eyebrow with hairline rules,
>   and a clay underline that draws under it (scaleX).
> - A **HUD on the right** that steps a stage label across four movements
>   as you scroll — **STRUCTURE → SURFACES → FURNITURE → LIFE**
>   (floor(progress*4)), each swap a small fade-up, plus a thin progress
>   hairline (scaleY).
> - **Serif beats that mask through** at fixed progress windows (a scrub
>   timeline: each beat's lines animate yPercent 120→0 then →-120 across
>   its window), synced to the room filling — "First, the light — and the
>   proportion to hold it." → "Then the bones: oak, stone, the grain of
>   shadow." → "At last, the life — the sofa, the books, the evening."
> - A final `reveal` at ~86% progress: a large "A home, composed." line
>   mask-reveals at the BOTTOM over the finished frame, with a subtitle.
> - Legibility over the BRIGHT empty first frame: soft top+bottom edge
>   fades + a localized **radial ink-pool** behind the headline + text
>   shadows — NOT a heavy full-frame wash (it kills the room).
>
> **2 · Manifesto — scroll-fill.** A big serif paragraph, each word
> wrapped by SplitText; scrub their `color` from stone-grey to ink
> word-by-word (gsap stagger + ScrollTrigger scrub over the section).
>
> **3 · Approach — sticky title + four movements.** Two columns: a
> `position: sticky` title on the left ("We compose in four movements."),
> and on the right four numbered acts (Listen / Draw / Material / Light)
> that fade-up as they enter, each with a hairline rule that draws
> (scaleX) on entry.
>
> **4 · Work — animated gallery.** A lead project (16:9) + a 3-up grid
> (4:5). For EACH image: (a) a **curtain-wipe reveal** — a clay panel
> covers the frame then slides up off it (yPercent 0→-101) while the
> frame clip-paths open (`inset(0 0 100% 0)`→`inset(0 0 0% 0)`) and the
> image settles from scale 1.28→1.12; (b) **constant in-frame parallax**
> — the image is over-tall inside an `overflow-hidden` frame and drifts
> vertically (yPercent -14→14) on a scrub tied to the card's viewport
> travel, so it never sits still; (c) hover — image zooms + a soft tint +
> an accent → slides in by the name. Captions rise as each card lands.
>
> **5 · Materials — pinned horizontal palette.** Vertical scroll
> translates a horizontal track (gsap x to -(scrollWidth - innerWidth),
> pinned via ScrollTrigger). An intro panel + six surface cards (European
> Oak, Calacatta, Travertine, Brushed Brass, Belgian Linen, Smoked
> Glass) — each a big image (or a tonal swatch keyed to a `tone` color if
> no photo) + name + provenance + index. On espresso.
>
> **6 · Stats — count-up.** A 4-cell grid (residences, years, m²
> composed, awards) where each number animates from 0 when it scrolls
> into view (gsap tween + ScrollTrigger once), with a clay suffix.
>
> **7 · Close — parallax invitation.** The finished-room still sits
> full-bleed and **parallaxes** (yPercent -12→12 + scale 1.18→1.06 on a
> scrub) under an espresso gradient; over it a masked line-reveal ("Let's
> compose yours."), a line of copy, and a bordered CTA that inverts to
> clay on hover. Footer with wordmark + studio details.
>
> Global: a fixed nav using `mix-blend-difference` so it reads on both
> the dark film and the plaster sections; `history.scrollRestoration =
> "manual"` in the Lenis provider; respect prefers-reduced-motion (skip
> parallax + the pin).

## Gotchas (we hit all of these)

- The `readyState < 2` gate on the scrub ticker is mandatory.
- `-g 1` (every frame a keyframe) is what makes `currentTime` land
  anywhere — without it the scrub snaps and judders.
- The empty first frame is the BRIGHTEST state and it's now permanent
  (no idle play), so light type needs a localized radial pool + edge
  fades + text-shadow — a full-frame dark wash dulls the whole room.
- Work images must be over-tall inside the `overflow-hidden` frame or the
  in-frame parallax exposes a hard edge.
- The pinned Materials track needs `invalidateOnRefresh: true` so its
  width recomputes on resize.
- `mix-blend-difference` on the nav is what keeps it legible across the
  dark→light section changes without JS.

---

*Paid version: the film + all stills + every section's exact
choreography + README + license — studio.smartduke.com*

Demeure — questions

Related templates

Part of