MarkerHighlight

A text component that draws marker-style highlights over specific words in a headline. SVG path generation with seeded noise produces consistent hand-drawn imperfections. Spring physics drive the stroke animation. Cursor proximity tilts the marker toward the pointer.

## What it does

- Detects target words inside a headline and animates a marker over them

- Three shape modes per word: highlight block, underline, strike-through

- Draws on mount, on scroll into view, or on hover

- Cursor tilt reacts to mouse position within an adjustable radius

## Controls

- Text and highlights array (up to 10 words, each with shape and color)

- Stroke width, roughness, opacity, rotation, overflow, seed

- Vertical offset and marker height for fine positioning

- Typography group — 3 breakpoint font sizes, weight, line height, letter spacing, alignment

- Animation group — trigger mode, duration, delay, stagger, repeat on scroll

- Cursor group — tilt on/off, max angle, influence radius

- Layout group — text color, background, padding, max width

## How it is built

- Pure SVG path generation with seeded noise for deterministic imperfections

- Framer Motion spring physics for draw animation

- Mix-blend-mode multiply for ink-on-paper feel

- Cursor-reactive tilt via useMotionValue and useSpring

- Zero external dependencies beyond framer and framer-motion

## Accessibility

- Respects prefers-reduced-motion (animations skip when set)

- Full keyboard navigation with focus-visible underline

- ARIA live region announces dynamic text changes

- Shape and color described to screen readers

- Touch devices disable hover-dependent effects

## Responsive

- Three breakpoints: 390px mobile, 810px tablet, 1200px desktop

- Fluid font size via clamp()

- Fluid stroke width: 40% of desktop on mobile, 70% on tablet

- Tested across all viewports with no horizontal scroll