Hilite Everything Demo

Animated Text Highlighting

This library adds animated effects to standard <mark> tags. Here's an example using a default wavy highlight style in Solarise Yellow, triggered automatically on page load.

Different styles can be defined, like this underline in Solarise Orange, which waits until you scroll it into view. It also handles text that wraps across multiple lines quite gracefully, adding a slight delay between each line for a nice cascade effect.

We can also create more energetic effects, like this 'burst' style using Solarise Purple. This mode draws multiple lines outwards from the text.

Individual highlights can easily override settings. This uses the yellow wave style but is set to be much faster and uses different wave parameters via specific `data-` attributes.

It's useful for highlighting code snippets too:

function greet() {
    console.log('Hello, Highlighter!');
}