352 Animated React Components for Tailwind | Charcoal UI

352 animated React components, live: inputs, menus, dialogs, text effects, backgrounds, cursors and galleries. One file each, installed with shadcn.

Inputs

Range Slider: Six sliders that share one accessible core: drag, click, or use the arrow, Page and Home/End keys. Every variant respects reduced motion.
Button: Six variants with spring press feedback. The loading state swaps the label for a spinner without changing width.
Magnetic (Pro): Wrap anything to make it lean toward the pointer, then spring home when the pointer leaves.
Switch: A spring-driven thumb that stretches while pressed, like a real toggle under your thumb.
Checkbox: The check draws itself in, the box pops, and indeterminate morphs into a dash.
Radio Group: Roving-focus radios whose dot springs in, with a shared highlight that glides between card options.
Input: Text field with a visible label, optional icons, an error that shakes once, and a success check that draws in.
OTP Input: One-time-code input with a blinking caret, digits that pop in, paste support and autofill.
Stepper: Number stepper whose digits roll in the direction you press. Hold a button to repeat.
Segmented Control: Two to five exclusive options with a pill that glides to the selection. Arrow keys move and select.
Select: Listbox select that unfolds from its trigger with staggered options, full keyboard support and type-ahead.
Color Picker (Pro): Swatch picker where a ring glides to the selection and a check draws in, tinted to stay readable on any swatch.
Rating (Pro): Star rating with a hover preview. Picking a score pops the stars in a ripple from the left.
Tag Input: Type and press Enter or comma to add chips. Backspace highlights the last chip first, then removes it on the second press.
Password Input: A show/hide eye whose slash draws on and off, and a strength meter that fills as you meet each rule.
Search Input: A search icon that springs open into a field. Escape clears and collapses it.
Toggle Group: Pressable toggles for formatting bars, single or multiple. Each press pops a filled pill in or out.
File Dropzone (Pro): Drop target that lifts and bobs while files hover over it, then lists each file with a progress wash and a remove button.
Like Button (Pro): The heart squashes and pops, a ring and eight sparks burst out, and the count rolls.
Hold to Confirm (Pro): For destructive actions: hold the button while it fills. Let go early and it springs back.
Shimmer Button (Pro): A charcoal pill with an ember edge that orbits the border and a sheen that sweeps across.
Slide to Confirm (Pro): Drag the knob across to confirm. The label fades as you go; Enter confirms from the keyboard.
Textarea: Grows with its content on a spring, with a ring that fills toward the character limit and warms near the end.
Wheel Picker (Pro): iOS-style drum on native scroll-snap, so momentum and snapping come from the browser. Rows tilt away in 3D as they leave the centre.
Calendar (Pro): Month grid where months slide in the direction you travel and the selection glides between days. Full arrow, Page and Enter key support.
Scrub Input (Pro): Figma-style number field: drag the label sideways to scrub (Shift ×10, Alt ×0.1), or click in and type.
Dual Range Slider (Pro): Two thumbs on one track for picking a range. Press anywhere and the nearer thumb comes to you.
Knob (Pro): Rotary dial with an ember arc. Drag up or down, scroll, or use the arrow keys.
Combobox: Type to filter, with matches highlighted in ember and a highlight that glides between options.
Specular Button (Pro): A button with a specular highlight that follows the pointer across its surface, a rounded body from an inner shadow, and a press that ripples out from the pointer.
Curved Input (Pro): A text field whose underline is a curve that sags toward the caret as you type and ripples when the field takes focus, the floating label riding the same bend.
Split Button (Pro): A primary action with a chevron that unfolds the secondary actions inline, each sliding out while the group widens on a spring; Escape or a click outside folds them back.
Morphing Search (Pro): A search icon that grows into a full field on click, with results dropping in beneath as you type and arrow keys to pick one; Escape shrinks it back to the icon.
AI Prompt Input (Pro): The composer of an AI product: a growing textarea, attachment chips that pop in, a model pill, and a send button that morphs into a stop square while the answer streams. Enter sends, Shift+Enter breaks a line.
Voice Input (Pro): A microphone button that expands into a live waveform while recording, drawn from the real microphone when allowed or a synthetic voice-like wave otherwise, with a timer and a cancel.
PIN Pad (Pro): A numeric keypad for a PIN: dots fill as you type, keys press on a spring, a wrong PIN shakes the dots clear, a right one pulses them green. Digits can be shuffled.
Signature Pad (Pro): A signature pad with pen-like ink: stroke width follows speed, points are smoothed with curves, and undo and clear are built in. Emits a PNG data URL.
Password Strength (Pro): A password field with a segmented meter that fills on springs, a strength word that swaps, and a checklist whose items check off as each rule passes.
Multi Select (Pro): A listbox with checkable options and chips that pop in and out of the trigger: type to filter, arrows move, Space toggles, Backspace removes the last chip, with a cap and an overflow count.
Chip Group (Pro): Selectable chips where the chosen one grows a check while the row reflows around it, single or multiple, optionally removable. Arrow keys move, Space toggles.
Credit Card Input (Pro): Card fields that format as you type, a brand badge that appears once the number reveals it, and a card preview that mirrors the digits and flips to show the CVC while you type it.
Time Picker (Pro): Hour, minute and period columns that scroll with inertia and snap, using native scroll-snap so touch and wheel feel right; each column is a listbox with arrow keys and type-to-jump.
Emoji Reaction (Pro): A reaction bar: hover the button to pop a row of emoji on staggered springs, pick one and it bursts while its count chip bounces; picking it again takes it back.
Color Wheel (Pro): A hue ring with a draggable handle and a saturation and lightness square inside it, both keyboard adjustable, with a live swatch and hex readout. One conic gradient and two linear ones; no canvas.
Swipe Cards (Pro): A stack of cards you swipe left or right: the card rotates with the drag, a stamp fades in past the threshold, and release flings it away or springs it back. Buttons, arrow keys and Undo included.

Navigation

