Inverse Sweep

Written for the variant you picked above: Night

Build an inverting highlight for a bold three-line headline — "Write [less.] / Ship [more.] / Sleep [better.]" in Geist 700 — where a solid bar sweeps across each marked word in turn and the letters invert exactly under it. Construction: an inline-block, nowrap wrapper holds the text twice in identical boxes (padding .02em .14em .06em): a plain copy in the page's colour, and on top an absolutely positioned copy (inset 0, aria-hidden) on the bar colour in the reversed text colour. The top copy is clipped by a four-point polygon whose two vertical edges are slanted by .32em, like a squeegee: top-left at tail + slant, top-right at lead + slant, bottom-right at lead, bottom-left at tail. Because both copies share the same edges, the inversion follows the bar's edge exactly, letter by letter. Motion: lead and tail are registered custom properties (@property, <length-percentage>, initial −100%) so the clip animates smoothly; they are set on the wrapper and transitioned there. When the word is fully in view, lead runs to 100% (720ms, cubic-bezier(.7,0,.2,1)) after a per-word delay, so the three words sweep in reading order. Pointing at a word moves tail to 100% (480ms) — the bar slides off to the right and the plain word returns; moving away sweeps it back in from the right. Reduced motion shows the bars in place without transitions. Selected variant — Night (night): Palette for this theme (Night): --bar #f3efe6; --on-bar #121113. 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 "night". 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: Point at a word to slide its bar away; move off to sweep it back. Motion: Sweep in 720ms per word, in order; out and back 480ms. Accessibility: The reversed copy is aria-hidden, so the word is read once; both colour pairs keep 4.5:1 or better (cream bar with near-black text, near-black bar with cream text). Responsive behavior: Each marked word is an inline-block sized in em, so it scales with the headline; the slant is .32em at every size. Touch: Bars sweep in on view; tapping does not toggle them. 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

Point at a word to slide its bar away; move off to sweep it back.

Motion

Sweep in 720ms per word, in order; out and back 480ms.

Accessibility

The reversed copy is aria-hidden, so the word is read once; both colour pairs keep 4.5:1 or better (cream bar with near-black text, near-black bar with cream text).

Responsive

Each marked word is an inline-block sized in em, so it scales with the headline; the slant is .32em at every size.

On touch

Bars sweep in on view; tapping does not toggle them.