Aurora city

Inspiration

Cities grow fast, and the people who will live in them are rarely asked what the city should become. I wanted to turn that around in the simplest way possible: show a city that does not exist yet, as a grey architectural model, and let the visitor give it life.

What it does

Aurora is a scroll-driven experience for a fictional new city that is still only a model.

• As you scroll, the camera moves down a street of the 3D model.
• At the key moment, you choose what Aurora should be: homes for everyone, living nature, moving freely, culture everywhere.
• Each choice raises a "Life" gauge and softly brings color and light back to the city.
• At the end you receive "Your Aurora", a personal card with your priorities, a color palette and a line that describes your city, and you can join the founding community.

Design and UX

• One idea, told through color. The city starts monochrome. Color is not decoration: it is the visible progress of participation.
• A clear user flow. Loading, arrival, the problem, the model, the choices, the result, the call to join. One idea per screen, with short copy.
• A loading screen that carries the brand. A sun rises over a horizon line as the model downloads, with real progress, so the wait feels like part of the story.
• Readable and calm. Instrument Serif for titles, Inter for text, hairline borders, glass cards, and local contrast scrims so text stays legible over bright frames.
• Accessible by design. Keyboard-operable controls, visible focus, reduced-motion support and screen-reader friendly progress.

How I built it

The site is built with Next.js. Page scroll drives a 1080p video of the model, smoothed so movement stays continuous in both directions. A fixed color layer of zoned gradients (sky, facades, ground) with blend modes sits on top of the black-and-white video, so a single video can take on any combination of the visitor's choices. GSAP animates the transitions. I built it with Kiro as the development environment and used Claude for design direction, planning and writing.

Challenges

The first version scrubbed about 500 image frames. It looked great but was heavy to download and the browser ran out of memory during fast scrolling. I switched to a single video. Backward scrolling then stuttered, so I analysed the file and found a keyframe only every 3 seconds. Re-encoding it with a keyframe every 4 frames made seeking nearly instant. I also made the video fully preload behind the loading screen, so scrubbing never waits for the network.

Accomplishments that I'm proud of

• A scroll experience that stays smooth in both directions
• Using color as the progress of participation instead of decoration
• Turning a heavy first version into a lighter, more reliable one by measuring the real cause

What I learned

Performance is a design problem: choosing the right technique (video over frames, keyframe spacing, full preload) mattered more than any visual polish. I also learned to measure before fixing, and to let one strong idea carry the whole design.

What's next

A real participation backend (saving choices and a live waitlist), a map of the four districts, a full accessibility audit, and a lighter mode tuned for slow connections.

Credits

City model footage from Pexels (Pexels License). Fonts: Instrument Serif and Inter (Google Fonts). Built with AI assistance (Kiro and Claude), as allowed by the hackathon rules.

Built With

• claude
• deployxa
• gsap
• kiro
• lenis
• next.js
• react
• tailwind-css
• typescript