# Text Highlight Marker — React Text Animation

> Hand-drawn marker strokes (highlight, underline or circle) draw themselves behind words when they scroll into view.

- Category: [Text Effects](https://pixelpapa.com/components/text.md)
- Tags: text, highlight, marker, underline, draw
- Dependencies: motion (plus React and Tailwind CSS v4)
- Last updated: 2026-11-13
- Live preview: https://pixelpapa.com/components/text/text-highlight-marker

## Install (PixelPapa Pro)

This is a Pro component. With a Pro or Scale plan and the `@pixelpapa` registry set up (https://pixelpapa.com/docs/installation#pro):

```bash
npx shadcn@latest add @pixelpapa/text-highlight-marker
```

The file is written to `components/pixelpapa/text-highlight-marker.tsx`. Source code is available to Pro members on https://pixelpapa.com/components/text/text-highlight-marker.

## AI prompt

```text
Add the "Text Highlight Marker" component from PixelPapa UI to this project.

What it is: Hand-drawn marker strokes (highlight, underline or circle) draw themselves behind words when they scroll into view.
Category: Text Effects. Depends on: motion.

1. Install it with the shadcn CLI. It is a PixelPapa Pro component, so components.json needs the "@pixelpapa" registry with my API key (https://pixelpapa.com/docs/installation#pro):
   npx shadcn@latest add @pixelpapa/text-highlight-marker
   (If the CLI is unavailable, fetch https://pixelpapa.com/r/text-highlight-marker.json with the header "Authorization: Bearer $PIXELPAPA_API_KEY", write files[0].content to components/pixelpapa/text-highlight-marker.tsx and install the listed dependencies.)
2. Import it from "@/components/pixelpapa/text-highlight-marker" and place it where I describe below.
3. Keep its animation timings and accessibility attributes. Replace the demo copy and data with content that fits my product, and use my existing theme tokens (bg-background, text-foreground, bg-primary, border-border) rather than hard-coded colours.

Where to use it: <describe the page and position here>
```

## More text effects

- [Blur Reveal Text](https://pixelpapa.com/components/text/blur-reveal-text.md): Words rise out of a blur one after another when the text scrolls into view.
- [Text Circular Rotating](https://pixelpapa.com/components/text/text-circular-rotating.md) (Pro): Text set on a circle that spins continuously and eases down to a crawl on hover, with a slot in the middle for an icon or button.
- [Text Counting Number](https://pixelpapa.com/components/text/text-counting-number.md) (Pro): A spring-driven count-up with locale formatting, prefix, suffix and decimals; writes straight to the DOM so it never re-renders.
- [Text Glitch Slice](https://pixelpapa.com/components/text/text-glitch-slice.md) (Pro): The word is cut into horizontal strips that jolt sideways in short bursts, with two colour ghosts splitting off underneath.
- [Text Gradient Flow](https://pixelpapa.com/components/text/text-gradient-flow.md): A seamless multi-stop gradient that travels through the letters on a loop, with an optional blurred glow of the same gradient behind.
- [Text Letters Pull Up](https://pixelpapa.com/components/text/text-letters-pull-up.md) (Pro): Each letter springs up from behind a mask with a slight tilt, staggered across the line when it enters the viewport.