---
name: "@soralabs"
slug: "soralabs"
description: "Motion-first React primitives and animated UI components for shadcn/ui. Copy, customize, and ship fluid interfaces."
category: "Animated components"
tags: ["animation", "audio", "blocks", "buttons", "cards", "design-system", "hooks", "icons", "loaders", "marketing", "media", "navigation", "overlays", "pro-available", "retro"]
framework: "react"
license: null
author: "SoraLabsOSS"
website: "https://ui.soralabs.studio"
github: "https://github.com/SoraLabsOSS/ui"
registry: "https://ui.soralabs.studio/r/registry.json"
pro: true
pro_url: "https://ui.soralabs.studio/pricing"
github_stars: 11
component_count: 67
generated_at: "2026-09-21T01:50:16.753Z"
---

# @soralabs

Motion-first React primitives and animated UI components for shadcn/ui. Copy, customize, and ship fluid interfaces.

## Links

- Website: https://ui.soralabs.studio
- GitHub: https://github.com/SoraLabsOSS/ui
- Registry JSON: https://ui.soralabs.studio/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/soralabs
- This file: https://sh4dcn.vercel.app/md/soralabs.md
- Pro / pricing: https://ui.soralabs.studio/pricing

## Install

```sh
# add the whole registry (shadcn CLI)
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
# clone the source repo
git clone https://github.com/SoraLabsOSS/ui.git
# fetch the raw registry index
curl -s https://ui.soralabs.studio/r/registry.json
```

## Components (67)

| name | type | description | install |
| --- | --- | --- | --- |
| index | registry:style | — | `npx shadcn@latest add https://ui.soralabs.studio/r/index.json` |
| cursor-trail-reveal | registry:ui | 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` |
| infinite-scrolling-images | registry:ui | 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` |
| scroll-chapters | registry:ui | 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` |
| scroll-gallery | registry:ui | 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` |
| sticky-scroll-cards | registry:ui | 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` |
| text-reveal-box | registry:ui | 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` |
| tilt-slide-transition | registry:ui | 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` |
| hooks-use-auto-height | registry:hook | 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` |
| hooks-use-controlled-state | registry:hook | A hook that allows you to control a state. | `npx shadcn@latest add https://ui.soralabs.studio/r/hooks-use-controlled-state.json` |
| hooks-use-prefers-reduced-motion | registry:hook | 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` |
| icons-arrow-right | registry:ui | 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` |
| icons-bell | registry:ui | 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` |
| icons-chevrons | registry:ui | 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` |
| icons-copy | registry:ui | 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` |
| lib-scroll-trigger-utils | registry:lib | 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` |
| arrow-roll-button | registry:ui | 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` |
| particle-hover-button | registry:ui | 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` |
| sliding-chip-button | registry:ui | 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` |
| stagger-button | registry:ui | 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` |
| accordion | registry:ui | An animated FAQ accordion with expandable panels, powered by Motion. | `npx shadcn@latest add https://ui.soralabs.studio/r/accordion.json` |
| expandable-tabs | registry:ui | 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` |
| inline-testimonials | registry:ui | 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` |
| cursor-bubble | registry:ui | 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` |
| hero-carousel | registry:ui | 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` |
| highlight | registry:ui | 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` |
| logo-carousel-swapper | registry:ui | 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` |
| magnetic-cards | registry:ui | 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` |
| pixel-image-loader | registry:ui | 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` |
| progressive-blur | registry:ui | 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` |
| skeleton | registry:ui | 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-shimmer | registry:ui | 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` |
| tilt-card | registry:ui | 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` |
| video-player | registry:ui | 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` |
| dia-text-reveal | registry:ui | 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` |
| draw-underline-link | registry:ui | 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-wipe-reveal | registry:ui | 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` |
| fog-text-reveal | registry:ui | 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` |
| number-flow | registry:ui | 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` |
| rolling-text | registry:ui | 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` |
| text-cursor-loop | registry:ui | 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` |
| text-effect | registry:ui | 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` |
| text-loop | registry:ui | 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` |
| text-morph | registry:ui | 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` |
| text-reveal-block | registry:ui | 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` |
| text-reveal-mask | registry:ui | 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` |
| text-roll | registry:ui | 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` |
| text-scramble | registry:ui | 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` |
| typer | registry:ui | 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` |
| base-accordion | registry:ui | 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` |
| base-alert-dialog | registry:ui | 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` |
| base-button | registry:ui | 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` |
| base-checkbox | registry:ui | 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` |
| base-context-menu | registry:ui | 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` |
| base-dialog | registry:ui | 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` |
| base-dropdown-menu | registry:ui | 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` |
| base-switch | registry:ui | 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` |
| base-tooltip | registry:ui | 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` |
| radix-accordion | registry:ui | 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` |
| radix-alert-dialog | registry:ui | 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` |
| radix-button | registry:ui | 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` |
| radix-checkbox | registry:ui | 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` |
| radix-context-menu | registry:ui | 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` |
| radix-dialog | registry:ui | 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` |
| radix-dropdown-menu | registry:ui | 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` |
| radix-switch | registry:ui | 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` |
| radix-tooltip | registry:ui | 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` |

## For AI agents

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