Marker Highlight

Animated canvas-based text highlighting using MarkerHighlight.js. Wraps text in <mark> tags and renders animated highlight effects (marker pen, hand-drawn circle, burst rays, scribble, sketchout) on a canvas overlay without modifying the text DOM.

The library runs its own requestAnimationFrame animation loop — it is not GSAP-driven. Use GSAP tl.call() to trigger highlights at specific points in the timeline.

Required Script

The library is an ES module. For HyperFrames, create a global-script version by downloading the minified file and replacing the export line:

curl -sL "https://cdn.jsdelivr.net/gh/Robincodes-Sandbox/marker-highlight@main/dist/marker-highlight.min.js" \
  | sed 's/export{[^}]*};$/window.MarkerHighlighter=W;/' > marker-highlight.global.js

The sed command replaces the ES module export with a global assignment. The variable name W is the minifier's alias for MarkerHighlighter — if the library is rebuilt and the minifier picks a different name, check the last line of the minified file for the correct alias.

Then load it as a regular script: