Animated shadcn/ui Components

A button that leans toward the cursor with a springy, physical pull.

A dark button with a light sweep that draws the eye without shouting.

A button that fills while held, so destructive actions can never happen by accident.

Morphs from its label to a spinner, then to a drawn tick or a shake, so every save feels answered.

A card with a soft glow that tracks the pointer across its surface.

A 3D card that tilts toward the pointer, with an optional moving glare.

A card that tilts toward the cursor while its layers float at different depths, so each moves at its own speed.

A metallic rainbow foil that shifts and shimmers as the pointer moves, like a holographic trading card.

One soft beam follows the pointer across a grid, lighting the borders and faces of the cards it passes.

A container whose border carries a light that travels around it.

A small light that travels around any element's border at a steady pace. Subtle, premium, never distracting.

Crystal-clear glass cards with lens-like edges, rainbow dispersion, a rim highlight that tracks the pointer and a liquid press.

A deck you swipe through: fling the top card and it tucks in at the back.

Cards that morph smoothly into a full detail view, then fold back into place.

Headline text with a slowly flowing, seamlessly looping gradient.

Text that decodes itself character by character, terminal style.

Counts up to a value with an eased finish when it scrolls into view.

Words lift out of a blur one after another as the line scrolls into view.

Rotates through a list of words, letters rising in and drifting out.

Headlines that rise letter by letter, slide up line by line, blur into focus or light up as you scroll.

An airport departures board: every tile flips through its drum, one character at a time, to land on your text.

Headlines that arrive word by word or letter by letter: slide, blur, hinge or rise from behind a mask, from any direction.

Pools of colour swirl and flow inside the letters, for headings that feel alive without moving an inch.

A marker-pen sweep draws behind your key words as they scroll into view, line by line like a real pen.

A hand-drawn scribble, swoosh, double line, circle or strike-through traces itself around your words.

Bars cover the key facts like a classified file, then lift one by one on scroll, hover or click.

A narrow glint of light sweeps across the letters every few seconds, like light catching metal.

Letters near the cursor swell to a heavier weight and ease back as it moves on, using a variable font.

Each letter leans toward the cursor and springs home, like a magnetic button for every character.

On hover or focus, the letters swap places a few times and slide home. Made for links and buttons.

Types a phrase, pauses, backspaces and types the next, with a human rhythm and a caret that blinks only at rest.

A name writes itself in a flowing hand, pen-stroke by pen-stroke, then finishes with a flourish.

Text circles slowly around an icon, like a stamp. Pauses under the pointer and picks up where it stopped.

A pinned sentence whose key word changes as you scroll, with the space around it resizing smoothly.

Accessible tabs with a sliding indicator and soft content transitions.

A floating icon bar that magnifies and lifts around the pointer, with tooltips and a gliding active indicator.

A ⌘K palette with live filtering, grouped results and a highlight that glides between them.

A ⌘K command palette with recent actions, fuzzy search across pages and commands, and scope tabs.

A pill navbar where a soft highlight glides to whatever you point at or tab to.

A switch whose knob stretches like liquid on its way across, then settles.

One-time-code boxes where each digit pops in, with paste and phone autofill built in.

Stacking notifications with swipe-to-dismiss, hover-to-pause and variants.

A seamless infinite scroller for logos and testimonials that pauses on hover.

Progress through steps: the line fills, and each finished step draws its own tick.

A headline number that counts up beside a sparkline that draws itself, with a change badge and hover readout.

Every digit rolls on its own wheel to the new value, like a mileage counter, rather than counting up.

FAQ panels that open with a smooth, springy height and a turning chevron.

Drag a handle across two layers to compare before and after, smoothly sprung.

A line that draws itself through your steps when the section scrolls into view, with a dot of light travelling along it.

Overlapping images that drift at different speeds and tidy into a stack as you scroll, for editorial storytelling.

Icons, labels and shapes circling a central logo on rings, each with its own speed and direction.

Drifting, blurred color fields for hero sections and empty states.

A quiet dot grid that lights up in teal around the pointer.

Slow, drifting colour with a fine film grain, for warm editorial heroes.

Thin grid lines with streaks of light falling down them at scattered times.

A tiled grid where a click sends a wave of light rolling outward.

Topographic lines that slowly shift like terrain, with a vignette for your content.

A slow-drifting night sky with twinkling stars, for space, launch and AI product heroes.

A retro perspective grid rolling toward a glowing horizon, synthwave style.

Shooting stars streaking across a dotted sky at scattered times.

A field of tiny squares that flicker softly, drawn on a canvas so it stays light.

A cone of light from above that sways gently and turns to follow the pointer.

A soft ribbon of light behind the pointer, across the window or inside one section.

Fields of teal, sage and clay light drift and blend under swaying aurora ribbons.

A true 3D floor of glowing lines that recedes forever to a lit horizon, with an optional ceiling for a tunnel.

A feathered light follows the cursor, revealing a glowing texture. On touch screens it drifts on its own and follows a drag.

A headline drawn in thousands of particles that gather into place, then part around the cursor and spring back.

Drifting stars join into constellations as they pass close, and reach out to the cursor with lines of light.

A complete pricing table: a sliding monthly/yearly switch, prices that roll to their new digits and a featured plan with an orbiting light.

