# Tween UI

> GSAP & CSS animated components for React. Copy the source, own the animation.

## Overview

- [Components](https://tween-ui.vercel.app/raw/components.md): GSAP & CSS animated components for React. Copy the source, own the animation.

## Installation

- [Setup Guide](https://tween-ui.vercel.app/raw/installation/setup-guide.md): Install any Tween UI component by name through the @tween-ui registry.

## Components

- [Auth Modal](https://tween-ui.vercel.app/raw/component/auth-modal.md): A sign-in dialog that fades the backdrop, then scales the panel in with staggered content.
- [Avatar Reveal](https://tween-ui.vercel.app/raw/component/avatar-reveal.md): Overlapping avatars that pop in with an elastic blur, then the caption slides in from the right.
- [FAQ Accordion](https://tween-ui.vercel.app/raw/component/faq-accordion.md): A single-open accordion that reveals its answer line by line as it expands.
- [Flip Card](https://tween-ui.vercel.app/raw/component/flip-card.md): A card that flips in 3D on hover to reveal details, features, and a CTA.
- [Glow Button](https://tween-ui.vercel.app/raw/component/glow-button.md): A pill button floating over a soft, colorful glow that sharpens on hover.
- [Icon Trail Button](https://tween-ui.vercel.app/raw/component/icon-trail-button.md): A pill button whose icon slides open into a staggered chevron trail on hover and focus.
- [Image Fan Slider](https://tween-ui.vercel.app/raw/component/image-fan-slider.md): A fanned stack of images that auto-advances around a sharp center.
- [Logo Cycle](https://tween-ui.vercel.app/raw/component/logo-cycle.md): A logo row that swaps groups with a staggered blur-slide.
- [Logo Orbit](https://tween-ui.vercel.app/raw/component/logo-orbit.md): Logos spaced evenly around a ring that rotates while each stays upright.
- [Logo Wave](https://tween-ui.vercel.app/raw/component/logo-wave.md): An infinite logo strip whose center mark rises and scales into an arc.
- [Morphing Text](https://tween-ui.vercel.app/raw/component/morphing-text.md): A headline whose last word melts into the next with a gooey blur morph.
- [Number Counter](https://tween-ui.vercel.app/raw/component/number-counter.md): Digits that count up once when the number scrolls into view.
- [Shiny Button](https://tween-ui.vercel.app/raw/component/shiny-button.md): A pill button with a light sweep that glides across on hover.
- [Slide Arrow Button](https://tween-ui.vercel.app/raw/component/slide-arrow-button.md): A pill button whose label rolls up while a chevron slides through its badge.
- [Sliding Tabs](https://tween-ui.vercel.app/raw/component/sliding-tabs.md): A pill nav whose lime indicator scales in, then slides to the hovered or focused tab.
- [Text Roll Button](https://tween-ui.vercel.app/raw/component/text-roll-button.md): A pill button whose label rolls up character by character on hover.
- [Voice Sample Player](https://tween-ui.vercel.app/raw/component/voice-sample-player.md): An audio player pill with a waveform equalizer that reveals on play.

## Blocks

- [Blog Hover Expand](https://tween-ui.vercel.app/raw/block/blog-hover-expand.md): A blog row where hovering a card widens it while the photo tilts in.
- [Card Hover Expand](https://tween-ui.vercel.app/raw/block/card-hover-expand.md): A card row where hovering one widens it, fades the photo in, and drops the copy down.
- [Card Spotlight Grid](https://tween-ui.vercel.app/raw/block/card-spotlight-grid.md): A staggered project grid where the hovered tile tilts toward the cursor while the rest fall back.
- [Column Drift](https://tween-ui.vercel.app/raw/block/column-drift.md): Three columns of review cards that swing into place on scroll, then drift past each other.
- [CTA Image Fan](https://tween-ui.vercel.app/raw/block/cta-image-fan.md): A call-to-action section with a fanned photo stack and a shiny button.
- [CTA Photo Headline](https://tween-ui.vercel.app/raw/block/cta-photo-headline.md): A call-to-action with staggered avatars and photos tucked into the heading.
- [CTA Starfall](https://tween-ui.vercel.app/raw/block/cta-starfall.md): A dark call-to-action under a slow field of drifting stars, lit by a violet bloom.
- [Cube Roll Item](https://tween-ui.vercel.app/raw/block/cube-roll-item.md): A numbered section index whose rows roll like 3D drums toward the pointer.
- [Grid Cascade](https://tween-ui.vercel.app/raw/block/grid-cascade.md): A three-up testimonial grid that pages a whole set at a time, cascading the next in from above.
- [Infinite Rotating Cards](https://tween-ui.vercel.app/raw/block/infinite-rotating-cards.md): A hero wheel of photo cards that slowly spins so the next idea always comes into view.
- [Integration Hub](https://tween-ui.vercel.app/raw/block/integration-hub.md): A hub-and-spoke diagram that draws paths to partner logos, then sends dots along the lines.
- [Logo Wall Shuffle](https://tween-ui.vercel.app/raw/block/logo-wall-shuffle.md): An integrations wall of staggered logo tiles where one mark at a time lifts away and the next rises in behind it.
- [Pricing Plan Switch](https://tween-ui.vercel.app/raw/block/pricing-plan-switch.md): A pricing section that morphs the plan badge, crossfades the copy, and spins the price on switch.
- [Pricing Usage Slider](https://tween-ui.vercel.app/raw/block/pricing-usage-slider.md): A two-plan pricing section where one card prices itself from a volume slider.
- [Process Card Reveal](https://tween-ui.vercel.app/raw/block/process-card-reveal.md): A process section that auto-cycles stacked cards with a filling timeline.
- [Process Sticky Steps](https://tween-ui.vercel.app/raw/block/process-sticky-steps.md): A process section with sticky heading and numbers that track the card in view.
- [Rating Carousel](https://tween-ui.vercel.app/raw/block/rating-carousel.md): A row of rating cards that autoplay, blur off-window slides, and page with dots.
- [Shutter Slider](https://tween-ui.vercel.app/raw/block/shutter-slider.md): An autoplaying feature slider whose images open through alternating slats.
- [Strip Wipe](https://tween-ui.vercel.app/raw/block/strip-wipe.md): A testimonial slider whose photo wipes in as tiled strips beside the quote.
- [Tab Wipe](https://tween-ui.vercel.app/raw/block/tab-wipe.md): A centered screenshot stage that wipes between slides while a thumbnail strip picks the shot.
- [Team Scatter Focus](https://tween-ui.vercel.app/raw/block/team-scatter-focus.md): A team collage whose cards fly in from their own directions, then blur away from the one you hover.
- [Testimonial Line Sweep](https://tween-ui.vercel.app/raw/block/testimonial-line-sweep.md): A paged testimonial pair whose text sweeps out line by line while the portrait irises shut.