soralabs

An animated FAQ accordion with expandable panels, powered by Motion.

FAQ accordion with animated panels.

A slot component that allows you to use motion components with any element.

Animated right arrow that nudges forward and redraws its stroke on hover using a pure CSS stroke-dash animation.

Notification bell that rattles from its hanger on trigger — a decaying rotation pivot, powered by the AnimateIcon engine.

Animated border spotlight that travels around a rounded container, powered by Motion.

Card with animated border spotlight.

Submit-triggered border trail that loops twice then fades.

Textarea with a continuous gradient border trail.

A draggable, snap-point bottom sheet built on Radix Dialog for accessibility, with Motion driving the drag gesture and glide.

A settings panel reproduced with the Bottom Sheet primitive: a trigger, a hidden title, and a row list toggling a few mock settings.

Animated double up-chevron that cross-fades between the two carets on hover, powered by the AnimateIcon engine.

A floating label that follows the cursor and elastic-pops into view over interactive targets, powered by GSAP.

A floating cursor label that elastic-pops into view over interactive links.

Desktop cursor trail that reveals staggered image strips with clip-path wipes as the pointer moves.

Full-page contact layout with cursor trail image reveals on desktop.

A smooth custom cursor that morphs when hovering interactive targets, powered by Motion.

Custom cursor demo with Sora icons and shape variants.

A gradient sweep that reveals text with a chromatic wash, powered by Motion.

Gradient sweep revealing a headline with a looping chromatic wash.

An Apple-style dock navigation bar with Motion-powered expanding icons and tooltips on hover.

Apple-style dock navigation demo with app icons.

A link with a hand-drawn SVG underline that animates on hover, powered by Motion.

Scrollable catalog preview with two centered link instances.

Shared cubic-bezier eases and Motion spring presets (press, swap, panel, layout, mouse) used across primitives to keep motion consistent.

A pill-shaped tab bar that expands into a floating panel, with Motion driving the shell, label, and content transitions.

Pill tab bar expanding into a floating profile/notifications/settings panel.

Inline text that materializes through a soft, turbulent WebGL fog mask, inherits font and color from CSS, and cycles through an array of messages.

Inline text that materializes through a WebGL fog mask and cycles through messages, inheriting the surrounding font and color.

A hook that allows you to create a strict context.

Crossfading hero image slideshow with a progress pill, play/pause, and prev/next controls.

Hero image slideshow cycling through a set of project preview screenshots.

A Motion-powered highlight effect that allows you to highlight elements on hover, click or with a controlled value.

Per-item fade background activated on click — menu list style.

Shared sliding highlight pill moving between nav items on hover.

AnimateIcon engine that powers Sora's animated icons — provides animate, animateOnHover, animateOnTap, animateOnView, loop, and per/static path animations via a shared context.

(No description)

An infinite card stack that advances with wheel, touch, or keyboard input using spring-based Motion transitions.

Preview for the infinite stacked image scroll effect.

A flowing quote stream where each avatar reveals its author on hover, with Motion fading and blurring the rest.

Hover any avatar to reveal the author while the rest of the quote stream blurs out.

Staggered logo column swapper with fade, vertical shift, and motion blur powered by Motion.

Staggered four-column logo swapper with blur and vertical motion.

A fanned stack of cards that fling away from the cursor on release, with GSAP InertiaPlugin easing each one back to rest.

A fanned stack of cards reacting to cursor movement with GSAP-driven spring physics.

An animated, digit-by-digit number counter with a smooth rolling odometer effect, powered by Motion.

Number Flow demo with currency, input overlay, and countdown examples.

A wrapper that emits glowing, pooled particles from the cursor while hovering any button or link.