Kinetic

Kinetic - Studies in Motion

Kinetic is an open-source collection of interactive kinetic art studies: pendulum waves, Möbius strips, rolling polyhedra, Chladni patterns, a gravity well, a light-dispersing prism and more. Each study is driven by a handful of simple rules and rendered live in the browser.

Every study animates continuously and exposes a parameter you can tune. Its detail page lets you pause, scrub the speed and toggle construction guides that reveal the geometry behind the motion.

Key Contributions:

• Two renderers, one component: A 2D canvas renderer draws every study by default, and a Three.js renderer takes over on detail pages for the spatial ones. The collection grid never opens a WebGL context, which keeps the browser under its GL context cap.
• Math separate from drawing: Geometry lives in its own modules and is unit-tested with Vitest independently of any canvas, so the test suite runs without a browser.
• Physically faithful studies: The prism traces rays with a per-wavelength refractive index (Cauchy's equation and Snell's law), and the gravity well computes orbits so that scrubbing, resetting and the 2D and 3D views always agree.
• Deterministic simulations: The flocking study uses a seeded, fixed-step simulation, so resetting always restores the same starting arrangement.
• Content as data: Studies are a plain array. Routing, the collection grid, category filters and counts all derive from it.

Tech Stack:

• App: TanStack Start, React 19, TypeScript, Three.js with React Three Fiber, Tailwind CSS v4, shadcn/ui
• Build and deploy: Vite, prerendered to static HTML and served as static assets on Cloudflare Workers