docs / atmospheres / loimu

Loimu

light arrives from something enormous and off-frame, drawn into long parallel streamers that decay to nothing before the edge. it expects a scrim over it, keeping one diagonal wedge and cutting the rest: the scrim does that work, never the atmosphere.

intensity · roomrsc · client

provenance

authored in usva

layer

atmospheres

intensity

room · the whole environment. nothing competes with it

composition

the ground of a hero or a full page, with the page's own scrim on topcontent goes in as children, above the sheet in normal flownever unmasked full-frame: without the scrim it lies about where the light livesnot inside a Card or a panel. it is the room, one per page

a11y

the canvas is aria-hidden · reduced motion paints one static developed frame · without WebGL2 the canvas never mountsjest-axe

dependencies

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

light from off-frame

the scrim keeps one diagonal wedge and destroys the rest

customize
speedflow and fold rate
1
opacitysheet strength, 0 to 1
1
interactivestreamers bend toward the pointer
modeauto reads the ground, or force emit / stain
scrimthe three-layer CSS mask on top
bodythe sheet, reads accent
deepwhere the light is oldest
edgethe leading lines
advanced27
focalcamera focal length, larger flattens
1.5
sheetDisteye to sheet plane along its normal
3
sheetSpanhalf depth of the marched neighbourhood
1.6
sigmagaussian thickness of the sheet
0.8
foldhow far the low fold bends it out of plane
0.55
foldScalespatial frequency of that fold
0.22
normal · xsheet plane normal, x
0.3
normal · ysheet plane normal, y
0.4
normal · zsheet plane normal, z
0.87
flow · xflow axis projected onto the plane, x
-0.86
flow · yflow axis projected onto the plane, y
-0.5
flow · zflow axis projected onto the plane, z
0
source · xemission source, half-height units, x
1.28
source · yemission source, half-height units, y
0.92
noiseFreqbase frequency of the streamer noise
1.5
stretchdomain stretch along flow, below 4 loses aurora
12
curlScalespatial scale of the curl field
0.35
curlAmtstrength of the curl advection
0.7
flowSpeedbase advection speed along the flow
0.28
omegastrength of the pointer vortex
1.6
thresholdcutoff below which the sheet is void
0.33
sharpencontrast on the streamer edges
2.2
falloffinverse-square arrival, higher decays sooner
0.045
gainoverall emission gain
14
edgeweight of the thin leading line
0.3
edgeBandshow many leading lines per streamer
2
flowLengthdistance over which the hue completes
7
usagecopy
import { Loimu } from "@usva-ui/react/atmospheres/loimu";

<Loimu
  speed={1}
  opacity={1}
  interactive={true}
>
  <div aria-hidden className="pointer-events-none absolute inset-0" style={{ backgroundImage: SCRIM }} />
  <Hero />
</Loimu>

props

proptypedefaultnotes
childrenReactNode—rendered above the sheet, in normal flow.
speednumber1flow and fold rate multiplier.
interactivebooleantruethe streamers bend toward your cursor from a distance, following it with a lag.
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, which is the only way this survives a light theme.
colors{ body?; deep?; edge? }—the hue along the flow: body reads accent, deep reads accent-2 where the light is oldest, edge reads accent-alt on the leading lines. omitted stops read their token.
paramsPartial<LoimuParams>—escape hatch for the field: source, sigma, fold, curlAmt, omega, edge and the rest. the defaults are the tuned sheet.

get it

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

<Loimu className="relative min-h-svh">
  <div aria-hidden className="pointer-events-none absolute inset-0" style={{ backgroundImage: SCRIM }} />
  <Hero className="relative" />
</Loimu>