# Modern Hero Component

> 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.

- Author: [Sonu](https://21st.dev/@uniquesonu)
- License: unknown
- npm dependencies: motion
- Live preview: https://21st.dev/@uniquesonu/components/modern-hero-component

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/uniquesonu/modern-hero-component?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt