Beautifully Animated Components
A collection of animated components built on shadcn/ui conventions. Copy and paste into your projects with one command.
npx shadcn@latest add https://xyse-ui.pages.dev/r/[name].jsonMorph Button
Button that morphs shape/size on hover and click with spring physics.
npx shadcn@latest add https://xyse-ui.pages.dev/r/morph-button.jsonBlur Reveal
Content that reveals with an animated blur-to-sharp transition.
Hello World
This text reveals with a blur animation.
Each line is staggered.
npx shadcn@latest add https://xyse-ui.pages.dev/r/blur-reveal.jsonMagnetic Element
Wrapper that makes any element magnetically attracted to the cursor.
Hover
Me
npx shadcn@latest add https://xyse-ui.pages.dev/r/magnetic-element.jsonScroll Reveal
Scroll-triggered animation wrapper with multiple presets.
Fade Up 1
Fade Up 2
Fade Up 3
npx shadcn@latest add https://xyse-ui.pages.dev/r/scroll-reveal.jsonGlitch Text
Text with configurable glitch/distortion effect.
HOVER MECONTINUOUS
npx shadcn@latest add https://xyse-ui.pages.dev/r/glitch-text.jsonPage Transition
Animated page transition wrapper with multiple modes.
Page 1
fade
npx shadcn@latest add https://xyse-ui.pages.dev/r/page-transition.jsonLiquid Button
Button with SVG liquid/blob animation on hover.
npx shadcn@latest add https://xyse-ui.pages.dev/r/liquid-button.jsonDevice Mockup
Beautiful device frames that can wrap any content.
https://xyse-ui.pages.dev
Browser
Any content here
App
Mobile view
npx shadcn@latest add https://xyse-ui.pages.dev/r/device-mockup.json