xyse/ui
GitHub

Beautifully Animated Components

High-quality animated components built on shadcn/ui conventions. Spring physics, layoutId morphing, reduced-motion support.

npx shadcn@latest add https://xyse-ui.pages.dev/r/[name].json

Navigation

Fluid Navbar

Navigation bar with layoutId-powered active indicator that slides between items. Morphs into a compact floating pill on scroll.

Scroll down inside the box to see the navbar compact.

Hero Section

Scroll down to see the navbar compact

npx shadcn@latest add https://xyse-ui.pages.dev/r/fluid-navbar.json

Animated Tabs

Tabs with directional content transitions — content slides and blurs based on navigation direction. Pill and underline variants.

Pill variant

Design System

Consistent tokens, spacing scales, and color palettes across all components.

Underline variant

Design System

Consistent tokens, spacing scales, and color palettes across all components.

npx shadcn@latest add https://xyse-ui.pages.dev/r/animated-tabs.json

Buttons & Actions

Action Button

A button that transforms between idle, loading, success, and error states with spring-based layout animations.

npx shadcn@latest add https://xyse-ui.pages.dev/r/action-button.json

Shimmer Button

Button with a sweeping light shimmer effect. Spring-based press/hover scale, configurable shimmer color, width, speed, and background.

npx shadcn@latest add https://xyse-ui.pages.dev/r/shimmer-button.json

Radial Menu

Circular context menu that fans out items in an arc with staggered spring physics. Configurable radius, spread angle, tooltips, and keyboard accessible.

Full circle

Semi-circle (top)

npx shadcn@latest add https://xyse-ui.pages.dev/r/radial-menu.json

Cards & Containers

Spotlight Card

Card with mouse-following radial gradient spotlight, 3D perspective tilt, and conic border glow. Move your mouse over the cards.

Spring Physics

Every animation uses spring-based motion for natural feel

60fps Always

Only transform and opacity — GPU-accelerated

Accessible

prefers-reduced-motion respected throughout

npx shadcn@latest add https://xyse-ui.pages.dev/r/spotlight-card.json

Hover Perspective

3D tilt card following cursor with spring-smoothed transforms and glossy light reflection. Pure rAF — zero React re-renders during animation.

Pro Plan

$29/mo

Everything you need to build stunning interfaces.

Enterprise

$99/mo

Maximum tilt & scale. Hover to feel the difference.

npx shadcn@latest add https://xyse-ui.pages.dev/r/hover-perspective.json

Flip Card

3D card flip with spring physics, cursor-following tilt on front face, backface-visibility. Click or hover trigger, horizontal/vertical axis.

Click to flip
Back side!
Hover me
Vertical flip!
npx shadcn@latest add https://xyse-ui.pages.dev/r/flip-card.json

Gradient Border

Animated rotating conic gradient border. rAF-driven GPU-composited rotation, optional glow effect, pause-on-hover, configurable colors and speed.

With Glow

Hover to admire the spin

Pause on hover

↺

Counter-clockwise

npx shadcn@latest add https://xyse-ui.pages.dev/r/gradient-border.json

Morphing Dialog

A dialog that uses layoutId animations to morph from a trigger element into a focused view. Spring physics, body scroll lock, prefers-reduced-motion.

npx shadcn@latest add https://xyse-ui.pages.dev/r/morphing-dialog.json

Morphing Popover

A popover that morphs FROM the trigger element using layoutId. The trigger physically transforms into the popover with spring physics.

npx shadcn@latest add https://xyse-ui.pages.dev/r/morphing-popover.json

Text & Typography

Text Scramble

Text reveal that cycles through random characters before settling. Uses requestAnimationFrame for smooth 60fps with wave timing.

npx shadcn@latest add https://xyse-ui.pages.dev/r/text-scramble.json

Typewriter

Realistic typewriter text effect with variable character speed, human-like micro-pauses, and cycling through strings. rAF-driven, CSS cursor blink.

Build
npx shadcn@latest add https://xyse-ui.pages.dev/r/typewriter.json

Scroll Reveal Text

Text reveals word-by-word as you scroll. Each token transitions from dim to full color, driven by scroll progress. Configurable granularity.

word (default)

Design is not just what it looks like and feels like. Design is how it works. Every pixel matters, every interaction counts.

character

Scroll to reveal magic

npx shadcn@latest add https://xyse-ui.pages.dev/r/scroll-reveal-text.json

Data Display

Animated Counter

Digit-by-digit rolling counter like an odometer. Spring-based interpolation, configurable formats, scroll-triggered entrance animation.