Tabs: Tabs with a gliding indicator and panels that slide in the direction you travelled.
Dock (Pro): macOS-style dock. Icons swell with pointer distance and show a label on hover.
Expandable Tabs (Pro): Icon tabs where the active one expands to reveal its label, keeping toolbars compact.
Breadcrumb: Long trails fold their middle into “…”. Click it and the hidden crumbs unblur into place one after another.
Pagination: Page numbers with smart gaps and a pill that glides to the current page.
Floating Nav (Pro): A pill nav that slips away while you scroll down and returns as soon as you scroll up, with a hover highlight that glides between links.
Sidebar: Collapsible app sidebar: width springs between 240 and 64 px, labels fade, and an ember bar marks the active item.
Steps: Progress through a multi-step flow: connectors fill, finished steps draw a check, and the current one pulses ember.
Dropdown Menu: Menu with icons, shortcuts, checkbox items, labels and destructive actions. Items cascade in and a highlight follows you.
Context Menu (Pro): Right-click menu that opens at the pointer and stays on screen. Shift+F10 opens it from the keyboard.
Bottom Nav (Pro): Mobile tab bar. The active pill slides between tabs, the icon hops, and badges sit on the icon.
Scroll Progress (Pro): A thin glowing ember bar that fills as you read the page or any scroll container.
Table of Contents (Pro): Scroll-spy outline: an ember marker slides to the section you are reading, and links scroll smoothly.
Bubble Menu (Pro): A round trigger that bursts into a column, fan or row of bubble links on staggered springs and gathers them back on close. Arrow keys move between bubbles, Escape closes.
Card Nav (Pro): A compact top bar whose menu button expands it into a stack of cards, one per section, with the links rising in one after another.
Pill Nav (Pro): A pill-shaped nav where a liquid highlight glides under the hovered link and settles back on the active one, flipping the label colour beneath it.
Line Sidebar (Pro): A sidebar reduced to short lines that grow into labelled items when the pointer reaches the rail, with the active line in ember.
Flowing Menu (Pro): Tall list links; hovering one slides a filled strip in from the side the pointer entered, carrying a marquee of its text and image, and out the side it left.
Radial Menu (Pro): A pie of actions around a button. Hold the button, move toward a wedge and release to pick it in one gesture, or click to open a ring the arrow keys move around.
Mega Menu (Pro): A top nav whose items open wide panels of link columns and a featured card. One panel morphs its size between items instead of reopening, and the content crossfades.
Magnetic Nav (Pro): A nav whose underline stretches from the active item toward the hovered one, spanning both, then snaps to the new item on click. Keyboard focus moves it too.

Overlays

Tooltip: Springs out of its trigger. After the first one opens, neighbours open instantly, so scanning a toolbar feels quick.
Popover: Anchored panel that scales from its trigger. Closes on outside click and Escape, and returns focus.
Dialog: Built on the native <dialog> element for focus trapping and Escape, with a blur-and-scale entrance and exit.
Drawer: Bottom sheet you can fling closed. Drag past a threshold or flick down, and it rubber-bands at the top.
Toast: Stacked toasts that fan out on hover, swipe away horizontally, and pause their timers while you read.
Command Menu (Pro): ⌘K palette with fuzzy filtering, grouped results, a gliding highlight and full keyboard control.
Hover Card (Pro): A rich preview that springs out of a link on hover or focus, and stays open while the pointer is over it.
Morph Dialog (Pro): A card that grows into a dialog: the shell, artwork and title morph between the two, then fold back on close.
Sheet: Side panel on the native <dialog> element. It slides in from either edge, and you can fling it back to close.
Notification Stack (Pro): iOS-style grouped notifications: a fanned stack that unfolds into a list. Swipe one away when expanded.
Dynamic Island (Pro): A black pill that morphs its size and content between states, like the iPhone's Dynamic Island.
Staggered Menu (Pro): A full-height menu that arrives in layers: coloured panels sweep in one after another, then the menu, then oversized numbered links rise in with a stagger. Escape closes and focus returns.
Tour Spotlight (Pro): An onboarding tour that cuts a spotlight out of a dim overlay around the current target and morphs the hole and its card from step to step. Arrow keys and Enter advance, Escape ends.
Undo Toast (Pro): Undo toasts with a draining ring for the time left: Undo reverses the action and the toast folds away; too late and the button shakes instead. Several stack.

Feedback

Progress: Linear and circular progress on a spring, with an optional indeterminate sweep.
Loader: Four quiet loaders: dots, bars, orbit and ember pulse. Each announces itself to screen readers.
Status Badge: Badge that morphs between states: the width animates, the label cross-fades and the dot pulses while live.
Skeleton: Placeholder blocks with a soft light sweep, plus SkeletonSwap, which cross-fades to the real content with a short blur.
Alert: Info, success, warning and error callouts that slide in and collapse smoothly when dismissed.
Typing Indicator (Pro): A chat bubble that pops in with three dots rippling in a wave, and tells screen readers who is typing.
Countdown (Pro): Days, hours, minutes and seconds, with each digit rolling down as it ticks.
Confetti (Pro): Tumbling ember confetti from any point, drawn on a throwaway canvas. It does nothing under reduced motion.
Ripple (Pro): Drop it inside any relative element for a ripple that spreads from the exact point you pressed.
Success Check (Pro): A spinner that resolves into a drawn check, or into a cross that shakes once.
Story Progress (Pro): Segmented, auto-advancing progress like Instagram stories, with pause support.
Thinking Orb (Pro): A sphere of dots that shows an AI is busy, with nine motions for nine kinds of busy: working, searching, solving, listening, connecting, composing, breathing, weaving and shaping. States morph into each other; dots can lean towards the cursor.
Progress Ring (Pro): A ring progress with a glowing head that travels the arc, a centre value that counts along on a spring, and an indeterminate mode where a short arc chases its tail.
Pull to Refresh (Pro): A scroll container where pulling down from the top stretches out a loader that fills with the pull; past the threshold a release triggers the refresh and the loader spins until it resolves.
Empty State (Pro): An empty-state panel with an illustration built from animated SVG primitives in theme tokens: an inbox stack, a magnifier, a folder or a chart that floats gently.
Live Dot (Pro): A presence dot with a pulsing halo in the four states an indicator needs: live, busy, away, offline. CSS only.
Inline Confirm (Pro): A button that slides into a "Sure?" pair in place instead of opening a dialog, with a draining bar for the time left, Escape to back out and a spinner while the action runs.
Upload Tray (Pro): A tray of uploads: rows slide in with spring-smoothed progress, size and speed, pause and cancel, a check that draws itself when done and a failed state with retry.
Scroll Cue (Pro): A scroll hint: a mouse outline with a dropping wheel dot, a bouncing chevron, or a label with a falling line, fading out once the reader scrolls.
Sparkle Badge (Pro): An AI badge with four-point sparkles that twinkle in at random spots and a shimmer that sweeps across now and then.
Audio Visualizer (Pro): Bars, a waveform or a ring driven by an AnalyserNode when given an audio element, or by a synthetic beat otherwise, with levels that ease down so it breathes instead of flickering.
Activity Pulse (Pro): A live activity feed: new rows push in at the top with a pulse ring, timestamps tick, and the oldest rows slide out once the list is full.

