---
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", "backgrounds", "blocks", "buttons", "cards", "design-system", "forms", "hooks", "icons", "loaders", "marketing", "media", "navigation", "overlays", "pro-available", "retro"]
framework: "react"
license: null
author: "SoraLabsOSS"
website: "https://ui.soralabs.io.vn"
github: "https://github.com/SoraLabsOSS/sora-ui-community"
registry: "https://ui.soralabs.io.vn/r/registry.json"
pro: true
pro_url: "https://ui.soralabs.io.vn/pricing"
github_stars: 1
component_count: 87
generated_at: "2026-07-28T08:59:05.895Z"
---

# @soralabs

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

## Links

- Website: https://ui.soralabs.io.vn
- GitHub: https://github.com/SoraLabsOSS/sora-ui-community
- Registry JSON: https://ui.soralabs.io.vn/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.io.vn/pricing

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://ui.soralabs.io.vn/r/registry.json
pnpm dlx shadcn@latest add https://ui.soralabs.io.vn/r/registry.json
bunx shadcn@latest add https://ui.soralabs.io.vn/r/registry.json
# clone the source repo
git clone https://github.com/SoraLabsOSS/sora-ui-community.git
# fetch the raw registry index
curl -s https://ui.soralabs.io.vn/r/registry.json
```

## Components (87)

| name | type | description | install |
| --- | --- | --- | --- |
| index | registry:style | — | `npx shadcn@latest add https://ui.soralabs.io.vn/r/index.json` |
| demo-particle-hover-button | registry:ui | A heart-particle sponsor link, styled after the anime.js navbar Sponsor button. | `npx shadcn@latest add https://ui.soralabs.io.vn/r/demo-particle-hover-button.json` |
| demo-accordion | registry:ui | FAQ accordion with animated panels. | `npx shadcn@latest add https://ui.soralabs.io.vn/r/demo-accordion.json` |
| demo-expandable-tabs | registry:ui | Pill tab bar expanding into a floating profile/notifications/settings panel. | `npx shadcn@latest add https://ui.soralabs.io.vn/r/demo-expandable-tabs.json` |
| demo-inline-testimonials | registry:ui | Hover any avatar to reveal the author while the rest of the quote stream blurs out. | `npx shadcn@latest add https://ui.soralabs.io.vn/r/demo-inline-testimonials.json` |
| demo-border-trail | registry:ui | Card with animated border spotlight. | `npx shadcn@latest add https://ui.soralabs.io.vn/r/demo-border-trail.json` |
| demo-border-trail-loading | registry:ui | Submit-triggered border trail that loops twice then fades. | `npx shadcn@latest add https://ui.soralabs.io.vn/r/demo-border-trail-loading.json` |
| demo-border-trail-textarea | registry:ui | Textarea with a continuous gradient border trail. | `npx shadcn@latest add https://ui.soralabs.io.vn/r/demo-border-trail-textarea.json` |
| demo-cursor-bubble | registry:ui | A floating cursor label that elastic-pops into view over interactive links. | `npx shadcn@latest add https://ui.soralabs.io.vn/r/demo-cursor-bubble.json` |
| demo-cursor-trail-reveal | registry:ui | Full-page contact layout with cursor trail image reveals on desktop. | `npx shadcn@latest add https://ui.soralabs.io.vn/r/demo-cursor-trail-reveal.json` |
| demo-custom-cursor | registry:ui | Custom cursor demo with Sora icons and shape variants. | `npx shadcn@latest add https://ui.soralabs.io.vn/r/demo-custom-cursor.json` |
| demo-dock-nav | registry:ui | Apple-style dock navigation demo with app icons. | `npx shadcn@latest add https://ui.soralabs.io.vn/r/demo-dock-nav.json` |
| demo-hero-carousel | registry:ui | Hero image slideshow cycling through a set of project preview screenshots. | `npx shadcn@latest add https://ui.soralabs.io.vn/r/demo-hero-carousel.json` |
| demo-highlight | registry:ui | Shared sliding highlight pill moving between nav items on hover. | `npx shadcn@latest add https://ui.soralabs.io.vn/r/demo-highlight.json` |
| demo-highlight-click | registry:ui | Per-item fade background activated on click — menu list style. | `npx shadcn@latest add https://ui.soralabs.io.vn/r/demo-highlight-click.json` |
| demo-infinite-scrolling-images | registry:ui | Preview for the infinite stacked image scroll effect. | `npx shadcn@latest add https://ui.soralabs.io.vn/r/demo-infinite-scrolling-images.json` |
| demo-logo-carousel-swapper | registry:ui | Staggered four-column logo swapper with blur and vertical motion. | `npx shadcn@latest add https://ui.soralabs.io.vn/r/demo-logo-carousel-swapper.json` |
| demo-magnetic-cards | registry:ui | A fanned stack of cards reacting to cursor movement with GSAP-driven spring physics. | `npx shadcn@latest add https://ui.soralabs.io.vn/r/demo-magnetic-cards.json` |
| demo-pixel-background | registry:ui | A hoverable panel revealing a grid of pixels staggered by the selected pattern. | `npx shadcn@latest add https://ui.soralabs.io.vn/r/demo-pixel-background.json` |
| demo-progressive-blur | registry:ui | A scrollable panel with progressive blur fading content under the top and bottom edges. | `npx shadcn@latest add https://ui.soralabs.io.vn/r/demo-progressive-blur.json` |
| demo-scroll-chapters | registry:ui | Five chapters with a draggable, chaptered progress-bar nav — two of them opt out of showing a panel. | `npx shadcn@latest add https://ui.soralabs.io.vn/r/demo-scroll-chapters.json` |
| demo-scroll-gallery | registry:ui | Sticky scroll slider with 4 slides, strip-mask transitions, and animated title swaps. | `npx shadcn@latest add https://ui.soralabs.io.vn/r/demo-scroll-gallery.json` |
| demo-skeleton | registry:ui | A profile card loading, then crossfading into content once ready. | `npx shadcn@latest add https://ui.soralabs.io.vn/r/demo-skeleton.json` |
| demo-sticky-scroll-cards | registry:ui | Front card flips to reveal 4 stacked back cards that dismiss one at a time as you scroll. | `npx shadcn@latest add https://ui.soralabs.io.vn/r/demo-sticky-scroll-cards.json` |
| demo-tilt-card | registry:ui | Card tilting toward the cursor with layered depth content. | `npx shadcn@latest add https://ui.soralabs.io.vn/r/demo-tilt-card.json` |
| demo-tilt-card-glare | registry:ui | Tilt card with a moving light reflection following the tilt angle. | `npx shadcn@latest add https://ui.soralabs.io.vn/r/demo-tilt-card-glare.json` |
| demo-tilt-card-image | registry:ui | Image card with a subtle reversed tilt. | `npx shadcn@latest add https://ui.soralabs.io.vn/r/demo-tilt-card-image.json` |
| demo-video-player | registry:ui | Trigger button that opens the modal video player with a sample chaptered video. | `npx shadcn@latest add https://ui.soralabs.io.vn/r/demo-video-player.json` |
| demo-bottom-sheet | registry:ui | A settings panel reproduced with the Bottom Sheet primitive: a trigger, a hidden title, and a row list toggling a few mock settings. | `npx shadcn@latest add https://ui.soralabs.io.vn/r/demo-bottom-sheet.json` |
| demo-dia-text-reveal | registry:ui | Gradient sweep revealing a headline with a looping chromatic wash. | `npx shadcn@latest add https://ui.soralabs.io.vn/r/demo-dia-text-reveal.json` |
| demo-draw-underline-link | registry:ui | Scrollable catalog preview with two centered link instances. | `npx shadcn@latest add https://ui.soralabs.io.vn/r/demo-draw-underline-link.json` |
| demo-number-flow | registry:ui | Number Flow demo with currency, input overlay, and countdown examples. | `npx shadcn@latest add https://ui.soralabs.io.vn/r/demo-number-flow.json` |
| demo-text-cursor-loop | registry:ui | The anime.js hero line, with the cursor flashing red only while collapsing/revealing. | `npx shadcn@latest add https://ui.soralabs.io.vn/r/demo-text-cursor-loop.json` |
| demo-text-effect | registry:ui | Scroll-triggered text reveal with blur, fade, slide, and scale presets. | `npx shadcn@latest add https://ui.soralabs.io.vn/r/demo-text-effect.json` |
| demo-text-loop | registry:ui | Cycling headline built with TextLoop. | `npx shadcn@latest add https://ui.soralabs.io.vn/r/demo-text-loop.json` |
| demo-text-morph | registry:ui | Continue / Confirm pill button with per-character layout morph. | `npx shadcn@latest add https://ui.soralabs.io.vn/r/demo-text-morph.json` |
| demo-text-morph-input | registry:ui | Live text morph driven by a controlled input. | `npx shadcn@latest add https://ui.soralabs.io.vn/r/demo-text-morph-input.json` |
| demo-text-reveal-box | registry:ui | Scroll-pinned manifesto copy with word-by-word highlight reveal. | `npx shadcn@latest add https://ui.soralabs.io.vn/r/demo-text-reveal-box.json` |
| demo-text-reveal-mask | registry:ui | Scroll-triggered masked text reveal with rich text emphasis. | `npx shadcn@latest add https://ui.soralabs.io.vn/r/demo-text-reveal-mask.json` |
| demo-text-roll | registry:ui | Interactive copy button with chromatic text roll feedback. | `npx shadcn@latest add https://ui.soralabs.io.vn/r/demo-text-roll.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.io.vn/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.io.vn/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.io.vn/r/hooks-use-prefers-reduced-motion.json` |
| lib-ease | registry:lib | Shared cubic-bezier eases and Motion spring presets (press, swap, panel, layout, mouse) used across primitives to keep motion consistent. | `npx shadcn@latest add https://ui.soralabs.io.vn/r/lib-ease.json` |
| lib-get-strict-context | registry:lib | A hook that allows you to create a strict context. | `npx shadcn@latest add https://ui.soralabs.io.vn/r/lib-get-strict-context.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.io.vn/r/lib-scroll-trigger-utils.json` |
| char-stagger-button | registry:ui | A button with per-character stagger animation on hover. | `npx shadcn@latest add https://ui.soralabs.io.vn/r/char-stagger-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.io.vn/r/particle-hover-button.json` |
| section-cta | 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.io.vn/r/section-cta.json` |
| accordion | registry:ui | An animated FAQ accordion with expandable panels, powered by Motion. | `npx shadcn@latest add https://ui.soralabs.io.vn/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.io.vn/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.io.vn/r/inline-testimonials.json` |
| border-trail | registry:ui | Animated border spotlight that travels around a rounded container, powered by Motion. | `npx shadcn@latest add https://ui.soralabs.io.vn/r/border-trail.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.io.vn/r/cursor-bubble.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.io.vn/r/cursor-trail-reveal.json` |
| custom-cursor | registry:ui | A smooth custom cursor that morphs when hovering interactive targets, powered by Motion. | `npx shadcn@latest add https://ui.soralabs.io.vn/r/custom-cursor.json` |
| dock-nav | registry:ui | An Apple-style dock navigation bar with Motion-powered expanding icons and tooltips on hover. | `npx shadcn@latest add https://ui.soralabs.io.vn/r/dock-nav.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.io.vn/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.io.vn/r/highlight.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.io.vn/r/infinite-scrolling-images.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.io.vn/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.io.vn/r/magnetic-cards.json` |
| pixel-background | registry:ui | A canvas-based pixel grid that animates in on hover, with configurable reveal patterns. | `npx shadcn@latest add https://ui.soralabs.io.vn/r/pixel-background.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.io.vn/r/pixel-image-loader.json` |
| pixelated-image-reveal | registry:ui | An image card that reveals a second image through a randomized pixel grid on hover, powered by Motion. | `npx shadcn@latest add https://ui.soralabs.io.vn/r/pixelated-image-reveal.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.io.vn/r/progressive-blur.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.io.vn/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.io.vn/r/scroll-gallery.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.io.vn/r/skeleton.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.io.vn/r/sticky-scroll-cards.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.io.vn/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.io.vn/r/video-player.json` |
| bottom-sheet | registry:ui | A draggable, snap-point bottom sheet built on Radix Dialog for accessibility, with Motion driving the drag gesture and glide. | `npx shadcn@latest add https://ui.soralabs.io.vn/r/bottom-sheet.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.io.vn/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.io.vn/r/draw-underline-link.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.io.vn/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.io.vn/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.io.vn/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.io.vn/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.io.vn/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.io.vn/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.io.vn/r/text-reveal-block.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.io.vn/r/text-reveal-box.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.io.vn/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.io.vn/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.io.vn/r/text-scramble.json` |
| text-underline | registry:ui | A CSS-only link underline that slides through on hover. | `npx shadcn@latest add https://ui.soralabs.io.vn/r/text-underline.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.io.vn/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).
```