Components
Loading preview...
HeroGeometric: Elevate Your Digital Vision with Dynamic Shapes The HeroGeometric component creates a striking and modern hero section, combining a sophisticated dark aesthetic with dynamic, animated geometric shapes. It's designed to make a powerful first impression, ideal for showcasing a brand's innovative spirit and digital prowess. What It Is This React component features a full-screen, dark background infused with subtle radial gradients. The main visual appeal comes from several elegantly animated, ethereal shapes that float and rotate behind a central, gradient-filled title. The title itself is designed for impact, with a portion using a unique "Pacifico" font for a touch of distinctiveness. A prominent badge and a descriptive paragraph complete this visually rich and engaging hero section. Key Features Dynamic Geometric Background: Animated Shapes: The ElegantShape sub-component generates multiple "pill-shaped" elements. These shapes are animated with framer-motion to fade in, slide, and rotate into position, then continuously float subtly up and down. Glassmorphism Effect: Each shape features a backdrop-blur effect, a subtle gradient, and a soft border, creating a sophisticated glass-like appearance. Layered Visuals: The shapes are strategically positioned with varying delays and rotations, creating a layered, dynamic, and non-repeating background that adds depth without distraction. Subtle Gradients: The overall background incorporates faint, diffused gradients that add to the high-tech, abstract atmosphere. Animated Hero Title: Staged Entrance: The badge, the first line of the title (title1), the second line (title2), and the descriptive paragraph all animate in sequence from the bottom, creating a smooth and impactful reveal. Gradient Text: The title uses bg-clip-text with gradients, making the text visually pop. title2 specifically uses the elegant "Pacifico" font, adding a unique, branded feel. Customizable Content: Easily change the badge text, and both lines of the title via props. Dark & Modern Aesthetic: The component uses a deep bg-[#030303] for a premium, high-contrast dark mode experience. Subtle shadows and border effects on the shapes enhance the overall modern design. Responsive Design: The layout and text sizes are optimized for various screen dimensions, ensuring a consistent and impressive look on both desktop and mobile devices. Framer Motion Integration: Extensive use of framer-motion for all entrance and background animations, providing smooth, hardware-accelerated transitions. Why It's Cool for Developers This component is an excellent demonstration of: Advanced UI Animation with Framer Motion: Showcases complex choreographed animations, including initial reveals, continuous background motion, and custom easing functions. Creative Use of CSS & SVG-like Effects: Illustrates how to create dynamic, pseudo-SVG shapes using CSS properties like border-radius, gradients, backdrop-blur, and box-shadow in a performant way. Component Composition: Breaking down complex visual elements into reusable sub-components (ElegantShape) for better organization and maintainability. Font Integration in Next.js: Demonstrates how to use next/font/google for optimized custom typography. Theming through Gradients: Clever use of translucent gradients and background blurs to create visual interest in a dark theme.