X

Urban Spheres

An interactive experiment exploring motion, atmosphere, and code as a creative tool

Concept Art Direction Visual Design Vibe Coding

Try it yourself

Try it on full screen: https://urban-spheres.vercel.app/

Source Code: https://github.com/kiraschoko/urban-spheres

Urban Spheres is an interactive visual experiment exploring vibe coding as part of a design process, not just a technical step. The project started from a simple intention: to see how far I could develop a visual idea by working directly with motion and interaction, instead of designing something static first.

I made this project as a creative exploration of how design ideas can evolve beyond static visuals. I wanted to experiment with code as a medium, not from an engineering perspective, but as a way to create mood, motion, and interaction more directly.

Urban Spheres was built with a lightweight setup focused on speed and experimentation:
AI-assisted vibe coding: to prototype, refine, and iterate quickly. I used an AI workflow to shape prompts, generate behaviors, and continuously adjust the system based on visual feedback
JavaScript + Canvas: for building a real-time particle system and controlling motion behavior
Vercel: for fast deployment and sharing the live experience

Starting point
At the time, I was already collecting visual references around systems, particles, and abstract environments. One image in particular stayed with me, from a generative AI artist on X.

It showed a dense field of glowing, layered spheres, somewhere between particles, cells, and a cosmic map. It felt complex but still calm, almost like a system quietly in motion.

I didn’t want to recreate the reference, but reinterpret it.

The layered, overlapping spheres reminded me of how cities function: different systems existing at once, constantly moving, yet still structured. From there, I started thinking in terms of specific urban environments.
I chose Tokyo, Berlin, and São Paulo as references for different rhythms of a city:

🇯🇵 Tokyo:
Tokyo was the most intuitive starting point. It’s defined by strong daily rhythms, where people move in waves during peak hours, commuting into and out of the city. Everything feels highly organized and synchronized, which made it interesting to translate into a visual system.

🇩🇪 Berlin:
My second pick is Berlin, not only because I live here, but because it offers a strong contrast to Tokyo. Berlin feels more quiet and distributed during the day, with remote and hybrid work shaping a slower pace. At night, the city becomes much more active. This shift between calm and intensity created a different type of movement to explore.

🇧🇷 São Paulo:
For the third reference, I explored cities like Mumbai and Jakarta, which also have strong density and continuous activity. In the end, I chose São Paulo to introduce a different geographic context. Having cities across different continents made the comparison more interesting, especially when viewed side by side. São Paulo also brings a sense of scale and constant motion, less defined by peaks and more by an ongoing flow.

Visual Language

Sense of Time

Structure

Behavior

🇯🇵 Tokyo

Concentrated core

Rush hours

Single focal center

Converging

🇩🇪 Berlin

Distributed nodes

Delayed + nightlife

Multiple points

Appearing / fading

🇧🇷 São Paulo

Flowing field

Layered, chaotic

No center

Continuous flow

🇯🇵 Tokyo: synchronized waves

To represent Tokyo, I focused on its highly structured daily rhythm, where large numbers of people move in and out of the city in synchronized waves.

I translated this into a system where particles behave collectively rather than individually. Instead of random motion, elements move in coordinated patterns that expand and contract over time.

At peak hours, the system becomes denser and more concentrated, reflecting the influx of commuters into the city center. As time shifts, the particles disperse again, creating a visible rhythm of compression and release.

Particles move inward from all directions, like people commuting into the city. The system becomes dense and busy.

Movement slows down. Particles stay more stable, reflecting a quieter and more focused time during the day.

Particles move outward, like people leaving the city after work and going home.

The system becomes calm. Movement is minimal, reflecting the city at rest before the cycle starts again.

🇩🇪 Berlin: Contrast between calm and spikes

To represent Berlin, I focused on its contrast between quiet daytime and active nightlife.

Instead of synchronized movement, the system is more fragmented. Particles form small clusters that appear, disappear, and shift over time, creating a less predictable rhythm.

Each state represents a different moment in the day:

The system is darker and quiet, reflecting early morning. Particles are sparse and spread out.

Movement remains relatively calm. Commuting is less intense here than in Tokyo, so particles move gently without forming strong patterns.

Activity starts to build. Small clusters begin to form as people leave work and gather in different parts of the city.

The system becomes more dynamic. Multiple hotspots appear, and particles are drawn toward them, forming larger clusters that reflect nightlife and events.

Trial & Error

São Paulo → constant dense movement