Display

Accordion: Bouncy accordion: height springs open, the chevron flips, and content fades up a beat later.
Number Ticker: Each digit rolls on its own wheel to the new number, so changes read as motion instead of a flicker.
Tilt Card (Pro): Card that tilts toward the pointer in 3D with a moving glare. Lies flat for touch and reduced motion.
Spotlight Card (Pro): An ember glow follows the pointer across the card and its border.
Marquee: CSS-only infinite marquee with faded edges. It pauses on hover and stops for reduced motion.
Avatar Group: Overlapping avatars that fan apart on hover, with names that spring up above each one.
Sortable List (Pro): Drag to reorder with a lifted shadow, or focus the handle and use the arrow keys.
Theme Toggle: The sun eclipses into a moon, and the new theme spreads from the button as a circle.
Copy Button: The copy icon blurs into a check that draws itself, then swaps back.
Card Stack (Pro): Swipe the top card left or right and the next one rises to meet you. Buttons do the same for keyboard users.
Carousel: Drag, flick, arrow-key or click the dots. Slides snap to the nearest one, side slides dim and shrink, and the active dot stretches.
Image Compare (Pro): Before/after split you can drag anywhere. The handle also works with the arrow keys.
Flip Card (Pro): A 3D card flip on a springy hinge. Click or press to flip, with optional hover-to-flip.
Timeline: An ember line that draws itself as you scroll, with each entry rising into view.
Stat Card (Pro): KPI card whose number counts up as it enters view, with a delta pill and a sparkline that draws itself.
Bar Chart: Bars spring up in sequence when the chart enters view, show a value on hover, and keep a screen-reader table underneath.
Donut Chart (Pro): Segments draw in one after another. Hover one to thicken it and read its value in the centre.
Folder (Pro): A project folder whose front flap tips forward while the files fan up out of it.
Expandable Card (Pro): A card that grows in place to reveal more, while its neighbours make room smoothly.
Orbit (Pro): Icons circling a centre on CSS-only rings. Each icon counter-rotates so it stays upright.
Animated List (Pro): Reveals items one at a time, newest on top, like a live activity feed.
Terminal (Pro): Types out commands character by character and prints their output, starting when it scrolls into view.
Image Lightbox (Pro): Thumbnails zoom into a full-screen viewer. Swipe or use the arrow keys to move between images.
Animated Border (Pro): An ember highlight travels around the card's border. CSS only, using @property.
Scroll Reveal: Wrap anything to fade it in as it scrolls into view, from any direction or out of a blur. Several children stagger.
Border Beam (Pro): A beam of coloured light that rides the border of any card, input or button, with a soft glow outside and an optional wash inside. Nine palettes, rotate or pulse.
Liquid Metal (Pro): A ring of moving liquid metal around buttons, icons and badges: a wandering halo, a pool of reflected light, and a highlight that swings towards the cursor. Chromatic, silver and gold, plus metal text.
Electric Border (Pro): A live electric arc runs along a card's edge: a stroked rounded rect displaced by fractal noise that is re-rolled a few times a second, over a soft glow. Pure SVG, so it fits any size without measuring.
Star Border (Pro): Two points of light chase each other around a button or card's border in opposite directions, each with a short tail and a glow. CSS only, from one registered angle.
Gradual Blur (Pro): Progressive blur along one edge of a scrolling container: stacked backdrop-filter layers, each blurrier than the last, so content melts out instead of being cut by a fade. Static and pointer-transparent.
Logo Loop (Pro): A seamless logo marquee whose speed is real pixels per second, with faded edges and a hover pause. CSS does the moving; the duration comes from the measured width.
Electric Logo (Pro): Electric arcs crawl around the outline of any SVG you wrap: displaced copies behind it reseed every few frames, so the edge jitters like a Jacob's ladder.
Magic Bento (Pro): A bento grid where a spotlight follows the pointer across every card, the border lights up where the pointer is, cards tilt toward it, stars drift up on hover and a click ripples.
Chroma Grid (Pro): Image cards under a grey veil: a chromatic spotlight follows the pointer and only the cards inside it show their colour, like sweeping a torch over prints in a dark room.
Pixel Card (Pro): A card whose surface fills with shimmering pixels from the edges inward on hover and drains back out when the pointer leaves.
Holo Card (Pro): A holographic foil card: a rainbow band, a conic iridescence and a field of glints all move against the pointer, so the foil reads as printed under the surface. Tilt and glare included.
Reflective Card (Pro): A brushed- or polished-metal card. The specular highlight sits under the pointer, a second reflection slides the other way as the card tilts, and the grain parallaxes beneath it.
Profile Card (Pro): An avatar card with name, handle, status and a contact button. It leans toward the pointer and glows where it is; the status dot carries a text label.
Decay Card (Pro): An image that melts and smears when the pointer or the page moves fast, then settles. Turbulence displaces the pixels and a blur stretched along the direction of travel makes the smear.
Card Swap (Pro): A stack of cards in loose 3D. On each tick, or click, the front card drops out, slides to the back and the rest shuffle forward on springs.
Bounce Cards (Pro): A fan of image cards that bounce in one after another on stiff springs; hover one and it lifts while its neighbours step aside.
Flying Posters (Pro): Posters hang in a tunnel of 3D space and fly past the camera as you scroll, drag or wait, looping seamlessly with the nearest always drawn on top.
Glass Surface (Pro): A liquid-glass surface: backdrop blur and tint, a refractive rim from an SVG displacement filter applied only at the edge, a specular top highlight and a thin chromatic fringe.
Fluid Glass (Pro): A draggable glass lens that magnifies the content beneath it and bends it at the rim, built from a clipped, scaled copy of the children and an SVG displacement filter. Arrow keys move it too.
Glass Icons (Pro): Icon tiles with glass depth: a coloured backplate behind a frosted front; on hover the backplate rotates away and the front tilts up.
Border Glow (Pro): A glow that tracks the pointer along the border of a card, so the edge nearest the cursor lights up and slides around as you move. CSS variables carry the pointer; nothing re-renders.
Circular Carousel (Pro): Cards stand on a ring in 3D and the whole ring turns: drag, scroll or arrow keys, with the card facing you scaled up and the rest dimming into depth. Release snaps to a card.
Flex Carousel (Pro): A strip of image panels where the hovered or focused one grows and the others squeeze, the caption sliding up inside the open panel.
Infinite Spiral (Pro): Items travel inward along a spiral, shrinking and fading toward the centre, then reappear at the outside: an endless funnel you scroll or drag through either way.
Depth Carousel (Pro): The active card stands in front while its neighbours step back into depth, blur and shadow. Drag, scroll or arrow keys move a continuous position; release snaps.
Morph Slider (Pro): The next image morphs in over the current one through a growing clip-path (circle, diagonal wipe or slide) while the old one scales back, with a draining progress bar and thumbnails.
Drift Wall (Pro): Rows of images drifting in alternate directions at different speeds, the whole wall parallaxing to the pointer and each tile lifting on hover. CSS does the drifting.
Circular Gallery (Pro): Images on a curved band that reads as a wide wheel seen side-on. Drag or scroll to turn it; it keeps its momentum and eases out, looping without a seam.
Dome Gallery (Pro): Images tiled over the inside of a dome with CSS 3D; drag or arrow keys turn it, and clicking a tile brings it forward full size.
Lanyard (Pro): A conference badge hanging from a lanyard as a 2D pendulum: a short Verlet chain for the strap, so dragging the badge swings and whips it and it settles under gravity. No physics engine, no three.js.
Masonry (Pro): A masonry grid balanced by height: each item goes into the shortest column, items rise in on first paint, and layout animation carries them to new places when the list or column count changes.
Infinite Menu (Pro): A grid of tiles that goes on forever in every direction: drag it with inertia, the tiles wrap, the one nearest the centre swells and names itself, and release snaps it to the middle.
Cover Flow (Pro): The classic cover flow: the chosen cover faces you, the rest fan away at an angle with reflections beneath. Click, arrow keys or scroll bring another to the front on a spring.
Bento Grid (Pro): A bento grid whose cells rise in one after another; hover a cell and it lifts while the others dim a touch. Cells set their own spans and layout animation keeps the grid steady.
Activity Heatmap (Pro): A contribution-style heatmap: a cell per day in weekly columns, shaded in four steps of the accent, painting in column by column, with a tooltip that follows hover and the arrow keys.
Sparkline (Pro): An inline sparkline that draws itself in, with a soft fill, a pulsing end dot and trend colouring. Pure SVG.
Line Chart (Pro): A line chart that draws its lines in, with a crosshair that snaps to the nearest point, a tooltip listing every series and arrow keys to step through. SVG only.
Area Chart (Pro): An area chart whose fill rises from the baseline while the line draws in, with a comparison series behind it, a target line and a scrubbing tooltip.
Tweet Card (Pro): A social post card: hover lifts it, the like heart bursts and the count ticks, and mentions, tags and links are picked out in the accent.
Code Window (Pro): A code window with window chrome, light syntax colouring in theme tokens, line numbers and highlighted lines, that can type its code in with a blinking caret.
Feature Card (Pro): A feature card for marketing pages: on hover the icon tilts and fills with the accent, a wash rises from the bottom, a visual slides up behind the copy and the link arrow nudges.
Device Frame (Pro): A phone, tablet or laptop mockup drawn in CSS around any content, with a notch, a 3D tilt toward the pointer and a glass glare. The screen scrolls.
Ticket Card (Pro): A ticket with a perforated stub: notched edges, a barcode drawn from the code text, and a stub that tears off along the perforation when clicked.
Receipt (Pro): A till receipt that prints itself line by line in a dot-matrix face, with a zigzag tear and a total that counts up once the last line lands.
Gauge (Pro): A dial gauge with colour bands and tick marks whose needle swings to the value on an underdamped spring, overshooting a touch, while the readout counts along.

