Title: CSS City — A Block That Never Sleeps
Creative prompt: Light one city block in amber windows over midnight blue with six towers, blinking beacons, drifting traffic, and a low moon. Let visitors toggle windows across four districts and three times of night. It should feel sleepless, cozy, and clickably alive.
Design description: A city-desk header frames a copy column (period buttons, wake/sleep, traffic/glow sliders, awake counter) beside a gradient-sky canvas city with header and time-of-night slider; four district cells and a footer close the block.
Major visual techniques:
- Canvas window-grid towers with per-window hit-testing and glow halos
- Gradient skies per period, crescent moon, blinking beacon, scrolling traffic lights
- Blinking REC keyframe, inset highlight on active district
Interaction model: Clicking any window toggles it with live awake count; wake/sleep buttons set all; period buttons and night slider re-skin the sky; district cells rescale towers and water reflection; traffic/glow sliders drive car speed and window brightness.