Components
Loading preview...
The component includes props for dimensions, bubble count, colors, and styling, while maintaining the original blur effect and animated gradient background.
npx shadcn@latest add https://21st.dev/r/designali-in/bubble-animationimport { BubbleAnimation } from "@/components/ui/bubble-animation";
export default function DemoOne() {
return (
<div className="relative flex h-[650px] w-full flex-col items-center justify-center overflow-hidden">
<BubbleAnimation
width={800}
height={600}
totalBubbles={20}
colors={["#018ddc", "#f12a00", "#ec6546", "#b0c90d"]}
className="absolute rounded-md w-full h-full"
/>
<span className="pointer-events-none z-10 text-center text-7xl leading-none font-semibold tracking-tighter whitespace-pre-wrap text-white">
Bubble Animation
</span>
</div>
)
}