Billowing clouds you can push around like wind
| Name | Type | Default | Description |
|---|---|---|---|
colors | [string, string] | ["#6D5BC0", "#3A2E7A"] | Two cloud colours: the lit edges, then the shaded, denser cores. |
backgroundColor | string | "#0a0a0a" | Sky colour behind the clouds. Pass "transparent" to float the clouds over the page. |
anchor | "bottom" | "top" | "bottom" | Edge the cloud bank rises from. Top hangs the clouds from above. |
height | number | 0.9 | How far the bank reaches into the frame, as a fraction of its height. |
coverage | number | 0.45 | How much of the bank is filled with cloud. |
density | number | 0.55 | Base thickness of the clouds. Lower values leave more sky between puffs. |
scale | number | 1 | Size of the puffs. Larger values give bigger, calmer clouds. |
towers | number | 1 | How much the skyline rises into towering clouds and dips between them. |
opacity | number | 0.7 | Opacity of the clouds over the sky. |
wind | number | 0 | Sideways drift. Negative values blow the clouds to the right. |
billow | number | 1 | How quickly the puffs churn and change shape. |
speed | number | 1 | Overall animation speed. 0 holds the current frame. |
resolution | number | 0.36 | Render scale relative to the element. The low default keeps the clouds soft and cheap to draw. |
interactive | boolean | true | Moving the pointer through the clouds drags them along like wind, and they settle back. |
cursorStrength | number | 1 | How far the pointer drags the clouds. 0 disables it. |
cursorRadius | number | 0.16 | Size of the area the pointer disturbs, relative to the height. |
seed | number | 0 | Changes the cloud formation and skyline. |
paused | boolean | false | Freezes the drifting clouds. |
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 sky. |
colors[string, string]Two cloud colours: the lit edges, then the shaded, denser cores.
["#6D5BC0", "#3A2E7A"]backgroundColorstringSky colour behind the clouds. Pass "transparent" to float the clouds over the page.
"#0a0a0a"anchor"bottom" | "top"Edge the cloud bank rises from. Top hangs the clouds from above.
"bottom"heightnumberHow far the bank reaches into the frame, as a fraction of its height.
0.9coveragenumberHow much of the bank is filled with cloud.
0.45densitynumberBase thickness of the clouds. Lower values leave more sky between puffs.
0.55scalenumberSize of the puffs. Larger values give bigger, calmer clouds.
1towersnumberHow much the skyline rises into towering clouds and dips between them.
1opacitynumberOpacity of the clouds over the sky.
0.7windnumberSideways drift. Negative values blow the clouds to the right.
0billownumberHow quickly the puffs churn and change shape.
1speednumberOverall animation speed. 0 holds the current frame.
1resolutionnumberRender scale relative to the element. The low default keeps the clouds soft and cheap to draw.
0.36interactivebooleanMoving the pointer through the clouds drags them along like wind, and they settle back.
truecursorStrengthnumberHow far the pointer drags the clouds. 0 disables it.
1cursorRadiusnumberSize of the area the pointer disturbs, relative to the height.
0.16seednumberChanges the cloud formation and skyline.
0pausedbooleanFreezes the drifting clouds.
falseclassNamestringClasses for the root element. Give it a height.
—styleCSSPropertiesInline styles for the root element.
—childrenReactNodeContent layered above the sky.
—