Mark. Draw a line under the word that matters.
Six ways to call attention without shouting. Solid blocks for matches and search hits, underlines that draw themselves in, brush strokes for editorial moments, and clip-path reveals timed to enter the viewport.
Solid highlight
A flat tinted background — the classic search-match feel.
Aurora is the timeline; surfaces are the canvas; behaviours are the event wiring between them. Each piece is its own concern, and the framework only insists that they share a token vocabulary.
Animated underline
Stroke draws in from the start of the inline-axis.
The point of a token isn’t the value — it’s the contract. Once a shape has a name, every consumer can read it, every theme can override it, and every change is observable.
Squiggle underline
SVG path tiled along the baseline. Editorial, not error-marker.
The grid was never the point; the rhythm was. Spacing tokens give you the beats, and the layout follows.
Marker / brush
Gradient with a slight skew. Reads as a swipe of paint rather than a fill.
Some words deserve a brush stroke. Others deserve a cool sweep. And a few deserve a hot magenta just to make sure you noticed.
Color tokens
Clip-path reveal
Width opens from 0 to 100% — like running a highlighter left-to-right.
Watch the highlight draw itself across the page.
Reveal on scroll-in
Same reveal, gated by IntersectionObserver. Scrolls into view, then plays.
The line waited until you got here, then drew itself in. Subtle on a long page, decisive in a short one.
Usage
- Always use the native
<mark>element — the framework adds presentation, not semantics. - Pick exactly one variant class per match:
.mk-solid,.mk-underline,.mk-squiggle,.mk-brush,.mk-reveal,.mk-io. - Tone variants — add
.t-2or.t-3for cool / hot accents. - Reduce-motion users see the final state with no animation.