Urban Spheres
An interactive experiment exploring motion, atmosphere, and code as a creative tool
Urban Spheres
Try it yourself
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
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.
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.
🇩🇪 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:
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