# Text highlight animations in CSS

> Highlight and callout animations in CSS for video: underline draw, marker bar, brackets and spotlight dim that point at one word.

Canonical: https://vawe.dev/video-components/group/point-the-eye
Last updated: 2026-11-03

7 small components answer one question: where should the viewer look now? Each one marks a word or a part of the interface without moving the rest of the frame.

Most of the clips run between 1 and 1.5 seconds, because a pointer that lingers becomes decoration. Use them on a line that is already on screen and already readable.

7 components, 7 with a clip.

## Pick by how loud the pointer should be

| Component | Use it when |
| --- | --- |
| [Underline draw](https://vawe.dev/video-components/underline-draw) | A line draws under the key word, fast in and slow out. |
| [Marker highlight](https://vawe.dev/video-components/marker-highlight) | A highlighter bar wipes behind a phrase and the text flips dark. |
| [Word colour sweep](https://vawe.dev/video-components/word-sweep) | The accent should run through the line in reading order and stop on the target. |
| [Weight morph](https://vawe.dev/video-components/weight-morph) | One word should get heavier, on a real variable-font axis. |
| [Bracket callout](https://vawe.dev/video-components/bracket-callout) | A word or a UI part needs corner brackets that snap on. |
| [Spotlight dim](https://vawe.dev/video-components/spotlight-dim) | The whole frame should dim around one target. |
| [Hand drawn notes](https://vawe.dev/video-components/hand-drawn-notes) | A person’s margin notes: a loose circle, an arrow and an underline. |

## All 7 components in point the eye

- [Word colour sweep](https://vawe.dev/video-components/word-sweep): the accent runs word by word in reading order and stays on the target word
- [Weight morph](https://vawe.dev/video-components/weight-morph): one word gets heavier on a real variable-font axis; the glyphs reshape, nothing is scaled
- [Marker highlight](https://vawe.dev/video-components/marker-highlight): a highlighter bar wipes behind one phrase and the text flips dark for contrast
- [Underline draw](https://vawe.dev/video-components/underline-draw): a line draws under the key word, left to right, fast in and slow out
- [Bracket callout](https://vawe.dev/video-components/bracket-callout): corner brackets fly in and snap onto a word or a UI part with a small overshoot
- [Spotlight dim](https://vawe.dev/video-components/spotlight-dim): the frame dims around one target: a hole closes from the full frame onto it and its shadow is the dim
- [Hand drawn notes](https://vawe.dev/video-components/hand-drawn-notes): a person’s margin notes: a loose circle round one word, an arrow from a written label and an underline, drawn on with stroke-dashoffset and a seeded wobble

## Rules that come with this group

- Every pointer needs a target. A highlight with nothing to point at is decoration.
- weight-morph reshapes the glyphs on a variable-font axis. Nothing is scaled.
- hand-drawn-notes uses a seeded wobble, so the same render draws the same loose circle.

## More video components

- [Reveal a title](https://vawe.dev/video-components/group/reveal-a-title)
- [Change between shots](https://vawe.dev/video-components/group/change-between-shots)
- [Move the camera](https://vawe.dev/video-components/group/move-the-camera)
- [End a film](https://vawe.dev/video-components/group/end-a-film)
- [Product moments](https://vawe.dev/video-components/group/product-moments)
- [Grounds](https://vawe.dev/video-components/group/grounds)

## Related

- [The motion guide](https://vawe.dev/docs/motion)
- [Variable fonts and text in a film](https://vawe.dev/docs/text-and-fonts)
- [Text reveal animations](https://vawe.dev/video-components/group/reveal-a-title)
- [All 130 video components](https://vawe.dev/video-components)