Tool Open source
Casa Serra is a scroll-driven interactive house visualization and work-in-progress web demo. It opens as a flat architectural floor plan, which is the actual Three.js 3D model viewed from above and cut at about 1.2 metres; scrolling raises the cut to form the walls and moves the camera through the rooms. Each room remains a line drawing until the camera reaches it, when materials appear. The scene uses geometry generated in code, GSAP ScrollTrigger and Lenis, plain files without a build step, and CC0 texture scans from Poly Haven. On devices that cannot run the real-time scene, it provides a still image and a video clip.
1 use taken from transcripts — each links to the moment in the video.
Starts as a flat architectural floor plan, then builds a house around you as you scroll — the drawing is a slice through the actual 3D model, and scrolling raises the cut to reveal walls and take the camera through rooms with materials appearing as you enter each space. Uses Three.js with geometry built in code, falling back to images and video on weaker devices.
1 in the library.