Loading…
Live component · try it
Freetext · scroll · light
Highlight Marker Text
Key phrases in a paragraph get a marker-pen highlight that draws itself from left to right as the phrase scrolls into view, with a slightly uneven edge and a touch of overshoot past the last letter. Each highlight uses a different ink.
The mechanic
`mark` has `background: linear-gradient(ink, ink) no-repeat 0 0 / 0% 100%`, a small rotation (−1°) for the hand feel, `padding: 0 0.15em` so the ink overshoots the glyphs and `box-decoration-break: clone`. `.in` transitions `background-size` to `100% 100%` over 0.6 s `cubic-bezier(.2,.8,.2,1)`. An `IntersectionObserver` adds `.in` once per mark.
How to use it
From prompt to a block in your page.
- 01Try the component
The preview is the shipped element inside a neutral demo page. Hover, click, focus: the one interaction it is about is live.
- 02Pick a palette
Token sets re-tint it live. The prompt carries the one you chose.
- 03Pick your stack
A paste-in snippet, or a component for Next.js, React, Vue, Astro, WordPress, Shopify or Webflow.
- 04Copy the prompt
It quotes the markup, styles and script verbatim with the tokens and the rules that keep it self-contained.
- 05Mount it in your layout
It inherits your page's font and width; the tokens live on :root; several instances share one script.
