Illustrative mockup: the Sander homepage on a centred monitor in a quiet room with an oak slat wall, material samples, a floor plan and a key on a linen runner.

Sander Residences

a house you walk through with the scroll

Overview

A residence homepage built around a 25-second AI-generated film that moves with the scroll: five scenes, a plan that follows the camera and a walk through the rooms and their materials.

A residence you enter through a film

Sander Residences presents a single family home the way a visit would: from the drive, through the living spaces and up the stair to a private suite, then back outside at dusk. A 25-second camera journey carries the opening and moves only when the visitor scrolls, forwards or back.

The work spans art direction, an AI-generated film and imagery, UX/UI and frontend development: the scroll-driven film, the residence chapter, a walk through five rooms, the garden and a private enquiry. Sander is a conceptual project; the house, its film and its photographs are generated, not a property for sale.

Sander homepage on desktop: the white modernist house at dusk, the headline Life, beautifully considered, and the plan of the residence on the right.

Twenty-five seconds, walked with the scroll

The film is one continuous take, upscaled to 1080p and interpolated to 48 frames a second so that a slow scroll never steps. Five scenes, arrival, living, ascent, retreat and home, are keyed to the frame on screen rather than to the wheel, and a small two-floor plan beside the film draws the camera's route as it moves.

A paper-coloured veil waits over the first frame while the film downloads, showing its real progress, and lifts once the camera is ready to move. With reduced motion, the film is not loaded at all; the page reads as still photographs and text.

Five frames of the Sander film with their scene titles and timings, above a timeline of 25.04 seconds and 9.5 screens of scroll.

A quiet system on paper

Plate 1 of 6
Drag to explore

Paper tones, a eucalyptus ink, two typefaces, one axis for every chapter, a few careful components, the plan and three motions. These six studies accompany the film.

  • Palette of paper, line, film stage, ink, accent and lamp, with a dark green primary action.
  • Cormorant Garamond for headings and Manrope for text, with the scale from film titles to labels.
  • The residence chapter with a line on the shared axis at 17% of the content width.
  • Real components: chapter navigation over the film, the plan, a room caption and the private enquiry drawer.
  • The plan of the residence at three moments: the arrival, the stair and the upper floor.
  • Three motions: the loader veil, the walk through the rooms and the garden opening from a slot.

After the film, the house in chapters

Below the film the page slows down. The residence chapter shows the architecture; A way of living walks sideways through five rooms, each beside the material that shapes it, timber, stone, oak, linen and glass; the garden opens from a narrow slot to the full width of the screen; and the invitation closes the page.

Every room can open the private enquiry with that room already chosen. The enquiry prepares a note the visitor keeps; nothing is sent. Chapters on paper share a single axis and one heading size, so the page reads as one document after the cinematic opening.

The walk through the rooms on desktop: A home, in its elements, with the kitchen and the stair, each with a material plate and a caption.

On a phone the film keeps its own lighter cut and shorter travel, the plan moves under the header and the rooms and the garden reframe for a narrow screen.

Sander on desktop beside three phone screens: the opening, the walk through the rooms and the garden.
Illustrative closing mockup: the walk through the rooms on a monitor and the opening on a phone, on an oak console with material samples, a floor plan and a key.

Live result

Sander Residences

View live