Kinetics screenshotVisit website

Kinetics

3D & Motion

Freemium

About

Copy spring-physics micro-interactions into CSS or React.

Kinetics is a library of spring-driven micro-interactions for web apps. You copy the CSS or React for a pattern, tune the physics with two numbers instead of a duration, and ship it. Patterns are grouped into interaction and input, feedback and state, and surface and motion, all built for a copy-paste workflow.

Features & use cases

  • Copy motion patterns as CSS or React
  • Tune spring physics with two numbers, not a duration
  • Pick from interaction, feedback and surface patterns
  • Drop micro-interactions into a web app

Who reaches for it

  • Front end developers who want motion with weight instead of fixed durations
  • Product designers adding feedback and state micro-interactions to a web app

Ready to try Kinetics?

Opens kinetics.colorion.co in a new tab.

Visit website

Similar tools

The weekly drop

The best new tools, every week. No spam, unsubscribe anytime.

Alternatives & related

Motion Primitives preview

Motion Primitives

Animated UI components for React, built on Motion.

Stylokit preview

Stylokit

Curated library of UI kits, templates and components for designers and developers.

Generative Loaders preview

Generative Loaders

A set of React loading animations made for generative UI states.

Lenis preview

Lenis

A lightweight smooth-scroll library by Studio Freight.

Shader Gradient preview

Shader Gradient

Create beautiful, moving 3D gradients for your designs.

Theatre.js preview

Theatre.js

A motion-design toolfor the web with a visual editor.

Originkit preview

Originkit

Interactive web components to drop into a build, copy and paste.

UI Store Design preview

UI Store Design

600+ free hand-picked design resources for Figma, Sketch and more.

More in 3D & Motion

See all 64
Momentum Graphics preview

Momentum Graphics

Turns static visuals into motion for social posts, portfolios and presentations, right in the browser.

Pryzm preview

Pryzm

Browser studio for original backgrounds and animated loops, exported ready to use.

Aninix preview

Aninix

Animation editor that turns Figma designs into interactive Lottie animations.

Showreel.design preview

Showreel.design

Curated archive of the best motion design reels from studios and creators, updated weekly.