"From sketch to home": courtyard house grows through four stages in Three.js + TSL, built with Opus 5.5 (X video)

Summary
This video demonstrates an interactive 3D web application titled "Architect's Model: Courtyard House | From line to life", created by Techartist (@techartist_). Built using Three.js and TSL (Three.js Shading Language) with the assistance of Claude Opus 5.5, the interface visualizes an architectural design morphing smoothly across four stages of development.

What is shown

• Stage 01: Sketch [00:00–00:02]: The house is represented as a clean, line-drawn wireframe schematic over a 2D ground plan, labeled "01 The first line / Proportion | intent | possibility".
• Stage 02: Massing Model [00:02–00:07]: Solid untextured forms, slabs, and volumetric masses emerge to define spatial envelopes, labeled "02 Space takes shape / Volumes | thresholds | enclosure".
• Stage 03: Detailed Model [00:08–00:13]: Architectural details materialize, including glass curtain walls, window mullions, internal staircases, interior framing, and minimalist furniture arrangements, labeled "03 Every detail belongs. / Structure | craft | interior".
• Stage 04: Built Reality [00:14–00:18]: Full PBR materials, slatted wood cladding, landscaping, foliage, water reflections in the swimming pool, and warm evening interior/exterior illumination fade in, labeled "04 A place to come home to. / Material | light | life".
• UI & Controls: A bottom scrub bar offering play/pause and stage indicators, interaction tooltips ("DRAG TO ORBIT | SCROLL TO EXPLORE | SCRUB TO TRANSFORM"), and top-right viewport and daylight/night mode toggle icons.

Claims & numbers

• 4 progression stages are delineated: "01 Sketch", "02 Massing Model", "03 Detailed Model", and "04 Built Reality".
• No other performance or benchmark numbers are stated.

Notable quotes

• [00:00]: "AN ARCHITECTURAL STUDY / Architect's Model. / Courtyard House | From line to life"
• [00:04]: "02 Space takes shape / Volumes | thresholds | enclosure"
• [00:14]: "04 A place to come home to. / Material | light | life"

Assessment
This is a direct screen-capture demonstration of a functioning 3D WebGL/WebGPU web application. It displays genuine real-time shader transitions and geometric interpolations in the browser rather than pre-rendered CGI or video generation.

Lyrics & themes

• Audio: Entirely silent/instrumental; there are no lyrics, music track, or spoken voiceover.
• Themes: The progression traces the traditional design philosophy of modern architecture—starting from abstract conceptual drafting, progressing through volumetric massing and BIM detail, to a finished, warmly lit residential living space.

Lore & references

• Claude Opus 5.5 Web Development: Highlights the model's proficiency in synthesizing complex modern Three.js and TSL (Three.js Shading Language) code, state-driven animations, and shader-level material transitions.
• Architectural Workflow: Faithfully reflects standard architectural milestones ("Sketch", "Massing", "Detail", "Built Reality").

Visual style & craft

• Visual Style: Real-time 3D canvas framed in an editorial, minimalist typographic UI reminiscent of high-end architectural monographs (neutral warm tones, elegant serif headers, clean sans-serif controls).
• Craft: The application is code-rendered in-browser via Three.js/TSL shaders rather than generated by a video diffusion model; the AI contribution lies in the procedural code, shader logic, and scene composition authored with Claude Opus 5.5.

Described by gemini-3.8-flash on 2026-10-05 from the video's audio and frames.