MarkerHighlight

Marker highlights

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. - 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 - 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 - 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 - 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 - 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

Marker highlights