Outline to Fill

Build an outline-to-fill display word. Structure: one big display word (very heavy weight, tight letter-spacing) rendered twice, stacked exactly: - base layer: transparent fill with a 1.5px ink text stroke (-webkit-text-stroke) - the hollow state - fill layer: absolutely positioned on top, solid accent color, clipped with clip-path inset(0 100% 0 0) so it starts invisible The fill: on hover (or scroll into view), animate the fill layer's clip-path to inset(0 0% 0 0) over 0.5s with a decisive ease - the color floods the letterforms left to right, staying perfectly inside them because both layers are the same text. Reverse on leave. Both visual layers are aria-hidden; include a visually-hidden real copy of the word for screen readers (or put the accessible name on the wrapper). A small monospace caption underneath ("hover to fill") can flip to accent when filled - nice for demos, drop it in production. Under prefers-reduced-motion the fill snaps instantly. Colors as tokens: ink stroke, one accent fill, paper background. Works best on single short words (BOLD, WORK, SALE) at 48px and up - the stroke needs room to read. 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.