docs / atmospheres / kynnos

Kynnös

freshly turned earth, still spinning on a wheel far slower than you first notice. one low raking light does all of it, and the ground keeps no shine of its own. swap the theme and the same furrows read as clay, or as brushed metal.

intensity · roomrsc · client

provenance

authored in usva

layer

atmospheres

intensity

room · the whole environment. nothing competes with it

composition

the ground under a hero or a full page region, children in normal flowtune the key with light; it changes more than any params tweaknot a panel fill. it is the room, never a texture inside a cardno blend mode on top: unlike the emissive atmospheres it composites normally

a11y

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

dependencies

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

thrown, not printed

furrows turning on a wheel at about ninety seconds a revolution

customize
speedwheel and drift rate
1
opacitysurface strength, 0 to 1
1
modeauto lets the ground decide clay or metal
advanced24
light.xkey azimuth, left to right
-0.72
light.ykey azimuth, up to down
0.5
light.zgrazing height, keep it low
0.34
light.colorthe key colour
origin · xwheel origin, forced off-frame
-1.05
origin · ywheel origin, y up
0.78
spinradians per second about the origin
0.07
furrowFreqfurrows per unit radius
16
warpAmtradial warp in furrow spacings, 2 to 4.5
2.8
warpFreqspatial frequency of the warp noise
2.1
breakAmthow readily a furrow breaks
0.22
ridgeShapeprofile exponent, above 1 pinches the crest
1.9
depthfurrow depth
0.03
slopegain on the height gradient
1
microScalegrain frequency
180
microAmtgrain on the normal only
0.34
crackScalecraquelure cell frequency
90
crackAmtcraquelure strength
0.5
aocrevice occlusion strength
0.9
roughOren-Nayar roughness, 0 to 1
0.9
ambientambient fill
0.42
keykey light strength
0.78
drifthow fast the noise fields evolve on their own
0.012
ditherdither amplitude against banding
0.006
usagecopy
import { Kynnos } from "@usva-ui/react/atmospheres/kynnos";

<Kynnos
  light={{ direction: [-0.72, 0.5, 0.34] }}
  className="min-h-svh"
>
  <Hero />
</Kynnos>

props

proptypedefaultnotes
childrenReactNode—rendered above the surface, in normal flow.
speednumber1wheel and drift rate multiplier. 1 is about ninety seconds per revolution.
mode"emissive" | "absorptive"—overrides the material. by default the ground decides: light clay on a light theme, brushed metal on a dark one.
light{ direction?; color? }—the key light. keep direction z low or the grooves stop throwing shadows. colour defaults to the theme: warm daylight on clay, the accent on metal.
opacitynumber1overall opacity, 0 to 1.
paramsPartial<KynnosParams>—the surface escape hatch: origin, spin, furrowFreq, warpAmt, breakAmt, depth, microAmt, crackAmt and friends. origin is pushed off-frame and warpAmt is clamped to roughly 2 to 4.5 furrow spacings, so the rings can never read as a vinyl record.

get it

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

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