Highlighter-marked words
A heading whose key words get highlighted one after the other, as if by a stroke of a highlighter pen.
- Tailwind
- React
- CSS
- WordPress
Description
When the page opens, a yellow highlighter stroke draws from left to right under two groups of words in the heading, one after the other, then stays in place to underline your promise. The highlight follows the text across lines and adapts to every screen width. Only a gradient's position is animated, with no image or script; text keeps AA contrast on the highlight in light and dark mode. With prefers-reduced-motion the words are highlighted from the start.
Code
Loading the code…
In the same spirit
A large heading in hollow letters where each word fills with colour from left to right, one after another.
- Tailwind
- React
- CSS
- WordPress
A product card crossed at the corner by a discount ribbon over which a glint of light sweeps.
- Tailwind
- React
- CSS
- WordPress
An integrations pitch where seven icons slowly circle a logo on two orbits.
- Tailwind
- React
- CSS
- WordPress
An offer card topped with a deck of colour swatches that fans out on hover or keyboard focus.
- Tailwind
- React
- CSS
- WordPress