@tweenly

Returns true when the user prefers reduced motion.

Scroll-triggered fade with direction, distance, easing, scale and blur options.

Word-by-word or character-by-character reveal with blur and stagger.

Types and deletes a list of phrases with a blinking cursor.

Cycles through words with slide, fade, blur or flip transitions.

A light band that sweeps across text on a loop.

Counts up to a value when scrolled into view, with formatting options.

Hover/focus button with a GSAP clip-path fill sweep. Configurable direction, duration and ease.

Wrap anything to make it drift toward the cursor on a spring.

3D perspective tilt that follows the pointer, with optional glare.

Card with a radial spotlight and glowing border that track the cursor.

Reveals its children one after another as they enter the viewport.

Infinite, seamless scrolling row or column of content.

A stack of same-size cards pinned on scroll. The front card lifts away, then the next, one by one.

Pins the section and reveals text word by word as you scroll; the page resumes once the reveal completes.

Pins a row of images and scrolls it sideways with the page, then releases to normal scroll.

Images fly in from their own direction as they scroll into view.

Renders any image as ASCII art on a canvas, with a glittering pixel trail under the cursor.

Inline keyword that reveals a floating image or video that follows the cursor.

Custom cursors: ring, dot, blend, crosshair, sparkle trail, sunflower and rose.

Three loading animations: bouncing dots, equalizer bars and an orbit spinner.

Button that morphs from Download to a live progress fill and a drawn check mark.

One image rises from below, then the rest slide out from under it into an overlapping fan.

Images on a half-circle wheel that turns on its own or with the scroll.

A row of small thumbnails where each one grows large in turn as you scroll.

A column of images where the one in the center grows, with a title list that stays in sync.

Pill button with a light beam circling its edge and a soft sheen on hover.

Material-style ripples that expand from the exact point you press.

Press and hold to confirm destructive actions. A fill sweeps across while held.

Slide-to-confirm track with a draggable knob, shimmering label and keyboard support.

Heart toggle with a spring pop, ring burst, particles and a rolling counter.

Tabs with a springy pill that slides behind the active option, with arrow-key navigation.

Minus / plus stepper whose digits roll individually, with hold-to-repeat and a shake at the limits.

Toggle whose knob stretches while pressed and springs across with overshoot, with optional sun / moon icons.

A pill button that morphs into an email field, then a spinner and a drawn check on submit.

Star rating with a sweeping hover fill, half stars, and a springy pop with sparkles on select.

Five minimal, animated navigation bars: glass pill, scroll morph, sliding underline, dynamic island mega-menu and full-screen overlay.

Scroll-synced "On This Page" sidebar with a plane that flies along the heading trail, a sliding rail, or a spotlight list.

Verification code input with springy digits, a gliding focus ring and animated success and error states.

Multi-series line and area chart from plain row data, with draw-in lines, halftone fills, a snapping crosshair tooltip and a toggleable legend.

Progress toward a real target: a wavy, grainy fill over a hatched remainder, with a thermometer marker, quota line and stacked segments.

Donut, pie or gauge from your rows with sweep-in slices, legend toggling with re-flow, hover explode and a live center total.

Dot matrix of filled versus hatched units with a partial last dot, spring wave in fill order, and a huge count-up figure.

Full-screen loader with a counting percentage and rotating quotes that reveals the page at 100%.

Shared theme, scales, formatters, textures, card, legend and tooltip used by tweenly charts.

Grouped or stacked bar chart, vertical or horizontal, with springy staggered growth, textured series, hover highlight and a toggleable legend.

Concentric activity-style progress rings with per-row goals, springy staggered fills, counting values and second-lap overshoot.

Spider chart comparing textured series across axes, with a drawn-in grid, polygons springing from the center and axis tooltips.

Stat card with a count-up headline, delta pill, halftone sparkline with scrubbing, and an optional goal bar.

GitHub-style contribution calendar with hatched empty days, a diagonal reveal wave, and hover tooltips.

High-performance canvas confetti with burst, cannons, fireworks, rain and stream presets. Includes confetti(), useConfetti, ConfettiButton and Confetti.

Animated FAQ accordion in four styles (minimal, cards, numbered, split) with height-auto reveals, a live filter and keyboard navigation.

Four premium, minimal animated footers: sticky reveal, giant kinetic wordmark, classic columns with newsletter, and an expanding curtain panel with a magnetic …

Layout-animated notifications as a stack, inbox list, dynamic island or timeline cards, with swipe to dismiss, pausable timers and a useNotifications hook.

Website intro loader orchestrated with GSAP timelines, with stairs, odometer counter, greeting words, iris and blinds exits.

App Router page transitions: a provider, TransitionLink and usePageTransition hook with curtain, stairs, iris, slide and blinds variants.

Swipeable list rows with iOS-style reveal actions, full-swipe commits and floating cards, with layout-animated removal.

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…

Five playful 404 sections with a giant status code hero: cursor-following eyeball, flashlight reveal, throwable tiles, orbiting moon and a decoding error log.

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.

Collectible postage stamp with perforated edges, 3D tilt and glare, an inked postmark animation and a fanned StampSheet.

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…

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 …

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…

Interactive canvas backgrounds for hero sections: dots, warping grid, constellation particles, waves, flow field and pixel mosaic, all reacting to the cursor.

Lenis smooth scrolling synced with GSAP ScrollTrigger, on the window or inside any scroll container, with a useLenis() hook.

Minimal horizontal timeline of years and milestones that pins and scrolls sideways with the page, or drags with inertia. The centered year lights up.

AI prompt box with auto-growing textarea, cycling placeholders, file chips, model picker, toggle chips and a send button that morphs into stop.

Voice recorder pill that morphs into a live waveform with timer, pause, cancel and stop, then a scrubbable playback row.

AI loading states: shimmer text, bouncing dots, glowing orb, collapsible reasoning steps and simulated token streaming.

Voice activity visualizer with orb, bars, wave and dots variants, driven by the microphone, simulated speech or a controlled level.

Announcement banner: dismissible sliding bar, hero pill, scrolling ticker or shimmer bar, with remembered dismissal.

macOS-style dock with pointer-distance magnification, spring tooltips, active dots, badges and click bounce.

Icons orbiting a center on circular paths with CSS transforms; layer rings for integration graphics.

X-style post cards from data with highlighted mentions, media grid, compact stats, a like pop and a scrolling testimonial wall.

Barlow Condensed, the display face tweenly uses for big numerals and wordmarks.

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.