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.

UniqueUI CLI

npx uniqueui add glow-hero-section

shadcn CLI

npx shadcn@latest add https://uniqueui.com/r/glow-hero-section.json -y

shadcn path expects @/lib/utils (run shadcn init first). Same source file is installed to components/ui/.

Default

Variant 1 of 3

Decentralized · Environmental · Protocol

The Gaia Protocol

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

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}
    />
  );
}

Dark Theme

Variant 2 of 3

Next-Gen · Web · Components

UniqueUI

Premium animated React components, copy-paste ready.

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

export default function Example() {
  return (
    <GlowHeroSection
      backgroundColor="#0a0a0f"
      meshColorStart="rgba(139, 92, 246, 0.5)"
      meshColorEnd="rgba(6, 182, 212, 0.5)"
      badge="Next-Gen · Web · Components"
      heading="UniqueUI"
      description="Premium animated React components, copy-paste ready."
      gridSize={40}
      mouseRadius={200}
    />
  );
}

No Badge

Variant 3 of 3

Build Interfaces That Stand Out

Drop-in animated components powered by Motion.dev and Tailwind CSS.

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

export default function Example() {
  return (
    <GlowHeroSection
      badge={null}
      heading="Build Interfaces That Stand Out"
      description="Drop-in animated components powered by Motion.dev and Tailwind CSS."
    />
  );
}

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.