Introduction

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.


pnpm dlx shadcn@latest add https://tweenui.dev/r/<component>.json

Why Tween exists

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.

Good design builds trust

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:

"Is this company legit?"
"Who else is using this?"
"Can I trust them with my data?"

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.

What you get

Copy-paste ownership. Components live in your codebase, not behind a dependency. No version churn, no lock-in.
Motion that performs. Transforms-only animation, prefers-reduced-motion respected, engineered to hold 60fps.
A working demo for every component. See exactly how it behaves before you adopt it.
Built on tools you already use. React 19, Tailwind, and the shadcn CLI — nothing exotic.

Read the Story for how Tween started, or head to Installation to add your first component.

This library draws inspiration from shadcn/ui.

Installation

On This Page

Why Tween exists Good design builds trust What you get

Contribute