a versatile and visually engaging React component called BackgroundLines that generates a dynamic background with animated SVG lines, floating particles, and interactive glow effects. It's highly customizable, allowing users to select different themes and adjust visual intensity.
Here's a description you can use for 21st.dev:
BackgroundLines: Dynamic Animated Background Component Elevate your website's aesthetic with BackgroundLines, a highly customizable React component that generates stunning animated backgrounds. This component features elegantly animated SVG lines, subtle floating particles, and an interactive mouse-responsive glow effect, providing a modern and captivating visual experience for your users.
Features: Multiple Themes: Choose from dark (default), light, cyberpunk, ocean, and sunset to seamlessly match your design aesthetic. Each theme applies a unique color palette to the background gradient, SVG lines, and particles. Animated SVG Lines: Intricate SVG paths are dynamically drawn and animated, creating a continuous, flowing visual element. Customizable Line Intensity: Adjust the density of the SVG lines with low, medium, or high intensity settings. Optional Glow Effect: Add a beautiful glow to the animated lines for an even more ethereal and futuristic look. Floating Particles: Enhance the background with subtle, animated particles that float and fade, adding depth and a touch of magic. Control the number of particles for desired visual impact. Interactive Mouse Glow: A subtle, responsive glow follows the user's mouse cursor, adding an interactive and engaging element to the background. Performance Optimized: Built with framer-motion for smooth, hardware-accelerated animations. Easy to Integrate: Simply wrap your content with the BackgroundLines component and customize its props. Usage: TypeScript
import { BackgroundLines } from "@/components/ui/background-lines"; // Adjust path as needed
export default function MyPage() { return ( <BackgroundLines theme="cyberpunk" svgOptions={{ duration: 10, intensity: "high", glowEffect: true, particleCount: 30, }} className="min-h-screen flex items-center justify-center" > {/* Your page content goes here */} <h1 className="text-white text-5xl font-bold">Welcome to 21st.dev</h1> </BackgroundLines> ); }
Props: children: (React.ReactNode) - The content to be rendered on top of the background. className: (string, optional) - Additional Tailwind CSS classes to apply to the main container. svgOptions: (object, optional) duration: (number, optional) - Duration of the SVG line animations in seconds (default: 10 for main lines, 12 for glow lines). intensity: ("low" | "medium" | "high", optional) - Controls the thickness and density of the SVG lines (default: medium). glowEffect: (boolean, optional) - Enables or disables the glow effect on the SVG lines (default: true). particleCount: (number, optional) - Number of floating particles (default: 20). theme: ("dark" | "light" | "cyberpunk" | "ocean" | "sunset", optional) - Sets the overall color scheme of the background (default: dark). BackgroundLines is perfect for hero sections, landing pages, or any part of your application where you want to create a captivating and dynamic visual backdrop.
import { BackgroundLines } from "@/components/ui/modern-hero-component";
const DemoOne = () => {
return (
<BackgroundLines className="flex items-center justify-center w-full flex-col px-4 min-h-screen">
<h2 className="bg-clip-text text-transparent text-center bg-gradient-to-b from-neutral-900 to-neutral-700 dark:from-neutral-600 dark:to-white text-2xl md:text-4xl lg:text-7xl font-sans py-2 md:py-10 relative z-20 font-bold tracking-tight">
Sanjana Airlines, <br /> Sajana Textiles.
</h2>
<p className="max-w-xl mx-auto text-sm md:text-lg text-neutral-700 dark:text-neutral-400 text-center">
Get the best advices from our experts, including expert artists,
painters, marathon enthusiasts and RDX, totally free.
</p>
</BackgroundLines>
);
};
export { DemoOne };