Luxury Real Estate Scrollytelling Template

Aurelia presents a single property — a private hillside residence above Los Angeles — as a film you control with the scroll wheel. Instead of a gallery grid, the page plays WebP frame sequences on a canvas, advancing frame by frame as you scroll, with editorial text beats timed to land on specific frames.

It is built as three acts: arrival, pool, suite. Each act is its own scrubbed sequence, each has its own set of headlines that rise word by word inside a window of the scroll, and the prose between the acts does the work a brochure would normally do.

This is the template to fork when you have one thing to sell and it deserves more than a listing. It is a Next.js 15 project, available on the Pro and Max plans, with a public preview.

What scroll-scrubbed acts actually mean

A conventional property page shows photographs. Aurelia shows movement through a space. The hero holds the longest sequence — the arrival — and the canvas advances through its frames as you scroll, so the camera walks you toward the house at whatever pace you choose. Two more sequences follow, one at the pool and one in the master suite, each declared in src/lib/scenes.ts with the frames and the copy that belongs to them.

The headlines are choreography, not captions. Each scene carries titles like "Perched above the city" or "Where water meets the sky", bound to a window of that scene progress, so the words appear at the frame that earns them and leave before the next beat. One word in each title is marked for accent treatment, which gives the type its rhythm.

The consequence is that a visitor who reaches the bottom has effectively taken a walkthrough. The cost is that the media is the product: sequence quality decides whether the page is impressive or awkward.

The sections between the acts

Aurelia is a single page composed in src/app/page.tsx. Between the scrubbed acts it runs a set of conventional editorial sections that carry the facts:

• Nav — minimal fixed navigation over the sequence
• Hero — Act I, the arrival sequence, scroll-scrubbed on canvas
• Intro — the opening editorial statement about the residence
• Block reveal — an editorial grid whose panels slide away to reveal the photography beneath
• Marquee — a running band of text between acts
• Act II and the amenities section — the pool sequence followed by what the property offers
• Act III and the woven section — the master suite sequence and an interleaved text and image passage
• Gallery — the still photography set
• FAQ — buyer questions in an accordion
• Concierge — the enquiry block
• CTA and footer — the closing invitation

Design notes

The palette is off-white paper with a warm sand accent — no pure white, no black, nothing that reads as a tech product. A self-hosted editorial serif carries the headlines, which keeps the page from looking like every other property site running the same webfont, and a film grain overlay sits above the whole document to stop the flat colors from looking digital.

The page opens with a dissolving intro loader, which is doing real work as well as setting a tone: it covers the moment the first frame sequence is being fetched. Stat cards use frosted glass so numbers can sit over imagery without a solid panel interrupting the photograph, and a custom cursor replaces the system pointer.

Motion is GSAP with ScrollTrigger for the scrubbing and pinning, Lenis for the scroll feel itself, and a set of small reveal components — BlurText, MaskText, Split, Roll — that each handle one kind of type entrance. Three.js is present in the project as well.

The stack under the hood

Aurelia deliberately avoids a component library. Styling is plain CSS driven by custom-property tokens, which is why the palette can be re-skinned from a handful of variables.

• Next.js 15 with the App Router
• React 19 and TypeScript
• Plain CSS with custom-property tokens
• GSAP and ScrollTrigger for scrubbing and pinning
• Lenis for smooth scrolling
• Three.js
• Canvas image-sequence scrubbing driven by a manifest

Adapting it with a Siteglade prompt

The text, the palette and the section order can all be changed by prompt. The frame sequences are media, so treat them as a separate job: either shoot and export your own sequence, or ask the agent to reduce an act to a still hero if you do not have the footage.

A working prompt sounds like this: "Rebuild this for Marchetti Studio, an architecture practice in Lisbon presenting a single completed house called Casa Ribeira. Keep the three-act scroll structure. Rewrite Act I as the approach through the pine trees, Act II as the courtyard, Act III as the upper terrace. Change the accent from sand to a muted terracotta, replace the amenities section with a materials and construction section, and turn the concierge block into a studio enquiry form."

Then keep going in small steps: change the marquee text, rewrite the FAQ for your market, or drop one act entirely if you only have two sequences. The preview iframe updates as the agent edits, and the auto-fix loop repairs the build if a change breaks it.

What to change first

Aurelia is the template where media work outranks copy work. Plan accordingly:

• The frame sequences and their manifest — everything else is decoration around them
• The scene titles in src/lib/scenes.ts, including which word carries the accent
• The property facts in the stat cards, which are the only hard numbers on the page
• The FAQ, which is where a serious enquirer goes before contacting you
• The intro loader wordmark, so the first thing on screen is your name

Last updated: 2026-08-16