A complete landing-page hero: a pointer-lit grid, a headline that rises word by word and a product window that tilts flat as you scroll.

A like or favourite toggle: the heart pops, a ring expands, sparks fly and the count rolls up.

A range slider with give: the value bubble leans as you drag, and pulling past the ends stretches the track like rubber.

A password field with a four-bar strength meter and requirements that tick themselves off as you type.

Segments draw themselves in on scroll; hover, tap or tab to one to lift it and read its value and share in the middle.

A feature grid in tiles of different sizes: they rise in turn, one border light follows the pointer across them all, and each tile's visual comes alive.

Columns of testimonials drifting in opposite directions at different speeds, with soft faded edges. Hover to pause.

Scrollytelling for a product tour: steps scroll past while a pinned panel crossfades to each one's visual, with a line that fills as you go.

A dotted 3D globe you can spin by dragging, with markers pulsing at real coordinates and light travelling along arcs between them.

A mega-menu with one dropdown that glides and resizes between items, its content sliding in from the side you moved towards.

Features as tabs beside one large visual: the active tab fills a progress bar and moves on by itself, pausing while you look.

A drop area whose dashed border flows when a file is dragged over, with a progress bar per file that ends in a drawn tick or a clear error.

A responsive area chart that draws itself in, then follows the pointer, a finger or the arrow keys with a crosshair and tooltip.

A release log down a line that fills as you scroll, with each entry rising in and its dot filling as the line arrives.

A heading in dim ink lit by a soft spotlight that follows the cursor, and sweeps across by itself when left alone.

On hover, each letter rolls over on a little 3D cube to reveal a fresh copy, one after another. Made for links and buttons.

Big text that scrolls on its own, speeds up as the page scrolls, turns with the scroll direction and leans into the speed.

A sea of dots on a 3D plane rolling in slow waves to the horizon, swelling up around the cursor.

Dozens of fine lines flowing like a length of silk in two colours, parting gently around the pointer.

A honeycomb of faint hexagons that light up under the cursor and fade behind it, with the odd idle pulse.

Letters lift and settle one after another, like a wave running through the word: on hover, or as a gentle loop.

A short burst of digital glitch: the word splits into two coloured channels, slices jump sideways, then it snaps back clean.

A soft, blurred conic gradient turning slowly behind your content, like light moving round a room.

Out-of-focus orbs of light drifting slowly upwards and swaying, like the background of a night photograph.

A heading revealed by drops of ink landing across it and spreading until they meet, with a soft halo at the wet edges.

Solid 3D lettering with real depth, whose extrusion swings round to face away from the cursor like a sign under a moving light.

Generative art: hundreds of particles ride an invisible, shifting current and leave silky trails, curling into a swirl around the pointer.

Liquid blobs drift, merge and pull apart like a lava lamp, with a blob that follows your cursor and melts into the rest.

A copy-to-clipboard button whose clipboard icon spins into a drawn tick while the label swaps to Copied, without the button changing width.

Keycaps for a keyboard shortcut that press down when you hold the real keys, for command menu hints, docs and onboarding.

A live status indicator for services and deploys: the dot blends between colours and pulses softly only when something needs attention.

An install command in npm, pnpm, yarn and bun, with a sliding pill, a copy button and a choice that follows to every block on the page.

A terminal that plays a session on view: commands type with a human rhythm, output prints and spinners resolve into ticks, then it offers a replay.

Explains code step by step: pick a step and a highlight band springs to its lines, the rest dim, and the panel scrolls them into view.

A year of activity as a grid of days, like a GitHub profile, that fills in week by week on view and reads any day in a tooltip.

Build, test and deploy steps run in turn with live timers and a filling line, ending on a pulsing Live badge or a clear failure with a retry.

The rim of a dark planet catching the light, with a soft atmosphere and a highlight gliding along the curve. Pure CSS.

A radar scope with range rings and a turning beam, where contacts flare as the beam passes over them, then fade.

Flying down an endless tunnel: rings rush towards you, streaks of light race past and the vanishing point leans to the cursor.

A WebGL shader of slow, folding liquid colour, like ink in water, with film grain and a swirl that follows the cursor.

A circuit board around a clear centre: traces fan out from every side, and pulses of light race along them at scattered times.

Drifting pools of light rendered through an ordered Bayer dither, like an old print or early Mac screen, with a cursor glow.

A paragraph that reads itself in as you scroll: words start faint and brighten one after another, at the pace of your scrolling.

A heading drawn as an outline that floods with solid colour from left to right, on hover or as it scrolls into view.

Text flowing endlessly along a gentle wave, without a seam, that speeds up with page scrolling and turns round when you scroll back.

Letters drop in one after another, land with a real bounce and wobble upright. Sweep the cursor through them to knock them into the air.

A halftone screen in motion: dots swell and shrink with slow, crossing waves like a printed gradient breathing, and grow around the cursor.

Columns of code characters raining down, each led by a brighter glyph and fading into the dark. A calmer, on-brand take on code rain.

A black hole with a glowing accretion disc: particles orbit faster near the centre, spiral inwards and pass behind the dark shadow.

Flying low over endless wireframe mountains that rise from the haze and stream past, coloured from valley to peak.