Hero Grid

An interactive hero section with animated grid background.

Open in

Configuring your account...

Please wait while we prepare everything for you

Usage

import HeroGrid from '@/components/bynanaui/hero-grid'

<HeroGrid />

Props

PropTypeDefaultDescription
classNamestring''Additional CSS classes

Features

  • Interactive grid background with hover effects
  • Responsive design
  • Smooth animations
  • Built-in header navigation
  • Modern gradient text effects

Customization

The component uses predefined colors for the grid animation:

const COLORS = [
  "oklch(0.72 0.2 352.53)", // blue
  "#A764FF", // purple
  "#4B94FD", // light blue
  "#FD4B4E", // red
  "#FF8743", // orange
];

You can modify these colors by editing the COLORS array in the component.