Outlined heading that fills in
A large heading in hollow letters where each word fills with colour from left to right, one after another.
- Tailwind
- React
- CSS
- WordPress
Description
The heading's three words first appear as a plain outline, then colour fills them from left to right, one word after another, in just over three seconds, and the heading then stays solid. Ideal for a venue, a festival, a gym or an event poster. The heading remains real, selectable text read normally by screen readers, with no image or script, and a solid colour takes over in browsers without background-clip: text. AA contrast in light and dark mode. With prefers-reduced-motion the heading is solid from the start.
Code
Loading the code…
In the same spirit
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
“Live” badge
FreeA show card with a “Live” badge whose white dot sends out a continuously spreading ripple.
- Tailwind
- React
- CSS
- WordPress