Solano Residences

Context

A showcase build, not a client project. The brief I set myself: a property site marketed to German buyers that carries its atmosphere through motion rather than through more copy, and still loads honestly on a phone.

What I built

• 01Ten sections choreographed with GSAP ScrollTrigger over Lenis smooth scroll, sequenced so each one resolves before the next begins.
• 02Floor plans drawn as inline SVG rather than exported images — walls as strokes, door arcs and dashed terraces — so they stay sharp at any zoom and weigh almost nothing.
• 03A day/night hero that crossfades on opacity alone: both frames run the same Ken Burns keyframes, so they sit at an identical scale and the switch never jumps.
• 04Foliage animated on two stacked layers, each sprig holding its own rest angle in a custom property that every keyframe re-applies. The six durations share no common multiple, so the branches never fall back into sync.
• 05Video kept out of the initial load entirely — no autoplay attribute, an IntersectionObserver starts and pauses each clip as its section is approached.
• 06Variable fonts self-hosted rather than pulled from a font CDN: 64 KB covers both families across every weight used.
• 07No cookies, no localStorage, no analytics — the page stores nothing about whoever opens it.

Result

Measured in Chrome at 375, 768 and 1440: 1.6–2.0 MB on first load and 4.8–5.9 MB after scrolling the whole page, with no console errors, no failed requests and no horizontal overflow at any width.