Glow Hero Section

Physics-driven hero section with an interactive aqueous mesh canvas, spring-based motion text entrance, and fully configurable badge, heading, description, colors, and dimensions.

npx uniqueui add glow-hero-section

Preview

Decentralized · Environmental · Protocol

The Gaia Protocol

A decentralized framework for global environmental synthesis, powered by a living, self-organizing data network.

Usage

import GlowHeroSection from "@/components/ui/glow-hero-section";

export default function Example() {
  return (
    <GlowHeroSection
      height="h-[520px]"
      badge="Decentralized · Environmental · Protocol"
      heading="The Gaia Protocol"
      description="A decentralized framework for global environmental synthesis, powered by a living, self-organizing data network."
      backgroundColor="#f0f4f0"
      meshColorStart="rgba(255, 122, 0, 0.45)"
      meshColorEnd="rgba(50, 205, 50, 0.45)"
      meshOpacity={0.6}
      gridSize={30}
      mouseRadius={150}
    />
  );
}

Props

Prop	Type	Description
`className`	`string`	Extra CSS classes applied to the root container.
`height`	`string`	Tailwind height class for the component, e.g. "h-screen" or "h-[600px]".
`badge`	`string \| null`	Text shown in the badge above the heading. Pass null to hide the badge entirely.
`heading`	`string`	Main heading text.
`description`	`string`	Subheading / description paragraph beneath the heading.
`backgroundColor`	`string`	CSS background color of the container behind the mesh canvas.
`meshColorStart`	`string`	Start color of the linear gradient applied to mesh lines.
`meshColorEnd`	`string`	End color of the linear gradient applied to mesh lines.
`meshOpacity`	`number`	Overall opacity of the mesh canvas layer (0–1).
`gridSize`	`number`	Pixel size of each mesh grid cell. Smaller = denser mesh.
`mouseRadius`	`number`	Radius in pixels within which mouse movement repels mesh grid points.