@craftui

Core dependencies for CraftUI — framer-motion and motion.

Shake animation during delete operation

Lid lifts and bounces during delete operation

Lines fill up and trash compresses during delete operation

Paths dissolve upward sequentially like smoke during delete operation

On hover, the dark tab slides up, the base slides down, and the triangle arrow pops up between them creating an opening effect

Item falls into cart from above and cart shakes when adding to cart

Click the button to see the refresh icon in action.

Circular stroke drawing effect

Dashed segments travel along the path

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.

Bubbles slide in from opposite sides with spring bounce. Perfect for chat interface loading or conversation opening.

Envelope flap opens on hover to reveal mail inside

Icon bounces and shows glowing ping indicator when new mail arrives

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

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

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

On hover, the box fills with color and the arrow bounces diagonally up-right along its direction, then returns

Arrow translates down into the tray and snaps back on click

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.

Bulb fills and rays appear on hover to indicate ideas/tips

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

Five horizontal bars slide into position one after another, filling a triangle shape from bottom to top in a waterfall effect

A rectangle collapses to a thin line then expands back, simulating a 3D Y-axis flip animation

Four 90-degree arc segments at the corners of a square expand and contract while rotating 360° with bouncy easing

Four squares at the corners of a bounding box shift positions clockwise, creating a spinning dance animation

Dots arranged in a radial pattern rotate together as a group, with opacity gradient creating a comet-tail effect

Center bar tallest, outer bars shortest — all oscillate with staggered delays creating a smooth symmetric wave that pulses outward from center

A glowing gradient segment — bright at the leading edge, fading behind — sweeps across a faint track and resets

Staggered rings emanate from the center, scaling up and fading out like ripples on water

Exponential opacity decay — only 4-5 spokes are visibly bright, the rest vanish sharply, creating an intense laser comet

8 wide pill-shaped spokes at 45° apart — bold and graphic, great for large-screen or kiosk UIs

Each spoke flashes bright in sequence — no group rotation, the glow steps discretely around the clock

Each spoke shoots outward radially as it activates — a blooming radial extension effect

Outer ring of 12 spokes clockwise, inner ring of 8 spokes counter-clockwise — gyroscope effect

12 circles on an orbit ring with comet-tail opacity — same mechanic as classic, rounder feel

12 rounded spokes with linear opacity comet tail — the exact macOS connecting spinner

A dot traces the mathematical lemniscate (infinity symbol) path smoothly and continuously

A hexagon outline or filled shape rotates 360° continuously with smooth linear motion

Heart shape waits nearly empty then rapidly fills with color in a dramatic pulse, looping like a heartbeat

Each row sweeps left to right in sequence, creating a horizontal wave that cascades downward

Dots activate in a clockwise spiral — outer ring first (top-left → top → right → bottom → left), center last

Dots activate in a boustrophedon (back-and-forth) path that slithers through all 9 positions

Center dot fires first, then the 4 adjacent edges, then the 4 corners — concentric expansion outward

Dots activate in a fixed but non-sequential order that reads as random — like a matrix initialising

Nine dots arranged in a 3×3 grid light up and fade in a rolling diagonal wave, top-left to bottom-right

The 5 cross-shaped dots (center row + center column) pulse first, then the 4 corner dots follow — two-phase alternation

The 4 corner dots pulse first, then the 4 edge-center dots, then the center — an inward collapse opposite to ripple

A full column of dots lights up simultaneously, sweeping left to right like a vertical scan bar

