Mediastable

Elemental

An animated edge that wraps any content in electricity or fire.

electricUnstable energy running the edge

Customize

Elementwhich edge the wrapper draws

Variantvariant

Custom colourcolor

Radius16 pxradius

Energyhow hard the edge works

Intensity1.00intensity

Speed1.00speed

Particlesparticles

Cursor effectcursorEffect

TSX

import { Elemental } from "zerogravity"

<Elemental>
    <Card />
</Elemental>

Generated from the controls above. Only props that differ from their defaults are shown.

10 documented props on Elemental
Property	Type	Default	Description
`variant`	`"electric" \| "fire"`	`"electric"`	Variant.
`color`	`string \| null`	`""`	Custom colour.
`radius`	`number`	`16`	Radius. Range 0 to 60 px.
`intensity`	`number`	`1`	Intensity. Range 0 to 2.
`speed`	`number`	`1`	Speed. Range 0.25 to 3.
`particles`	`boolean`	`true`	Particles.
`cursorEffect`	`boolean`	`false`	Cursor effect.
`children`	`ReactNode`	`—`	Whatever the edge wraps. It stays fully interactive.
`disabled`	`boolean`	`false`	Freeze the edge in its static state.
`respectReducedMotion`	`boolean`	`true`	Fall back to the static edge when the user asks for less motion.

0 external runtime dependencies

Ships with nothing but React.