Text

Text Reveal: Words rise out of a blur one after another, when the text scrolls into view.
Shimmer Text: A band of light sweeps across text. Good for loading or thinking states.
Scramble Text (Pro): Characters cycle through glyphs before locking in, left to right.
Rotating Text (Pro): Cycles through words with a rolling letter-by-letter swap, and the container eases to each width.
Typewriter: Types each word with a human rhythm, holds it, deletes it and moves on. Screen readers hear the full list once.
Gradient Text: Text filled with a slowly flowing ember gradient. CSS only.
Highlight Text (Pro): Marks a phrase as it scrolls into view: a marker sweep, a hand-drawn underline, or a scribbled circle.
Text Morph (Pro): Morphs between strings: letters shared by both glide to their new spots, and the rest blur in and out.
Split Flap (Pro): Airport departure board: every cell flips through the drum until it lands on its letter.
Scroll Text (Pro): Words light up one by one as the paragraph scrolls through the viewport.
Wavy Text (Pro): Letters hop in a wave when you hover the word, or continuously with loop.
Circular Text (Pro): Text running around a slowly turning circle, with a slot in the middle. It speeds up on hover.
Glitch Text (Pro): Two offset colour layers tear through the text in slices, on hover or always. CSS only.
Flip Words (Pro): Words flip over like a 3D board, each letter rotating a beat after the last.
Letter Swap (Pro): On hover each letter rolls up and is replaced by its twin from below, in a quick stagger.
Text Pressure (Pro): Letters thicken as the pointer approaches, like pressing into soft type. Needs a variable font.
Tech Text (Pro): A monospace heading that boots in: characters type on under a scanline with a blinking block cursor, then a highlight bar scans across once. Timing has a human jitter so it never feels like a metronome.
Masked Heading (Pro): Letters are a window onto an image or gradient that pans slowly behind them, and the heading wipes in from the left. Without an image it falls back to a drifting ember and foreground gradient.
Stroke Text (Pro): Outlined text whose stroke draws itself in, then optionally fills. The glyphs are SVG text, so size, weight and family come from className like any other word.
Depth Text (Pro): Layered 3D extruded text: stacked copies step back in perspective behind the face and the block tilts toward the pointer, so the shaded side catches the light.
Fold Text (Pro): Each line folds down into place like a hinge, from edge-on to flat, one after another as the block scrolls into view. A small spring overshoot makes it settle like a real hinge.
Echo Text (Pro): A heading that follows the pointer with echo copies trailing behind on softer springs and fading down the trail. The further an echo falls behind, the more it blurs.
Shuffle Text (Pro): Letters slide vertically through a column of alternative glyphs before settling on their own, left to right. A slot reel rather than a scramble: every glyph is real and moves as a piece.
True Focus (Pro): Every word is blurred except the one in focus, framed by four corner brackets that hop from word to word on an interval. Hovering a word pulls the focus there and pauses the hop.
Scroll Float (Pro): Characters float up and settle as the element scrolls through the viewport. Driven by scroll position, so it scrubs both ways.
Text Cursor (Pro): Copies of a word or emoji spawn along the pointer path, facing the direction of travel, then drift up and fade. Mouse only.
Curved Loop (Pro): Text repeating along a curved SVG path and scrolling like a marquee. Drag it to change its speed and direction; it eases back to cruising speed when you let go.
Warp Text (Pro): A wave of skew and scale travels through the letters of a word, once per hover or continuously.
Particle Text (Pro): Text sampled into canvas particles that fly in from random positions to form the letters, then scatter from the pointer and spring back.
Fuzzy Text (Pro): Canvas text whose edges shiver: every frame copies thin horizontal slices with a small random offset, and the jitter grows while the pointer is over it.
Falling Text (Pro): Words drop under gravity, bounce off the walls and pile up at the bottom, and can be picked up and thrown. The physics is a few lines of its own; no engine.
ASCII Text (Pro): Text drawn as a grid of ASCII characters picked by brightness, with a wave travelling through the glyph density and a brighter patch under the pointer.
Proximity Scramble (Pro): Letters within reach of the pointer cycle through random glyphs, fastest at the centre, and settle back as it moves away.
Text Spotlight (Pro): Dim text lit by a soft circle that follows the pointer: two copies of the text, the bright one clipped by a radial mask.
Liquid Text (Pro): An SVG turbulence and displacement filter makes the text wobble like a liquid surface: a slow idle, a surge under the pointer.
Text Explode (Pro): Letters fly apart with a spin on hover or click, each on its own spring, and snap back together when the pointer leaves.
Magnet Text (Pro): Each letter is pushed away from the pointer within a radius and springs back, so the word parts around your cursor like a magnet of the wrong polarity.
Kinetic Text (Pro): Rows of repeated text run in alternating directions across a slanted block, and the whole thing speeds up with the scroll velocity of the page.
Line Reveal (Pro): Lines of text rise into view inside clipped masks, one after another, the reveal every agency site opens with.
Scroll Scale Text (Pro): A heading pinned inside a tall section whose scale, letter-spacing and weight follow your scroll through it, so it grows from a whisper to a shout.

