Getting Started
Components
TweenCommand Palette
Search for a command to run...
TweenSearch for a command to run...
Tween started with a recurring frustration: the distance between a static UI kit and the motion-rich, 3D-aware landing pages that the best products actually ship.
Every few months the same pattern would repeat. A project needed a hero that felt alive — a particle field that reacted to scroll, a typeface that shimmered without stuttering, a 3D object that held up on a phone. The component libraries on hand covered the buttons and the cards and then went silent. So the work fell back to hand-rolling a GSAP timeline, fighting ScrollTrigger pinning, and debugging why a WebGL scene tanked the frame rate on mobile. Days went into one section that users would see for three seconds.
The realization was that this work is reusable. The hard part isn't unique to any one product — it's the same motion engineering, solved well, over and over. It just had never been packaged the way the boring half of the UI had been.
So Tween became that package. Every component is built around modern motion and 3D primitives — Three.js, React Three Fiber, Framer Motion, and GSAP — and engineered so that copy-pasting one doesn't drag in a render-blocking mess. Animations stay on transforms, respect prefers-reduced-motion, and are tuned to hold 60fps on hardware real users carry.
The model is deliberately the shadcn one: you own the code. Nothing is hidden behind a dependency you have to trust and upgrade. You take the component, and it's yours to bend.
The mission is simple: give every team the top 1% of animated components, without the engineering overhead of building them from scratch.