Getting Started
Components
TweenCommand Palette
Search for a command to run...
TweenSearch for a command to run...
Top 1% animated React components and landing pages built with Three.js, React Three Fiber, Framer Motion, and GSAP.
Tween is a curated library of animated React components and landing pages that you copy and paste straight into your app.
There is no package to install and no runtime to lock into. You run one command, the source lands in your project, and from that moment it is your code — edit it, restyle it, or rip it apart. Tween is built on Three.js, React Three Fiber, Framer Motion, and GSAP, so every component arrives with production-grade motion already wired up.
Most component libraries solve the easy half of the interface — the buttons, inputs, and cards. They stop exactly where the experience starts to matter: the hero that has to land in the first second, the scroll sequence that earns attention, the 3D scene that has to stay at 60fps on a mid-range phone.
That half is hard for a reason. Doing it well means knowing GSAP timelines, ScrollTrigger pinning, the React render pitfalls that quietly drop frames, and how to keep a WebGL scene from blocking paint. Most teams don't have the time to learn all of that for one landing page — so they ship something static and hope the copy carries it.
Tween closes that gap. Each component is the version you would have built if you had a motion specialist on the team and a week to spend on it.
Design is one of the first signals a visitor uses to decide whether to trust you with their attention — and their credit card. They're asking:
Sloppy, lifeless design answers those questions the wrong way: it reads as rushed and unfinished. Polished, motion-rich design answers them the right way — it signals that the same care went into everything behind the page.
Tween's mission is to give that polish to anyone shipping a landing page or product surface, without forcing them to wire up a 3D scene or an animation timeline from zero.
prefers-reduced-motion respected, engineered to hold 60fps.Read the Story for how Tween started, or head to Installation to add your first component.
This library draws inspiration from shadcn/ui.