Highlight Sweep

Create a highlight sweep on key words. Inside a sentence, the emphasized phrase gets a marker-style highlight that draws itself from left to right, like a human swiping a highlighter. Implementation: wrap the phrase in a relatively positioned span with white-space: nowrap. Behind the text (z-index: -1), place an absolutely positioned highlight bar: full phrase width plus 3px overhang on both sides, height about 0.55em, anchored to the bottom of the text, background in the accent color at ~35% opacity, border-radius 3px. Animate it from transform: scaleX(0) to scaleX(1) with transform-origin: left center, 600ms with cubic-bezier(0.22, 1, 0.36, 1). Trigger when the sentence enters the viewport (IntersectionObserver), once, with a small delay (~300-500ms) so the reader's eye arrives first. If prefers-reduced-motion is enabled, show the highlight fully drawn from the start. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.