DocsHero Geometric

Hero Geometric

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.

Installation

pnpm dlx shadcn@latest add @componentry/hero-geometric

Dependencies: framer-motion @react-three/fiber @react-three/drei three

Usage

import { HeroGeometric } from "@/components/ui/hero-geometric"

<HeroGeometric 
    title1="Elevate" 
    title2="Your Brand" 
/>

API Reference

PropTypeDefault
title1string

First line of the main headline (serif font).

—
title2string

Second line of the main headline (sans-serif, bold).

—
descriptionstring

Subtitle text displayed below the headline.

—
color1string

Primary color for the gradient shader.

"#3B82F6"
color2string

Secondary color for the gradient shader.

"#F0F9FF"
speednumber

Animation speed multiplier for the shader noise.

1
classNamestring

Additional CSS classes for the container.

—

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Need a custom component?

I build bespoke UI components & websites tailored to your brand.

DM me on X
PreviousGrain GradientNextLiquid Chrome

Elevate

Your Brand

Scale your product with clarity, precision, and motion-led design.