pah.moi

toroid.top

The viral balls-in-rings genre turned into a studio. One self-contained HTML file that is sandbox, level editor, eighteen-instrument synth and video recorder at once.

Open toroid.top · All projects

Type: Generative Bouncing Instrument / Single Page Application (SPA)
Domain: Physics Simulation / Web Audio

Purpose & Origins

toroid.top grew out of the wave of hypnotic physics-simulation clips on short-form feeds: balls escaping rotating rings where every impact lands as a musical note. Rather than watching a prerecorded loop, users can conduct the chaos directly, spawning balls into concentric gauntlets, spike crowns, bumpers, spinners, portals and gravity wells. A built-in level editor supports custom-drawn arenas and SVG path import.

Architecture & Technology

The entire application is one self-contained HTML file, built with vanilla JavaScript, HTML and CSS. There are no frameworks, third-party libraries, external assets or runtime network dependencies. A custom physics engine runs at a fixed 120 steps per second, using continuous collision detection for fast-moving balls. Canvas 2D draws the scene, with optional WebGL shaders providing bloom, trails and chromatic effects. Rendering follows the display independently of the simulation.

Eighteen collision instruments, including temple bells, kalimba, lasers, glass and tuned percussion, are synthesized live through the Web Audio API without recorded samples. Harmonic checks, contact deduplication and bounded voice and output levels keep dense collisions from turning into uncontrolled noise. Seeded generation and JSON snapshots support saving, restoring and sharing scenes.

Version 2.0 adds Randomize Undo, local scene favourites and portrait, square or landscape export framing. PNG images, animated GIFs and video with synchronized audio can be captured directly in the browser, with MediaRecorder handling supported video formats.

Scope & Uniqueness

The viral clips are content to watch. toroid.top is the studio for making them: sandbox, instrument, level editor and recorder in one portable file. It also takes the genre's visual intensity seriously, with an upfront photosensitivity, motion and sound warning, plus a lockable Comfort Mode. Tucked inside is a hidden wireframe torus arena, because of a certain theory about a donut-shaped universe.

Screenshots

The toroid.top 2.0 warning gate, the version printed beside the wordmark: a severe photosensitivity, motion and sound warning, an acknowledgement checkbox, and the choice between full effects and Comfort Mode A twelve-layer Many Rings gauntlet on toroid.top in the Cyberpunk Neon theme, a crowd of balls loose in the middle and a chain of several hundred impacts A Spike Crown arena on toroid.top with the Arena panel open on its obstacle presets: Clear, Spike Crown, Pinball bumpers, Spinners, Prism Run, Portals and Mixed Linked portals and a gravity well on toroid.top, with the Visuals panel open on Effects: bloom, motion trails and the WebGL chromatic split The toroid.top Level Builder: hand-drawn walls around the ring, the draw, gravity well, spawn point, ring and obstacle canvas tools, and the SVG path import box The toroid.top Sound panel: eighteen distinct collision instruments with Kalimba chosen, the volume at 80 per cent, and the output meter reading quiet The toroid.top Export dialog on its Image tab: the current view, portrait, square and landscape framing, a composition preview, the Save PNG and Copy frame controls, and the Video, GIF and State tabs beside them The hidden wireframe torus arena on toroid.top with the Play panel open on Saved, holding two favourite scenes kept on the device