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.
Two-layer card reveal — the question clips away via clip-path in the chosen direction, exposing the answer beneath. Click the answer to return.
Each trigger lifts with a 3D spring when open, and the content slides up from behind it. Spring stiffness and damping are fully configurable via the DialKit panel.
Content panel opens and closes with a cubic-bezier easing curve. Use the DialKit easing editor to draw any curve — ease-out, ease-in-out, or a custom bezier.
Three nested arcs (75% visible) rotate at different speeds — outer slowest, inner fastest — with decreasing opacity inward
A theme-token-driven AI prompt composer. Mode and model pickers morph between a collapsed pill and an expanded panel through a shared layoutId spring with a blur cross-fade; the plus button fans out a radial attachment menu; tool chips reveal with a staggered cross-blur; the mic cross-fades to an animated waveform while a typewriter transcript slides in. Attachments, tools, modes, models, and transcript phrases are all props, with controlled/uncontrolled selection per dimension. The pickers ship as full APG menus (roving tabindex, arrow-key navigation, focus restore), every control carries an accessible name, closed reveals are inert, the transcript announces through an aria-live region, and all motion honors prefers-reduced-motion.
A hero for data and API products drawn as a technical document: square planes, hairline rules, corner crop marks, and an uppercase monospace UI voice against one blue accent. The centre panel denoises a 168-tick noise field down to its retained signals on scroll, the logo wall cycles customer wordmarks on a spring, and every token ships akta- prefixed so the design language is reusable across a whole site.
The alarm rocks left and right like a ringing bell, with ears counter-rotating to sell the physics
The clock hand sweeps a full clockwise rotation on click, like dialing an alarm to confirm it's set
(No description)
(No description)
(No description)
(No description)
(No description)
(No description)
(No description)
A rounded arc sweeps around a faint track using strokeDashoffset animation, with a brief pause between each full rotation
A two-pill decision control that morphs in place: the pressed slot expands and tints while the other collapses to an undo circle, the word completes itself with a dropped-in suffix, and each verdict gets its own one-shot flourish.
Six vertical bars with gradient fill, glow effect, and synchronized alternating animation
Six vertical bars fading in and out as they grow and shrink, creating a ghosting wave effect
Six vertical bars with sequential wave animation traveling from left to right
Six vertical bars with perfectly synchronized alternating heights creating a rhythmic wave
Five vertical bars animating in a symmetric wave pattern like audio visualization
A team cluster laid out on a hatched placeholder grid — avatars sit in fixed cells around a centre brand mark under a circular fade, and hovering one lifts it out of the grid and restores its colour.
A ball slides left to right then reverses direction, bouncing on the ground line creating a pendulum-like motion
A square box outline rotates 90° in stepped intervals while a ball bounces rapidly inside it
Ball stays centered and bounces in place while a dashed ground line scrolls underneath, creating the illusion of motion
A ball with extreme bounce easing slides horizontally across a ground line, creating a dynamic rolling/bouncing motion
Three bars that synchronously change height while bouncing between top and bottom positions
Four horizontal bars with stripe pattern that cascade down from top, stack up, then cascade out from bottom
Three vertical bars with smooth fade animation
Three bars that rise from bottom to top in sequence, creating a wave effect
Six bars arranged in three pairs that continuously pulse while swapping between stacked and overlapped positions
Three vertical bars scaling up and down with sequential animation
Three vertical bars scaling up and down with bottom fixed
Vertical bars grow and shrink in a wave pattern with staggered delays, resembling an audio equalizer
Five vertical bars with staggered height animation creating a wave effect
An outlined battery charges up as the level sweeps from empty to full in a loop
An outlined beer mug fills with amber liquid while a bubbly foam cap rises on top
A filled circle inhales and exhales with a trailing outer glow ring — inspired by the MacBook sleep indicator LED
Bulb fills and rays appear on hover to indicate ideas/tips
On click, a burst of color-varied confetti pieces launches from the button center — each with its own angle, distance and rotation — arcing up and falling back down under simulated gravity.
On hover or focus, the label's characters cycle rapidly through random glyphs before locking in to the real text one character at a time, left to right — a decode-style reveal built entirely from content substitution, no positional or color motion.
On hover or focus, five color-shifted sparkle particles launch along the button's border via CSS offset-path, each with its own speed, scale and landing spot.
Calendar body rotates in 3D along the top edge like flipping a physical calendar page. Header with binding rings stays fixed. Perfect for month navigation.
Calendar body splits and opens like a book on hover. Left half slides left, right half slides right. Perfect for date picker buttons that open calendars.
Date dots slide out to the left and new dots slide in from the right when month changes. Calendar body and header stay fixed.
A compact trigger button that morphs into a checkout card with tabbed payment methods (QR, card, Apple Pay, Amazon Pay) and a connect-wallet screen, all sharing one layout shell.
Two concentric rings where the foreground ring wipes clockwise from 0% to 100% over the background track