Backgrounds

Ember Field (Pro): Canvas embers drifting up from the bottom edge, flickering as they cool. The Charcoal UI signature.
Dot Grid: Dot grid whose dots swell and warm up near the pointer.
Smoke (Pro): Slow, blurred smoke plumes drifting over charcoal. Pure CSS transforms, so it stays cheap.
Aurora (Pro): Warm aurora bands drifting across the top of a section, fading into the page below.
Grid Beams (Pro): A faint grid with ember beams of light running along its lines.
Meteors (Pro): Ember streaks falling diagonally across the section. CSS only.
Grain: A film-grain overlay that removes banding from gradients, with an optional jitter.
Wave Lines (Pro): Layered sine lines drifting sideways at different speeds, with one ember line in the middle.
Ripple Rings (Pro): Sonar-style rings pulsing out from a centre, for searching, live or empty states.
Particle Network (Pro): Drifting nodes that link up when close and gather around the pointer, lines warming to ember nearby.
Flow Field (Pro): Hundreds of particles follow a slowly shifting current, leaving silky ember trails.
Shader Gradient (Pro): A WebGL mesh gradient: domain-warped noise folding three colours together, with film grain. Falls back to CSS without WebGL.
Starfield (Pro): Stars stream toward you from the centre. Press and hold to jump to warp speed.
Halftone Wave (Pro): A print-style halftone whose dots swell and shrink as interfering waves roll through.
Topographic (Pro): Slowly shifting contour lines drawn with marching squares, like a living topographic map.
Liquid Blob (Pro): Three molten ember blobs merging and splitting through an SVG gooey filter.
Pixel Rain (Pro): Columns of glyphs raining down with glowing ember heads.
Laser Flow (Pro): A laser sweeps a dark field from the top edge, bending toward the pointer, with bright packets flowing down the beam and a fog that catches its glow.
Flux Lines (Pro): A grid of short segments that flow along a drifting noise field and swing round to face the pointer, like a compass bed under a magnet.
Floating Lines (Pro): Long thin lines drift across at different depths and speeds with a slow wobble, and the near layers slide in parallax with the pointer.
Line Waves (Pro): Stacked horizontal sine waves that phase-shift over time, with the amplitude swelling toward the middle line. Plain SVG paths.
Sliced Waves (Pro): A ribbon-shaped wave cut into vertical slices; each slice lags the last and lifts on its own cycle, so the cuts ripple through in sequence.
Gradient Waves (Pro): Translucent wave bands in ember and foreground tones, each filled with a fading gradient, rolling slowly across the bottom of the box at different speeds.
Pattern Waves (Pro): A repeating pattern of dots, dashes or crosses lifted and brightened by a wave travelling across it. Dashes lean with the slope, like reeds.
Shape Waves (Pro): Rows of small circles, triangles or squares that swell and spin as a diagonal wave sweeps the grid, shrinking almost to nothing in the troughs.
Web Threads (Pro): A cobweb of threads strung between anchor points, each a curve that sags and sways and tenses toward the pointer as it passes.
Magnet Lines (Pro): A grid of short bars that turn to point at the pointer like iron filings around a magnet, each easing toward its angle so a sweep leaves a ripple of turning bars behind it.
Ghost Fibers (Pro): Faint fibre strands drift up from the bottom edge, curling as they rise and fading near the top, like smoke made of threads.
Silk (Pro): A sheet of silk: layered sine folds shaded by their slope so each fold catches light on one side, with a tint and a little film grain. WebGL, written in the file.
Grid Motion (Pro): Rows of image and text tiles on a tilted plane that slide in alternating directions as the pointer crosses the section. Rows drift on their own, so it is never frozen.
Grid Scan (Pro): A floor grid in perspective with a light bar sweeping across it; cells light up in a checkered pattern as the bar passes and fade behind it. CSS only, so it costs almost nothing.
Grid Distortion (Pro): An image sliced into a grid of cells that each sample the picture from a point pushed away from the pointer, so the image bulges around the cursor and relaxes back with a lag. Canvas 2D, idle when nothing moves.
Ripple Grid (Pro): A grid of lines that ripples outward from the pointer and from periodic pulses. Each ring pushes the vertices radially, and the lines nearest a crest take the accent colour. Canvas 2D.
Dot Field (Pro): A field of dots whose size breathes with a travelling noise wave, and that part around the pointer.
Acid Squares (Pro): A grid of squares that pulse, rotate and flicker through a shifting palette, in waves that spread from the pointer.
Shape Grid (Pro): A grid of small shapes that morph from one to the next in diagonal waves, each cell flipping as the wave passes and cells near the pointer flipping early.
Micro Slats (Pro): Thin vertical slats tilt in a travelling wave like blinds in a breeze, a tinted layer showing through as they open. CSS 3D only.
Gradient Blinds (Pro): Vertical blinds over an ember-to-foreground gradient that breathe open and closed in sequence and widen around the pointer.
Scanner (Pro): A scanning line sweeps the field with a trailing glow over a faint grid, and scattered points flash as the line reaches them. CSS only.
Radar (Pro): A radar display: rings and crosshairs, a rotating sweep with a fading wedge behind it, and contacts that light up when the sweep crosses them and decay until the next pass.
Particles (Pro): Soft points drifting upward at three depths, each with its own size, alpha and wobble. The field shifts with the pointer, deeper layers less, so it reads as space rather than a flat sheet.
Galaxy (Pro): A tilted spiral of thousands of precomputed points with a bright core and dense arms. Inner stars orbit faster than outer ones, so the arms keep winding, and the whole disc leans with the pointer.
Pixel Blast (Pro): Rings of grid-snapped pixels burst out of random points and fade, with cells dropping out as each ring ages. Clicking fires one where you clicked.
Antigravity (Pro): Motes rise as if gravity flipped, each leaving a short fading trail, and scatter away from the pointer with a push that decays as they recover. Trails are drawn by fading the canvas toward transparent, so it works on any background.
Ballpit (Pro): Balls drop into the box, bounce, settle into a heap and get shoved around by the pointer. A small circle-collision solver written for the file; no physics engine.
Hyperspeed (Pro): A perspective road rushing toward you with light streaks on both sides. Hold the pointer down to jump to hyperspeed.
Lightning (Pro): Branching bolts strike at random intervals, each one jittered segment by segment, with a flash and a fading afterglow.
Letter Glitch (Pro): A field of monospace glyphs that flicker and change colour at random, a few cells every frame, with vignettes so copy can sit over it.
Faulty Terminal (Pro): An old monitor full of glyph noise: rows scroll and flicker, bands of corruption tear across, scanlines and curved glass sit on top, and the brightness breathes.
Gradient ASCII (Pro): Two soft lights drift over a dark field drawn entirely in ASCII: each cell picks a character by the brightness under it, so the gradient becomes a swimming ramp of punctuation.
Dither (Pro): A drifting field of value noise quantised with a Bayer matrix into two tones, so light and shadow break into the ordered crosshatch of early screens, with a ripple from the pointer.
Light Rays (Pro): Volumetric rays fanning out from one edge, swaying on slow noise and leaning toward the pointer. Rendered at a fifth of the size and upscaled, so the softness is free.
Side Rays (Pro): Thin diagonal rays entering from one side and fading before the centre, each sliding along the edge on its own slow cycle, like light through blinds.
Light Pillar (Pro): Vertical pillars of light rising from the bottom edge with soft sides, a slow flicker and faint bands drifting upward. CSS only, so it idles at no cost.
Lightfall (Pro): Streaks of light falling like rain, each landing somewhere in the lower third and blooming out as it fades. Streak count scales with area.
Light Tunnel (Pro): Segmented rings flying out of a vanishing point with real perspective, twisting as they approach and pulsing as they pass the camera.
Prismatic Burst (Pro): A burst of wedge rays from a point, each one a step further round the hue wheel starting at ember, turning slowly and drifting toward the pointer.
Prism (Pro): A glass prism turning in a dark field, a white beam entering one face and a spectral streak sweeping the floor from the other. CSS 3D only.
Dark Veil (Pro): A dark veil of folding noise with light bleeding through the creases, optional scanlines and grain. WebGL, written in the file.
Orb (Pro): A glowing orb with a soft rim, a slowly turning inner swirl, a core that leans toward the pointer and a halo that brightens on hover.
Aero Shards (Pro): Translucent glass shards floating at different depths, drifting and tilting on their own cycles, the field parallaxing to the pointer by depth.
CRT Warp (Pro): A CRT screen over anything: curved glass, phosphor scanlines, a rolling band, chromatic edges and a faint flicker, with the content underneath still interactive. CSS only.
Liquid Chrome (Pro): A mirror-metal surface that folds slowly over itself, lit by a horizon band so it reads as chrome rather than noise. The pointer pushes rings into it.
Iridescence (Pro): A soft thin-film sheen: layered sine fronts interfere and map to a spectral palette anchored on your base colour. Moving the pointer tilts the film so the spectrum slides.
Plasma (Pro): The classic summed-sine plasma, folded into a two-tone palette instead of a rainbow. The pointer adds a ring source the pattern focuses on.
Plasma Wave (Pro): Horizontal plasma bands roll across the box like swells, each with a bright line along its crest and a body that fades out below.
Balatro (Pro): A swirling paint vortex of three colours folding into each other, with optional pixelation and a tilt toward the pointer. WebGL, written in the file.
Color Bends (Pro): Smooth bands of colour bending across the field like light through curved glass, flowing diagonally and bulging toward the pointer. WebGL, written in the file.
Molten Metal (Pro): A dark cooled crust with bright veins of heat crawling through its cracks: Voronoi edges warped by noise, pulsing, and warming around the pointer. WebGL, written in the file.
Liquid Ether (Pro): Ethereal wisps drifting and curling through darkness along a divergence-free curl-noise flow, two colours mixing where they meet, and a vortex around the pointer. WebGL, written in the file.
Ferrofluid (Pro): A pool of glossy black fluid that rises into spikes under a magnet that follows the pointer: a noise field thresholded against a distance field, lit with a sharp specular. WebGL, written in the file.
Nebula (Pro): Layered fractal clouds drifting slowly, lit from within in greys and the accent colour, with stars pricking through the thin parts. A Charcoal original. WebGL, written in the file.
Caustics (Pro): Underwater light: interfering bright lines drifting over a dark pool floor, the way sun looks through a wave. A Charcoal original. WebGL, written in the file.

