Handle Highlight

Written for the variant you picked above: Circles

Build an inline highlight that marks words like a selected layer in a design tool: "Ship the layout you [actually designed.]" in a semibold Inter headline, the marked phrase wrapping onto its own line on narrow screens. Geometry: the marked words stay real inline text. Their line rectangles come from Range.getClientRects(), merged per line and measured relative to a zero-size anchor at the wrapper's origin (so it works however the browser places absolutely positioned children of a wrapped inline); re-measured on the block's resize, window resize and fonts.ready. Each line box is padded .1em horizontally and .02em vertically, and the wrapper has .14em of inline margin so a frame never touches the neighbouring words. Behind the text (z-index −1 in a z-index 0 wrapper) a tint fills each box: the accent mixed 13% into transparent. In front, a 1.25px hairline frame outlines each box. Handles: a single-line selection gets eight — four corners and four edge midpoints. A phrase that wraps stays one selection: the first line carries the start (left corners, left and top midpoints), the last line the end (right corners, right and bottom midpoints). Each handle is 10% of the font size (5–10px), white with a 1.4px accent outline, and knows which way is outward. Motion: the first time the phrase is half in view, the tint fades in (360ms), the frame traces around its perimeter (stroke-dasharray with pathLength 1, 640ms), then the handles scale in from 0 with a springy overshoot (420ms, cubic-bezier(.3,1.6,.5,1)), 45ms apart; a delay prop staggers several highlights. There is no hover effect. Reduced motion shows the finished selection. Selected variant — Circles (circles): Handles are round dots (white fill, accent outline) on a near-black page (#0e0f13, text #f1f2f5); accent pink #ff5fa2. 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; the selection draws itself once when the words scroll into view. Motion: Tint 360ms; frame traced in 640ms; handles spring in 420ms, 45ms apart. Accessibility: Frames and handles are aria-hidden SVG; the words remain ordinary selectable text with their colour unchanged. Responsive behavior: Measured from the text, so it follows the words through wrapping and resizing; handles scale with the font size within 5–10px. 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; the selection draws itself once when the words scroll into view.

Motion

Tint 360ms; frame traced in 640ms; handles spring in 420ms, 45ms apart.

Accessibility

Frames and handles are aria-hidden SVG; the words remain ordinary selectable text with their colour unchanged.

Responsive

Measured from the text, so it follows the words through wrapping and resizing; handles scale with the font size within 5–10px.