@soralabs
Motion-first React primitives and animated UI components for shadcn/ui. Copy, customize, and ship fluid interfaces.
Install this registry
npx shadcn@latest add https://ui.soralabs.studio/r/registry.json pnpm dlx shadcn@latest add https://ui.soralabs.studio/r/registry.json bunx shadcn@latest add https://ui.soralabs.studio/r/registry.json curl -s https://ui.soralabs.studio/r/registry.json Components
67 totalnpx shadcn@latest add https://ui.soralabs.studio/r/index.json Desktop cursor trail that reveals staggered image strips with clip-path wipes as the pointer moves.
npx shadcn@latest add https://ui.soralabs.studio/r/cursor-trail-reveal.json An infinite card stack that advances with wheel, touch, or keyboard input using spring-based Motion transitions.
npx shadcn@latest add https://ui.soralabs.studio/r/infinite-scrolling-images.json A draggable, chaptered progress-bar nav — two-way cursor/scroll sync, ghost-cursor hover preview, snap-to-step seeking, and a per-chapter panel that can opt in…
npx shadcn@latest add https://ui.soralabs.studio/r/scroll-chapters.json A full-viewport sticky scroll slider with strip-mask image transitions and animated title swaps, driven by GSAP ScrollTrigger.
npx shadcn@latest add https://ui.soralabs.studio/r/scroll-gallery.json Scroll-pinned hero where a front card flips to reveal a stack of back cards, dismissed one at a time as you keep scrolling.
npx shadcn@latest add https://ui.soralabs.studio/r/sticky-scroll-cards.json Scroll-pinned word-by-word text reveal with a highlight flash, powered by GSAP ScrollTrigger.
npx shadcn@latest add https://ui.soralabs.studio/r/text-reveal-box.json Multi-page editorial portfolio transition with tilted scaling exit and diagonal clip-path entrance, powered by View Transition API, GSAP SplitText, and Lenis.
npx shadcn@latest add https://ui.soralabs.studio/r/tilt-slide-transition.json A hook that allows you to automatically adjust the height of an element based on its content.
npx shadcn@latest add https://ui.soralabs.studio/r/hooks-use-auto-height.json A hook that allows you to control a state.
npx shadcn@latest add https://ui.soralabs.studio/r/hooks-use-controlled-state.json A hook that tracks the OS-level Reduced Motion setting live, so GSAP-driven primitives can skip or shortcut their animations.
npx shadcn@latest add https://ui.soralabs.studio/r/hooks-use-prefers-reduced-motion.json Animated right arrow that nudges forward and redraws its stroke on hover using a pure CSS stroke-dash animation.
npx shadcn@latest add https://ui.soralabs.studio/r/icons-arrow-right.json Notification bell that rattles from its hanger on trigger — a decaying rotation pivot.
npx shadcn@latest add https://ui.soralabs.studio/r/icons-bell.json Animated double up-chevron that cross-fades between the two carets on trigger.
npx shadcn@latest add https://ui.soralabs.studio/r/icons-chevrons.json Animated copy icon that smoothly transitions into a checkmark on trigger with a scale and blur pop effect.
npx shadcn@latest add https://ui.soralabs.studio/r/icons-copy.json Shared GSAP ScrollTrigger helpers (window/scroller detection, ready/resize waiting) used by scroll-driven primitives.
npx shadcn@latest add https://ui.soralabs.studio/r/lib-scroll-trigger-utils.json A bespoke studio CTA button with rolling text-shadow and dual-arrow sliding transitions on hover.
npx shadcn@latest add https://ui.soralabs.studio/r/arrow-roll-button.json A wrapper that emits glowing, pooled particles from the cursor while hovering any button or link.
npx shadcn@latest add https://ui.soralabs.studio/r/particle-hover-button.json A chip-style call-to-action link with a Motion-powered sliding label and rotating icon chips on hover.
npx shadcn@latest add https://ui.soralabs.studio/r/sliding-chip-button.json A button that staggers per character or slides the whole label on hover, with a scaling background layer.
npx shadcn@latest add https://ui.soralabs.studio/r/stagger-button.json An animated FAQ accordion with expandable panels, powered by Motion.
npx shadcn@latest add https://ui.soralabs.studio/r/accordion.json A pill-shaped tab bar that expands into a floating panel, with Motion driving the shell, label, and content transitions.
npx shadcn@latest add https://ui.soralabs.studio/r/expandable-tabs.json A flowing quote stream where each avatar reveals its author on hover, with Motion fading and blurring the rest.
npx shadcn@latest add https://ui.soralabs.studio/r/inline-testimonials.json A floating label that follows the cursor and elastic-pops into view over interactive targets, powered by GSAP.
npx shadcn@latest add https://ui.soralabs.studio/r/cursor-bubble.json Crossfading hero image slideshow with a progress pill, play/pause, and prev/next controls.
npx shadcn@latest add https://ui.soralabs.studio/r/hero-carousel.json A Motion-powered highlight effect that allows you to highlight elements on hover, click or with a controlled value.
npx shadcn@latest add https://ui.soralabs.studio/r/highlight.json Staggered logo column swapper with fade, vertical shift, and motion blur powered by Motion.
npx shadcn@latest add https://ui.soralabs.studio/r/logo-carousel-swapper.json A fanned stack of cards that fling away from the cursor on release, with GSAP InertiaPlugin easing each one back to rest.
npx shadcn@latest add https://ui.soralabs.studio/r/magnetic-cards.json A canvas-based image that resolves from a blocky, pixelated placeholder up to full sharpness as it loads.
npx shadcn@latest add https://ui.soralabs.studio/r/pixel-image-loader.json A stacked-layer blur that ramps smoothly from sharp to fully blurred toward an edge, for fading content under a fixed header or above a scroll boundary.
npx shadcn@latest add https://ui.soralabs.studio/r/progressive-blur.json A loading placeholder with shimmer or fade variants, plus a transition that crossfades into real content once loading finishes.
npx shadcn@latest add https://ui.soralabs.studio/r/skeleton.json Skeleton loading placeholders with a shimmer effect that transitions to revealed content via a CSS view-transition wipe animation. Skeletons are sized using pl…
npx shadcn@latest add https://ui.soralabs.studio/r/skeleton-shimmer.json 3D tilt card that rotates toward the cursor on spring physics, with an optional glare reflection.
npx shadcn@latest add https://ui.soralabs.studio/r/tilt-card.json Dependency-free custom video player: modal overlay, chaptered timeline, hover-scrub preview, speed menu, picture-in-picture, fullscreen, keyboard shortcuts, an…
npx shadcn@latest add https://ui.soralabs.studio/r/video-player.json A gradient sweep that reveals text with a chromatic wash, powered by Motion.
npx shadcn@latest add https://ui.soralabs.studio/r/dia-text-reveal.json A link with a hand-drawn SVG underline that animates on hover, powered by Motion.
npx shadcn@latest add https://ui.soralabs.studio/r/draw-underline-link.json Dual-layer block wipe reveal that sweeps away curtain blocks to unveil text, powered by Motion.
npx shadcn@latest add https://ui.soralabs.studio/r/dual-wipe-reveal.json Inline text that materializes through a soft, turbulent WebGL fog mask, inherits font and color from CSS, and cycles through an array of messages.
npx shadcn@latest add https://ui.soralabs.studio/r/fog-text-reveal.json An animated, digit-by-digit number counter with a smooth rolling odometer effect, powered by Motion.
npx shadcn@latest add https://ui.soralabs.studio/r/number-flow.json Per-character slot-machine reveal that rolls each letter into place once it scrolls into view, powered by Motion.
npx shadcn@latest add https://ui.soralabs.studio/r/rolling-text.json Cycles through a list of words with a per-character collapse/reveal transition and a trailing cursor glyph that wipes across the text between words.
npx shadcn@latest add https://ui.soralabs.studio/r/text-cursor-loop.json Preset-driven staggered text reveals with blur, fade, slide, and scale animations, powered by Motion.
npx shadcn@latest add https://ui.soralabs.studio/r/text-effect.json Cycles through a list of items with an enter/exit animation, powered by Motion.
npx shadcn@latest add https://ui.soralabs.studio/r/text-loop.json Per-character layout morphing for labels, counters, and live text swaps, powered by Motion.
npx shadcn@latest add https://ui.soralabs.studio/r/text-morph.json Line-by-line text reveal with a colored block wipe, powered by GSAP SplitText.
npx shadcn@latest add https://ui.soralabs.studio/r/text-reveal-block.json A scroll-triggered masked slide-up text reveal animation, powered by Motion.
npx shadcn@latest add https://ui.soralabs.studio/r/text-reveal-mask.json A per-character vertical text roll animation for label swaps and micro-interactions, powered by Motion.
npx shadcn@latest add https://ui.soralabs.studio/r/text-roll.json A text scramble reveal animation that decodes characters on mount or when re-triggered, powered by Motion.
npx shadcn@latest add https://ui.soralabs.studio/r/text-scramble.json A character-by-character reveal where each glyph ripples through randomized pill, accent, and outline states before settling into plain text. Adjacent same-sta…
npx shadcn@latest add https://ui.soralabs.studio/r/typer.json An animated accordion component built on Base UI with spring physics, height collapse mask gradient, blur transitions, and gliding layoutId focus ring.
npx shadcn@latest add https://ui.soralabs.studio/r/base-accordion.json An accessible alert dialog built on Base UI with smooth Motion 3D perspective entrance and exit animations, customizable sizes, and media slots.
npx shadcn@latest add https://ui.soralabs.studio/r/base-alert-dialog.json An interactive button component built on Base UI with Motion hover/tap scaling and shadcn/ui variants.
npx shadcn@latest add https://ui.soralabs.studio/r/base-button.json An accessible, stylable checkbox built on Base UI with a Motion-friendly animated indicator.
npx shadcn@latest add https://ui.soralabs.studio/r/base-checkbox.json An accessible context menu built on Base UI with smooth Motion spring scale and submenu slide animations.
npx shadcn@latest add https://ui.soralabs.studio/r/base-context-menu.json An accessible modal dialog built on Base UI with smooth Motion spring entrance and exit animations.
npx shadcn@latest add https://ui.soralabs.studio/r/base-dialog.json An accessible dropdown menu built on Base UI with smooth Motion spring scale and submenu slide animations.
npx shadcn@latest add https://ui.soralabs.studio/r/base-dropdown-menu.json An accessible, highly customizable switch built on Base UI with Motion spring layout physics.
npx shadcn@latest add https://ui.soralabs.studio/r/base-switch.json An accessible tooltip built on Base UI with spring-based keyframe scale and translation animations powered by Motion.
npx shadcn@latest add https://ui.soralabs.studio/r/base-tooltip.json An animated accordion component built on Radix UI with spring physics, height collapse mask gradient, blur transitions, and gliding layoutId focus ring.
npx shadcn@latest add https://ui.soralabs.studio/r/radix-accordion.json An accessible alert dialog built on Radix UI with smooth Motion 3D perspective entrance and exit animations, customizable sizes, and media slots.
npx shadcn@latest add https://ui.soralabs.studio/r/radix-alert-dialog.json An interactive button component built on Radix UI Slot with Motion hover/tap scaling and shadcn/ui variants.
npx shadcn@latest add https://ui.soralabs.studio/r/radix-button.json An accessible, stylable checkbox built on Radix UI with a Motion-friendly animated indicator.
npx shadcn@latest add https://ui.soralabs.studio/r/radix-checkbox.json An accessible context menu built on Radix UI with smooth Motion spring scale and submenu slide animations.
npx shadcn@latest add https://ui.soralabs.studio/r/radix-context-menu.json An accessible modal dialog built on Radix UI with smooth Motion spring entrance and exit animations.
npx shadcn@latest add https://ui.soralabs.studio/r/radix-dialog.json An accessible dropdown menu built on Radix UI with smooth Motion spring scale and submenu slide animations.
npx shadcn@latest add https://ui.soralabs.studio/r/radix-dropdown-menu.json An accessible, highly customizable switch built on Radix UI with Motion spring layout physics.
npx shadcn@latest add https://ui.soralabs.studio/r/radix-switch.json An accessible tooltip built on Radix UI with spring-based keyframe scale and translation animations powered by Motion.
npx shadcn@latest add https://ui.soralabs.studio/r/radix-tooltip.json