docs / atmospheres / utu

Utu

morning fog made into a field. on dark ground it is one luminous body with depth you can see into; on savi the same density reads as damp soaking into clay, transparent where the ground stayed dry.

intensity · roomrsc · client

provenance

authored in usva

layer

atmospheres

intensity

room · the whole environment. nothing competes with it

composition

a landing hero, a splash, one felt moment per viewthe savi stain is calm enough to sit behind longer readingnever behind a table or form. the glow gets one spot per viewnever two glowing bodies in one viewport

a11y

the canvas layer is aria-hidden · children stay in normal flow, fully interactive · reduced motion gets a static frame, not a loopjest-axe

dependencies

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

a faint glow

fog that turns and breathes, and leaves the words clear

customize
modeauto reads the ground; force emit or damp stain
speedrotation and breath rate
1
opacityfog strength, 0 to 1
1
bandsglowing contour-shells through the body
5
interactivethe volume leans toward the pointer
accentColorcollapses the dawn gradient to one brand colour
deepthe valleys, oldest fog
midthe body of the glow
hotthe blown-out cores
advanced14
radiussphere size in short-side units
1.65
swirltwist per unit height, the helix strength
2.2
omegarotation speed of the whole body
0.12
noiseFreqscale of the interior texture
1.6
noiseAmpstrength of that texture
0.85
noiseBasefloor density so fills stay present
0.22
drifthow fast the noise field advects
0.08
wispSigmavertical width of the equator wisp
0.12
wispAmthow far density leaks into the tails
0.35
wispDriftsideways shedding speed of the wisps
0.2
absorbself-occlusion strength
1.1
exposuretone-map exposure, hot cores clip to white
10
breathAmtdepth of the slow breath
0.06
breathRaterate of the slow breath
0.05
usagecopy
import { Utu } from "@usva-ui/react/atmospheres/utu";

<Utu>
  <Hero />
</Utu>

props

proptypedefaultnotes
childrenReactNode—rendered in normal flow above the field. omit for a bare orb you position yourself.
speednumber1rotation and breath rate multiplier.
interactivebooleanfalsethe volume eases a lean toward the cursor. off because a hero should not chase the pointer.
bandsnumber5how many glowing bands stack through the body.
colors{ deep?; mid?; hot? }—override any stop of the dawn gradient. omitted stops keep violet valleys, magenta body, warm-gold cores.
accentColorstring—collapse the gradient to one brand colour, sunk to black in the valleys and blown toward white at the cores.
opacitynumber1overall fog opacity. lower lets more of the page through.
mode"emissive" | "absorptive"—forces the material. by default a dark ground emits fog and a light ground holds a damp stain.

get it

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

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