docs / atmospheres / routa

Routa

ground frost. water freezes below the surface, lifts the clay into low cells, then breaks it along the walls between them. it is relief first and almost still: fissures propagate across the first half-minute, settle, and never loop or breathe.

intensity · roomrsc · client

provenance

authored in usva

layer

atmospheres

intensity

room · the whole environment. nothing competes with it

composition

wraps a whole region; content sits above the ground in normal flowsavi is its home: the fissures hold pigment there. dark grounds get the raking key insteadone atmosphere per page. it is the room, nothing layers over itnot an ambient pulse. it does not float above the page or breathe like fog

a11y

the canvas layer is aria-hidden and pointer-transparent · reduced motion paints the mature frame at twenty-seven seconds and stopsjest-axe

dependencies

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

cold from underneath

the fissures hold the dark at every frozen seam

customize
modeauto reads the ground, or force stain / key
speeddomain drift, barely perceptible
1
opacityoverall strength, 0 to 1
1
advanced18
cellScalefrost cells across the short side
3.8
heavehow high the cell interiors lift
0.075
crackWidthwidth of the fissure at each wall
0.055
crackDepthhow far the walls fall below the surface
0.045
unevenScalefrequency of the broad ground swell
0.72
unevenhow differently neighbours lift
0.34
driftdomain travel per second, near still
0.003
growthRateone-shot fissure propagation per second
0.028
slopeheight-gradient gain before the normal
1.35
roughOren-Nayar roughness, 0 to 1
0.92
ambientfill under the raking key
0.32
keystrength of the raking key
0.88
reliefdamp held in the lee of a heave, light grounds only
0.18
ditherdither amplitude for dark-ground emission
0.005
light · xlateral rake of the key across the ground
-0.68
light · yvertical rake of the key
0.46
light · zkeep low so the key stays grazing
0.38
light · coloroptional cold key for the dark ground
usagecopy
import { Routa } from "@usva-ui/react/atmospheres/routa";

<Routa>
  <Article />
</Routa>

props

proptypedefaultnotes
childrenReactNode—rendered above the frozen ground, in normal flow.
speednumber1domain drift multiplier. barely perceptible either way.
mode"emissive" | "absorptive"—forces the material. by default a light ground stains its fissures and a dark ground catches the raking key.
light{ direction?; color? }[-0.68, 0.46, 0.38]the low raking key. keep z low, the heave only reads when the key rakes across it. color only affects the dark-ground reading.
opacitynumber1overall opacity, 0 to 1.
paramsPartial<RoutaParams>—the frost field: cellScale, heave, crackWidth, crackDepth, unevenScale, uneven, drift, growthRate, slope, rough, ambient, key, relief, and dither. relief is the damp a light ground holds in the lee of a heave, and does nothing on a dark one.

get it

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

<Routa className="min-h-svh">
  <Article />
</Routa>