Cursor

Cursor Trail (Pro): Ember sparks fly off the pointer, drift down and cool, scoped to one area.
Blob Cursor (Pro): A soft follower that trails the pointer and swells over links and buttons, inverting what it covers. The real cursor stays.
Spotlight Reveal (Pro): The pointer cuts a soft circle through the top layer to show the content beneath.
Image Trail (Pro): Images drop along the pointer's path, tilting slightly, then fade away.
Cursor Label (Pro): Elements with data-cursor="View" show that label in a pill that follows the pointer.
Glow Cursor (Pro): A soft radial glow follows the pointer and flares over links and buttons. Screen blending lights up what it covers instead of tinting it.
Swarm Cursor (Pro): A flock of small dots chases the pointer with simple boid rules (chase, cohesion, separation) and idles in a slow orbit when the pointer leaves. Each dot trails a short streak along its velocity.
Cursor Grid (Pro): A grid of dots, crosses or squares behind the content. Cells near the pointer light up, grow and turn to face it, then cool down slowly after it passes.
Target Cursor (Pro): Four corner brackets spin slowly around the pointer and lock onto any hovered link or button, springing to its bounds. The spin stops while locked so the brackets sit square.
Ghost Cursor (Pro): A dot follows the pointer and drags a streak of fading, shrinking copies behind it, each chasing the one ahead. Fast moves smear into a motion-blur tail; the chain stops animating once it has caught up.
Splash Cursor (Pro): Ink splashes on a canvas: soft blobs spawn along the pointer's path carrying its velocity, then slow, spread and fade like dye in water, and clicks burst a ring of them. Not a fluid simulation, so it idles for free.
Click Spark: Short lines radiate from every click and fade as they fly out. Draws only while a burst is alive.
Crosshair (Pro): A horizontal and a vertical line span the area and follow the pointer with an x, y readout. Over a link or button the pair splits into four and snaps to the element's edges, and the readout shows its size.
Pixel Trail (Pro): Square pixels light up wherever the pointer passes and fade in four discrete steps, so the trail reads as a low-resolution display rather than a blur.
Ribbons (Pro): Silk ribbons chase the pointer on a canvas, each one lagging a little behind the last and drawn as a tapered band, so a fast sweep leaves a flowing trail that runs out when the pointer leaves.
Morph Cursor (Pro): A custom cursor that morphs with what it is over: a dot in open space, a ring framing links and buttons, a text bar over copy, a soft wide circle while the mouse is held down.
Ripple Cursor (Pro): Click anywhere in the container and rings expand from the point, one after another, then fade.

