Kinetic Circle
Design animated procedural dot mosaics with radial forms, volumetric depth, expressive palettes, and timeline-driven motion.
Start from this app
Run the CLI. Paste the copied command into your terminal.
Name your project. Choose a name, then let the CLI install the app and its dependencies.
Start building. Open the generated project and make it your own.
Kinetic Circle separates the arrangement of dots from the shape they occupy and the way they move. Concentric rings, sunflower spirals, arms, and arcs define the distribution. A second set of formulas bends that field into circles, flowers, pinches, and vortices. Depth and perspective give it volume.
That separation lets the user change one aspect while keeping the others recognizable. A different distribution can follow the same ripple; a flat design can acquire depth and be inspected with the orientation gizmo. The GPU evaluates movement and projection from the current settings and timeline phase.
Color can describe the field's structure. A radial gradient follows distance from the center, sectors divide it by angle, and spiral color bands combine angle with radius. A depth mode colors the generated relief according to its height. Switching among them changes which part of the geometry is easiest to read, even with the dot positions held still.
The marks also change how the field feels as a surface. Discs, rings, squares, diamonds, and streaks are drawn from different shape formulas in the shader. Enabling glow adds a halo and switches to additive blending, so overlapping marks accumulate brightness. That changes the appearance of dense folds and intersections while preserving the arrangement and movement of the dots.
