---
name: "@movin"
slug: "movin"
description: "288 animated UI components: buttons, toggles, checkboxes, inputs, loaders, radios and cards. Zero dependencies for most, Framer Motion for a few, with a plain HTML/CSS version of each. MIT-0."
category: "Animated components"
tags: ["3d", "animation", "audio", "backgrounds", "buttons", "cards", "forms", "glassmorphism", "loaders", "marketing", "media", "mobile", "retro", "text-effects"]
framework: "react"
license: "MIT-0"
author: "raza-ahmed"
website: "https://movin.design/components/"
github: "https://github.com/raza-ahmed/movin-components"
registry: "https://movin.design/r/registry.json"
pro: false
pro_url: null
github_stars: 0
component_count: 250
generated_at: "2026-10-27T06:34:08.542Z"
---

# @movin

288 animated UI components: buttons, toggles, checkboxes, inputs, loaders, radios and cards. Zero dependencies for most, Framer Motion for a few, with a plain HTML/CSS version of each. MIT-0.

## Links

- Website: https://movin.design/components/
- GitHub: https://github.com/raza-ahmed/movin-components
- Registry JSON: https://movin.design/r/registry.json
- Directory page: https://sh4dcn.netlify.app/registry/movin
- This file: https://sh4dcn.netlify.app/md/movin.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://movin.design/r/registry.json
pnpm dlx shadcn@latest add https://movin.design/r/registry.json
bunx shadcn@latest add https://movin.design/r/registry.json
# clone the source repo
git clone https://github.com/raza-ahmed/movin-components.git
# fetch the raw registry index
curl -s https://movin.design/r/registry.json
```

## Components (250)

| name | type | description | install |
| --- | --- | --- | --- |
| button-airlock | registry:component | Two hazard-striped doors seal the button. Hover cracks them apart a few pixels; a click slides them open on an angled seam to show a lit ACCESS GRANTED inside,… | `npx shadcn@latest add https://movin.design/r/button-airlock.json` |
| button-black-hole | registry:component | Hover and the label spirals into a singularity: each letter orbits into the centre, the far ones last, while an accretion disc spins up in 3D. The core flares … | `npx shadcn@latest add https://movin.design/r/button-black-hole.json` |
| button-blueprint | registry:component | Hover turns the button into its own spec drawing: the face becomes a dashed outline on a grid, extension guides draw out, and dimension lines with arrowheads l… | `npx shadcn@latest add https://movin.design/r/button-blueprint.json` |
| button-circuit | registry:component | A button wired into a circuit board. On hover, current pulses race along every trace from the pads into the button, and the button powers up as the first pulse… | `npx shadcn@latest add https://movin.design/r/button-circuit.json` |
| button-constellation | registry:component | Drifting points of light fill the button and wire themselves together whenever they pass close. Move the cursor over it and nearby nodes reach out to it with l… | `npx shadcn@latest add https://movin.design/r/button-constellation.json` |
| button-crt-power | registry:component | A tiny CRT screen as a power button. A click switches it off the way old tubes did: the picture collapses to a bright line, then a dot, and an afterglow linger… | `npx shadcn@latest add https://movin.design/r/button-crt-power.json` |
| button-data-rain | registry:component | Hover and columns of glyphs start pouring down behind the label, each column at its own speed with a fading trail. Leave and the columns finish their fall and … | `npx shadcn@latest add https://movin.design/r/button-data-rain.json` |
| button-dot-matrix | registry:component | An LED dot-matrix panel spells the label in lit dots. On hover or focus it scrolls the message like a station marquee, starting exactly where the resting word … | `npx shadcn@latest add https://movin.design/r/button-dot-matrix.json` |
| button-echo-stack | registry:component | Ghost copies of the button hide behind it. On hover they fan out up and to the left in depth, each fainter than the last and lagging slightly; a click slams th… | `npx shadcn@latest add https://movin.design/r/button-echo-stack.json` |
| button-fingerprint | registry:component | Press and hold to scan a fingerprint. A beam sweeps over the pad while the ridges draw in one after another; let go early and they fade back. Hold long enough … | `npx shadcn@latest add https://movin.design/r/button-fingerprint.json` |
| button-force-field | registry:component | Hover raises a honeycomb shield around the button. A click sends a ripple through the hex cells from the exact point you clicked (the centre, from the keyboard… | `npx shadcn@latest add https://movin.design/r/button-force-field.json` |
| button-glass | registry:component | A frosted glass pane floating over drifting soft lights. Move the cursor around it and the lights behind the glass gather toward the pointer one after another,… | `npx shadcn@latest add https://movin.design/r/button-glass.json` |
| button-gyroscope | registry:component | Three gimbal rings, each with a glowing bead, tumble in 3D around a pill button. Hover or focus locks them: every ring swings flat with a spring into one halo … | `npx shadcn@latest add https://movin.design/r/button-gyroscope.json` |
| button-hologram | registry:component | A button projected as a hologram: it floats above an emitter on a cone of light, with scanlines and a bright band rolling down its face. At rest it flickers li… | `npx shadcn@latest add https://movin.design/r/button-hologram.json` |
| button-horizon-grid | registry:component | A synthwave button: a perspective grid floor rushes toward you under a slatted sun on the horizon line. Hover hits the throttle, running the floor four times f… | `npx shadcn@latest add https://movin.design/r/button-horizon-grid.json` |
| button-iris | registry:component | A camera aperture as a button. Six shaded blades meet in a closed iris; on hover or focus they twist open together to reveal the action glowing inside, and clo… | `npx shadcn@latest add https://movin.design/r/button-iris.json` |
| button-laser-etch | registry:component | An outlined label waits to be engraved. On hover a laser line sweeps across the button, filling the letters in solid behind it and throwing sparks from the bea… | `npx shadcn@latest add https://movin.design/r/button-laser-etch.json` |
| button-launch | registry:component | Click to launch: the button counts down T-3, T-2, T-1 while it rumbles and its engine flickers, then lifts off with a full flame and smoke puffs fanning along … | `npx shadcn@latest add https://movin.design/r/button-launch.json` |
| button-liquid-chrome | registry:component | A polished metal pill. Its banded reflections drift slowly on their own and slide against the cursor as you move over it, the way they would on a curved surfac… | `npx shadcn@latest add https://movin.design/r/button-liquid-chrome.json` |
| button-moire | registry:component | Two identical ring gratings overlap inside the button. One centre circles slowly by itself and follows the cursor on hover, so the overlap beats into moving op… | `npx shadcn@latest add https://movin.design/r/button-moire.json` |
| button-morse | registry:component | Hover and the button transmits its label in Morse code: a paper tape of dots and dashes runs past a read head while a lamp blinks in time with every mark. Leav… | `npx shadcn@latest add https://movin.design/r/button-morse.json` |
| button-oscilloscope | registry:component | A button with a live oscilloscope screen. The trace runs as a sine at rest, bends into a square wave and speeds up on hover, and a click fires a pulse that tra… | `npx shadcn@latest add https://movin.design/r/button-oscilloscope.json` |
| button-pattern-lock | registry:component | A lock button with a 3x3 pattern pad. Drag through four or more dots to unlock: each dot lights with a springy halo and a glowing line follows your finger. Too… | `npx shadcn@latest add https://movin.design/r/button-pattern-lock.json` |
| button-plasma | registry:component | Live turbulent energy churns inside a pill button: bright filaments of plasma that never repeat. At rest they smoulder faintly; hover turns them up to a blaze … | `npx shadcn@latest add https://movin.design/r/button-plasma.json` |
| button-quantum | registry:component | The label sits in superposition: three faint copies of the button jitter between positions out of step. Hover or focus observes it, and they collapse instantly… | `npx shadcn@latest add https://movin.design/r/button-quantum.json` |
| button-radar | registry:component | A round radar scope as a button. A beam sweeps round the range rings, and each contact lights up the moment the beam passes over it, then fades. Hover brighten… | `npx shadcn@latest add https://movin.design/r/button-radar.json` |
| button-reactor | registry:component | A round reactor core as a toggle button: three segmented rings counter-rotate around a breathing core. Hover spins the rings up without a jump; a click ignites… | `npx shadcn@latest add https://movin.design/r/button-reactor.json` |
| button-target-lock | registry:component | HUD targeting brackets drift loosely outside the button. On hover or focus they snap onto it with a springy lock, crosshair ticks appear, and a readout above r… | `npx shadcn@latest add https://movin.design/r/button-target-lock.json` |
| button-teleport | registry:component | Click and the button is beamed out: it breaks into tiles that stretch up and vanish into a column of light, bottom row first, then rematerialises tile by tile … | `npx shadcn@latest add https://movin.design/r/button-teleport.json` |
| button-terminal | registry:component | A button that is a tiny terminal window. A click types out the deploy command, runs an ASCII progress bar to 100% in uneven steps, prints a success line, then … | `npx shadcn@latest add https://movin.design/r/button-terminal.json` |
| button-tesla | registry:component | A button between two electrodes. At rest a short spark crackles now and then; on hover live arcs leap across the top of the button, redrawn many times a second… | `npx shadcn@latest add https://movin.design/r/button-tesla.json` |
| button-thermal | registry:component | A heat camera as a button. The cursor leaves a warm trail that blooms outward in blocky cells and cools slowly, banded like a thermal readout, with the peak te… | `npx shadcn@latest add https://movin.design/r/button-thermal.json` |
| button-warp | registry:component | A starfield drifts slowly out from the centre of the button. On hover the stars stretch into hyperspace streaks and race past, and the label spreads as if acce… | `npx shadcn@latest add https://movin.design/r/button-warp.json` |
| button-waveform | registry:component | A pill button filled with equaliser bars that idle gently, then swell and dance around the cursor as if it were the sound source, brightening where the energy … | `npx shadcn@latest add https://movin.design/r/button-waveform.json` |
| button-wireframe | registry:component | A 3D slab drawn in wire, turned at an angle with dashed hidden edges. On hover it squares up to face you and materialises face by face, each side filling in a … | `npx shadcn@latest add https://movin.design/r/button-wireframe.json` |
| button-filings | registry:component | A field of 52 compass needles inside the button, every one turning to point at the cursor wherever it is on the page, brighter and longer the closer it gets, w… | `npx shadcn@latest add https://movin.design/r/button-filings.json` |
| button-fold | registry:component | The button is a sheet of paper. A click folds the top half down over the bottom like a letter, its underside showing and the crease casting a shadow; it holds … | `npx shadcn@latest add https://movin.design/r/button-fold.json` |
| button-goo | registry:component | Liquid metaballs from one SVG filter: everything inside is blurred and its alpha thresholded back to a hard edge, so shapes that come close melt together. On h… | `npx shadcn@latest add https://movin.design/r/button-goo.json` |
| button-halftone | registry:component | Three dot screens on one 7px grid: a faint base, a brighter screen whose dots swell under the cursor through a radial mask, and a ring of bright dots that roll… | `npx shadcn@latest add https://movin.design/r/button-halftone.json` |
| button-loupe | registry:component | A magnifying glass follows the cursor across the button at 2.5x, rendered from a clone of the content shifted by CSS so the point under the cursor sits in the … | `npx shadcn@latest add https://movin.design/r/button-loupe.json` |
| button-membrane | registry:component | The button is a rubber skin drawn as an SVG path. Leave it and the edge you exit through stretches after the cursor until it lets go and wobbles home on a spri… | `npx shadcn@latest add https://movin.design/r/button-membrane.json` |
| button-morph-text | registry:component | On hover the label melts into the next word. Both words blur through each other while letter-spacing shifts, and an SVG alpha-threshold filter turns the overla… | `npx shadcn@latest add https://movin.design/r/button-morph-text.json` |
| button-particle-text | registry:component | The label is redrawn from every inked pixel of the word, one canvas particle each, springing to its home. The cursor brushes the particles aside like dust and … | `npx shadcn@latest add https://movin.design/r/button-particle-text.json` |
| button-pull-cord | registry:component | A lamp switch: a cord hangs from the button with a bead on the end. Drag the bead down past the trigger point and let go to turn it on; the cord springs back a… | `npx shadcn@latest add https://movin.design/r/button-pull-cord.json` |
| button-shatter | registry:component | A click breaks the button into 24 irregular triangular shards, each a clone of the face clipped with clip-path. They burst away from the click point in 3D, han… | `npx shadcn@latest add https://movin.design/r/button-shatter.json` |
| button-split-flap | registry:component | An airport departures board. Each letter is a split-flap tile; on hover the tiles flip left to right through a few random characters on hinged leaves before la… | `npx shadcn@latest add https://movin.design/r/button-split-flap.json` |
| button-swipe-confirm | registry:component | A slide-to-confirm track for actions that should not happen by accident. Drag the knob to the end and the track floods light while the arrow redraws as a check… | `npx shadcn@latest add https://movin.design/r/button-swipe-confirm.json` |
| button-ticket | registry:component | A ticket with a perforated stub. Hover tugs at the stub; a click tears it off along the perforation and it tumbles away while the ticket reads Admitted, then a… | `npx shadcn@latest add https://movin.design/r/button-ticket.json` |
| button-tide | registry:component | Liquid rises inside the button on hover with two SVG wave layers rolling across its surface, and sloshes against the walls when the cursor moves fast: horizont… | `npx shadcn@latest add https://movin.design/r/button-tide.json` |
| button-tile-flip | registry:component | The surface is a 12x4 grid of tiles. Entering flips them over in a wave that spreads from the exact point the cursor came in, each tile turning about the axis … | `npx shadcn@latest add https://movin.design/r/button-tile-flip.json` |
| button-border-beam | registry:component | On hover, a white light beam races continuously around the button border. A 2px-padded wrapper div clips a large rotating conic-gradient square: only the borde… | `npx shadcn@latest add https://movin.design/r/button-border-beam.json` |
| button-burst-ring | registry:component | On click, a single transparent ring (border only, no fill) expands outward from the exact click point and fades, different from ripple which fills. Multiple ri… | `npx shadcn@latest add https://movin.design/r/button-burst-ring.json` |
| button-charge | registry:component | A fighting-game style button: hover to charge a light gray power bar from left to right over 1.5 seconds via requestAnimationFrame. When the bar reaches 100%, … | `npx shadcn@latest add https://movin.design/r/button-charge.json` |
| button-confetti | registry:component | On click, 22 grayscale rectangular particles are spawned from the click point inside a relatively-positioned wrapper. Each particle flies outward in an evenly … | `npx shadcn@latest add https://movin.design/r/button-confetti.json` |
| button-count-up | registry:component | Each click increments a visible counter badge inside the button. The badge pops with a spring-overshoot scale keyframe animation on every increment, re-trigger… | `npx shadcn@latest add https://movin.design/r/button-count-up.json` |
| button-cube-face | registry:component | On click, a 3D cube rotates 90 degrees on the X axis to reveal a second face with a confirmation message. Uses CSS transform-style: preserve-3d with two absolu… | `npx shadcn@latest add https://movin.design/r/button-cube-face.json` |
| button-diamond | registry:component | A diamond-shaped button using a 45-degree rotated wrapper with counter-rotated text. On hover, the button scales up, the background gradient brightens, and a p… | `npx shadcn@latest add https://movin.design/r/button-diamond.json` |
| button-elastic-press | registry:component | On click, a CSS keyframe animation fires, squishing the button horizontally then snapping back with an overshoot oscillation that simulates spring physics. The… | `npx shadcn@latest add https://movin.design/r/button-elastic-press.json` |
| button-glitch | registry:component | Two cloned text layers are absolutely positioned over the button. On hover, staggered clip-path animations in steps() slice each clone into horizontal bands wh… | `npx shadcn@latest add https://movin.design/r/button-glitch.json` |
| button-gradient-border | registry:component | A silver highlight spins continuously around the button border; on hover it brightens to white and casts a soft blurred halo. CSS @property angle and colour, n… | `npx shadcn@latest add https://movin.design/r/button-gradient-border.json` |
| button-health-bar | registry:component | A game-style HP bar embedded in the button body. On hover, the bar drains from 100% to 28% over 800ms with a CSS width transition; the bar dims from bright to … | `npx shadcn@latest add https://movin.design/r/button-health-bar.json` |
| button-hexagon | registry:component | A flat-top hexagonal button using clip-path: polygon(). On hover, a circular silver fill expands from the center with a spring overshoot (cubic-bezier(0.34, 1.… | `npx shadcn@latest add https://movin.design/r/button-hexagon.json` |
| button-hold-confirm | registry:component | Hold the mouse button down to fill a circular SVG progress ring. Progress is driven by requestAnimationFrame over a 1.5-second duration. Releasing early resets… | `npx shadcn@latest add https://movin.design/r/button-hold-confirm.json` |
| button-ink-stamp | registry:component | On click, a circular ink-blot radial gradient expands from the center of the button and fades out via a CSS keyframe animation. The effect is re-triggered on e… | `npx shadcn@latest add https://movin.design/r/button-ink-stamp.json` |
| button-jello-wobble | registry:component | On hover, the button squishes and stretches with a decaying scaleX/scaleY oscillation that simulates rubber or jello physics, starting with a large deformation… | `npx shadcn@latest add https://movin.design/r/button-jello-wobble.json` |
| button-loading-lock | registry:component | On click, the button transitions through three states: idle (padlock icon) → loading (spinning SVG arc, 1.6s) → done (checkmark, bright white). Auto-resets to … | `npx shadcn@latest add https://movin.design/r/button-loading-lock.json` |
| button-magnetic | registry:component | The button follows the cursor with spring physics, pulling toward the mouse like a magnet and bouncing back on leave. | `npx shadcn@latest add https://movin.design/r/button-magnetic.json` |
| button-morph-shape | registry:component | On hover, the button morphs from a pill shape to a circle: the width collapses and border-radius transitions to 50%. The text label fades out and a decorative … | `npx shadcn@latest add https://movin.design/r/button-morph-shape.json` |
| button-neon-pulse | registry:component | A white neon glow breathes in and out continuously around the button using layered box-shadows, ideal for a primary CTA that demands attention. Pure CSS, no de… | `npx shadcn@latest add https://movin.design/r/button-neon-pulse.json` |
| button-octagon | registry:component | An 8-sided button shaped with a CSS clip-path polygon. On hover, the entire shape rotates 22.5 degrees with a spring overshoot, the background gradient fills i… | `npx shadcn@latest add https://movin.design/r/button-octagon.json` |
| button-orbit-particles | registry:component | On hover, 6 dots orbit the button in a continuous circle via CSS keyframes. Each dot shares a single rotate→translateX→counter-rotate keyframe; staggered negat… | `npx shadcn@latest add https://movin.design/r/button-orbit-particles.json` |
| button-pop-forward | registry:component | On hover, the button pops toward the viewer using CSS 3D transforms: translateZ(28px) and scale(1.06) with a spring cubic-bezier. A deep drop shadow grows to r… | `npx shadcn@latest add https://movin.design/r/button-pop-forward.json` |
| button-press-3d | registry:component | A chunky RPG-style button with a thick box-shadow that simulates physical depth. On mousedown it snaps down 5px while the shadow collapses, then springs back o… | `npx shadcn@latest add https://movin.design/r/button-press-3d.json` |
| button-retro-pixel | registry:component | 8-bit game-style button with a chunky pixel border (outline + box-shadow), scanline overlay via repeating-linear-gradient, monospace font, and a stepped jitter… | `npx shadcn@latest add https://movin.design/r/button-retro-pixel.json` |
| button-ripple | registry:component | A soft white ripple circle expands from the exact click point and fades out: Material Design's satisfying click feedback pattern. Pure CSS animation, no depend… | `npx shadcn@latest add https://movin.design/r/button-ripple.json` |
| button-rotating-gradient | registry:component | On hover, a large conic-gradient layer (alternating dark and light grays) fades in behind the button text and spins continuously via a rotate(360deg) keyframe … | `npx shadcn@latest add https://movin.design/r/button-rotating-gradient.json` |
| button-scramble | registry:component | On hover, characters randomize from a pool of alphanumeric and symbol characters at 40ms intervals. Characters resolve to the real label progressively left-to-… | `npx shadcn@latest add https://movin.design/r/button-scramble.json` |
| button-shimmer-sweep | registry:component | A skewed diagonal glare band slides across the button from left to right on hover. The glare is a semi-transparent white gradient on an absolutely-positioned s… | `npx shadcn@latest add https://movin.design/r/button-shimmer-sweep.json` |
| button-shockwave | registry:component | On click, 3 bright rings burst from the click point with staggered delays (0ms, 120ms, 240ms), each expanding and fading for a shockwave effect. Rings are spaw… | `npx shadcn@latest add https://movin.design/r/button-shockwave.json` |
| button-skewed | registry:component | A parallelogram-shaped button using clip-path. On hover, a gradient fill sweeps in from the left with a skewed transform, while the text colour transitions to … | `npx shadcn@latest add https://movin.design/r/button-skewed.json` |
| button-slide-fill | registry:component | A mid-gray fill slides in from the left to fill the button on hover, then retreats on mouse-leave. Pure CSS transitions, no dependencies. | `npx shadcn@latest add https://movin.design/r/button-slide-fill.json` |
| button-spotlight | registry:component | A soft circle of light fades in under the cursor and follows it across the button, written to CSS custom properties on mousemove so nothing re-renders. The res… | `npx shadcn@latest add https://movin.design/r/button-spotlight.json` |
| button-stagger-letters | registry:component | On hover, each letter of the button label jumps upward with a spring-overshoot cubic-bezier transition, staggered by 38ms per character. All letters return to … | `npx shadcn@latest add https://movin.design/r/button-stagger-letters.json` |
| button-swap-text | registry:component | The button label slides upward out of frame on hover while a secondary label slides in from below: a clean way to surface a call-to-action hint. Pure CSS trans… | `npx shadcn@latest add https://movin.design/r/button-swap-text.json` |
| button-tilt-3d | registry:component | A Framer Motion button that rotates in 3D perspective as the cursor moves across it, using useMotionValue and useSpring to track mouse position into rotateX/ro… | `npx shadcn@latest add https://movin.design/r/button-tilt-3d.json` |
| button-typewriter | registry:component | On hover, the button label erases character-by-character at 45ms intervals then retypes an alternate label at 55ms intervals. On mouse leave the process revers… | `npx shadcn@latest add https://movin.design/r/button-typewriter.json` |
| button-wipe-swap | registry:component | On hover, the primary label slides out to the left while a secondary label simultaneously slides in from the right, both driven by the same translateX transiti… | `npx shadcn@latest add https://movin.design/r/button-wipe-swap.json` |
| button-xp-gain | registry:component | On each click, a "+100 XP" label floats upward from the click position and fades out over 860ms via CSS keyframes. A running total increments in the button lab… | `npx shadcn@latest add https://movin.design/r/button-xp-gain.json` |
| card-achievement | registry:component | Click to unlock an achievement: the badge flips over from a lock to a glowing medal, rays burst behind it and sparks fly out, and the XP bar fills with the poi… | `npx shadcn@latest add https://movin.design/r/card-achievement.json` |
| card-bank-card | registry:component | A brushed-metal bank card. On hover it lifts and tilts, the contactless waves pulse, and the masked number scrambles into view digit by digit, left to right; l… | `npx shadcn@latest add https://movin.design/r/card-bank-card.json` |
| card-bento | registry:component | A bento-box dashboard whose four tiles reshuffle into a new layout every couple of seconds, each gliding and resizing to its new place without overlapping the … | `npx shadcn@latest add https://movin.design/r/card-bento.json` |
| card-boarding-pass | registry:component | A flight ticket with a tear-off stub: on hover the little plane flies the dashed route arc from origin to destination, banking to follow the curve. | `npx shadcn@latest add https://movin.design/r/card-boarding-pass.json` |
| card-chat | registry:component | A conversation that plays itself out: typing dots appear, then each message springs in from its own side, until the thread is full and starts again. | `npx shadcn@latest add https://movin.design/r/card-chat.json` |
| card-compass | registry:component | A compass card whose needle swings toward the cursor anywhere on the page with a damped wobble, overshooting and settling like a real needle; left alone it hun… | `npx shadcn@latest add https://movin.design/r/card-compass.json` |
| card-countdown | registry:component | A launch countdown: days, hours, minutes and seconds on rolling digit reels that spring to each new value, with a small ring draining once a minute in the corn… | `npx shadcn@latest add https://movin.design/r/card-countdown.json` |
| card-cube | registry:component | A stats card with four faces on a 3D cube: the arrow buttons turn it to the next face with a springy rotation, and the dots below track which face is showing. | `npx shadcn@latest add https://movin.design/r/card-cube.json` |
| card-dimmer | registry:component | A smart-light card: drag the wide slider and the bulb fills with light, the card warms with a glow behind it and the readout follows, down to Off. | `npx shadcn@latest add https://movin.design/r/card-dimmer.json` |
| card-enhance | registry:component | A photo card that enhances on hover: the picture starts as a few big pixels and resolves step by step, 6, 12, 24, 48 columns and then full resolution, with the… | `npx shadcn@latest add https://movin.design/r/card-enhance.json` |
| card-focus | registry:component | A scene in depth that you focus like a camera: move the pointer up and down and the focus pulls between the far mountains and the near grass, with a distance r… | `npx shadcn@latest add https://movin.design/r/card-focus.json` |
| card-folder | registry:component | A file folder that opens on hover: the front flap tilts down toward you and the papers inside fan up and out, one after another. | `npx shadcn@latest add https://movin.design/r/card-folder.json` |
| card-gauge | registry:component | A speedometer dial for CPU load: on hover the needle sweeps up from zero with a springy overshoot, the arc fills behind it and the readout counts up to match; … | `npx shadcn@latest add https://movin.design/r/card-gauge.json` |
| card-id-badge | registry:component | An access badge: on hover a scan line sweeps down it, each field ticks as the line passes its row, and a CLEARED stamp slams onto the photo at the end. | `npx shadcn@latest add https://movin.design/r/card-id-badge.json` |
| card-island | registry:component | A compact now-playing pill with live equaliser bars that morphs into a full player card on hover, Dynamic Island style: it springs wider and taller, and the ar… | `npx shadcn@latest add https://movin.design/r/card-island.json` |
| card-layers | registry:component | Hover explodes the card into its stacked layers in isometric view, like a design file: surface, media, text and action float apart in depth, each labelled with… | `npx shadcn@latest add https://movin.design/r/card-layers.json` |
| card-orbit-profile | registry:component | A profile card whose skill tags orbit the avatar in a tilted ring, passing in front and behind. On hover the orbit stops, the avatar and name lift, and the tag… | `npx shadcn@latest add https://movin.design/r/card-orbit-profile.json` |
| card-pipeline | registry:component | A deploy pipeline that runs itself: build, test and deploy each spin while they run, tick and hand off along a filling connector to the next, with a log line u… | `npx shadcn@latest add https://movin.design/r/card-pipeline.json` |
| card-planet | registry:component | A planet card: a shaded world turns as its cloud bands drift across it, and a small moon orbits, passing behind the planet and then in front of it. | `npx shadcn@latest add https://movin.design/r/card-planet.json` |
| card-polaroid | registry:component | An instant photo that develops as you hover: the milky film clears and the blurred, flat image sharpens and gains contrast over a couple of seconds, while the … | `npx shadcn@latest add https://movin.design/r/card-polaroid.json` |
| card-pop-out | registry:component | A framed planet card: on hover the planet breaks out of the frame toward you, rising and growing with a drop shadow, while the frame tilts back and sinks away. | `npx shadcn@latest add https://movin.design/r/card-pop-out.json` |
| card-poster | registry:component | A type poster: on hover the headline flips letter by letter from MAKE IT to MOVE IT, each letter swinging on its baseline, while hazard stripes slide in across… | `npx shadcn@latest add https://movin.design/r/card-poster.json` |
| card-qr-assemble | registry:component | A ticket card whose QR code assembles itself: at rest it shows random noise, and on hover the modules sort themselves into a code with staggered pops, then the… | `npx shadcn@latest add https://movin.design/r/card-qr-assemble.json` |
| card-route | registry:component | A map card where a car drives the route between pins, the road ahead bright and the driven part fading back, while the ETA in the panel counts down to Arrived. | `npx shadcn@latest add https://movin.design/r/card-route.json` |
| card-scrubber | registry:component | A month schedule you flick through: drag or flick the ruler and it glides on with momentum before snapping to a day, the ticks swell under the needle like a do… | `npx shadcn@latest add https://movin.design/r/card-scrubber.json` |
| card-shatter | registry:component | A sealed mystery card. Click and it cracks from exactly where you clicked into 3D shards that fly apart and fall away, revealing a reward underneath; click aga… | `npx shadcn@latest add https://movin.design/r/card-shatter.json` |
| card-showcase | registry:component | A product on a turntable: a small 3D cube speaker turns slowly on a plinth above its own floor reflection. Hover spins the turntable up without a jump and swee… | `npx shadcn@latest add https://movin.design/r/card-showcase.json` |
| card-skyline | registry:component | An activity grid as a 3D city: twelve weeks of days become bars that rise in a diagonal wave. Move the pointer and the whole city turns to follow it; hover a b… | `npx shadcn@latest add https://movin.design/r/card-skyline.json` |
| card-synth | registry:component | A tiny synth module: drag the two knobs to shape a live waveform on the little screen. Freq packs more cycles in; Shape morphs it smoothly from sine through tr… | `npx shadcn@latest add https://movin.design/r/card-synth.json` |
| card-tank | registry:component | A storage card filled with liquid. Move the cursor across it and the liquid leans toward you and sloshes, stirring the surface where you cross it; Clean up dra… | `npx shadcn@latest add https://movin.design/r/card-tank.json` |
| card-unfold | registry:component | A folded walking map. Hover and the gatefold flaps swing open in 3D, right then left, the inside catches the light, and the route draws across the map with its… | `npx shadcn@latest add https://movin.design/r/card-unfold.json` |
| card-vinyl | registry:component | A record in its sleeve: on hover the vinyl slides out of the sleeve and spins up, its grooves catching a fixed sheen, while the tonearm swings in over it a bea… | `npx shadcn@latest add https://movin.design/r/card-vinyl.json` |
| card-voice-note | registry:component | A voice-note bubble: press play and the waveform fills from left to right as it plays while the timer counts, click anywhere on the waveform to seek, and it st… | `npx shadcn@latest add https://movin.design/r/card-voice-note.json` |
| card-weather | registry:component | A weather card with light rain falling behind the reading. Hover brings the storm in: the rain thickens, the cloud darkens, lightning flashes with the sky, and… | `npx shadcn@latest add https://movin.design/r/card-weather.json` |
| card-x-ray | registry:component | A finished card with an x-ray lens: move the pointer over it and a round lens follows, showing the wireframe underneath, the same layout drawn as dashed boxes … | `npx shadcn@latest add https://movin.design/r/card-x-ray.json` |
| card-diorama | registry:component | A paper-cut landscape behind a window frame. On hover the card turns in 3D and its four paper layers (sky, far mountains, near hills, frame) pull apart in dept… | `npx shadcn@latest add https://movin.design/r/card-diorama.json` |
| card-envelope | registry:component | An envelope with a seal. On hover the flap swings open in 3D and, once past edge-on, drops behind the letter through a delayed z-index; then an invitation card… | `npx shadcn@latest add https://movin.design/r/card-envelope.json` |
| card-holo | registry:component | A collectible trading card. It tilts toward the cursor while a silver holographic foil (light bands plus a sparkle screen, colour-dodged) slides across it and … | `npx shadcn@latest add https://movin.design/r/card-holo.json` |
| card-ink-reveal | registry:component | A liquid blob of ink trails the cursor across the card, a head and a tapering tail of droplets melting together through an SVG goo filter inside an alpha mask,… | `npx shadcn@latest add https://movin.design/r/card-ink-reveal.json` |
| card-lenticular | registry:component | A ridged plastic lenticular card holding two pictures. Moving across it tilts the card and switches day to night through interleaved strips that widen with a r… | `npx shadcn@latest add https://movin.design/r/card-lenticular.json` |
| card-peel | registry:component | A sticker on a card. Hovering curls its corner; drag the corner and it peels back along a true fold line (the perpendicular bisector of corner and pointer), th… | `npx shadcn@latest add https://movin.design/r/card-peel.json` |
| card-receipt | registry:component | A payment terminal card. On hover its light blinks and a receipt prints out of the slot in steps() jerks like a thermal printer, line items, total and barcode,… | `npx shadcn@latest add https://movin.design/r/card-receipt.json` |
| card-scratch | registry:component | A scratch card. Drag across the silver foil (a canvas) to erase it with destination-out strokes while flakes fall from the scratch; once about half is gone the… | `npx shadcn@latest add https://movin.design/r/card-scratch.json` |
| card-swipe-deck | registry:component | A deck of cards you fling. Drag the top card and it tilts with the throw while a Keep or Skip stamp fades in by direction; let go far enough and it flies off a… | `npx shadcn@latest add https://movin.design/r/card-swipe-deck.json` |
| card-trifold | registry:component | A folded brochure showing its cover. On hover the right panel swings open, then the left, each shading as it turns away from the light, laying out three steps … | `npx shadcn@latest add https://movin.design/r/card-trifold.json` |
| card-aurora | registry:component | Three blurred light blobs of different brightness drift slowly behind the card content; on hover the aurora blooms brighter and wider. Pure CSS keyframes, no d… | `npx shadcn@latest add https://movin.design/r/card-aurora.json` |
| card-border-glow | registry:component | A conic highlight spins continuously around the card edge; on hover it brightens to white and casts a soft blurred halo. Uses @property for the angle and a tra… | `npx shadcn@latest add https://movin.design/r/card-border-glow.json` |
| card-color-reveal | registry:component | A solid mid-gray overlay slides up from the bottom on hover, fully covering the card with secondary content. Pure CSS transitions, no dependencies. | `npx shadcn@latest add https://movin.design/r/card-color-reveal.json` |
| card-flip | registry:component | Card rotates 180° on the Y axis on hover to reveal a back face. Uses CSS preserve-3d and backface-visibility for a physical 3D flip. | `npx shadcn@latest add https://movin.design/r/card-flip.json` |
| card-glitch | registry:component | On hover, two ghost copies of the card clip to random horizontal bands and translate sideways (one inverted, one overexposed), simulating a corrupted signal. P… | `npx shadcn@latest add https://movin.design/r/card-glitch.json` |
| card-gradient-drift | registry:component | The card header runs a multi-stop grayscale gradient that slowly drifts left-to-right in a continuous loop: an ambient living colour effect. Pure CSS, no depen… | `npx shadcn@latest add https://movin.design/r/card-gradient-drift.json` |
| card-hover-lift | registry:component | Card floats upward and casts a deeper shadow on hover. Spring overshoot easing gives it a satisfying pop. Pure CSS transitions, no dependencies. | `npx shadcn@latest add https://movin.design/r/card-hover-lift.json` |
| card-magnetic | registry:component | Card layers move toward the cursor at different strengths (the orb the most, the backdrop at 30%, the text at 15%), creating a parallax depth illusion without … | `npx shadcn@latest add https://movin.design/r/card-magnetic.json` |
| card-neon-glow | registry:component | On hover the card border lights up in silver and a layered box-shadow creates a bright neon halo effect. Pure CSS transitions, no dependencies. | `npx shadcn@latest add https://movin.design/r/card-neon-glow.json` |
| card-shimmer | registry:component | A bright diagonal light streak sweeps across the card on hover using a CSS ::after pseudo-element, and the border stays lit while hovered. Resets instantly on … | `npx shadcn@latest add https://movin.design/r/card-shimmer.json` |
| card-spotlight | registry:component | A soft radial light fades in and follows the cursor across the card, like a torch, while the border lights up. Pure CSS + mouse tracking, no dependencies. | `npx shadcn@latest add https://movin.design/r/card-spotlight.json` |
| card-stack | registry:component | Three layered cards sit in a tight stack at rest. On hover they fan outward (back card rotates −6° and slides left, middle rotates +5° and slides right, front … | `npx shadcn@latest add https://movin.design/r/card-stack.json` |
| card-tilt | registry:component | Card tilts in 3D toward the cursor using CSS perspective and rotateX/Y driven by mouse position. Springs back to flat on leave. | `npx shadcn@latest add https://movin.design/r/card-tilt.json` |
| card-typewriter | registry:component | Hover erases the card title and description character-by-character then retypes new content, terminal-style with a blinking cursor visible during the erase/typ… | `npx shadcn@latest add https://movin.design/r/card-typewriter.json` |
| card-wipe-reveal | registry:component | Hover sweeps a clip-path from inset(0 0 100% 0) to inset(0 0 0 0): a bottom-to-top wipe that reveals hidden card content. A placeholder state fades out simulta… | `npx shadcn@latest add https://movin.design/r/card-wipe-reveal.json` |
| checkbox-blocks | registry:component | A falling blocks checkbox: ticking drops pixel blocks into the box row by row until they stack into a tick, each squashing as it lands; unticking clears the li… | `npx shadcn@latest add https://movin.design/r/checkbox-blocks.json` |
| checkbox-calendar | registry:component | A tear-off calendar checkbox: ticking flips today's page up over the binding to show the day ticked off underneath; unticking flips it back down. | `npx shadcn@latest add https://movin.design/r/checkbox-calendar.json` |
| checkbox-catapult | registry:component | A catapult checkbox: ticking swings the arm and flings the tick in a spinning arc into the box, which lights as it lands; unticking hops it back into the cup. | `npx shadcn@latest add https://movin.design/r/checkbox-catapult.json` |
| checkbox-claw | registry:component | A claw machine checkbox: ticking lowers the claw into the bin, opens it and lets the tick drop; unticking sends it back down to grab the tick and lift it out a… | `npx shadcn@latest add https://movin.design/r/checkbox-claw.json` |
| checkbox-coin | registry:component | A tip jar checkbox: ticking drops the coin into the slot, the machine clunks and its little display lights with a tick; unticking pops the coin back out. | `npx shadcn@latest add https://movin.design/r/checkbox-coin.json` |
| checkbox-crt | registry:component | A tiny CRT screen checkbox: ticking powers the tube on from a line to a glowing tick behind scanlines; unticking collapses the picture to a line, then a dot th… | `npx shadcn@latest add https://movin.design/r/checkbox-crt.json` |
| checkbox-dart | registry:component | A dartboard checkbox: ticking throws a dart into the bullseye, the board jolts, a ring flashes and the dart quivers before it settles; unticking pulls it out. | `npx shadcn@latest add https://movin.design/r/checkbox-dart.json` |
| checkbox-deboss | registry:component | A letterpress checkbox: ticking brings a press plate down onto a paper square, it gives under the pressure, and the plate lifts to leave the tick pressed into … | `npx shadcn@latest add https://movin.design/r/checkbox-deboss.json` |
| checkbox-dovetail | registry:component | A woodwork checkbox: the second half of a dovetail joint slides down into the first, completing the tick that runs across both, and the joint thuds as it seats. | `npx shadcn@latest add https://movin.design/r/checkbox-dovetail.json` |
| checkbox-etch | registry:component | A sketch toy checkbox: ticking turns the two knobs and a line draws the tick on the screen; unticking shakes the toy and the drawing fades away. | `npx shadcn@latest add https://movin.design/r/checkbox-etch.json` |
| checkbox-filament | registry:component | A light bulb checkbox whose filament is the tick: ticking flickers it on until it glows with a halo; unticking lets it cool slowly, the way a real filament doe… | `npx shadcn@latest add https://movin.design/r/checkbox-filament.json` |
| checkbox-gears | registry:component | A gears checkbox: two meshed gears turn together, the small one the other way and faster, until the tick on the big gear stands upright and lights. | `npx shadcn@latest add https://movin.design/r/checkbox-gears.json` |
| checkbox-gift | registry:component | A present checkbox: ticking pops the lid off the box, it flies up and lands askew, and a tick springs out of the box; unticking sinks the tick and closes the l… | `npx shadcn@latest add https://movin.design/r/checkbox-gift.json` |
| checkbox-highlighter | registry:component | A checkbox that highlights its own label: ticking, a marker nib swipes across the text leaving a skewed band of ink, and the box fills with the same ink; untic… | `npx shadcn@latest add https://movin.design/r/checkbox-highlighter.json` |
| checkbox-hoop | registry:component | A basketball checkbox: ticking shoots the ball in an arc through the hoop, the net swishes and the backboard lights with a tick; unticking rolls the ball back. | `npx shadcn@latest add https://movin.design/r/checkbox-hoop.json` |
| checkbox-invisible-ink | registry:component | An invisible ink checkbox: ticking sweeps a UV light across the box, showing the hidden tick only where the light shines, then the whole tick lights up and glo… | `npx shadcn@latest add https://movin.design/r/checkbox-invisible-ink.json` |
| checkbox-jelly | registry:component | A jelly cube checkbox: ticking squashes it and it wobbles, stretching tall and wide in turn, while the tick drops in and sets; unticking gives a smaller wobble. | `npx shadcn@latest add https://movin.design/r/checkbox-jelly.json` |
| checkbox-mailbox | registry:component | A mailbox checkbox: ticking slides a letter in through the door and then swings the flag up with a bounce, lighting it; unticking lowers the flag again. | `npx shadcn@latest add https://movin.design/r/checkbox-mailbox.json` |
| checkbox-marble | registry:component | A marble run checkbox: ticking rolls a marble down the ramp, over the edge and into the hole in the box, where it lands with a bounce and the hole glows; untic… | `npx shadcn@latest add https://movin.design/r/checkbox-marble.json` |
| checkbox-markdown | registry:component | A Markdown task checkbox: ticking blinks a caret between the brackets and types an x into them; unticking deletes it, and the task text dims while it is done. | `npx shadcn@latest add https://movin.design/r/checkbox-markdown.json` |
| checkbox-merge | registry:component | A git branch checkbox: ticking draws the branch curving back into main, the merge commit fills with a tick and pulses; unticking leaves the branch open again. | `npx shadcn@latest add https://movin.design/r/checkbox-merge.json` |
| checkbox-pencil | registry:component | A checkbox with a pencil in it: ticking, the pencil sweeps in and sketches a hand-drawn tick; unticking, it flips round and the eraser scrubs the mark out, she… | `npx shadcn@latest add https://movin.design/r/checkbox-pencil.json` |
| checkbox-pluck | registry:component | A string checkbox: the tick is a string between two pins. Ticking pulls its middle down taut into a tick; unticking lets go and it twangs back and forth across… | `npx shadcn@latest add https://movin.design/r/checkbox-pluck.json` |
| checkbox-polaroid | registry:component | An instant photo checkbox: ticking gives the print a shake and the picture slowly develops, from dark and blurred to a sharp tick over a little landscape. | `npx shadcn@latest add https://movin.design/r/checkbox-polaroid.json` |
| checkbox-popup | registry:component | A pop-up book checkbox: the tick lies folded flat on an open book in perspective, and ticking makes it spring up and stand out of the page, casting a soft shad… | `npx shadcn@latest add https://movin.design/r/checkbox-popup.json` |
| checkbox-punch | registry:component | A boarding-pass checkbox: ticking brings a ticket punch down on the stub, it bites a tick-shaped hole, the chad tumbles out and the ticket jolts. | `npx shadcn@latest add https://movin.design/r/checkbox-punch.json` |
| checkbox-receipt | registry:component | A receipt checkbox: ticking prints a receipt out of the slot line by line, ending in a tick, and the printer light comes on; unticking pulls it back in. | `npx shadcn@latest add https://movin.design/r/checkbox-receipt.json` |
| checkbox-scan | registry:component | A ticket scanner checkbox: ticking sweeps a laser line down and back over a code, it flashes, and the code dissolves into a tick; unticking rebuilds the code. | `npx shadcn@latest add https://movin.design/r/checkbox-scan.json` |
| checkbox-spotlight | registry:component | A spotlight checkbox: ticking swings a spotlight round onto the box, its beam lights the floor, and the tick appears in the light; unticking turns it away and … | `npx shadcn@latest add https://movin.design/r/checkbox-spotlight.json` |
| checkbox-stencil | registry:component | A stencil checkbox: ticking, a metal plate with a tick cut out of it drops over the box, a burst of spray mist puffs, and the plate lifts away to leave a crisp… | `npx shadcn@latest add https://movin.design/r/checkbox-stencil.json` |
| checkbox-swipe | registry:component | A swipe-to-complete checkbox: ticking slides the task card aside to show a tick beneath, springs it back, fills its circle and strikes the text through; untick… | `npx shadcn@latest add https://movin.design/r/checkbox-swipe.json` |
| checkbox-sync | registry:component | A sync checkbox: ticking spins the two sync arrows round and fades them into a ring that draws closed with a tick inside; unticking brings the arrows back. | `npx shadcn@latest add https://movin.design/r/checkbox-sync.json` |
| checkbox-tape | registry:component | A packing checkbox: ticking slaps a strip of masking tape with a marker tick across the box, landing at a slight angle; unticking peels it away and off. | `npx shadcn@latest add https://movin.design/r/checkbox-tape.json` |
| checkbox-tiles | registry:component | A puzzle checkbox: four scrambled tiles each turned a different way rotate back into place one after another, and the tick they make lights up. | `npx shadcn@latest add https://movin.design/r/checkbox-tiles.json` |
| checkbox-zip | registry:component | A zip checkbox: ticking runs the slider along the zip, the teeth lock together one after another behind it, and the pull tab swings and shows a tick; unticking… | `npx shadcn@latest add https://movin.design/r/checkbox-zip.json` |
| checkbox-bookmark | registry:component | A bookmark icon as the checkbox. Checking pours a ribbon of fill down from its top and the whole ribbon swings on its pin a few times before it hangs still; un… | `npx shadcn@latest add https://movin.design/r/checkbox-bookmark.json` |
| checkbox-dog-ear | registry:component | Checking turns the box into a sheet of paper and folds its top corner down in 3D, the way you dog-ear a page you have read, showing the paper's darker undersid… | `npx shadcn@latest add https://movin.design/r/checkbox-dog-ear.json` |
| checkbox-fingerprint | registry:component | Press and hold to confirm. While held, the fingerprint's ridges light up one by one from the centre outwards; let go early and they drain away. Held to the end… | `npx shadcn@latest add https://movin.design/r/checkbox-fingerprint.json` |
| checkbox-keycap | registry:component | A mechanical keyboard key. Pressing it travels down as its side wall shrinks; checked, it latches half-way down like Caps Lock and the LED on the cap glows. Pu… | `npx shadcn@latest add https://movin.design/r/checkbox-keycap.json` |
| checkbox-select-all | registry:component | A parent checkbox over a branch of children. Checking the parent cascades down the branch one child after another; checking only some children turns the parent… | `npx shadcn@latest add https://movin.design/r/checkbox-select-all.json` |
| checkbox-smile | registry:component | A little face as the checkbox. Unchecked it is a dark, straight-faced circle; checked it lights up with a bounce, the flat mouth swaps for a drawn smile and th… | `npx shadcn@latest add https://movin.design/r/checkbox-smile.json` |
| checkbox-sort-list | registry:component | A short to-do list that tidies itself. Checking a task slides it down below the open ones while the others glide up into its place, and a progress bar over the… | `npx shadcn@latest add https://movin.design/r/checkbox-sort-list.json` |
| checkbox-sprout | registry:component | Checking plants a seed: the box fills and ticks, then a stem grows up out of its top edge and two leaves unfurl one after the other before the little plant sta… | `npx shadcn@latest add https://movin.design/r/checkbox-sprout.json` |
| checkbox-stitch | registry:component | The box is a patch of fabric and the tick is sewn in: a needle runs along the tick leaving dashed stitches behind it one by one, then slips away. Unchecking pu… | `npx shadcn@latest add https://movin.design/r/checkbox-stitch.json` |
| checkbox-strike-task | registry:component | A to-do row. Checking ticks the box with a pen stroke, then a hand-drawn scribble runs through the task text, out and back, as the text greys out; unchecking r… | `npx shadcn@latest add https://movin.design/r/checkbox-strike-task.json` |
| checkbox-bounce | registry:component | A checkbox that plays a spring-bounce keyframe animation on the box itself when toggled: compresses then overshoots on check, lightly expands then settles on u… | `npx shadcn@latest add https://movin.design/r/checkbox-bounce.json` |
| checkbox-charging | registry:component | A light gray progress bar fills left-to-right inside the box over 600ms like a battery charging. When full, the bar fades and a check mark springs in. Unchecki… | `npx shadcn@latest add https://movin.design/r/checkbox-charging.json` |
| checkbox-check-pop | registry:component | A checkbox where the SVG checkmark springs into view with a scale overshoot (cubic-bezier spring) on check and collapses instantly on uncheck. No keyframes nee… | `npx shadcn@latest add https://movin.design/r/checkbox-check-pop.json` |
| checkbox-circle | registry:component | No box: a circular ring indicator. On check, an SVG circle stroke draws around the full circumference via strokeDashoffset, then the check mark springs into th… | `npx shadcn@latest add https://movin.design/r/checkbox-circle.json` |
| checkbox-confetti | registry:component | On check, 8 grayscale confetti pieces (alternating rectangles and circles) burst radially outward from the center in all directions, rotating and fading as the… | `npx shadcn@latest add https://movin.design/r/checkbox-confetti.json` |
| checkbox-crystal-break | registry:component | On toggle, the box visually shatters into three angled polygonal shards that briefly separate outward, then collapse back revealing the new state. A satisfying… | `npx shadcn@latest add https://movin.design/r/checkbox-crystal-break.json` |
| checkbox-curtain | registry:component | Two gray half-panels slide apart like theater curtains on check, revealing the check mark behind them. Unchecking slides the panels back in to conceal it. | `npx shadcn@latest add https://movin.design/r/checkbox-curtain.json` |
| checkbox-draw-check | registry:component | A checkbox where the SVG checkmark stroke draws itself on via stroke-dashoffset when checked, combined with a brief scale pop on the box. The path writes itsel… | `npx shadcn@latest add https://movin.design/r/checkbox-draw-check.json` |
| checkbox-fire-fill | registry:component | Animated flame gradient rises from the box bottom with a jagged flickering top edge (clip-path polygon keyframes). Light-to-dark gray fill with continuous flic… | `npx shadcn@latest add https://movin.design/r/checkbox-fire-fill.json` |
| checkbox-flip | registry:component | A checkbox that performs a full 360° Y-axis coin flip via CSS keyframes when toggled. The fill color and stroke-dashoffset check mark transition during the rot… | `npx shadcn@latest add https://movin.design/r/checkbox-flip.json` |
| checkbox-ghost-through | registry:component | The box fades to near-translucency while the check mark materializes through it, then the box fades back to solid, creating a "materializing through" ghost eff… | `npx shadcn@latest add https://movin.design/r/checkbox-ghost-through.json` |
| checkbox-glitch | registry:component | On toggle, light and dark ghost overlays jitter in opposite X directions and a horizontal scan line sweeps through, creating a digital corruption/glitch effect… | `npx shadcn@latest add https://movin.design/r/checkbox-glitch.json` |
| checkbox-gravity-drop | registry:component | The check mark falls from above the box with realistic gravity physics, accelerates in, overshoots slightly, bounces twice, then settles. Unchecking tosses it … | `npx shadcn@latest add https://movin.design/r/checkbox-gravity-drop.json` |
| checkbox-heartbeat | registry:component | On check, a tiny SVG ECG heartbeat line draws across the box using stroke-dashoffset, then fades while the check mark reveals. Dark background with a soft whit… | `npx shadcn@latest add https://movin.design/r/checkbox-heartbeat.json` |
| checkbox-ink-blot | registry:component | The box fill spreads via border-radius morphing through organic amoeba/blob shapes, animating through asymmetric four-corner border-radius values before settli… | `npx shadcn@latest add https://movin.design/r/checkbox-ink-blot.json` |
| checkbox-laser-draw | registry:component | The check mark draws itself with a glowing white laser effect using stroke-dashoffset animation and a pulsing drop-shadow filter. Visually distinct from draw-c… | `npx shadcn@latest add https://movin.design/r/checkbox-laser-draw.json` |
| checkbox-liquid | registry:component | A silver liquid rises from the bottom of the box using translateY on a fill layer inside overflow:hidden. A faint curved surface ripple rides the top of the li… | `npx shadcn@latest add https://movin.design/r/checkbox-liquid.json` |
| checkbox-morph-line | registry:component | A short horizontal line morphs into a check mark using SVG path d attribute animation, extending first, then bending into the check V-shape. Unchecking reverse… | `npx shadcn@latest add https://movin.design/r/checkbox-morph-line.json` |
| checkbox-neon | registry:component | A dark box with a near-invisible border that transforms into a white neon sign on check. A brief 400ms flicker keyframe (simulating a neon tube buzzing to life… | `npx shadcn@latest add https://movin.design/r/checkbox-neon.json` |
| checkbox-orbit-snap | registry:component | A glowing white dot orbits the checkbox perimeter for ~700ms on check, then vanishes and the check mark snaps in. Unchecking instantly removes the check. Gives… | `npx shadcn@latest add https://movin.design/r/checkbox-orbit-snap.json` |
| checkbox-pixel-fill | registry:component | A checkbox whose interior is a 4×4 grid of micro-squares that fill in one by one in a randomised stagger order on check, and clear in reverse on uncheck. Retro… | `npx shadcn@latest add https://movin.design/r/checkbox-pixel-fill.json` |
| checkbox-pressure-dip | registry:component | The entire box squishes flat (scaleY 0.28) under simulated finger pressure then springs back up with an overshoot, revealing the checked fill. Distinct from ra… | `npx shadcn@latest add https://movin.design/r/checkbox-pressure-dip.json` |
| checkbox-pulse-ring | registry:component | A checkbox that emits a gray ring radiating outward (scale 1→2.4, opacity 0.65→0) when checked. The ring only fires on check, not uncheck. The check mark draws… | `npx shadcn@latest add https://movin.design/r/checkbox-pulse-ring.json` |
| checkbox-radar-sweep | registry:component | A conic gradient sweeps clockwise from the top, filling the box like a radar scan over ~700ms. The check mark appears once the sweep completes. Driven by a req… | `npx shadcn@latest add https://movin.design/r/checkbox-radar-sweep.json` |
| checkbox-raised | registry:component | The checked state looks physically raised off the surface. A sphere-like radial gradient (silver → dark gray) combined with six layered box-shadows (rim highli… | `npx shadcn@latest add https://movin.design/r/checkbox-raised.json` |
| checkbox-retro-led | registry:component | The box interior is a 5×5 dot matrix. On check, white LEDs light up in a staggered sequence that traces a check-mark pattern through the grid. Off state: all d… | `npx shadcn@latest add https://movin.design/r/checkbox-retro-led.json` |
| checkbox-ripple-fill | registry:component | A circular gray fill expands from the center outward via clip-path circle animation, like a water-drop ripple filling the box. The check mark fades in after th… | `npx shadcn@latest add https://movin.design/r/checkbox-ripple-fill.json` |
| checkbox-round-morph | registry:component | The checkbox shape morphs from a rounded square (7px radius) to a perfect circle on check via animated border-radius with a spring overshoot. Clean and satisfy… | `npx shadcn@latest add https://movin.design/r/checkbox-round-morph.json` |
| checkbox-scratch | registry:component | A diagonal clip-path wipe reveals the filled checked state from the bottom-right corner, like scratching a lottery card. Unchecking collapses the fill back. | `npx shadcn@latest add https://movin.design/r/checkbox-scratch.json` |
| checkbox-shake-lock | registry:component | The box rattles in a rapid X-axis jitter sequence as if locking in, then snaps to the checked silver fill. Unchecking plays a shorter reverse shake. Kinetic, m… | `npx shadcn@latest add https://movin.design/r/checkbox-shake-lock.json` |
| checkbox-shutter | registry:component | The checked fill opens like a camera iris/shutter using clip-path polygon animation: panels spread outward from a collapsed line to full coverage. Sharp, mecha… | `npx shadcn@latest add https://movin.design/r/checkbox-shutter.json` |
| checkbox-spark-trail | registry:component | On check, 8 short white spark-streaks shoot outward in all directions and fade quickly, like an electric discharge. More energy-focused and rapid than confetti… | `npx shadcn@latest add https://movin.design/r/checkbox-spark-trail.json` |
| checkbox-stamp | registry:component | The check mark crashes down from above like a rubber stamp, with a blur-to-focus motion and six ink-splatter dots radiating outward on impact. Dramatic and tac… | `npx shadcn@latest add https://movin.design/r/checkbox-stamp.json` |
| checkbox-tilt-hover | registry:component | On hover, the box tilts in 3D perspective (rotateX + rotateY) giving depth and a subtle lift shadow. Clicking snaps it flat and fills with mid-gray. The tilt r… | `npx shadcn@latest add https://movin.design/r/checkbox-tilt-hover.json` |
| checkbox-x-to-check | registry:component | Both states have visible content: unchecked shows a dim × (reject), checked shows a ✓ on a solid fill (approve). The × rotates away as the ✓ rotates in. The bo… | `npx shadcn@latest add https://movin.design/r/checkbox-x-to-check.json` |
| input-angle | registry:component | A dial for gradient angles: drag round the ring and the hand follows, pulling toward each 45-degree mark (Shift snaps to 15), the nearest tick lights, and the … | `npx shadcn@latest add https://movin.design/r/input-angle.json` |
| input-calc | registry:component | An amount field that does arithmetic: type a sum and the total rolls in beside it digit by digit; Enter swaps the total in with a flash and keeps the sum it ca… | `npx shadcn@latest add https://movin.design/r/input-calc.json` |
| input-cipher | registry:component | A password field where every character scrambles through glyphs for a moment before it settles into a dot. Show decodes them all in a wave into the real charac… | `npx shadcn@latest add https://movin.design/r/input-cipher.json` |
| input-combination | registry:component | A safe dial: spin it by dragging round, scrolling with the arrow keys, read the number under the marker, and enter three numbers in turn. When all three are se… | `npx shadcn@latest add https://movin.design/r/input-combination.json` |
| input-constellation | registry:component | Make a wish: every letter you type becomes a star in the night sky above the field, joined to the previous one by a line that draws in, and the whole figure gl… | `npx shadcn@latest add https://movin.design/r/input-constellation.json` |
| input-convert | registry:component | A unit converter in one field: type a value with a unit (km, mi, m, ft, kg, g, lb, °C, °F) and every conversion in that family appears below, each number count… | `npx shadcn@latest add https://movin.design/r/input-convert.json` |
| input-date-range | registry:component | A stay-dates calendar: pick a first night and a band previews the stay as you hover, then pick the last night and the band settles, gliding across each week ro… | `npx shadcn@latest add https://movin.design/r/input-date-range.json` |
| input-detent | registry:component | A size slider with detents: the thumb drags sticky against each stop and quick between them, clicks into place with a ring at each new size, and springs onto t… | `npx shadcn@latest add https://movin.design/r/input-detent.json` |
| input-domain | registry:component | An email field that finishes the domain for you: after the @ it ghost-completes the likeliest domain, the arrow keys cycle through the alternatives, and Tab ac… | `npx shadcn@latest add https://movin.design/r/input-domain.json` |
| input-drum | registry:component | An alarm-time picker made of 3D drums: hour, minute and AM/PM wheels you drag, scroll or arrow through. The numbers sit round real cylinders that turn under a … | `npx shadcn@latest add https://movin.design/r/input-drum.json` |
| input-elastic | registry:component | A volume slider with rubber-band ends: pull past either end and the track stretches and thins with growing resistance, then snaps back with a wobble. The thumb… | `npx shadcn@latest add https://movin.design/r/input-elastic.json` |
| input-extrude | registry:component | A headline field that renders your text as solid 3D type above it: the extrusion turns to face the pointer, swaying gently on its own when you are elsewhere, a… | `npx shadcn@latest add https://movin.design/r/input-extrude.json` |
| input-flapboard | registry:component | Type a destination and a split-flap departure board rolls every cell through the alphabet to the new letters, one flap at a time, with the status reading Updat… | `npx shadcn@latest add https://movin.design/r/input-flapboard.json` |
| input-gravity | registry:component | A caption field where deleted text does not just vanish: every letter you delete drops out of the field and tumbles away with its own spin and drift, fading as… | `npx shadcn@latest add https://movin.design/r/input-gravity.json` |
| input-grow | registry:component | A code-snippet field that grows line by line: the box springs taller as you add lines (up to seven, then scrolls), line numbers slide into the gutter, the curr… | `npx shadcn@latest add https://movin.design/r/input-grow.json` |
| input-heat | registry:component | A message field that heats up with your typing speed: letters typed fast come out glowing hot and lifted, then cool to the normal colour over a couple of secon… | `npx shadcn@latest add https://movin.design/r/input-heat.json` |
| input-histogram | registry:component | A price-range slider over the distribution of prices: bars grow in on load, the bars inside the chosen range light up, the selection line follows the two thumb… | `npx shadcn@latest add https://movin.design/r/input-histogram.json` |
| input-ink | registry:component | A dedication card where every letter bleeds onto the paper like ink: it lands blurred and slightly large, sharpens as it dries, and leaves a small blot spreadi… | `npx shadcn@latest add https://movin.design/r/input-ink.json` |
| input-mask | registry:component | A phone field with its format printed in place: digits drop into the slots of +1 (___) ___-____ as you type, the remaining slots stay faint, and a tick draws i… | `npx shadcn@latest add https://movin.design/r/input-mask.json` |
| input-measure | registry:component | A blueprint title field: your text sits on a grid between baseline and cap-height guides, and a dimension line with end ticks measures its real width in pixels… | `npx shadcn@latest add https://movin.design/r/input-measure.json` |
| input-mood | registry:component | A rating slider with a face: drag it and the mouth bends from a frown to a grin, the brows tilt, the eyes open wider and the cheeks blush as the mood rises, wi… | `npx shadcn@latest add https://movin.design/r/input-mood.json` |
| input-natural-date | registry:component | A reminder field that reads plain language: write "next fri 3pm", "tomorrow 9am" or "in 3 days" and a calendar chip flips in with the exact date, time and how … | `npx shadcn@latest add https://movin.design/r/input-natural-date.json` |

## For AI agents

```text
You are adding components from @movin to a shadcn-compatible project.
1. Read this file (https://sh4dcn.netlify.app/md/movin.md) for the component list.
2. Fetch the machine-readable index: https://movin.design/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.netlify.app/json (library slug: movin).
```