Image

Parallax Image (Pro): The image drifts slower than the page inside its frame, adding depth as you scroll.
Pixelate Reveal (Pro): The image resolves from chunky pixels to full detail when it enters view. Hover to replay.
Image Reveal (Pro): A clip-path wipe uncovers the image while it settles from a slight zoom.
Zoom Lens (Pro): A magnifying lens follows the pointer over a product image.
Ken Burns (Pro): A slow, documentary-style pan and zoom that cross-fades through a set of images.
Pixel Transition (Pro): Hover or click covers the content with a grid of cells in random order, switches to the alternate content underneath, then clears the cells. Cells snap rather than fade, which is what makes it read as pixels.
Scroll Expand (Pro): A pinned section whose media starts as a small centred frame and grows to fill the viewport as you scroll, with a caption that lands once it is full. The viewport is measured from the scroll container, so it also works inside a scroll box.
Orbit Images (Pro): Images orbit a centre on concentric rings, each ring at its own speed and direction. Hovering a ring pauses it and lifts the image under the pointer.
Halftone Reveal (Pro): The image sits under halftone dots sized by the darkness beneath them, a print of the picture; hovering shrinks the dots away in a wave from where the pointer entered.
Pixel Swap (Pro): Two images swap through a grid of two-sided blocks that flip over in a diagonal wave, corner to corner, and flip back when the pointer leaves.
Dither Veil (Pro): An ordered-dither veil over the content, thinning in the classic Bayer crosshatch as the pointer approaches and clearing under it, with a little lag.
Ripple Distortion (Pro): Water over a photo: a height-field ripple simulation offsets every pixel by the local slope, so the pointer drags rings across the picture and a click drops a stone in. Canvas 2D.

