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 "P
import HeroGeometric from "@/components/ui/modern-hero-section";
const settings = { rotate: 0, width: 1, height: 1, opacity: 1 };
export default function Demo(props: Partial<typeof settings>) {
const s = { ...settings, ...props };
return (
<div className="h-screen w-screen">
<HeroGeometric {...s} />
</div>
);
}