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
## What you get
- One .tsx component, drag and drop into any Framer project
- Works with your project fonts and colors out of the box
- No external dependencies beyond framer and framer-motion
BuiltByKern
