docs / sula / sula-frame
SulaFrame
a liquid border that hugs a rounded rectangle, calm at rest and leaning toward the cursor. wrap a card for a glowing brand edge, or set fixed to frame the whole viewport.
intensity · assertsrsc · client
provenance
shaped from personal-websitelayer
sulaintensity
asserts · one per region. it is the focal pointcomposition
wrap one hero card, a pricing panel, a focal surfacefixed mode as page chrome, inset from the viewport edgeone liquid surface per view. it is a wow moment, not dense product chromenever CSS-scale the frame; it measures its own boxa11y
the canvas layer isaria-hidden · wrapped content stays in normal flow, fully interactive · a :focus-visible inside wakes the ringjest-axedependencies
motion · ogl · sula-core and sula-motion from the same packagelive demo · try it out
a frame that answers
drag the cursor along the edge, or focus the button, and the border leans toward you
customize
radiuscorner radius in px, drives the box too
thicknessband width in px
insetgap between the frame and the edge
shine0 flat matte, 1 full neon rim
fluidoff paints the static accent border
introone-time reveal ramp on mount
usage
import { SulaFrame } from "@usva-ui/react/sula/sula-frame";
<SulaFrame
radius={20}
inset={5}
className="bg-surface px-10 py-9"
>
<Pricing />
</SulaFrame>props
| prop | type | default | notes |
|---|---|---|---|
| children | ReactNode | — | wrapped content, in normal flow above the canvas. optional in fixed mode. |
| fixed | boolean | false | false wraps its own box; true is a position:fixed frame around the viewport. |
| radius | number | — | corner radius in px. wrapper mode reads the box's computed border-radius; fixed mode scales with viewport width. |
| thickness | number | 2 | band width in px. |
| inset | number | 0 | gap between the frame and the edge in px. the viewport margin in fixed mode. |
| fluid | boolean | true | false mounts no canvas; reduced motion paints the static border instead. |
| intro | boolean | true | a one-time reveal ramp on mount. skipped under reduced motion. |
| accentColor | string | accent token | rim light and glow. |
| 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, 1 is the full neon rim. |
get it
bun add @usva-ui/reactusage
import { SulaFrame } from "@usva-ui/react/sula/sula-frame";
<SulaFrame radius={20} className="rounded-[20px] bg-surface p-8">
<Pricing />
</SulaFrame>
<SulaFrame fixed inset={12} />