Components
Loading preview...
MorphicBackground is a drop-in component that lets you create a stunning, liquid-gooey animation for your landing pages, hero sections, or anywhere you need a touch of dynamic flair. Key Features 🎨 Effortlessly Customizable: Change the ball color with a single prop (ballColor="#ff5733"). It accepts hex codes, names, RGB—any CSS color. 🚀 Performance First: The animation is highly optimized. It uses requestAnimationFrame and manipulates DOM elements directly, bypassing React's render cycle to ensure it's silky smooth and won't slow down your app. 🧩 Zero Dependencies: Besides React, it's completely self-contained. 🖱️ Click-Through By Design: The component automatically uses a negative z-index and pointer-events-none so it stays in the background and never interferes with your content. Your buttons and links will work without any extra effort. ✅ Simple to Use: Just import the component and place it in your layout. That's it.
@easemize
npx shadcn@latest add https://21st.dev/r/easemize/morhic-backgroundimport { MorphicBackground } from "@/components/ui/morhic-background";
export const Default = () => {
return(
<MorphicBackground/>
);
};
export const Customized = () => {
return(
<MorphicBackground ballColor="hotpink" />
);
};