Components
Loading preview...
FloatingBubblesBackground: Enchanting Animated Bubbles & Dynamic Hero Section The FloatingBubblesBackground component creates a mesmerizing visual experience with a dynamic background of softly animated, colorful bubbles. This enchanting backdrop perfectly complements an engaging, animated hero title and a styled call-to-action button, making it an ideal choice for a welcoming and modern header or landing page. What It Is This React component uses framer-motion to generate and animate numerous semi-transparent bubbles that gently float, scale, and subtly shift across the entire screen. Overlaying this serene, bubbly background is a customizable title where each letter animates into view with a smooth, spring-like effect. Below the title, a stylish button with interactive hover effects invites user engagement. Key Features Animated Bubble Background: Dynamic Bubbles: The FloatingBubbles sub-component creates 50 individual, randomly sized, and colored bubble elements (<motion.circle>). Continuous Motion: Each bubble gracefully scales, changes opacity, and subtly drifts across the screen. These animations run infinitely, creating a fluid and calming visual effect. Randomized Appearance: Bubbles are initialized with random positions, sizes, and colors (with transparency), ensuring a unique and organic look every time. Full-Screen Coverage: The SVG container ensures the bubbles span the entire viewport, providing an immersive background. Spring-Animated Hero Title: Letter-by-Letter Entrance: The main title (controlled by the title prop) animates each individual letter into view with a "spring" effect, creating a lively and engaging entrance. Gradient Text: The title text itself uses a vibrant gradient fill that changes based on the theme, providing a modern and appealing look. Customizable: Easily change the hero text by passing a different title prop. Stylish Call-to-Action Button: A beautifully designed button, "Explore the Bubbles," is positioned below the title. It features subtle background gradients, a backdrop-blur effect for a frosted glass look, and a shadow-lg for depth. Interactive Hover Effects: On hover, the button scales slightly, its shadow deepens, and an arrow icon to the right smoothly translates, signaling interactivity. Theme-Aware: The button's colors and hover states are designed to work flawlessly in both light and dark modes, using appropriate shades of blue and purple. Responsive Layout: The component is built with responsiveness in mind, ensuring the title and button are well-centered and legible across various screen sizes. Framer Motion Integration: Extensive use of framer-motion handles all animations, providing smooth, hardware-accelerated transitions and complex sequence orchestration. Why It's Cool for Developers This component is an excellent demonstration of: Generative SVG Animation: Learn how to programmatically create and animate numerous SVG elements for unique background effects. Sophisticated framer-motion Usage: It showcases advanced framer-motion features for controlling position, scale, and opacity with infinite, randomized animations. Layered UI Design: See how to combine background elements (SVG bubbles) with prominent foreground content (text and a button) while maintaining proper z-index for visual hierarchy. Theming and Responsiveness: Implementing design that gracefully adapts to different themes and screen sizes. Component Composition: It breaks down a complex UI into smaller, manageable sub-components (Bubble, FloatingBubbles).
npx shadcn@latest add https://21st.dev/r/uniquesonu/floating-bubbles-backgroundimport FloatingBubblesBackground from "@/components/ui/floating-bubbles-background";
const Main = () => {
return <FloatingBubblesBackground />;
};
export { Main };