A small experiment where thousands of points are sampled from an SVG silhouette and simulated in 3D with Three.js. The default shape, Break the Shape, becomes a responsive field of particles: it can be pushed by the cursor, spread through scroll, hit by radial waves, and scattered by click explosions before finding its way back.
The project was made entirely through vibe-coding. Rather than drawing up a fixed technical plan, I worked by directing behaviour—asking for changes, testing them in the browser, adjusting the movement, and keeping what felt right. The code became a way of sketching: fast, imprecise at first, then gradually tuned through force, damping, chaos, glow, depth, particle count, and return speed.
The main problem was to keep the figure readable while making it feel unstable. Too little motion, and the shape stayed decorative. Too much, and it became noise. Most of the work was in that middle state, where the particles feel alive but still belong to the form they came from.
The result is a compact no-build WebGL demo with two modes: a full playground for adjusting the behaviour, and a minimal embed version for placing the experiment inside another page. It is a typographic toy, a motion study, and a small record of how an interaction can be designed by prompting, testing, and looking.
Scope
Concept, design, front-end development
Technology
Three.js, Vanilla JavaScript, HTML5 Canvas
Year
2026