Animated wave divider
The bottom of a coloured section cut by three translucent waves rolling at different speeds.
- Tailwind
- React
- CSS
- WordPress
Description
Three stacked waves, each more opaque than the last, glide continuously beneath the section and melt into the colour of the next one: a soft transition between two blocks, ideal for a seaside, leisure or wellness site. The waves are a light, seamlessly looping SVG stretched full width and hidden from screen readers. AA colours and contrast in light and dark mode. With prefers-reduced-motion the waves stay drawn but still.
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