REFERENCE
- Gallery page: https://magpui.com/en/i/floor-plan-that-builds-a-house-c2d7b7
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/floor-plan-that-builds-a-house-c2d7b7/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/floor-plan-that-builds-a-house-c2d7b7/clip.mp4
- Original post: https://x.com/SammmAing/status/2109708195031900310 by @SammmAing
Before building, download the first frame and look at it. If ffmpeg is available, download the clip and extract frames (ffmpeg -i clip.mp4 -vf fps=2 frame-%02d.png), then study the motion frame by frame. Match what you see; the text below describes it, the frames are the truth.
BUILD
A scroll-driven landing for a single architect-designed house. It opens on a flat technical floor plan on paper; as you scroll the plan extrudes into a white line-drawn 3D model, the camera dives in through the entrance, and room by room the line drawing turns into the finished, sunlit house. It should feel like an architect's drawing coming alive: calm, precise, slow and premium, with the line work never fully disappearing until the room is revealed.
DESIGN SYSTEM
- Full-bleed WebGL canvas, 16:9 desktop first, framed by a thin UI layer: tiny wordmark top-left, a small outlined "Start a project" pill top-right (11px uppercase, 1px #1A1A1A border, radius 999px, padding 6px 12px), small scroll hint and scale label centered at the bottom ("SCALE 1:100 / SCROLL" in 9px mono, letter-spacing 0.12em).
- Paper: #EFEDE8 with a faint concrete/paper grain (2-3% noise) and a 1px #DAD6CE grid only on the plan view.
- Hero type: bold condensed grotesk uppercase, 56-64px, line-height 0.95, #2B2B2B, top-left with 48px margins, last word in coral #E8603C followed by a period ("EVERY HOUSE STARTS AS A PLAN."). Small 10px mono label top-right of the plan ("GROUND FLOOR PLAN" + area).
- Line work: walls as solid black poché (#111) in plan, then 1.25px #1C1C1C edge lines on white surfaces (#F7F6F3) in 3D.
- Room labels: a small boxed corner marker (crosshair square, 14px) plus a two-line label: room name in 13px bold uppercase, sub line in 9px mono (area, finish). Big room names can also be laid flat on the floor in 3D as outlined letters (e.g. "LIVING 12.00").
- Rendered rooms: warm daylight, concrete and travertine floors #CFC6B8, oak #B98A5E, charcoal walls #3A3836, olive trees and sky #9EC3DD outside.
MOTION
- Phase 1, plan to wireframe (0-15% scroll): camera tilts from top-down to a 35 degree oblique while wall poché extrudes upward 0 -> wall height; ease cubic-bezier(.65,0,.35,1), scrubbed with lerp 0.08.
- Phase 2, approach (15-30%): the camera dollies to the front elevation and pushes through the entrance; door slats and window mullions draw on as lines (stroke reveal ~600ms equivalent).
- Phase 3, room reveals (30-90%): at each room stop the camera holds for ~60vh; the line-drawn room crossfades to the photoreal version with a wipe from the door side (800ms equivalent, cubic-bezier(.22,1,.36,1)); remaining unrevealed rooms stay as white line drawings seen through doorways, which is the key effect. The room label fades in and rises 12px over 400ms with a 120ms stagger between name and sub line; pendant lights fade on.
- Phase 4, outro (90-100%): camera pulls up to a top-down site plan with landscaping, then the CTA appears.
- Idle: subtle pointer parallax, camera yaw/pitch +/-1.5 degrees, damped.
SECTIONS
1. Hero: floor plan on paper with the headline and plan label.
2. Extrusion: the plan rises into a white wireframe model.
3. Front elevation and entrance: timber slat screen, door, brick and concrete walls.
4. The entrance: line drawing of the living area seen beyond, then revealed.
5. Living room with sunken lounge and pool terrace.
6. Corridor / gallery with sculpture niche.
7. Master suite: dark accent wall, low bed, bedside lamps, garden view.
8. Bath: freestanding tub facing the courtyard.
9. Outdoor terrace with fire pit and olive trees.
10. Site plan from above with the house footprint, garden and pool, plus contact CTA.
IMPLEMENTATION
- three.js (or React Three Fiber) with GSAP ScrollTrigger scrubbing a single timeline that drives camera position/target along a CatmullRom path and per-room reveal uniforms. Build each room twice: an edges-only version (EdgesGeometry + LineSegments, white MeshBasicMaterial faces) and a lit version (baked lightmaps or a single directional sun + environment map); blend them with a per-room reveal uniform in a shared shader so line and render can coexist in one frame.
- Keep the plan view as an SVG/texture on a plane that the extruded walls grow out of.
- Use compressed GLB (Draco/Meshopt) and KTX2 textures, cap devicePixelRatio at 1.75, lazy-load later rooms, pause rendering when the tab is hidden.
- prefers-reduced-motion: replace scrubbing with a stepped sequence of still frames per room with crossfades; keep all copy in HTML so it stays readable and focusable; the CTA is a real link with a visible focus ring.
ADAPT TO THE PROJECT
Reuse the project's existing design tokens, components and fonts; map the colors above to the closest existing tokens. Never copy the original logo, house name, renders or models: use placeholder geometry, your own simple house model and placeholder room names.
SUCCESS CHECK
- Scrolling from the top turns a flat plan into extruded line-drawn walls before any photoreal surface appears.
- In at least one room stop, the revealed room and an unrevealed line-drawn room are visible in the same frame.
- With prefers-reduced-motion on, the page shows stepped room stills with no camera movement and all labels remain readable.
