docs / atmospheres / hehku

Hehku

one continuous ribbon of light heated like a filament, coiling slowly through the void with no ends and no seam. thin runs are cold violet; where the coil bunches and looks through itself the light gathers and blooms toward white.

intensity · roomrsc · client

provenance

authored in usva

layer

atmospheres

intensity

room · the whole environment. nothing competes with it

composition

behind a hero or a full section, children in normal flow above itone figure per view. it is the environment, not a decorationnever on a ground it cannot outshine. on savi it renders nothingnot a card or panel background. it needs a void to coil through

a11y

the canvas is aria-hidden and pointer-transparent · reduced motion paints one still frame · with no WebGL2 the canvas never mountsjest-axe

dependencies

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

one long coil

a single closed curve, cold where it runs thin and bright where it bunches

customize
speedwander and spin rate, keep it slow
1
opacityoverall strength, 0 to 1
1
modeauto reads the ground, or force emit / stain
coolthe thin cold runs
hotwhere the coil bunches and blooms
thicknessradius of the emitting core
0.16
glowfalloff, larger is thinner and colder
26
bloomhalo level counted as looking through coil
6
exposurebrightness of the ramp
1.9
advanced16
segmentscapsules in the chain, more is smoother
96
radius · majorsize of the torus the knot winds around
2.1
radius · minorthickness of that torus
1.05
winding · pturns about the axis, coprime with q
2
winding · qturns through the hole, coprime with p
3
scale · xwidth of the finished figure
1.85
scale · yheight of the finished figure
1.12
scale · zdepth of the finished figure
1
driftwander of the curve away from the pure knot
0.4
driftRatehow fast that wander and roll move
0.06
spinrevolutions per second about the vertical
0.01
tiltfixed lean of the whole figure, radians
0.6
disteye distance from the coil
2.9
focallens length, higher is flatter
1
offset · xlateral eye position, crops the coil
1.2
offset · yvertical eye position
1.9
usagecopy
import { Hehku } from "@usva-ui/react/atmospheres/hehku";

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

props

proptypedefaultnotes
childrenReactNode—rendered above the coil, in normal flow.
speednumber1rate of the coil's wander and spin. it is meant to stay slow.
opacitynumber1overall strength, 0 to 1.
mode"emissive" | "absorptive"resolved bgforces the blend. by default a dark ground emits and a light ground stains.
colors{ cool?; hot? }accent · accent-altthe two ends of the heat ramp. cool sinks under accent, hot lifts accent-alt toward white.
paramsPartial<FilamentParams>FILAMENT_DEFAULTSthe curve: segments, radius, winding, scale, drift, driftRate, spin, tilt, thickness, glow. the windings must stay coprime integers or the knot degenerates into one circle traced several times.
viewPartial<FilamentView>FILAMENT_VIEWthe camera and the ramp: dist, focal, offset, bloom, exposure. the offset holds the eye off-axis so the coil crops at the frame.

get it

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

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