Ace Hero 01

A hero section with interactive dot pattern background and animated text highlighting. Perfect for dealer landing pages and attention-grabbing headers.

Installation

Usage

import { HeroHighlight, Highlight } from "@/components/ace-hero-01";

export default function Page() {
  return (
    <HeroHighlight>
      <h1 className="text-4xl font-bold">
        Welcome to <Highlight>Your Brand</Highlight>
      </h1>
    </HeroHighlight>
  );
}

Features

• Interactive Background - Dot pattern that responds to mouse movement
• Text Highlighting - Animated highlight effect for emphasis
• Responsive - Works on all screen sizes
• Customizable - Easily adjust colors and content

Props

HeroHighlight

Highlight

Dependencies

• motion (Framer Motion)

Lineage

Modifications

• oklch color conversion
• Vandoko design token integration
• bg-background instead of hardcoded colors