An ocean of particles rolling in waves
| Name | Type | Default | Description |
|---|---|---|---|
colors | [string, string] | ["#6E6E80", "#FFFFFF"] | Two particle colours: the body of the water, then the lit crests and foam. |
backgroundColor | string | "#0a0a0a" | Colour behind the ocean. Light backgrounds switch to ink particles. Pass "transparent" to show the page. |
density | number | 1 | Number of particles, from 0.3 to 2. 1 draws about 340,000; lower it for weaker devices. |
particleSize | number | 1 | Size of each particle. |
waveHeight | number | 1 | Height of the swells. |
choppiness | number | 0.8 | How sharply the crests peak. Higher values bunch particles into bright foam lines. |
wavelength | number | 1 | Size of the waves. Larger values give longer, rolling swells. |
windAngle | number | 0 | Direction the waves travel, in degrees. 0 rolls them towards the viewer. |
horizon | number | 0.1 | Height of the horizon, as a fraction from the top of the frame. |
fog | number | 1 | How quickly the ocean fades into the distance. |
glow | number | 0.35 | Soft halo around each particle. |
foam | number | 1 | Brightness of the foam where the crests fold. |
speed | number | 1 | Animation speed. 0 holds the current frame. |
interactive | boolean | true | A gentle swell lifts the water under the pointer and the view drifts towards it. |
parallax | number | 1 | How far the view drifts towards the pointer. 0 keeps it still. |
swell | number | 1 | Height of the swell under the pointer. 0 disables it. |
swellRadius | number | 0.9 | Width of the swell, in world units. |
clickRipples | boolean | true | Each click sends a ring rolling across the water. Rapid clicks stack. |
seed | number | 0 | Changes the wave pattern. |
paused | boolean | false | Freezes the ocean. |
dpr | number | 1.5 | Upper bound for the device pixel ratio. |
className | string | — | Classes for the root element. Give it a height. |
style | CSSProperties | — | Inline styles for the root element. |
children | ReactNode | — | Content layered above the ocean. |
colors[string, string]Two particle colours: the body of the water, then the lit crests and foam.
["#6E6E80", "#FFFFFF"]backgroundColorstringColour behind the ocean. Light backgrounds switch to ink particles. Pass "transparent" to show the page.
"#0a0a0a"densitynumberNumber of particles, from 0.3 to 2. 1 draws about 340,000; lower it for weaker devices.
1particleSizenumberSize of each particle.
1waveHeightnumberHeight of the swells.
1choppinessnumberHow sharply the crests peak. Higher values bunch particles into bright foam lines.
0.8wavelengthnumberSize of the waves. Larger values give longer, rolling swells.
1windAnglenumberDirection the waves travel, in degrees. 0 rolls them towards the viewer.
0horizonnumberHeight of the horizon, as a fraction from the top of the frame.
0.1fognumberHow quickly the ocean fades into the distance.
1glownumberSoft halo around each particle.
0.35foamnumberBrightness of the foam where the crests fold.
1speednumberAnimation speed. 0 holds the current frame.
1interactivebooleanA gentle swell lifts the water under the pointer and the view drifts towards it.
trueparallaxnumberHow far the view drifts towards the pointer. 0 keeps it still.
1swellnumberHeight of the swell under the pointer. 0 disables it.
1swellRadiusnumberWidth of the swell, in world units.
0.9clickRipplesbooleanEach click sends a ring rolling across the water. Rapid clicks stack.
trueseednumberChanges the wave pattern.
0pausedbooleanFreezes the ocean.
falsedprnumberUpper bound for the device pixel ratio.
1.5classNamestringClasses for the root element. Give it a height.
—styleCSSPropertiesInline styles for the root element.
—childrenReactNodeContent layered above the ocean.
—