Typewriter heading
A heading that types itself letter by letter behind a blinking caret, in pure CSS.
- Tailwind
- React
- CSS
- WordPress
Description
The tagline appears character by character, as if typed on a keyboard, then the caret keeps blinking at the end. Pure CSS: a cover slides one letter per step over a monospace font, with no script and no text splitting. The heading stays a real, whole text for screen readers and search engines from the start. With prefers-reduced-motion the sentence shows in full at once, without a caret.
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