docs / atmospheres / kajastus

Kajastus

the glow spreading along the horizon, arrived overhead: a curved roof of folded light arching over the viewport and running off past both edges, bright where a fold turns and you look through more of it. a corridor of low density runs through the middle, so header type keeps its ground.

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 itthe header type sits in the corridor, not on top of the foldsnever on a ground it cannot outshine. on savi it renders nothingone vault per page. it is the room, nothing else competesthe most expensive of the eight to draw. give it a page worth the cost, and do not pair it with a second moving field

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

under the vault

the field thins into a corridor where the type sits, so the words keep their ground

customize
speedray and fold drift rate
1
opacityvault strength, 0 to 1
1
modedark grounds emit, light grounds stain
lowgreen low and distant, reads accent-alt
highviolet climbing the folds, reads accent
starthe cold field behind, reads ink
corridordepth of the low-density cut for the type
0.34
starscold field behind, 0 for a clean sky
0.22
advanced16
pitchhow far the eye tilts up, radians
0.42
curvecurvature of the ceiling, arches the edges down
0.018
foldhow far the ribbon meanders across the sky
7
foldScalewavelength of the meander, smaller is longer
0.045
warpone-axis domain warp so folds stay folds
9
offsetwhere the ribbon sits relative to the eye
-6
widththickness of the sheet
1.8
detailacross-ribbon detail, along is 8x this
0.5
thresholdcuts the noise floor that keeps the frame empty
0.28
driftlateral drift of the fine structure
0.06
rayFreqvertical wavelength of the streaming rays
2.4
raySpeedhow fast the rays run up the ribbon
0.9
fardistance extinction and the horizon AA budget
0.025
exposurebrightness of the field
6.5
corridorYvertical centre of the corridor, -1 to 1
-0.25
corridorHcorridor height
0.6
usagecopy
import { Kajastus } from "@usva-ui/react/atmospheres/kajastus";

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

props

proptypedefaultnotes
childrenReactNode—rendered above the vault, in normal flow.
speednumber1rate of the streaming rays and the fold drift.
opacitynumber1overall strength, 0 to 1.
mode"emissive" | "absorptive"resolved bgforces the blend. by default a dark ground emits and a light ground stains.
colors{ low?; high?; star? }accent-alt · accent · inkthe altitude ramp: green low and distant, violet climbing the folds, cold stars behind. omitted stops read their token.
paramsPartial<KajastusParams>KAJASTUS_DEFAULTSthe field itself: pitch, curve, fold, foldScale, warp, offset, width, detail, threshold, drift, rayFreq, raySpeed, far, exposure, stars, and the corridor cut (corridor, corridorY, corridorH) that keeps the type on real negative space.

get it

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

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