Rising bubbles background
An announcement set on small bubbles that gently rise from the bottom of the section, swaying, then fade away.
- Tailwind
- React
- CSS
- WordPress
Description
Eight bubbles of different sizes, each with its own highlight, rise at their own pace behind the text with a slight sway, appearing at the bottom and fading before they reach the top: a fresh backdrop for a drink, a spa, a pool or an aquarium. Only the bubbles' position and opacity are animated, with no image or script, and the decoration is hidden from screen readers. AA contrast in light and dark mode. With prefers-reduced-motion the bubbles stay still, spread over the whole height.
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