Morhic Background

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Morhic Background to your project and fits it to your theme.

import { MorphicBackground } from "@/components/ui/morhic-background";

export const Default = () => {
  return(
       <MorphicBackground/>
  );
};

export const Customized = () => {
  return(
    <MorphicBackground ballColor="hotpink" />
  );
};