docs / atmospheres / vare

Väre

a few broad wavefronts cross the frame from off to the right and interfere. on a dark ground the crests glow; on savi the same ripples press into clay, troughs holding a warm damp pigment. it needs its irregularity: tune that out and the bands snap into a striped diagram.

intensity · roomrsc · client

provenance

authored in usva

layer

atmospheres

intensity

room · the whole environment. nothing competes with it

composition

a hero or full-page room, its content as children in normal flowdark and light themes both work; the blend resolves itself per groundnever behind dense reading surfaces or another atmospherenot a card texture. it is a room, one per page

a11y

the canvas layer is aria-hidden and pointer-events-none · reduced motion paints one still frame · without WebGL2 the canvas never mountsjest-axe

dependencies

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

bands, not waves

move the pointer and the fronts warp as the lens passes

customize
speedwave rate multiplier
1
opacityband strength, 0 to 1
1
modeauto reads the ground, or force emit / stain
interactivea phase-space lens bends the bands toward the pointer
bodythe front of the ramp, reads accent
deepthe back of the ramp
edgethe bright nodes where fronts cross
advanced17
angleshared travel direction of the fronts, radians
3.64
spreadhalf-width of the k-vector fan, radians
0.62
wavenumberbase band frequency, each front scatters around it
3.8
field speedintrinsic travel rate of the fronts
0.9
warpamplitude of the domain warp that bends the field
0.7
warpScalespatial scale of that warp
0.55
jitterper-front phase drift, keeps fronts from lining up
0.7
softridge exponent, higher is a narrower boundary
6.5
detailfrequency of the band-thickness noise
1.6
nodeextra light where two fronts cross
0.9
gainoverall brightness of the ramp
1.15
source · xoff-frame origin x, half-height units by aspect
1.15
source · yoff-frame origin y, half-height units
0.8
falloffinverse-square decay, higher voids sooner
0.09
spandistance over which the hue ramps front to back
4
lensstrength of the pointer lens in phase space
2.2
lensSigmareach of that lens
0.9
usagecopy
import { Vare } from "@usva-ui/react/atmospheres/vare";

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

props

proptypedefaultnotes
childrenReactNode—rendered above the bands, in normal flow.
speednumber1wave rate multiplier.
interactivebooleantruea lens in phase space follows the eased cursor and bends the bands as it passes.
opacitynumber1overall opacity of the bands, 0 to 1.
mode"emissive" | "absorptive"—forces the blend. by default a dark ground emits and a light ground stains, which is the only way this survives a light theme.
colors{ body?; deep?; edge? }—on dark ground, the front-to-back ramp. on savi, body combines with theme ink to make the trough pigment. omitted stops read their token.
paramsPartial<VareParams>—the field: angle, spread, wavenumber, speed, warp, warpScale, jitter, soft, detail, node, gain, source, falloff, span, lens, lensSigma.

get it

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

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