# tweenly

> The motion layer for shadcn/ui. Beautifully crafted animated components. Tweak them live, copy the code, and own it. 60 animated React components (React 19, Tailwind CSS v4, motion) distributed as a shadcn/ui registry.

Each component is a single TypeScript file with typed props and sensible defaults. Every component page has a live playground, a props table and the full source.

## Docs

- [Introduction](https://trytweenly.vercel.app/docs): What tweenly is, the design principles and the full component list.
- [Installation](https://trytweenly.vercel.app/docs/installation): Set up shadcn/ui, add components with the CLI and configure the @tweenly registry namespace.
- [Changelog](https://trytweenly.vercel.app/changelog)
- [Full reference for LLMs](https://trytweenly.vercel.app/llms-full.txt): every component with install command, props and a usage example.

## Installation

tweenly is a shadcn/ui registry. Components are copied into your project (no runtime package). Requires a project already set up with shadcn/ui and Tailwind CSS.

tweenly is listed in the shadcn registry directory, so the CLI resolves the `@tweenly` namespace with no setup:

```bash
npx shadcn@latest add @tweenly/<slug>
```

The full registry URL also works:

```bash
npx shadcn@latest add https://trytweenly.vercel.app/r/<slug>.json
```

For AI agents, the shadcn MCP server can browse and install tweenly components. Run `npx shadcn@latest mcp init --client claude` (or `cursor`, `vscode`, `codex`) and add the namespace to `components.json` so the server can search it:

```json
{
  "registries": {
    "@tweenly": "https://trytweenly.vercel.app/r/{name}.json"
  }
}
```

Components land in `@/components/<slug>` and their npm dependencies (for example `motion`) are installed automatically.

## Components

### Text

- [Fade In](https://trytweenly.vercel.app/docs/components/fade-in): Scroll-triggered reveal with direction, distance, easing, scale and blur.
- [Text Reveal](https://trytweenly.vercel.app/docs/components/text-reveal): Word-by-word or character-by-character reveal with blur and stagger.
- [Typewriter](https://trytweenly.vercel.app/docs/components/typewriter): Types and deletes a list of phrases with a blinking cursor.
- [Word Rotate](https://trytweenly.vercel.app/docs/components/word-rotate): Cycles through words with slide, fade, blur or flip transitions.
- [Shimmer Text](https://trytweenly.vercel.app/docs/components/shimmer-text): A band of light that sweeps across text on a loop.
- [Number Ticker](https://trytweenly.vercel.app/docs/components/number-ticker): Counts up to a value when scrolled into view.

### Buttons

- [Shine Button](https://trytweenly.vercel.app/docs/components/shine-button): Pill button with a light beam circling its edge and a soft sheen on hover.
- [Ripple Button](https://trytweenly.vercel.app/docs/components/ripple-button): Material-style ripples that expand from the exact point you press.
- [Hold Button](https://trytweenly.vercel.app/docs/components/hold-button): Press and hold to confirm destructive actions. A fill sweeps across while held.
- [Slide Button](https://trytweenly.vercel.app/docs/components/slide-button): Slide-to-confirm track with a draggable knob, shimmering label and keyboard support.
- [Like Button](https://trytweenly.vercel.app/docs/components/like-button): Heart toggle with a spring pop, ring burst, particles and a rolling counter.
- [Segmented Control](https://trytweenly.vercel.app/docs/components/segmented-control): Tabs with a springy pill that slides behind the active option, with arrow-key navigation.
- [Number Stepper](https://trytweenly.vercel.app/docs/components/number-stepper): Minus / plus stepper whose digits roll individually, with hold-to-repeat and a shake at the limits.
- [Elastic Switch](https://trytweenly.vercel.app/docs/components/elastic-switch): Toggle whose knob stretches while pressed and springs across with overshoot, with optional sun / moon icons.
- [Expand Input](https://trytweenly.vercel.app/docs/components/expand-input): A pill button that morphs into an email field, then a spinner and a drawn check on submit.
- [Rating](https://trytweenly.vercel.app/docs/components/rating): Star rating with a sweeping hover fill, half stars, and a springy pop with sparkles on select.

### Interactive

- [Fill Button](https://trytweenly.vercel.app/docs/components/fill-button): Button with a GSAP clip-path fill that sweeps in on hover and focus.
- [Magnetic](https://trytweenly.vercel.app/docs/components/magnetic): Wrap anything to make it drift toward the cursor on a spring.
- [Tilt Card](https://trytweenly.vercel.app/docs/components/tilt-card): 3D perspective tilt that follows the pointer, with optional glare.
- [Spotlight Card](https://trytweenly.vercel.app/docs/components/spotlight-card): Card with a radial spotlight and glowing border that track the cursor.
- [Cursor](https://trytweenly.vercel.app/docs/components/cursor): Custom cursors: ring, dot, blend, crosshair, sparkle trail, and sunflower or rose that shed petals.
- [Swipe Row](https://trytweenly.vercel.app/docs/components/swipe-row): Swipeable list rows with iOS-style reveal actions, full-swipe commits and floating cards. Removed rows fly off and the rest glide into place.

### Navigation

- [Navbar](https://trytweenly.vercel.app/docs/components/navbar): Five minimal, animated navigation bars: glass pill, scroll morph, sliding underline, dynamic island mega-menu and full-screen overlay.
- [Table of Contents](https://trytweenly.vercel.app/docs/components/table-of-contents): Scroll-synced "On This Page" sidebar with a plane that flies along the heading trail, a sliding rail, or a spotlight list.
- [Page Transition](https://trytweenly.vercel.app/docs/components/page-transition): Route transitions for the App Router: a provider covers the page, navigates, waits for the new route to render, then reveals it. Curtain, stairs, iris from the click point, card-deck slide and blinds.

### Forms

- [OTP Input](https://trytweenly.vercel.app/docs/components/otp-input): Verification code input with springy digits, a gliding focus ring and animated success and error states.
- [Envelope](https://trytweenly.vercel.app/docs/components/envelope): A send-a-message form as a letter: it folds into the envelope, the flap closes, a seal stamps on and the envelope flies off.

### Feedback

- [Loader](https://trytweenly.vercel.app/docs/components/loader): Three loading animations: bouncing dots, equalizer bars and an orbit spinner.
- [Download Button](https://trytweenly.vercel.app/docs/components/download-button): Button that morphs from Download to a live progress fill and a drawn check mark.
- [Preloader](https://trytweenly.vercel.app/docs/components/preloader): Full-screen loader with a counting percentage and rotating quotes that reveals the page at 100%.
- [Confetti](https://trytweenly.vercel.app/docs/components/confetti): High-performance canvas confetti with bursts, cannons, fireworks, rain and streams. Ships an imperative confetti() function, a useConfetti hook, a button and a declarative component.
- [Page Loader](https://trytweenly.vercel.app/docs/components/page-loader): Website intro loader orchestrated with GSAP timelines. Five exits: staggered stairs, rolling odometer, flashing greetings with a curved sweep, an iris that opens from a tick dial, and blinds.
- [Notification Feed](https://trytweenly.vercel.app/docs/components/notification-feed): Layout-animated notifications as a Sonner-style stack, inbox list, dynamic island or timeline cards, with swipe to dismiss and pausable timers.

### Charts

- [Chart Line](https://trytweenly.vercel.app/docs/components/chart-line): Multi-series line and area chart from plain row data, with draw-in lines, halftone fills, a snapping crosshair tooltip and a toggleable legend.
- [Chart Bar](https://trytweenly.vercel.app/docs/components/chart-bar): Grouped or stacked bar chart, vertical or horizontal, with springy staggered growth, textured series, hover highlight and a toggleable legend.
- [Chart Radial](https://trytweenly.vercel.app/docs/components/chart-radial): Donut, pie or gauge from your rows. Slices sweep in one after another, re-flow when toggled from the legend and pop out on hover.
- [Chart Rings](https://trytweenly.vercel.app/docs/components/chart-rings): Concentric progress rings against per-row goals. Rings fill with a springy stagger, numbers count up and overshoot draws a second lap.
- [Chart Radar](https://trytweenly.vercel.app/docs/components/chart-radar): Spider chart comparing series across axes. The grid draws in, polygons spring out from the center and hovering an axis lists every value.
- [Chart KPI](https://trytweenly.vercel.app/docs/components/chart-kpi): Stat card with a count-up headline, delta pill, halftone sparkline with scrubbing, and an optional goal bar.
- [Chart Heatmap](https://trytweenly.vercel.app/docs/components/chart-heatmap): GitHub-style contribution calendar with hatched empty days, a diagonal reveal wave, and hover tooltips.
- [Chart Progress](https://trytweenly.vercel.app/docs/components/chart-progress): Progress toward a real target: a wavy, grainy fill over a hatched remainder, with a thermometer marker, quota line and stacked segments.
- [Chart Dots](https://trytweenly.vercel.app/docs/components/chart-dots): Dot matrix of filled versus hatched units with a partial last dot, spring wave in fill order, and a huge count-up figure.

### Media

- [ASCII Image](https://trytweenly.vercel.app/docs/components/ascii-image): Renders any image as ASCII art, with a glittering pixel trail under the cursor.
- [Hover Media](https://trytweenly.vercel.app/docs/components/hover-media): Inline keyword that reveals a floating image or video following the cursor.
- [Image Fan](https://trytweenly.vercel.app/docs/components/image-fan): One image rises from below, then the rest slide out from under it into an overlapping fan.
- [Image Arc](https://trytweenly.vercel.app/docs/components/image-arc): Images on a half-circle wheel that turns on its own or with the scroll.

### Scroll

- [Scroll Text Reveal](https://trytweenly.vercel.app/docs/components/scroll-text-reveal): Pins the section and reveals text as you scroll. The page resumes once the reveal completes.
- [Horizontal Scroll](https://trytweenly.vercel.app/docs/components/horizontal-scroll): Pins a row of images and scrolls it sideways with the page, then releases to normal scroll.
- [Image Reveal](https://trytweenly.vercel.app/docs/components/image-reveal): Images fly in from their own direction as they scroll into view.
- [Expand Gallery](https://trytweenly.vercel.app/docs/components/expand-gallery): A row of small thumbnails where each one grows large in turn as you scroll.
- [Scroll Focus](https://trytweenly.vercel.app/docs/components/scroll-focus): A column of images where the one in the center grows, with a title list that stays in sync.
- [Sticky Cards](https://trytweenly.vercel.app/docs/components/sticky-cards): A stack of same-size cards pinned on scroll. The front card lifts away, then the next, one by one.

### Layout

- [Stagger](https://trytweenly.vercel.app/docs/components/stagger): Reveals its children one after another as they enter the viewport.
- [Marquee](https://trytweenly.vercel.app/docs/components/marquee): Infinite, seamless scrolling row or column of content.

### Cards

- [Product Card](https://trytweenly.vercel.app/docs/components/product-card): Full-bleed product card with a swipeable image carousel, glass pills, rolling price and an add-to-cart button that morphs into a quantity stepper.
- [Stamp Card](https://trytweenly.vercel.app/docs/components/stamp-card): Collectible postage stamp with real perforated edges, 3D tilt and glare, and an inked postmark that stamps down on click.
- [Envelope Reveal](https://trytweenly.vercel.app/docs/components/envelope-reveal): A sealed envelope that opens on click, hover or scroll: the seal pops, the flap swings open and the letter slides out and unfolds.

### Sections

- [Footer](https://trytweenly.vercel.app/docs/components/footer): Four premium, minimal footers: a sticky reveal uncovered as the page scrolls away, a giant kinetic wordmark, classic columns with a newsletter, and a curtain panel that expands to full bleed with a magnetic CTA.
- [FAQ](https://trytweenly.vercel.app/docs/components/faq): Animated FAQ accordion in four styles, with height-auto reveals, a live filter that collapses non-matching items and full keyboard support.
- [404](https://trytweenly.vercel.app/docs/components/not-found): Five playful 404 sections with a giant status code as the hero: a cursor-following eyeball, a flashlight in a dark room, throwable digit tiles, an orbiting moon and a decoding error log.

## Optional

- [Source code](https://github.com/mirukullacode/tweenly)
- [Registry index](https://trytweenly.vercel.app/r/registry.json)