---
title: "MarkerHighlight — Free Framer component · Best of Framer"
description: "Free Framer component · by BuiltByKern · Text. Screenshots, details, and remix links on Best of Framer."
canonical: "https://framer.elliotli.dev/component/markerhighlight"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/MarkerHighlight

# MarkerHighlight

Marker highlights

[View on Framer](https://framer.com/marketplace/components/markerhighlight/?via=elliot-li)

![MarkerHighlight preview image 1](https://framer.elliotli.dev/og/component/markerhighlight/acb280e54c64a186/1600x1200.jpg)

## Summary

Marker highlights

## Description

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

## Rank history [How rankings work →](/terms#rankings)

-   All · #2080

## Details

- **Author**: BuiltByKern
- **Published**: 2026-05-07
- **Updated**: 2026-09-11
- **Added**: 2026-04-20
- **Categories**: Text

## More like this

-   [Hover Stretch Text](/component/hover-stretch-text) — 584.studio · $3 — Responsive & fully customizable
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing
-   [Odometer Stats](/component/odometer-stats) — Pixlify · Free — Rolling number counters
-   [Clipped Words](/component/clipped-words) — Interface Studio · $5 — Words With a Little Chaos