Docs·Hero 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

Usage

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

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

API Reference

PropertyTypeDefault
title1

First line of the main headline (serif font).

string—
title2

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

string—
description

Subtitle text displayed below the headline.

string—
color1

Primary color for the gradient shader.

string"#3B82F6"
color2

Secondary color for the gradient shader.

string"#F0F9FF"
speed

Animation speed multiplier for the shader noise.

number1
className

Additional CSS classes for the container.

string—

View source

Click the icon in the preview panel to browse source for each variant.

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

Elevate

Your Brand

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