Four Rooms — Cinematic Scroll Section

Four Rooms is a cinematic scroll section that brings visual storytelling to a single immersive scene. As visitors scroll, the opening title splits apart, revealing four architectural illustrations that gather into a layered card stack. Each image transition is paired with synchronized descriptions and a numbered counter.

A midnight-blue palette, soft gold imagery, Instrument Serif headlines, and DM Sans body text create a refined editorial feel. The responsive layout adapts to desktop and mobile, while reversible animations let visitors move naturally through the sequence in either direction.

The one-shot reconstruction prompt includes the complete HTML, CSS, and JavaScript implementation, hosted image and font URLs, precise motion formulas, responsive rules, and interaction details. Built with vanilla web technologies, the section requires no framework, animation library, or backend.