docs / atmospheres / kuulto

Kuulto

a sheet of silk far larger than the frame, creased three times and lit by three coloured lamps. everything you see is the lighting: a fold takes the hue of whichever lamp it turns toward, and the ground is black because no light reaches it. nothing is painted.

intensity · roomrsc · client

provenance

authored in usva

layer

atmospheres

intensity

room · the whole environment. nothing competes with it

composition

wraps a hero or a full section; children sit above the drape in normal flowrecolour through colors: the hues are lamps, so it is native to no theme and at home in allnot on savi. light in a void needs a dark ground; reach for kynnös or väre therenever behind dense reading surfaces. it is the room, not a texture

a11y

the canvas sits in an aria-hidden wrapper behind the content · reduced motion paints one static frame · no WebGL2, no canvasjest-axe

dependencies

ogl · atmospheres-core from the same package
live demo · try it out

colour is a shadow

no palette is sampled here; a fold takes the hue of whichever lamp it turns toward

customize
speeddrift and drape rate
1
opacitysheet strength, 0 to 1
1
modeauto reads the ground, or force emit / stain
interactivethe cursor swings the key lamp
keythe main lamp, reads accent
fillthe shadow side, reads accent-2
rimthe grazing lamp on the crests
reliefhow steeply a fold turns through the lamps
3
creasedepth of the pleats
1.15
glossspecular weight, silk vs paper
1
advanced20
scalefold size, smaller pulls the drape back
1.2
creaseWidthpleat width, wide is satin, narrow is foil
1
drifthow far the pleats travel
0.06
drapeweight of the organic wander over the pleats
0.45
drapeScalesize of that wander
0.35
sheenspecular exponent, high is a tight glint
36
wraplambert wrap, 0 hard terminator to 1 bled round
0.08
contrastpower on the wrapped diffuse, high drives to black
4.5
puritygamma on the tint, above 1 keeps lamps from greying
1.9
key · xkey lamp direction, x in eye space
-0.8
key · ykey lamp direction, y in eye space
0.45
key · zkey lamp direction, z toward the eye
0.3
fill · xfill lamp direction, x in eye space
0.85
fill · yfill lamp direction, y in eye space
-0.35
fill · zfill lamp direction, z toward the eye
0.26
rim · xrim lamp direction, x in eye space
0.1
rim · yrim lamp direction, y in eye space
0.95
rim · zrim lamp direction, z toward the eye
0.22
tilthow far the pointer swings the key light
0.55
gainoverall brightness of the lit sheet
1.35
usagecopy
import { Kuulto } from "@usva-ui/react/atmospheres/kuulto";

<Kuulto
  speed={1}
>
  <Hero />
</Kuulto>

props

proptypedefaultnotes
childrenReactNode—rendered above the drape, in normal flow.
speednumber1drift and drape rate multiplier.
interactivebooleantruethe cursor swings the key lamp and the folds re-catch it.
opacitynumber1overall opacity of the sheet, 0 to 1.
mode"emissive" | "absorptive"—forces the blend. by default a dark ground emits and a light ground stains, the only way this survives a light theme.
colors{ key?; fill?; rim? }—the three lamps: key reads accent, fill reads accent-2, rim reads accent-alt. omitted lamps read their token.
paramsPartial<KuultoParams>—the drape: scale, relief, crease, creaseWidth, drift, drape, drapeScale, sheen, gloss, wrap, contrast, purity, key, fill, rim, tilt, gain.

get it

bun add @usva-ui/reactcopy
usagecopy
import { Kuulto } from "@usva-ui/react/atmospheres/kuulto";

<Kuulto className="min-h-svh">
  <Hero />
</Kuulto>