160+ copy-paste React components for motion, transitions and UI effects — morphing buttons, 3D carousels, loaders and chart animations.
ReactAnimationComponents+1
amicro.vercel.app
Visitopens in a new tab
Colorion
kinetics.colorion.co
Kinetics is a library of 153 spring-driven micro-interactions — tune the physics, then copy the CSS, the React, or an AI prompt.
What is Colorion?
Kinetics replaces fixed-duration easing with interface motion that has weight, built on spring physics instead of timed curves. You tune stiffness, damping, and mass in an interactive editor, then copy ready-to-use CSS, React code, or a ready-made AI prompt and drop the motion straight into your project. It comes from the Colorion family of color and CSS tools.
Best for
- Micro-interactions with real spring physics
- Copying production-ready CSS or React motion
- Natural-feeling animation beyond fixed easing
Key features
- 153 spring-driven interactions
- Tunable stiffness, damping, and mass controls
- Copy as CSS, React code, or an AI prompt
- Physics-based motion instead of duration easing
Related resources
25 ready-made animation templates for showcasing designs — drop in your images or videos, tweak the scene, and export MP4 or WebM in your browser.
AnimationPrototypingWeb
animos.app
A border-beam animation for web UI — a light beam traveling around element borders, installable as the border-beam npm package.
AnimationWebOpen Source
beam.jakubantalik.com