Animated, interaction-first components for React: 70+ loaders, interactive SVG icons, plus blocks, sections and UI primitives. Built with Tailwind CSS v4 and Motion, with every animation hand-tuned rather than generated.
A circle fills with a flowing wave animation, the color rises from bottom to top with undulating motion
An outlined coffee cup where two layered waves of liquid slosh continuously at a constant level
Circular pie-style loader that fills clockwise from 0° to 360° in 8 equal steps over 2 seconds
Hovering an icon previews which slice of the identity string it maps to; clicking commits the selection so it also works on touch. The highlighted span and its dashed underline animate width/position with a layout spring, the caption crossfades, and the icon row's hover-dim effect is pure CSS via :has/:not/:hover.
Core dependencies for CraftUI — framer-motion and motion.
Static center cross with four corner squares that expand outward, rotate 90°, then retract in a pulsing geometric pattern
The headline is not a straight line of text: every glyph is positioned by a Gaussian curve equation, distributed along it by arc length and rotated to its tangent. Perfect for marketing pages.
App icon shoots up, squashes on landing with scaleX/scaleY, decays through two secondary bounces, then pauses before repeating
Static center dot with four corner dots that pulse outward and return, creating a dynamic radial expansion effect
Each row is an independent binary counter at a different speed. The bottom row flips every tick; the top row changes rarely. Every dot can be in a unique state.
A bright leader and dimmer chaser travel the same spiral path 55% of its length apart. Their interlocking tails create a kinetic, predator-prey visual.
Each generation, every dot lives or dies based on its 8 neighbours following Conway's rules. Seeded with multiple blinker oscillators that interact across the toroidal grid.
Each column runs an independent drop cycle. A bright head falls from top to bottom with a trailing glow, then pauses before the next drop begins.
Each concentric ring has one bright active dot that travels its perimeter. Inner rings spin at 2×, 4×, 8× the speed of the outer ring, creating a constantly-changing phase relationship between rings.
Dots in a horizontal row bounce upward sequentially with staggered delays creating a wave-like typing indicator
Three dots alternating between horizontal spread and vertical stack with container morphing
Three circular dots that continuously rotate 120 degrees around a center point
Arrow continuously bounces down into the tray while download is in progress
Arrow translates down into the tray and snaps back on click
On hover, the box fills with color and the arrow bounces diagonally up-right along its direction, then returns
A split feature section for AI, GPU and developer-infrastructure marketing pages: an isometric compute-stack diagram anchors the header, a list of capability words sits on the left, and an olive card on the right answers each one with body copy and a generative canvas loop. The card walks itself through all six capabilities on autoplay so a scroller sees the whole story, then hands control over permanently the moment someone hovers, focuses or taps a row. Useful anywhere a platform has more claims than a hero can hold and each claim needs its own sentence without stacking six cards down the page.
Cards rise into place on scroll, then the clicked card widens around a stationary image while the rest narrow. Heights never change; the label and scrim fade in last.
Five travel destinations revealed through a sticky scroll. The right panel stacks images in a weighted parallax strip; the left panel slides in destination info driven by scroll position.
A thumbs up/down pair that morphs into a confirmation bar via a single persistent node running `layout`, with an Undo capsule that plays the morph back in reverse on a faster, flat spring.
An outlined lab flask holds liquid while staggered bubbles rise and pop at the surface
A full-bleed travel poster with the flight held behind a progressive blur that fades away at the card's midline — airport codes, cities and times either side of an airplane on a dashed route track, with the duration beneath it. The painted sky under the photograph doubles as a grade over it, so a photograph the component never chose still belongs to the card. Colour is OKLCH throughout, every fade is an eased gradient rather than a linear one, and the frame and its controls carry separate concentric radius systems. Every measurement is a fraction of the card's own width — blur radius, dash rhythm and icon included — so it holds its composition from a narrow column to a full-width hero with no breakpoints. Renders entirely on the server.
No hardcoded height or width: the bar sizes to its content and its parent's width, so it drops into any layout as a <nav> or <header>. The blur layer extends past the nav's own edge for clean filter sampling, then gets clipped by overflow-hidden so it never bleeds into content below.
An isometric compute stack — three GPU units racked on a plinth inside a dashed footprint. For AI, GPU and developer-infrastructure pages that need a picture of the machine.
5 dots on even positions and 4 dots on odd positions pulse half a cycle apart, creating a flickering checkerboard
Dots sweep clockwise from top-center (12 o'clock) through all 8 outer positions, then the center fires last
A full column of dots lights up simultaneously, sweeping left to right like a vertical scan bar
The 4 corner dots pulse first, then the 4 edge-center dots, then the center — an inward collapse opposite to ripple
The 5 cross-shaped dots (center row + center column) pulse first, then the 4 corner dots follow — two-phase alternation
Nine dots arranged in a 3×3 grid light up and fade in a rolling diagonal wave, top-left to bottom-right
Dots activate in a fixed but non-sequential order that reads as random — like a matrix initialising
Center dot fires first, then the 4 adjacent edges, then the 4 corners — concentric expansion outward
Dots activate in a boustrophedon (back-and-forth) path that slithers through all 9 positions
Dots activate in a clockwise spiral — outer ring first (top-left → top → right → bottom → left), center last
Each row sweeps left to right in sequence, creating a horizontal wave that cascades downward
Heart shape waits nearly empty then rapidly fills with color in a dramatic pulse, looping like a heartbeat
A roster-to-dossier gallery built on shared-element transitions: one layoutId per card carries it between the thumbnail rail and the full pane, while the detail copy is staggered in on top of the morph.
A hexagon outline or filled shape rotates 360° continuously with smooth linear motion
Click the icon to toggle the selected state. The icon will animate to indicate selection.
Stroke animation draws the house from foundation to roof during loading
Sand streams from the top bulb into the bottom one, then the hourglass rotates 180 degrees and drains again
A dot traces the mathematical lemniscate (infinity symbol) path smoothly and continuously
A marketing card whose lower half is a halftone field with a comet swept through it — the cone is a void carved out of the dots, not a shape drawn over them. One signed-distance function decides both which dots are removed and which are feathered at the edge, and three OKLCH shades bucketed by distance from the wake give the flat grid depth. Generated deterministically at module scope, so server and client draw the identical card.
12 rounded spokes with linear opacity comet tail — the exact macOS connecting spinner