Hero Highlight
Text with animated gradient highlight that sweeps across specific words.
Preview
Hero Highlight
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Hero headlines to emphasize key phrases.
Why this component matters
The sweeping highlight creates a natural reading emphasis, guiding the eye to the most important words.
Usage guidance
Apply to 2-4 words within a headline. Use IO purple gradient. The sweep should trigger once on viewport entry. Keep the highlight on the value proposition.
Installation
bash
npx shadcn@latest add @aceternity/hero-highlightUsage
example.tsxtsx
import { HeroHighlight } from "@/components/ui/hero-highlight";
export default function Example() {
return (
<HeroHighlight>
{/* Your content here */}
</HeroHighlight>
);
}Source
hero-highlight.tsx
components/ui/hero-highlight.tsx