BackgroundPaths: Dynamic SVG Paths & Animated Hero Section The BackgroundPaths component creates a stunning and subtly animated background using dynamically generated SVG paths. It perfectly complements an engaging, animated hero title and a stylish call-to-action button, making it an excellent choice for a modern header or landing section on any website.
What It Is This React component uses framer-motion to generate and animate a series of elegant, flowing SVG paths that gently shift and fade in the background. Overlaying this dynamic backdrop 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 SVG Background:
Dynamic Paths: The FloatingPaths sub-component creates 36 unique SVG <path> elements. Their shapes, stroke widths, and opacities are all dynamically generated, creating a sense of depth and variation. Continuous Motion: Each path animates infinitely with varying durations, resulting in a mesmerizing, non-repeating flow of lines across the background. Light/Dark Mode Support: The paths automatically adapt their color to match the surrounding text, seamlessly integrating with both light and dark themes. 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 uses a gradient fill that changes based on the theme, providing a modern and polished look. Customizable: Easily change the hero text by passing a different title prop. Stylish Call-to-Action Button:
A beautifully designed button, "Discover Excellence," is positioned below the title. It features subtle background gradients, a backdrop-blur effect for a frosted glass look, and a shadow 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 work flawlessly in both light and dark modes. Responsive Layout: The component is designed for responsiveness, 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 complex SVG paths for unique background effects. Sophisticated framer-motion Usage: It showcases advanced framer-motion features like pathLength, pathOffset, and spring transitions for precise control over animations. Layered UI Design: See how to combine background elements (SVG paths) with foreground content (text and a button) while maintaining proper z-index for visual hierarchy. Theming and Responsiveness: Implement design that gracefully adapts to different themes and screen sizes. Component Composition: It breaks down a complex UI into smaller, manageable sub-components (FloatingPaths).
import BackgroundPaths from "@/components/ui/modern-background-paths";
const DemoOne = () => {
return <BackgroundPaths />;
};
export { DemoOne };