0%
Accuracy
0
Users
0.0%
Uptime
$0.00
npx shadcn@latest add https://xyse-ui.pages.dev/r/animated-counter.json

Animated Beam

Animated SVG beams connecting elements with glowing gradient paths. Perfect for integrations, workflows, and data flow visualizations.

UserServicesStorage
npx shadcn@latest add https://xyse-ui.pages.dev/r/animated-beam.json

Animated Stepper

Multi-step progress indicator with spring-animated checkmarks, filling connector lines, and a pulsing active ring. Horizontal & vertical.

Account
Create your account
Profile
Set up your profile
Billing
Add payment method
Confirm
Review & submit
Step 2 of 4

vertical

Account
Create your account
Profile
Set up your profile
Billing
Add payment method
npx shadcn@latest add https://xyse-ui.pages.dev/r/animated-stepper.json

Orbit

Animated orbital rings with revolving items around a center element. CSS-driven GPU-composited rotation, configurable rings, radius, speed, and direction.

UI
⚛️
▲
🎨
🔥
⚡
📦
🚀
🌐
✦
💎
🎯
🛡️
npx shadcn@latest add https://xyse-ui.pages.dev/r/orbit.json

Particle Field

Interactive canvas particle system with mouse repulsion, inter-particle connections, and edge wrapping. Pure rAF — zero React re-renders.

Move your mouse
npx shadcn@latest add https://xyse-ui.pages.dev/r/particle-field.json

Lists & Layout

Stagger Reveal

Choreographed content reveal on scroll with IntersectionObserver. Configurable presets, spring physics, prefers-reduced-motion support.

fade-up
Item 1
slide-left
Item 2
scale
Item 3
blur
Item 4
npx shadcn@latest add https://xyse-ui.pages.dev/r/stagger-reveal.json

Reorder List

Drag-to-reorder sortable list with spring physics, smooth layout animations, drag handles, and elevated shadow while dragging.

  • Design mockupsDesign
  • Build componentsDev
  • Write documentationDocs
  • Ship to productionOps
npx shadcn@latest add https://xyse-ui.pages.dev/r/reorder-list.json

Elastic Slider

Momentum-based horizontal slider with elastic overscroll, snap-to-item centering, per-item scale effect, and spring physics.

✦Design
⚡Develop
🚀Deploy
🔄Iterate
📦Ship
npx shadcn@latest add https://xyse-ui.pages.dev/r/elastic-slider.json

Swipe Cards

Tinder-style draggable card stack with spring physics. Drag left to reject, right to accept. Stacked depth effect and rotation.

Drag the top card left or right to dismiss it.

🌌

Northern Lights

Aurora dancing across the sky

🌸

Cherry Blossoms

Spring petals in the breeze

🌊

Ocean Depths

Mysteries beneath the waves

LIKE
NOPE
npx shadcn@latest add https://xyse-ui.pages.dev/r/swipe-cards.json

Infinite Marquee

Infinitely scrolling content with CSS-driven animation, pause on hover, gradient edge fades, and configurable speed/direction.

ReactNext.jsTailwindFramer Motionshadcn/uiTypeScriptVercel
Spring PhysicslayoutId60fpsGPU CompositedAccessibleComposable
npx shadcn@latest add https://xyse-ui.pages.dev/r/infinite-marquee.json

Scroll

Scroll Progress

Scroll-linked animations: progress bar, fade, and parallax. Built on framer-motion useScroll + useTransform + useSpring.

Scroll inside the box to see the progress bar and parallax effects.

Scroll-Linked Fade

This content fades in as you scroll

Parallax layer 1 — speed 0.3
Parallax layer 2 — speed 0.6
Parallax layer 3 — speed 0.9
npx shadcn@latest add https://xyse-ui.pages.dev/r/scroll-progress.json

Scroll Velocity

Horizontal text that accelerates and decelerates based on page scroll velocity. Uses useVelocity + useSpring for smooth physics-driven movement.

xyse/ui — Beautifully Animated Components ✦
Spring Physics ✦ Layout Animations ✦ Reduced Motion ✦
npx shadcn@latest add https://xyse-ui.pages.dev/r/scroll-velocity.json

Cursor

Magnetic Cursor

Wrapper that makes elements magnetically attracted to the cursor. Uses rAF with lerp interpolation for smooth 60fps movement.

✦
Strong pull
npx shadcn@latest add https://xyse-ui.pages.dev/r/magnetic-cursor.json