Washi Tape

Written for the variant you picked above: Paper

Build a washi-tape highlight for a journal headline in Instrument Serif — "Notes from a [slow] / [summer] by the sea" — with a mint striped strip and a pink dotted strip. Strip: an inline-block wrapper (.12em inline margin) with the word, and an absolutely positioned strip — over the word on a light page, under it on a dark one, where light letters can't show through tape — across the lower two-thirds of the word that over-runs both ends (left −.24em, right −.28em, top .24em, bottom .04em), rotated a couple of degrees either way. The strip is an SVG sized in pixels from a ResizeObserver. Its path has straight long edges (the roll's cut) and two torn ends: a run of small uneven teeth, alternating in and out by up to 9% of the strip's height, generated from a seed so each strip keeps its tear. Surface: the tape colour at 82% opacity with a printed pattern on top (45° stripes 2.6px wide every 7px, 1.5px dots every 8px, or a 1px grid every 8px) in white at 55%, clipped to the strip; the whole strip runs through a fibre filter (fractal noise, base frequency .9 × .25, used as an alpha mask) so the paper looks thinner in places; the two cut edges carry a slightly stronger line of the tape colour. On a light page the strip uses mix-blend-mode: multiply, so the letters underneath darken through it like real tape; on a dark page it blends normally at lower opacity. A faint drop shadow suggests it isn't quite flat. Motion: when the word is 70% in view, the strip unrolls from the left (clip-path inset from 100% on the right to 0, 620ms) while settling from slightly raised and larger, with a deeper shadow, to flat (700ms); several strips follow each other with delays. Reduced motion shows them laid down. Selected variant — Paper (paper): Palette for this theme (Paper): --blend multiply; --layer 1; --lift rgb(60 40 20 / 0.16); --print rgb(255 255 255 / 0.55); --tape-alpha 0.82. Treat these as the root colour tokens, one value per role, and name them to suit your code. Select it with the theme option set to "paper". Keep every dimension, spacing value, state and motion from the brief unchanged, and keep text at 4.5:1 contrast or better on these surfaces. This selection takes precedence over references to other themes or options in the general brief. Implement this selected appearance; do not add a variant picker or alternative appearances unless requested. Implementation requirements: Use React and TypeScript. Keep the component self-contained, with uniquely scoped CSS and no animation libraries. Include required imports, styles and font setup in the result. Interaction: None; each strip is laid down once when its word scrolls into view. Motion: Unrolls in 620ms while settling flat over 700ms. Accessibility: The tape is aria-hidden SVG; the word underneath stays real, selectable text and keeps 4.5:1 contrast through the translucent tape. Responsive behavior: Sized in em and measured in pixels, so the strip follows the type at every width; each word stays on one line. Preserve keyboard access, visible focus and reduced-motion behavior. Keep fictional demo data and simulated service calls in a separate usage example; expose callbacks for real actions and recover from rejected requests. Keep usage-example links inside the demo: use local buttons or prevent navigation. Demonstration links must not navigate to Vitrine routes or open other pages; preserve real URL support in the reusable component itself. Verify the result at narrow and wide viewport sizes, with keyboard input and reduced motion enabled.

Notes

Interaction

None; each strip is laid down once when its word scrolls into view.

Motion

Unrolls in 620ms while settling flat over 700ms.

Accessibility

The tape is aria-hidden SVG; the word underneath stays real, selectable text and keeps 4.5:1 contrast through the translucent tape.

Responsive

Sized in em and measured in pixels, so the strip follows the type at every width; each word stays on one line.