Text highlight animations in CSS.
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.
Pick by how loud the pointer should be.
| Component | Use it when |
|---|---|
| Underline draw | A line draws under the key word, fast in and slow out. |
| Marker highlight | A highlighter bar wipes behind a phrase and the text flips dark. |
| Word colour sweep | The accent should run through the line in reading order and stop on the target. |
| Weight morph | One word should get heavier, on a real variable-font axis. |
| Bracket callout | A word or a UI part needs corner brackets that snap on. |
| Spotlight dim | The whole frame should dim around one target. |
| Hand drawn notes | A person’s margin notes: a loose circle, an arrow and an underline. |
All 7 components in point the eye
the accent runs word by word in reading order and stays on the target word
Word colour sweep
the accent runs word by word in reading order and stays on the target word
one word gets heavier on a real variable-font axis; the glyphs reshape, nothing is scaled
Weight morph
one word gets heavier on a real variable-font axis; the glyphs reshape, nothing is scaled
a highlighter bar wipes behind one phrase and the text flips dark for contrast
Marker highlight
a highlighter bar wipes behind one phrase and the text flips dark for contrast
a line draws under the key word, left to right, fast in and slow out
Underline draw
a line draws under the key word, left to right, fast in and slow out
corner brackets fly in and snap onto a word or a UI part with a small overshoot
Bracket callout
corner brackets fly in and snap onto a word or a UI part with a small overshoot
the frame dims around one target: a hole closes from the full frame onto it and its shadow is the dim
Spotlight dim
the frame dims around one target: a hole closes from the full frame onto it and its shadow is the dim
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
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.