City Skyline Parallax
Overview
This showcase renders a complete city skyline from SVG shapes — mountains, buildings, a sun/moon, and stars — across 6 parallax depth layers. As you scroll, the entire scene transitions from midday to midnight: the sky gradient shifts, buildings darken, windows light up, the sun sets and the moon rises, and stars fade in.
Technical Approach
Color Interpolation
Scroll progress (0 to 1) drives a multi-phase color system. Each phase (day → sunset → dusk → night) interpolates between color stops using linear interpolation on RGB values. Every visible element — sky, mountains, buildings, sun, windows — has its own interpolation curve.
SVG Cityscape
All buildings are SVG rect elements with their fill color bound to Alpine reactive properties. Window lights are smaller rects randomly distributed across building faces, with opacity tied to scroll progress. Zero raster images are loaded.
Celestial Transitions
The sun descends and warms from gold to deep orange as it approaches the horizon, then fades out. After a brief gap, the moon rises from below with a cool white glow. Stars fade in via opacity once the sky darkens past the halfway point, with randomized CSS twinkle animations.
Real-World Applications
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.