docs / sula / sula-field
SulaField
an ambient veil of slow liquid glass: dark masses heave behind, lit glass drifts and kisses in front, and your content stays crisp and interactive above it.
intensity · assertsrsc · client
provenance
authored in usvalayer
sulaintensity
asserts · one per region. it is the focal pointcomposition
behind a landing hero, a splash, a section break. one per viewno children makes it a bare background layer you position yourselfnever under a second sula surface, and never behind a work surfacenever CSS-scale it. the pool spills out of the transformed boxa11y
the canvas layer isaria-hidden and pointer-transparent · content renders above it exactly as it would with no fieldjest-axedependencies
motion · ogl · sula-core from the same packagelive demo · try it out
mist, made of glass
slow glass gathers at the edges and leaves the words clear
customize
speeddrift-rate multiplier
interactivethe veil leans toward the pointer
seedsame value wanders the same way
fluidoff mounts no canvas, one static frame
usage
import { SulaField } from "@usva-ui/react/sula/sula-field";
<SulaField
>
<Hero />
</SulaField>props
| prop | type | default | notes |
|---|---|---|---|
| children | ReactNode | — | rendered in normal flow above the field. omit it for a bare layer you position yourself. |
| speed | number | 1 | drift-rate multiplier. higher drifts faster. |
| drive | SulaFieldDrive | ambientDrift | the choreography: a pure function of time and bounds. clamped to 12 bodies per plane and 8 necks, the surplus is not drawn. |
| interactive | boolean | false | the field leans toward the eased cursor. off so the background does not compete. |
| seed | number | 0 | the same value wanders the same way, across renders and SSR. |
| fluid | boolean | true | false mounts no canvas. reduced motion paints one static frame instead. |
| stillTime | number | 0 | which instant of the drive the reduced-motion still is taken from, in seconds. |
| accentColor | string | accent token | rim light and glow on the blobs. |
| backdrop | string | bg token | the colour the glass tints against. |
| tint | string | surface-2 token | the glass itself. |
| shine | number | per theme | 0 is flat matte glass, 1 is the full neon rim. |
get it
bun add @usva-ui/reactusage
import { SulaField } from "@usva-ui/react/sula/sula-field";
<SulaField className="min-h-svh">
<Hero />
</SulaField>