Scenery
Clouds
A procedural cloud band that drifts on its own. Not the mascot — scenery is the room it stands in. Every control beside it is a parameter, and the same names work on the element, the components and the endpoint.
Colour
Cloud colour
What the band is made of — and, in fill mode, what the whole frame becomes. Written straight into the OKLCH channels below.
Frame
Frame width402
Frame height872
Cloud cover0.32
Form
Overall scale0.57
Depth3
Layer gap0.08
Puff size1.35
Softness0.75
Haze1.17
Seed3736
Rocket0.00
Flying things0.00
Motion
Launch0.000
Drift49
Colour
Lightness0.985
Chroma0.014
Hue236
Outline-0.090
Outline width0.0
Inner shadow-0.038
Inner shadow size7
Accent0.020
Accent width0.0
Sky lightness0.930
Sky chroma0.060
Sky hue236
Sky opacity0.00
Use it
<script type="module">
import '@kluuu/mascot/define'
</script>
<kluuu-clouds
seed="3736"
></kluuu-clouds> The endpoint animates on its own with no JavaScript, and stops under prefers-reduced-motion. Add &t=4200 for a single still frame.
seed is pinned above so this reproduces the sky on screen. Drop it — or set it to 0 — and every load draws a new one instead.