NewsletterJoin 2K+ AI designers and PMs on Substack. New teardowns, patterns, and prompts as they drop.
NewsletterJoin 2K+ AI designers and PMs on Substack. New teardowns, patterns, and prompts as they drop.
Csaba Kissi · · Motion & interaction
Kinetics
By Csaba Kissi (Colorion), a searchable catalog of spring-driven motion instead of fixed-duration easing. Browse Interaction & Input, Feedback & State, and Surface & Motion demos, each with live stiffness and damping readouts. Interrupt a spring mid-motion and it keeps integrating from the current velocity. Every effect ships as plain CSS and React with no animation-library dependency, plus an AI prompt for dropping the motion into an app. MIT licensed.
What's interesting
144 spring-driven interaction presets
Copy CSS, React, or an AI prompt from each demo
Interrupt mid-motion and motion stays physically consistent
Prompt your agent
From AI UX Playground: https://aiuxplayground.com/inspirations/kinetics-colorion
Kinetics by Csaba Kissi
By Csaba Kissi (Colorion), a searchable catalog of spring-driven motion instead of fixed-duration easing. Browse Interaction & Input, Feedback & State, and Surface & Motion demos, each with live stiffness and damping readouts. Interrupt a spring mid-motion and it keeps integrating from the current velocity. Every effect ships as plain CSS and React with no animation-library dependency, plus an AI prompt for dropping the motion into an app. MIT licensed.
Use Kinetics for spring motion on our [button | panel | drawer].
Preset: closest match from Interaction & Input or Feedback & State.
Output React + CSS variables for stiffness and damping we can tune in review.
