A geometric hero section inspired by premium editorial designs, featuring a custom WebGL shader background with Simplex noise for fluid, organic movement and advanced typography.
| Prop | Type | Default |
|---|---|---|
title1First line of the main headline (serif font). | string | — |
title2Second line of the main headline (sans-serif, bold). | string | — |
descriptionSubtitle text displayed below the headline. | string | — |
color1Primary color for the gradient shader. | string | "#3B82F6" |
color2Secondary color for the gradient shader. | string | "#F0F9FF" |
speedAnimation speed multiplier for the shader noise. | number | 1 |
classNameAdditional CSS classes for the container. | string | — |
Click on the icon in the top right of the example preview to view the source code for specific variants.
This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.
Scale your product with clarity, precision, and motion-led design.
import { HeroGeometric } from "@/components/ui/hero-geometric"
<HeroGeometric
title1="Elevate"
title2="Your Brand"
/>