Layered Parallax
Day to Night
Six parallax layers. One scroll. Watch the city transform.
The Technique
6 Layers, 1 Scroll
Depth Layers
Mountains at 0.05x, far buildings at 0.18x, near buildings at 0.28x, foreground at 0.4x. The speed difference creates perceived depth.
Day/Night Cycle
Scroll progress interpolates every color — sky gradient, building fills, sun position and color, star opacity, and window lights all shift in sync.
SVG Cityscape
All buildings are SVG rects — lightweight, infinitely scalable, and color-controlled via Alpine reactive fills. No images loaded.
In the Wild
Who Uses This
City & Tourism Websites
Destination marketing sites use parallax skylines to establish a sense of place. The day-to-night transition adds emotional storytelling — arrive in daylight, explore the nightlife.
Real Estate & Property
Developers use stylized city views to position properties in context. The parallax depth layers communicate density and surroundings without a single photograph.
Event & Conference Landing Pages
Tech conferences and summits hosted in cities use skyline illustrations as brand identity. The scroll-driven time change adds interactivity that static illustrations can't match.
Interactive Storytelling
Children's sites, educational platforms, and narrative-driven campaigns use layered parallax scenes to create scroll-driven stories with a beginning, middle, and end.
One scroll. Whole story.
Layered parallax with color transitions turns a static page into a living scene. Every scroll tick is a frame in a story only the visitor controls.