Dots sweep clockwise from top-center (12 o'clock) through all 8 outer positions, then the center fires last

5 dots on even positions and 4 dots on odd positions pulse half a cycle apart, creating a flickering checkerboard

An outlined droplet fills bottom to top with an undulating water wave

An outlined thermometer with a mercury column that rises from the bulb to the top in a loop

A stream of paint pours into an outlined bucket while the level inside rises, then fades and repeats

Sand streams from the top bulb into the bottom one, then the hourglass rotates 180 degrees and drains again

An outlined lab flask holds liquid while staggered bubbles rise and pop at the surface

An outlined coffee cup where two layered waves of liquid slosh continuously at a constant level

An outlined beer mug fills with amber liquid while a bubbly foam cap rises on top

An outlined battery charges up as the level sweeps from empty to full in a loop

Arrow continuously bounces down into the tray while download is in progress

Three circular dots that continuously rotate 120 degrees around a center point

Three dots alternating between horizontal spread and vertical stack with container morphing

Dots in a horizontal row bounce upward sequentially with staggered delays creating a wave-like typing indicator

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-ch…

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 generation, every dot lives or dies based on its 8 neighbours following Conway's rules. Seeded with multiple blinker oscillators that interact across the …

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 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.

Static center dot with four corner dots that pulse outward and return, creating a dynamic radial expansion effect

App icon shoots up, squashes on landing with scaleX/scaleY, decays through two secondary bounces, then pauses before repeating

Static center cross with four corner squares that expand outward, rotate 90°, then retract in a pulsing geometric pattern

Circular pie-style loader that fills clockwise from 0° to 360° in 8 equal steps over 2 seconds

A circle fills with a flowing wave animation, the color rises from bottom to top with undulating motion

Two concentric rings where the foreground ring wipes clockwise from 0% to 100% over the background track

A filled circle inhales and exhales with a trailing outer glow ring — inspired by the MacBook sleep indicator LED

Five vertical bars with staggered height animation creating a wave effect

Vertical bars grow and shrink in a wave pattern with staggered delays, resembling an audio equalizer

Three vertical bars scaling up and down with bottom fixed

Three vertical bars scaling up and down with sequential animation

Six bars arranged in three pairs that continuously pulse while swapping between stacked and overlapped positions

Three bars that rise from bottom to top in sequence, creating a wave effect

Three vertical bars with smooth fade animation

Four horizontal bars with stripe pattern that cascade down from top, stack up, then cascade out from bottom

Three bars that synchronously change height while bouncing between top and bottom positions

A ball with extreme bounce easing slides horizontally across a ground line, creating a dynamic rolling/bouncing motion

Ball stays centered and bounces in place while a dashed ground line scrolls underneath, creating the illusion of motion

A square box outline rotates 90° in stepped intervals while a ball bounces rapidly inside it

A ball slides left to right then reverses direction, bouncing on the ground line creating a pendulum-like motion

Five vertical bars animating in a symmetric wave pattern like audio visualization

Six vertical bars with sequential wave animation traveling from left to right

Six vertical bars fading in and out as they grow and shrink, creating a ghosting wave effect

Six vertical bars with perfectly synchronized alternating heights creating a rhythmic wave

Six vertical bars with gradient fill, glow effect, and synchronized alternating animation

A rounded arc sweeps around a faint track using strokeDashoffset animation, with a brief pause between each full rotation

Three nested arcs (75% visible) rotate at different speeds — outer slowest, inner fastest — with decreasing opacity inward

The image, background color, CTA button, and a badge icon all animate between a cover-photo stage and a detail stage with price and tags, connected by an icon …

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, selec…

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 pl…

A subscribe pill that morphs idle → field → confirmation → idle on one persistent `layout` node, with letter-by-letter label growth during the request and a se…

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 …

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 th…

A two-level modal built on shadcn's Dialog inspired by Luma modal transition.

Small avatar in a phone frame expands via layoutId into a floating profile card with staggered menu groups.

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 a…

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-positi…

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, dro…

A profile-picker gate where the chosen avatar flies on an `arc()` path between the roster and the centre, a PIN pad grows out of it, and success hands the bott…

Three-stage morph: thumbnail pill → landscape card → portrait card. Text scales inversely as the image grows.

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 detai…

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 p…

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 reve…

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 tang…

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…

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 sharin…

Auto-scrolling vertical word ticker with kinetic typography. A fixed arrow pointer highlights the active item as the list cycles on a timed interval.

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 …

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 wit…

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 bl…

A full-height wellness hero: serif headline, a dark primary CTA beside a light secondary, a mask-faded bloom image on the right, and a product table pinned to …

A team section built around the avatar cluster. Perfet to use to showcase your team details in a website.

A hero section made for OrchidAI.

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…

Five travel destinations revealed through a sticky scroll. The right panel stacks images in a weighted parallax strip; the left panel slides in destination inf…

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 i…

A split feature section for AI, GPU and developer-infrastructure marketing pages: an isometric compute-stack diagram anchors the header, a list of capability w…

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 o…

Four benchmark readouts on the 1440 grid, separated by hairline rules and corner notches rather than cards. F1 is an isometric bar city, accuracy a hundred-uni…

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, an…

An isometric cube with one corner block cut out and set down beside it — sharp corners, flat shading, nothing else on the page.

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 o…

A three-lane automation diagram: web, maps and AI sources on the left, a settings card in the middle, and the agents and booked confirmation they produce on th…

An upsell dialog in its open state on the shadcn Nova preset (Stone, Blue, radius 0). Gradient hero with a square close mark, a title-and-badge row held apart …

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…

An onboarding card on the shadcn Nova preset with a layer-blurred blue haze across the top, three inset-bordered tiles carrying hand-drawn ink illustrations — …

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…

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. O…

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 o…

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 …

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.

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…

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 dec…

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 pa…

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.