145 animated React components with motion, glow and sound effects, built with Tailwind CSS v4.
A stack of headed sections where one or several open at a time, with a collapse that animates without measuring, arrow-key navigation between headers and labelled regions for assistive tech.
Glanceable checklist of an agent's plan: a done/total count and completion bar over one row per step, with a status glyph, an optional detail line, and substeps indented under a rail
Compact comparison table for a model's structured answer: real table semantics, tabular numeric columns, check-or-dash booleans, and one tintable column — rendered in the order it arrived, with no sorting
A confirmation dialog for consequential, hard-to-undo actions — fixed confirm/cancel actions, never dismissed by an outside click
Fibre-optic connector between two elements: a light packet with a dispersing chromatic tail runs along a glass fibre and blooms behind the destination on arrival; theme-aware, seeded and still under reduced motion.
Testimonial carousel with smooth slide animations and optional autoplay
Presence stack of overlapping avatars with a thin, dimmed ring each that lights up on hover or focus while the avatar lifts, its neighbours part to make room, and a glass name card rises, leaning toward the pointer, as one line of light sweeps under the name
Horizontal card carousel where the focused card expands into a spring-animated full-screen view
A human-in-the-loop gate before a side effect: the agent states what it is about to do, and the footer swaps its approve and deny buttons for a one-line verdict once someone decides
A generated document as a tangible object: title, kind, a version navigator, and the first six lines of the text itself streaming in behind a fade
A free-text field with a portalled panel of matching suggestions — any typed value is valid; the panel only ever helps finish it faster.
A person or account as an image that shows a skeleton while it loads and falls back to one or two initials on a colour fixed by the name, as a circle or a rounded square
A short pill of status text in five treatments and two sizes, with native span attributes passed through
Grid of framed tiles, each a hairline frame around a softly top-lit panel, where an accent glow rises from below on hover while the content lifts and the call to action slides in, and the tiles fade up in a stagger the first time the grid scrolls into view.
Scroll-triggered reveal that unblurs and slides each direct child into place as the container enters the viewport, staggering up to 10 children via CSS nth-child delays and respecting reduced motion
3D book component with cover, spine, and back face that opens on hover
A single comet of light riding a container's border: a white-hot head, a long feathered tail fading between two colours, a dim hairline that lights up only within the comet's reach, and a soft bloom that sits on the edge.
Reveal animation where a solid color box slides left to right across content on viewport entry, unveiling it as it fades up into place underneath, triggered once via IntersectionObserver
A data-driven trail of links with automatic truncation, a decorative separator, and the current page marked for assistive tech.
The foundational push-button: six variants, three sizes, a loading state, and a polymorphic href/anchor mode
Joins a row of adjacent actions into one seamless control — one border, one divider, no doubled edges
Interactive 3D perspective card with depth effects on child elements
Card whose radial-gradient spotlight tracks the cursor as it moves inside, fading in on hover and parking itself off-canvas when the pointer leaves, with configurable gradient size, color, and opacity
Quiet inline failure banner for a chat turn: the error, an optional detail line, and a retry button that disables itself while the retry is in flight
One conversation turn, aligned and dressed by its role, streaming its body while the answer arrives, with an action rail that fades in on hover and a version navigator underneath
The shell a conversation lives in: a sticky header, a transcript that pins itself to the bottom while an answer arrives and offers the way back once you scroll up, and a sticky composer row
A tri-look checkbox — unchecked, checked, indeterminate and disabled — built on a native checkbox input
Unified diff tuned for chat width: one foldable card per file, tinted add/delete rows, and a copy-safe gutter
A single disclosure: a trigger that expands and collapses a region, animated without measuring so an interrupted toggle simply reverses, with the closed content kept in the page.
Per-character text animation where each glyph transitions to a new color from a shuffled palette, staggered across characters and reshuffling automatically every 5 seconds using pure CSS transitions
A single-choice text field over a closed set of options — typing filters a portalled listbox, and a value outside the list can never be selected.
A modal search palette over a flat vocabulary of items — grouped results, diacritic-insensitive filtering, match highlighting, and full keyboard navigation with focus that never leaves the search field.
Before/after image comparison slider split by a blade of light: a white-hot seam with a chromatic fringe, pulses running along it and a trail that stretches with the speed of the gesture
The input at the bottom of a chat, taken apart: a root that owns the draft and eight parts that read it — a growing textarea, a send button that becomes a stop button, a toolbar, a model picker, an attachment row with its chips, and a completion menu you can mount twice on the same draft for / commands and @ mentions
Confetti celebration effect powered by canvas-confetti with button trigger support
Scroll-driven aperture: the card opens from a bright seam as it enters the viewport while its content settles into focus and the title blurs away, with no 3D tilt
Text container that cycles through words with per-character blur animation
A menu that opens at the pointer on right-click, sharing DropdownMenu's item, submenu and keyboard behaviour but anchored to a virtual point instead of a trigger element.
How much of the context window is gone, in the space of a favicon: a donut that fills as the conversation grows, the compact count beside it, and an optional popover breaking the total down by what is holding it
Button preset wired to the clipboard, morphing its icon and label to a success or failure state for a moment after each copy attempt
Page-transition overlay that looks like a corrupted video decode: a fixed grid of columns, narrow on the left and wide on the right, fills with flat blocks of saturated colour that fall, snap open through the middle of the frame and squeeze shut again; cover() drops the columns over the page right to left and reveal() lets them fall away, both as promises for any router's navigation hook
A field that opens a floating month grid, with full keyboard navigation (arrow keys across days, Page Up/Down across months, Shift for years), min/max and per-day disabling, and a fully localized accessible name on every day cell.
A modal panel with a title, description, body and free-form footer — portals out, traps focus, and locks the page's scroll while open
Wraps a group of cards, links, or list items so hovering or keyboard-focusing one dims (or blurs) every other one — a pure CSS :has() affordance with zero pointer-tracking JavaScript
Image card with overlay that slides in from the mouse entry direction
3D text with WebGL displacement that follows the cursor using Three.js shaders
Icon dock on a lit glass shelf: icons swell on a smooth cosine curve toward the pointer, a soft pool of light and a brightening edge follow it across the shelf, and a small dot and floor reflection mark the icon underneath.
A modal bottom sheet with a grab handle, draggable shut with a downward swipe — for filters, quick actions, or any touch-first task