Kinetics
153 spring-physics micro-interactions with copy-paste CSS and React
Kinetics is a single-page gallery of 153 interface animations built on spring physics instead of fixed-duration easing. Every effect has a live demo, an exposed stiffness/damping readout you can tune in the browser, and three copy formats: plain CSS, a React component, and an AI prompt. It is not a package you install — you take the code for the one effect you need. Built with Astro by ckissi; the repo has 480 stars and no LICENSE file.
Reach for Kinetics when a user asks for one specific feel — a magnetic button, a rubber-band slider, an odometer counter — and you do not want to add Motion or GSAP as a dependency; most entries are pure CSS with a cubic-bezier approximation of a spring. Prefer it over Magic UI or Aceternity when the target project has no animation runtime, and prefer Motion when you need interruptible, physically-correct springs rather than a baked curve. Two cautions: the repo carries no LICENSE file, so treat reuse as legally unsettled and confirm with the user before shipping to a commercial product; and the effects are demo snippets, not a versioned API — you own the code once you paste it.
Why it is here. Nearly every copy-paste animation gallery ships fixed-duration easing and calls it spring; Kinetics actually exposes stiffness and damping per effect so you can feel the physics before you take the code. The volume (153) and the CSS-first bias make it unusually useful in projects that refuse a JS animation dependency.
- 153 tunable effects
- stiffness/damping shown per demo
- CSS, React and AI-prompt copy formats
- no animation runtime required
- no LICENSE file in the repo
Verified 2026-08-15. HTTP 200. https://kinetics.colorion.co/ (200, full effect list read), https://github.com/ckissi/kinetics, GitHub API repos/ckissi/kinetics (stars 480, license null, pushed_at 2026-08-14), https://kinetics.colorion.co/llms.txt (404)








