React animation example
React Wave Animation: Layered Animated Background
Waves make a calm, branded background for a hero or footer. This one layers four waves with different lengths and speeds so the pattern never visibly repeats, and the cursor acts like a stone in water: the waves rise near it and settle after it leaves.
- 4.1 KB file
- 6 live inputs
- React runtime
How this layered wave background works
- Each layer is a sum of two sine waves; layers differ in wavelength, speed, height and opacity.
- Near the pointer, amplitude is boosted by a Gaussian falloff, which reads as a swell instead of a spike.
- Wave height and speed are inputs, so the same file works behind a quiet footer or a loud hero.
Add it to your React app
Install exodeui, download the file below, and paste this. The code updates as you customize. Other runtimes are in the other tabs.
import { ExodeUICanvas } from 'exodeui';
// react-wave-background.bexode goes in /public (download it below)
export function ReactWaveBackground() {
return (
<ExodeUICanvas
src="/react-wave-background.bexode"
fit="Layout"
autoPlay
interactive
style={{ width: '100%', height: 480 }}
/>
);
}Inputs
| Input | Type | Default | Range |
|---|---|---|---|
height | Number | 1 | 0.2 – 2.5 |
speed | Number | 1 | 0.1 – 3 |
headline | Text | Make some waves | — |
accent | Text | #06b6d4 | hex colour |
accent2 | Text | #6366f1 | hex colour |
bg | Text | #040814 | hex colour |
More React animations
Orbit LoaderThree orbiting dots with motion trails and a live percentage; works as an endless spinner or a determinate loader.Depth Parallax SceneFive depth layers of mountains and sky that shift with the cursor at different speeds.Scramble TextA headline that decodes from random glyphs letter by letter; click to scramble to the next phrase.Shared Element TransitionA card grid where the tapped card springs into a full detail page and back: a shared element transition.Liquid Fill ButtonA button that fills with a liquid wave on hover and morphs into a checkmark on click.Like Heart IconA heart icon that squashes, pops and bursts into particles when liked, with a live counter.
The same idea in other frameworks: Flutter liquid wave header · SwiftUI mesh gradient background