Components
Loading preview...
A premium liquid glass button with spring-based magnetic cursor tracking, 3D tilt, shimmer highlight, and breathing glow animation.
npx shadcn@latest add https://21st.dev/r/ezzo.link/liquidglassmagneticbuttonimport { LiquidGlassMagneticButton } from '@/components/ui/liquidglassmagneticbutton';
export default function LiquidGlassDemo() {
return (
<div
style={{
minHeight: '100vh',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
gap: 48,
background: '#07070d',
backgroundImage:
'radial-gradient(ellipse at 25% 40%, rgba(88,40,180,0.22) 0%, transparent 55%), radial-gradient(ellipse at 75% 25%, rgba(40,100,220,0.18) 0%, transparent 50%)',
fontFamily: 'system-ui, -apple-system, sans-serif',
}}
>
<LiquidGlassMagneticButton>Explore the Future</LiquidGlassMagneticButton>
<div style={{ display: 'flex', gap: 24, flexWrap: 'wrap', justifyContent: 'center' }}>
<LiquidGlassMagneticButton variant="purple" size="sm">
Get Started
</LiquidGlassMagneticButton>
<LiquidGlassMagneticButton variant="blue">
Learn More
</LiquidGlassMagneticButton>
<LiquidGlassMagneticButton variant="pink" size="lg">
Launch
</LiquidGlassMagneticButton>
</div>
</div>
);
}