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.
12 circles on an orbit ring with comet-tail opacity — same mechanic as classic, rounder feel
Outer ring of 12 spokes clockwise, inner ring of 8 spokes counter-clockwise — gyroscope effect
Each spoke shoots outward radially as it activates — a blooming radial extension effect
Each spoke flashes bright in sequence — no group rotation, the glow steps discretely around the clock
8 wide pill-shaped spokes at 45° apart — bold and graphic, great for large-screen or kiosk UIs
Exponential opacity decay — only 4-5 spokes are visibly bright, the rest vanish sharply, creating an intense laser comet
On hover, the two filled panels swap to the opposite two panels
On hover, the filled boxes physically morph and travel to take the position and shape of the empty boxes
For password visibility toggles - shackle slides up-right and body slides down-left when password is visible (unlocked state)
For premium content unlock or access granted states - shackle lifts upward and rotates 90° in 3D with right side as hinge, body scales slightly
Envelope flap opens on hover to reveal mail inside
Icon bounces and shows glowing ping indicator when new mail arrives
Bubbles slide in from opposite sides with spring bounce. Perfect for chat interface loading or conversation opening.
Front bubble bounces gently up and down to indicate someone is typing. Perfect for real-time chat applications.
Entire icon rotates gently (±5°) on hover. Great for unread message indicators or clickable chat buttons.
An isometric cube with one corner block cut out and set down beside it — sharp corners, flat shading, nothing else on the page.
Three-stage morph: thumbnail pill → landscape card → portrait card. Text scales inversely as the image grows.
One strip, three states: hidden when idle, a thin bar on the active route, a full fill on hover. Width never changes, so the fill reads as the underline rising rather than a box appearing. Below md the items unroll inside the bar as rows and push the page down.
A task list screen inside a phone shell — status bar, home indicator, and a card that fills the display between them. Header with a primary action, a segmented filter, and date-grouped rows carrying completion, status, counts and a rail of edit/complete/delete actions. Two type pairs, concentric 16/8/4 radii, 40px hit areas on every control, press feedback at 0.96, and transitions that name only the properties that move. The progress mark is a wedge drawn on the icon set's own grid, and the last row sits mid-swipe with its delete action revealed. Static — no hooks, no motion library, zero JavaScript.
Multi-step onboarding form with a vertical ticker step indicator on the left and an animated question panel on the right, covering five field types: radio, dropdown, multi-select, short text and long text.
A hero section made for OrchidAI.
Each box wears an SVG outline that behaves like a liquid surface — typing nudges it, moving to the next box hands the ripple off toward its right edge. Pass a validate function and the component choreographs the pending ring, the staggered success wave and the red shake by itself, then calls your onSuccess / onFailure.
A stream of paint pours into an outlined bucket while the level inside rises, then fades and repeats
Clicking the card swaps the image underneath instantly, then dissolves the outgoing photo away as a size × size grid of tiles. Each tile is a background-position slice of the same image, and tiles are assigned to random groups so they vanish in scattered clusters instead of sweeping row by row.
Three photos morph from an overlapping stacked deck into an evenly spaced fan, while the CTA morphs from a small gallery icon into a full-width action button and the price/description/tags fade in.
Small avatar in a phone frame expands via layoutId into a floating profile card with staggered menu groups.
Staggered rings emanate from the center, scaling up and fading out like ripples on water
A two-level modal built on shadcn's Dialog inspired by Luma modal transition.
Click the button to see the refresh icon in action.
Circular stroke drawing effect
Dashed segments travel along the path
A glowing gradient segment — bright at the leading edge, fading behind — sweeps across a faint track and resets
Item falls into cart from above and cart shakes when adding to cart
Center bar tallest, outer bars shortest — all oscillate with staggered delays creating a smooth symmetric wave that pulses outward from center
Dots arranged in a radial pattern rotate together as a group, with opacity gradient creating a comet-tail effect
Four squares at the corners of a bounding box shift positions clockwise, creating a spinning dance animation
Four 90-degree arc segments at the corners of a square expand and contract while rotating 360° with bouncy easing
A rectangle collapses to a thin line then expands back, simulating a 3D Y-axis flip animation
Four cylindrical units stacked into a deliberately unsteady tower. Every ellipse obeys one camera ratio, so height reads as vertical offset rather than as tilt; every surface on a unit is derived from one OKLCH base walked down a ramp that gains chroma as it darkens; ribs are spaced in angle and projected, so they bunch toward the silhouette. The base drum runs off the bottom of the card, which is what makes the tower feel taller than its frame. Static — no hooks, no motion, zero JavaScript.
A vaul bottom sheet wrapping a step-count chart. Each bar is a Base UI vertical slider whose fill is coloured by interpolating in OKLCH rather than sRGB, so the amber-to-green midpoint stays chromatic instead of collapsing to olive. The chart freezes its own scale for the duration of a drag so the bar tracks the finger exactly, then springs to the new ceiling on release. Days are added from a weekday-aligned calendar popover and removed from the header; the month select walks back twelve months. Every measurement is derived — the well's radius from the bars, the bar gap from how many days are on record, the sheet's radius from the card's.
Tabs expand a panel above the bar via a spring-driven height animation. Panels are either a chip filter list (subs) or any React node (panel). LoginPanel is a named export for use as a panel slot.
On hover, the dark tab slides up, the base slides down, and the triangle arrow pops up between them creating an opening effect
A team section built around the avatar cluster. Perfet to use to showcase your team details in a website.
Four HH:MM digit cards. On change, the old digit's top half hinges down on the center seam (ease-in free fall), then the new digit's bottom half swings into place with an overshoot-and-settle bounce. Shading overlays darken the falling flap and light up the landing one for a 3D feel.
Collapsed status pill morphs into an expanded font or theme list via a shared layoutId spring, with a blur cross-fade on the inner content. Themes/fonts, selection, and change callbacks are all props. Includes an inlined iOS pulse spinner so the block ships self-contained.
An outlined thermometer with a mercury column that rises from the bulb to the top in a loop
Seven marketing and data tools wired into a single stack. Dashed rails run from each logo into a central card, light pulses travel the rails on a 7.5s loop, and three stacked slabs fade up in turn as their pulses land — a picture of many sources collapsing into one destination.
Shake animation during delete operation