Casa Serra: Scroll-Driven 3D Walkthrough Emerging from a Floor Plan

RepositorySam1983Aing/casa-serraDemo

Casa Serra is an interactive WebGL experiment where a flat architectural floor plan morphs into a complete 3D house upon scrolling. Built using procedural geometry rather than 3D modelling suites, it was developed with Claude Code and Opus 5.5.

Key points

  1. The initial 2D floor plan is an actual 3D model cut at 1.2 metres and viewed from above through a long lens.
  2. Scrolling raises the cross-section plane, making walls grow before the camera descends to eye level to explore the rooms.
  3. Rooms remain line drawings until the camera enters, at which point realistic materials and textures sweep across surfaces.
  4. Constructed with three.js, GSAP ScrollTrigger, and Lenis as plain files without a build step, using CC0 textures from Poly Haven.
  5. All visible geometry is generated purely through code without 3D authoring software like Blender.
  6. Created over two weeks across four major iterations using roughly 70 prompts with Claude Code and Opus 5.5.

Why it matters

The project illustrates an innovative approach to scrollytelling for architecture, hospitality, and real estate websites without build pipelines. It also serves as a practical case study for prompting LLM coding tools through checkpoint-based workflows rather than one-shot generation.

Analysis

Casa Serra is an early-stage work in progress aimed at creative technologists, frontend developers, and agencies building high-impact landing pages. It bridges the gap between conventional technical drawings and immersive spatial tours. Generating all geometry directly in code keeps the stack lightweight in tooling, though the real-time rendering and texture footprint (~39 MB on desktop, ~13 MB on mobile) present hardware challenges that necessitate the included video and still-image fallbacks.

Mentioned links

Found in

Summary generated by AI (Gemini 3.8 Flash, 4 November 2026). It may contain errors – the original source is authoritative.

Related entries

Similar in content, found by the AI search.

  • Link:Sam Aing

    Lintel · Casa Serra: Interactive WebGL Architectural Concept

    Casa Serra is a web showcase for Lisbon architecture practice Lintel, created by Sam Aing using Claude Opus 5.5. The site transforms a 2D floor plan into a walkthrough 3D space rendered in real time using WebGL 2.

    AI & LLMs· Demo

  • Repository:MengTo/seijaku

    Seijaku: Interactive Three.js 3D Walkthrough of a Kyoto Residence

    Seijaku is an interactive web demo by Meng To that delivers a continuous, scroll-based walkthrough of a virtual Kyoto residence. It combines procedural Three.js architecture, Web Audio soundscapes, and interactive material studies without requiring a build step.

    32starsHTML

    Web development· Demo

  • Video

    Video:Sean Kochel

    Creating Scrollable 3D Websites with scroll-world and Claude

    Sean Kochel demonstrates how to build interactive, scrollable 3D-style websites using the open-source scroll-world skill and Claude. The workflow relies on the Higgsfield API to generate images and transition videos stitched into a smooth journey.

    AI & LLMs· Tutorial

  • X post:Himanshu Hingorani

    AI-Driven Workflow for 3D Web Design and Interactive Frontends

    Himanshu Hingorani showcases a multi-step AI workflow for creative frontend design combining Midjourney v7, Claude Opus 5, Cursor, and Claude Code. Using an interactive 3D stage project named 'Zephyr', he argues against flat, cookie-cutter SaaS landing pages in favour of immersive web experiences.

    28bookmarks2.7kviews

    AI & LLMs· Demo

Back to the knowledge base

Let's talk about your project

Get in touch

Locations

  • Mattersburg
    Johann Nepomuk Bergerstraße 7/2/14
    7210 Mattersburg, Austria
  • Vienna
    Ungargasse 64-66/3/404
    1030 Wien, Austria

Parts of this content were created with the assistance of AI.