Introduction

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

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 band of light that sweeps across text on a loop.

Counts up to a value when scrolled into view.

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.

Button with a GSAP clip-path fill that sweeps in on hover and focus.

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.

Custom cursors: ring, dot, blend, crosshair, sparkle trail, and sunflower or rose that shed petals.

Swipeable list rows with iOS-style reveal actions, full-swipe commits and floating cards. Removed rows fly off and the rest glide into place.

Interactive canvas backgrounds for hero sections: dot grids, warping grids, constellations, waves, flow fields and pixel mosaics that react to the cursor.

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.

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.

macOS-style dock: icons magnify with pointer distance, labels spring up as tooltips, with active dots, badges and a click bounce.

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

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.

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. Animated mode switch, inline validation, loading, success and error states.

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.

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

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.

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.

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

Announcement banner: a dismissible top bar that slides in, a hero pill chip, a scrolling ticker or a bar with a light sweep. Remembers dismissal.

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

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

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.

Concentric progress rings against per-row goals. Rings fill with a springy stagger, numbers count up and overshoot draws a second lap.

Spider chart comparing series across axes. The grid draws in, polygons spring out from the center and hovering an axis lists every value.

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.

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

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

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

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

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.

Posters on a 3D cylinder. The first image starts full-bleed and shrinks into the ring, then scrolling turns the cylinder card by card. Also works with drag or slow auto rotation.

Icons orbit a center on a circular path. Layer rings with different radii and directions for integration graphics. Pure CSS transforms.

Pins the section and reveals text 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.

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.

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

Lenis smooth scrolling driven by the GSAP ticker, so every ScrollTrigger stays in sync. Works on the window or inside any scroll container, with a useLenis() hook.

Pinned "How it works" section. A marker travels along a half circle from step to step as you scroll, the passed arc draws in, and the whole section flips to each step's solid color.

Minimal horizontal timeline of years and milestones. Pins and scrolls sideways with the page, or drags freely with inertia; the year at the center lights up.

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

Infinite, seamless scrolling row or column of content.

Voice activity visualizer for AI assistants: a breathing orb, equalizer bars, a flowing wave or bouncing dots, driven by the microphone, simulated speech or your own level.

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

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

Loading and reasoning states for AI responses: shimmering text, bouncing dots, a glowing orb, a collapsible step trace and simulated token streaming.

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 real perforated edges, 3D tilt and glare, and an inked postmark that stamps down on click.

A sealed envelope that opens on click, hover or scroll: the seal pops, the flap swings open and the letter slides out and unfolds.

X-style post cards rendered from data, no API calls. Highlighted mentions, media grid, compact stats and a like pop, plus a scrolling testimonial wall.

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.

Animated FAQ accordion in four styles, with height-auto reveals, a live filter that collapses non-matching items and full keyboard support.

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.