HighlightText NEW

A zero-JS, CSS-only component for animating background highlights and underlines behind text.

Preview/Playground

Created by

Barsan

 Load highlight 
Make your text stand out   
 Hover highlight 
Make your text stand out   
 Underline 
Make your text stand out   

Astro

---
import HighlightText from "@astroanimate/core/HighlightText";
---

<p>
  Make your text <HighlightText trigger="load">stand out</HighlightText> easily.
</p>

<HighlightText trigger="hover">Hover highlight</HighlightText>
<HighlightText variant="underline">Underline highlight</HighlightText>

Installation

bash

npm install @astroanimate/core

Usage

---
import HighlightText from "@astroanimate/core/HighlightText";
---

<h1>
  Make your text <HighlightText color="#a5b4fc" trigger="hover">stand out</HighlightText> easily.
</h1>

Renders inline text that smoothly draws a colored background or underline behind it.

Props

Prop	Type	Default	Description
`variant`	`"underline" \| "background"`	`"background"`	Visual style of the highlight
`color`	`string`	`"#FFD700"`	Highlight or underline color
`trigger`	`"load" \| "hover"`	`"load"`	Event that triggers the animation
`duration`	`string`	`"600ms"`	CSS transition duration
`delay`	`string`	`"0ms"`	CSS transition delay
`thickness`	`string`	`"100%" / "2px"`	Thickness of the highlight mark
`fontSize`	`string`	`"inherit"`	Custom font size
`padding`	`string`	`"0.2em"`	Inner padding around the text
`className`	`string`	`""`	Additional CSS classes

Use When

Emphasizing specific keywords, phrases, or metrics inside headings and paragraphs
Building interactive, hoverable inline links with smooth underline reveals
Creating "marker pen" styled landing page typographies

Avoid When

Wrapping massive, multi-paragraph text blocks (keep highlights scoped to short phrases)
Using background colors that conflict heavily with the text color (ensure good contrast)

Accessibility

Fully respects prefers-reduced-motion: reduce by bypassing animations and rendering the highlight in its final visible state immediately

Performance

Zero Hydration: 100% CSS-driven with no JavaScript overhead
Multi-line Support: Uses box-decoration-break: clone to ensure the highlight renders correctly even if the text wraps across multiple lines

Credits

Credit to @Barsan