Interactive

Hover Reveal List (Pro): A list of projects; hovering a row floats its image beside the pointer.
Pixel Grid (Pro): Square cells light up ember under the pointer and fade out slowly behind it.
Draggable Cards (Pro): Polaroids scattered on a table. Drag one and it lifts to the top.
Image Accordion (Pro): Image panels side by side; the hovered or focused one expands and reveals its caption.
Velocity Marquee (Pro): Big text drifting sideways that speeds up with your scroll and flips direction when you scroll back.
Stack Cards (Pro): Cards pin as you scroll and stack on top of each other, the ones underneath shrinking back.
Gooey (Pro): Liquid UI: pieces that touch melt into one another and stretch apart like goo, while text and icons stay perfectly crisp. An SVG filter plus springs, so it works with any markup.
Glare Hover (Pro): A diagonal band of light sweeps across whatever you wrap when the pointer arrives. The band is a translated layer, so nothing underneath repaints.
Sticker Peel (Pro): Any child becomes a sticker: a corner lifts on hover to show a lighter underside with a real fold shadow, and it can be dragged around its parent. The flap is the content itself mirrored across the fold line, so it works at any size.
Shape Blur (Pro): A blurred shape lives behind your content and trails the mouse on a spring, swelling while it moves and settling when it stops. Mouse only; it rests in the centre under reduced motion.
Cubes (Pro): A grid of CSS 3D cubes that tip toward the pointer and ripple outward from wherever you click. Every cube is a button, so the ripple works from the keyboard too.
Strands (Pro): Hair-like strands rooted along the bottom edge sway in a slow breeze and bend away from the pointer. Verlet chains on a canvas, so they keep their length and spring back naturally.
Meta Balls (Pro): Blobby balls drift around a box and melt together where they meet; one follows the pointer. A real metaball field summed on a low-resolution canvas, so the merge is smooth and the colour follows the theme.
Crystalized Ball (Pro): A faceted glass sphere in SVG: each cut facet is lit on its own, the pointer tilts the ball and slides a glint across it, and it turns slowly on its own.
Elastic Mesh (Pro): A grid of points on springs, coupled to their neighbours, so the pointer dents the mesh and the dent rings outward and settles.

Transitions

Card Resize (Pro): A box that springs to the size of its content, so swapping what's inside never snaps.
Notification Badge (Pro): A count badge that pops in with a spring; new numbers slide in on a diagonal, and it scales away at zero.
Text Swap: Swaps one label for another with a short rise and blur while the width eases to fit: Pay → Processing… → Paid.
Icon Swap: Swaps icons with a scale-and-blur cross-fade: copy to check, play to pause, sun to moon.
Page Transition (Pro): Native-feeling push and pop between views: the new page slides over while the old one drifts and dims.
Error Shake (Pro): A decaying head-shake for wrong input, as a wrapper or a useShake() hook.
Arrow Link (Pro): A “Learn more” link whose chevron slides right and grows a stem on hover, turning into an arrow. CSS only.
Number Pop (Pro): Only the digits that changed pop in from a blur, one after another, so 65.78 → 65.92 animates two characters.
Spinner Check (Pro): A spinner that closes into a ring and draws a check, or a cross on error. One glyph for any async action.
Banner Stack (Pro): Banners stack like a deck, three deep; hover fans them into a list and dismissing slides the next forward.
Thinking States (Pro): An agent's status line: the current step shimmers, then rises away as the next one arrives.
Streaming Text (Pro): Model output that resolves word by word through a soft blur; works with a growing string from a stream.
Dot Matrix (Pro): A 4×4 dot loader with four timing patterns: wave, spiral, pulse and rain. CSS only.
Clear Input (Pro): A search field whose clear button dissolves the text word by word instead of blanking it.
Morph Menu (Pro): A button that stretches into its own menu surface, then shrinks back. Arrow keys and Escape work.
Reasoning Stream (Pro): Agent reasoning trickling through a two-line window, collapsing to a summary that expands into the transcript.
Orbit Text (Pro): Text lit by washes of colour that circle through the letters out of phase. CSS only.
Organic Shimmer (Pro): A shimmer whose band ripples like heat haze with a glowing edge, moved by transform so it composites.
Pro Button (Pro): The upgrade button: a colour band orbits the border, a glint sweeps the face and the sparkle twinkles.
Image Generation (Pro): A dot field stirs while the model works, then each dot takes the colour beneath it until the picture resolves.
Smoke Dissolve (Pro): Delete with ceremony: an image shreds into grains that drift away on a breeze, greying into smoke.
Tilt Open Image (Pro): A thumbnail that opens full screen as if lifted off the page, tilting in 3D on the way and settling flat.
Drop Morph (Pro): A drop zone that becomes the image you dropped, landing with a tip and a settle.