HeroHighlight

A hero section wrapper with a subtle dot-grid background, paired with a Highlight span that animates a colored underline behind text when it scrolls into view.

import { HeroHighlight, Highlight } from "@animui/ui"

Basic

Wrap a heading with HeroHighlight to get the dot-grid backdrop, then use Highlight around the word to animate.

Build beautiful interfaces

HeroHighlight Props

PropTypeDefaultDescription
childrenReactNodeContent rendered inside the hero background.
classNamestringAdditional classes.

Highlight Props

PropTypeDefaultDescription
childrenReactNodeText to highlight.
classNamestringAdditional classes for the highlight span.
© 2026 Steal Shadow. MIT License.Report an issue