---
name: "@tweenly"
slug: "tweenly"
description: "Animated React components built on Motion and GSAP. Tweak every prop live, copy the code, and own it."
category: "Animated components"
tags: ["ai", "animation", "audio", "auth", "backgrounds", "blocks", "buttons", "cards", "charts", "forms", "hooks", "loaders", "maps", "media", "navigation", "overlays", "tables", "text-effects", "theming"]
framework: "react"
license: "MIT"
author: "mirukullacode"
website: "https://trytweenly.vercel.app"
github: "https://github.com/mirukullacode/tweenly"
registry: "https://trytweenly.vercel.app/r/registry.json"
pro: false
pro_url: null
github_stars: 3
component_count: 77
generated_at: "2026-10-10T06:32:55.998Z"
---

# @tweenly

Animated React components built on Motion and GSAP. Tweak every prop live, copy the code, and own it.

## Links

- Website: https://trytweenly.vercel.app
- GitHub: https://github.com/mirukullacode/tweenly
- Registry JSON: https://trytweenly.vercel.app/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/tweenly
- This file: https://sh4dcn.vercel.app/md/tweenly.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://trytweenly.vercel.app/r/registry.json
pnpm dlx shadcn@latest add https://trytweenly.vercel.app/r/registry.json
bunx shadcn@latest add https://trytweenly.vercel.app/r/registry.json
# clone the source repo
git clone https://github.com/mirukullacode/tweenly.git
# fetch the raw registry index
curl -s https://trytweenly.vercel.app/r/registry.json
```

## Components (77)

| name | type | description | install |
| --- | --- | --- | --- |
| use-reduced-motion | registry:hook | Returns true when the user prefers reduced motion. | `npx shadcn@latest add https://trytweenly.vercel.app/r/use-reduced-motion.json` |
| fade-in | registry:component | Scroll-triggered fade with direction, distance, easing, scale and blur options. | `npx shadcn@latest add https://trytweenly.vercel.app/r/fade-in.json` |
| text-reveal | registry:component | Word-by-word or character-by-character reveal with blur and stagger. | `npx shadcn@latest add https://trytweenly.vercel.app/r/text-reveal.json` |
| typewriter | registry:component | Types and deletes a list of phrases with a blinking cursor. | `npx shadcn@latest add https://trytweenly.vercel.app/r/typewriter.json` |
| word-rotate | registry:component | Cycles through words with slide, fade, blur or flip transitions. | `npx shadcn@latest add https://trytweenly.vercel.app/r/word-rotate.json` |
| shimmer-text | registry:component | A light band that sweeps across text on a loop. | `npx shadcn@latest add https://trytweenly.vercel.app/r/shimmer-text.json` |
| number-ticker | registry:component | Counts up to a value when scrolled into view, with formatting options. | `npx shadcn@latest add https://trytweenly.vercel.app/r/number-ticker.json` |
| fill-button | registry:component | Hover/focus button with a GSAP clip-path fill sweep. Configurable direction, duration and ease. | `npx shadcn@latest add https://trytweenly.vercel.app/r/fill-button.json` |
| magnetic | registry:component | Wrap anything to make it drift toward the cursor on a spring. | `npx shadcn@latest add https://trytweenly.vercel.app/r/magnetic.json` |
| tilt-card | registry:component | 3D perspective tilt that follows the pointer, with optional glare. | `npx shadcn@latest add https://trytweenly.vercel.app/r/tilt-card.json` |
| spotlight-card | registry:component | Card with a radial spotlight and glowing border that track the cursor. | `npx shadcn@latest add https://trytweenly.vercel.app/r/spotlight-card.json` |
| stagger | registry:component | Reveals its children one after another as they enter the viewport. | `npx shadcn@latest add https://trytweenly.vercel.app/r/stagger.json` |
| marquee | registry:component | Infinite, seamless scrolling row or column of content. | `npx shadcn@latest add https://trytweenly.vercel.app/r/marquee.json` |
| sticky-cards | registry:component | A stack of same-size cards pinned on scroll. The front card lifts away, then the next, one by one. | `npx shadcn@latest add https://trytweenly.vercel.app/r/sticky-cards.json` |
| scroll-text-reveal | registry:component | Pins the section and reveals text word by word as you scroll; the page resumes once the reveal completes. | `npx shadcn@latest add https://trytweenly.vercel.app/r/scroll-text-reveal.json` |
| horizontal-scroll | registry:component | Pins a row of images and scrolls it sideways with the page, then releases to normal scroll. | `npx shadcn@latest add https://trytweenly.vercel.app/r/horizontal-scroll.json` |
| image-reveal | registry:component | Images fly in from their own direction as they scroll into view. | `npx shadcn@latest add https://trytweenly.vercel.app/r/image-reveal.json` |
| ascii-image | registry:component | Renders any image as ASCII art on a canvas, with a glittering pixel trail under the cursor. | `npx shadcn@latest add https://trytweenly.vercel.app/r/ascii-image.json` |
| hover-media | registry:component | Inline keyword that reveals a floating image or video that follows the cursor. | `npx shadcn@latest add https://trytweenly.vercel.app/r/hover-media.json` |
| cursor | registry:component | Custom cursors: ring, dot, blend, crosshair, sparkle trail, sunflower and rose. | `npx shadcn@latest add https://trytweenly.vercel.app/r/cursor.json` |
| loader | registry:component | Three loading animations: bouncing dots, equalizer bars and an orbit spinner. | `npx shadcn@latest add https://trytweenly.vercel.app/r/loader.json` |
| download-button | registry:component | Button that morphs from Download to a live progress fill and a drawn check mark. | `npx shadcn@latest add https://trytweenly.vercel.app/r/download-button.json` |
| image-fan | registry:component | One image rises from below, then the rest slide out from under it into an overlapping fan. | `npx shadcn@latest add https://trytweenly.vercel.app/r/image-fan.json` |
| image-arc | registry:component | Images on a half-circle wheel that turns on its own or with the scroll. | `npx shadcn@latest add https://trytweenly.vercel.app/r/image-arc.json` |
| expand-gallery | registry:component | A row of small thumbnails where each one grows large in turn as you scroll. | `npx shadcn@latest add https://trytweenly.vercel.app/r/expand-gallery.json` |
| scroll-focus | registry:component | A column of images where the one in the center grows, with a title list that stays in sync. | `npx shadcn@latest add https://trytweenly.vercel.app/r/scroll-focus.json` |
| shine-button | registry:component | Pill button with a light beam circling its edge and a soft sheen on hover. | `npx shadcn@latest add https://trytweenly.vercel.app/r/shine-button.json` |
| ripple-button | registry:component | Material-style ripples that expand from the exact point you press. | `npx shadcn@latest add https://trytweenly.vercel.app/r/ripple-button.json` |
| hold-button | registry:component | Press and hold to confirm destructive actions. A fill sweeps across while held. | `npx shadcn@latest add https://trytweenly.vercel.app/r/hold-button.json` |
| slide-button | registry:component | Slide-to-confirm track with a draggable knob, shimmering label and keyboard support. | `npx shadcn@latest add https://trytweenly.vercel.app/r/slide-button.json` |
| like-button | registry:component | Heart toggle with a spring pop, ring burst, particles and a rolling counter. | `npx shadcn@latest add https://trytweenly.vercel.app/r/like-button.json` |
| segmented-control | registry:component | Tabs with a springy pill that slides behind the active option, with arrow-key navigation. | `npx shadcn@latest add https://trytweenly.vercel.app/r/segmented-control.json` |
| number-stepper | registry:component | Minus / plus stepper whose digits roll individually, with hold-to-repeat and a shake at the limits. | `npx shadcn@latest add https://trytweenly.vercel.app/r/number-stepper.json` |
| elastic-switch | registry:component | Toggle whose knob stretches while pressed and springs across with overshoot, with optional sun / moon icons. | `npx shadcn@latest add https://trytweenly.vercel.app/r/elastic-switch.json` |
| expand-input | registry:component | A pill button that morphs into an email field, then a spinner and a drawn check on submit. | `npx shadcn@latest add https://trytweenly.vercel.app/r/expand-input.json` |
| rating | registry:component | Star rating with a sweeping hover fill, half stars, and a springy pop with sparkles on select. | `npx shadcn@latest add https://trytweenly.vercel.app/r/rating.json` |
| navbar | registry:component | Five minimal, animated navigation bars: glass pill, scroll morph, sliding underline, dynamic island mega-menu and full-screen overlay. | `npx shadcn@latest add https://trytweenly.vercel.app/r/navbar.json` |
| table-of-contents | registry:component | Scroll-synced "On This Page" sidebar with a plane that flies along the heading trail, a sliding rail, or a spotlight list. | `npx shadcn@latest add https://trytweenly.vercel.app/r/table-of-contents.json` |
| otp-input | registry:component | Verification code input with springy digits, a gliding focus ring and animated success and error states. | `npx shadcn@latest add https://trytweenly.vercel.app/r/otp-input.json` |
| chart-line | registry:component | Multi-series line and area chart from plain row data, with draw-in lines, halftone fills, a snapping crosshair tooltip and a toggleable legend. | `npx shadcn@latest add https://trytweenly.vercel.app/r/chart-line.json` |
| chart-progress | registry:component | Progress toward a real target: a wavy, grainy fill over a hatched remainder, with a thermometer marker, quota line and stacked segments. | `npx shadcn@latest add https://trytweenly.vercel.app/r/chart-progress.json` |
| chart-radial | registry:component | Donut, pie or gauge from your rows with sweep-in slices, legend toggling with re-flow, hover explode and a live center total. | `npx shadcn@latest add https://trytweenly.vercel.app/r/chart-radial.json` |
| chart-dots | registry:component | Dot matrix of filled versus hatched units with a partial last dot, spring wave in fill order, and a huge count-up figure. | `npx shadcn@latest add https://trytweenly.vercel.app/r/chart-dots.json` |
| preloader | registry:component | Full-screen loader with a counting percentage and rotating quotes that reveals the page at 100%. | `npx shadcn@latest add https://trytweenly.vercel.app/r/preloader.json` |
| chart-kit | registry:lib | Shared theme, scales, formatters, textures, card, legend and tooltip used by tweenly charts. | `npx shadcn@latest add https://trytweenly.vercel.app/r/chart-kit.json` |
| chart-bar | registry:component | Grouped or stacked bar chart, vertical or horizontal, with springy staggered growth, textured series, hover highlight and a toggleable legend. | `npx shadcn@latest add https://trytweenly.vercel.app/r/chart-bar.json` |
| chart-rings | registry:component | Concentric activity-style progress rings with per-row goals, springy staggered fills, counting values and second-lap overshoot. | `npx shadcn@latest add https://trytweenly.vercel.app/r/chart-rings.json` |
| chart-radar | registry:component | Spider chart comparing textured series across axes, with a drawn-in grid, polygons springing from the center and axis tooltips. | `npx shadcn@latest add https://trytweenly.vercel.app/r/chart-radar.json` |
| chart-kpi | registry:component | Stat card with a count-up headline, delta pill, halftone sparkline with scrubbing, and an optional goal bar. | `npx shadcn@latest add https://trytweenly.vercel.app/r/chart-kpi.json` |
| chart-heatmap | registry:component | GitHub-style contribution calendar with hatched empty days, a diagonal reveal wave, and hover tooltips. | `npx shadcn@latest add https://trytweenly.vercel.app/r/chart-heatmap.json` |
| confetti | registry:component | High-performance canvas confetti with burst, cannons, fireworks, rain and stream presets. Includes confetti(), useConfetti, ConfettiButton and Confetti. | `npx shadcn@latest add https://trytweenly.vercel.app/r/confetti.json` |
| faq | registry:component | Animated FAQ accordion in four styles (minimal, cards, numbered, split) with height-auto reveals, a live filter and keyboard navigation. | `npx shadcn@latest add https://trytweenly.vercel.app/r/faq.json` |
| footer | registry:component | Four premium, minimal animated footers: sticky reveal, giant kinetic wordmark, classic columns with newsletter, and an expanding curtain panel with a magnetic … | `npx shadcn@latest add https://trytweenly.vercel.app/r/footer.json` |
| notification-feed | registry:component | Layout-animated notifications as a stack, inbox list, dynamic island or timeline cards, with swipe to dismiss, pausable timers and a useNotifications hook. | `npx shadcn@latest add https://trytweenly.vercel.app/r/notification-feed.json` |
| page-loader | registry:component | Website intro loader orchestrated with GSAP timelines, with stairs, odometer counter, greeting words, iris and blinds exits. | `npx shadcn@latest add https://trytweenly.vercel.app/r/page-loader.json` |
| page-transition | registry:component | App Router page transitions: a provider, TransitionLink and usePageTransition hook with curtain, stairs, iris, slide and blinds variants. | `npx shadcn@latest add https://trytweenly.vercel.app/r/page-transition.json` |
| swipe-row | registry:component | Swipeable list rows with iOS-style reveal actions, full-swipe commits and floating cards, with layout-animated removal. | `npx shadcn@latest add https://trytweenly.vercel.app/r/swipe-row.json` |
| envelope | registry:component | Animated envelope UI: a composer where the letter folds into the envelope, gets sealed and flies off, plus a presentational envelope that opens to reveal any c… | `npx shadcn@latest add https://trytweenly.vercel.app/r/envelope.json` |
| not-found | registry:component | Five playful 404 sections with a giant status code hero: cursor-following eyeball, flashlight reveal, throwable tiles, orbiting moon and a decoding error log. | `npx shadcn@latest add https://trytweenly.vercel.app/r/not-found.json` |
| product-card | registry:component | 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. | `npx shadcn@latest add https://trytweenly.vercel.app/r/product-card.json` |
| stamp-card | registry:component | Collectible postage stamp with perforated edges, 3D tilt and glare, an inked postmark animation and a fanned StampSheet. | `npx shadcn@latest add https://trytweenly.vercel.app/r/stamp-card.json` |
| arc-steps | registry:component | Pinned "How it works" section: a marker travels along a half circle from step to step on scroll, the arc draws in and the section flips to each step's solid co… | `npx shadcn@latest add https://trytweenly.vercel.app/r/arc-steps.json` |
| auth | registry:component | Sign in and sign up sections built on shadcn inputs: a split onboarding panel, a spotlight card and a multi-step flow with code verification, with an animated … | `npx shadcn@latest add https://trytweenly.vercel.app/r/auth.json` |
| curved-carousel | registry:component | Posters on a 3D cylinder. The first image starts full-bleed and shrinks into the ring, then scrolling (or drag, or auto rotation) turns the cylinder card by ca… | `npx shadcn@latest add https://trytweenly.vercel.app/r/curved-carousel.json` |
| hero-background | registry:component | Interactive canvas backgrounds for hero sections: dots, warping grid, constellation particles, waves, flow field and pixel mosaic, all reacting to the cursor. | `npx shadcn@latest add https://trytweenly.vercel.app/r/hero-background.json` |
| smooth-scroll | registry:component | Lenis smooth scrolling synced with GSAP ScrollTrigger, on the window or inside any scroll container, with a useLenis() hook. | `npx shadcn@latest add https://trytweenly.vercel.app/r/smooth-scroll.json` |
| timeline-scroll | registry:component | Minimal horizontal timeline of years and milestones that pins and scrolls sideways with the page, or drags with inertia. The centered year lights up. | `npx shadcn@latest add https://trytweenly.vercel.app/r/timeline-scroll.json` |
| ai-input | registry:component | AI prompt box with auto-growing textarea, cycling placeholders, file chips, model picker, toggle chips and a send button that morphs into stop. | `npx shadcn@latest add https://trytweenly.vercel.app/r/ai-input.json` |
| ai-recorder | registry:component | Voice recorder pill that morphs into a live waveform with timer, pause, cancel and stop, then a scrubbable playback row. | `npx shadcn@latest add https://trytweenly.vercel.app/r/ai-recorder.json` |
| ai-thinking | registry:component | AI loading states: shimmer text, bouncing dots, glowing orb, collapsible reasoning steps and simulated token streaming. | `npx shadcn@latest add https://trytweenly.vercel.app/r/ai-thinking.json` |
| ai-voice | registry:component | Voice activity visualizer with orb, bars, wave and dots variants, driven by the microphone, simulated speech or a controlled level. | `npx shadcn@latest add https://trytweenly.vercel.app/r/ai-voice.json` |
| banner | registry:component | Announcement banner: dismissible sliding bar, hero pill, scrolling ticker or shimmer bar, with remembered dismissal. | `npx shadcn@latest add https://trytweenly.vercel.app/r/banner.json` |
| dock | registry:component | macOS-style dock with pointer-distance magnification, spring tooltips, active dots, badges and click bounce. | `npx shadcn@latest add https://trytweenly.vercel.app/r/dock.json` |
| orbiting-circles | registry:component | Icons orbiting a center on circular paths with CSS transforms; layer rings for integration graphics. | `npx shadcn@latest add https://trytweenly.vercel.app/r/orbiting-circles.json` |
| tweet-card | registry:component | X-style post cards from data with highlighted mentions, media grid, compact stats, a like pop and a scrolling testimonial wall. | `npx shadcn@latest add https://trytweenly.vercel.app/r/tweet-card.json` |
| tweenly-font | registry:font | Barlow Condensed, the display face tweenly uses for big numerals and wordmarks. | `npx shadcn@latest add https://trytweenly.vercel.app/r/tweenly-font.json` |
| tweenly-theme | registry:theme | The brand and panel color tokens (light and dark) plus the display font, so components look the same in your app as in the docs. | `npx shadcn@latest add https://trytweenly.vercel.app/r/tweenly-theme.json` |

## For AI agents

```text
You are adding components from @tweenly to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/tweenly.md) for the component list.
2. Fetch the machine-readable index: https://trytweenly.vercel.app/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: tweenly).
```