Preferences

Prismatic Burst

Customize

Intensity2

Speed0.5

Distort0

Ray Count0

Hover Dampness0.5

Offset X0

Offset Y0

Props

Property	Type	Default	Description
`intensity`	number	`2`	Overall brightness multiplier applied after accumulation.
`speed`	number	`0.5`	Global time multiplier controlling ray motion & distortion.
`animationType`	"rotate" \| "rotate3d" \| "hover"	`"rotate3d"`	Core motion style: planar rotation, full 3D rotation, or pointer hover orbit.
`colors`	string[]	`[]`	Optional array of hex colors used as a gradient (otherwise spectral).
`distort`	number	`0`	Amount of bend/distortion applied to marching space (adds organic wobble).
`paused`	boolean	`false`	Freeze time progression when true (animation stops).
`offset`	{ x?: number\|string; y?: number\|string }	`{ x: 0, y: 0 }`	Pixel (or CSS length) offset of focal origin from center.
`hoverDampness`	number	`0`	Smoothing factor (0-1) for pointer tracking when animationType='hover'.
`rayCount`	number	`undefined`	If > 0 applies an angular comb filter to produce discrete ray spokes.
`mixBlendMode`	CSSProperties['mixBlendMode'] \| 'none'	`"lighten"`	Canvas CSS mix-blend-mode (e.g. lighten, screen) or 'none' for normal.
`className`	string	`""`	Extra classes applied to the root wrapper div.
`demoContent`	boolean	`false`	Demo-only toggle to overlay sample content on the background preview (not a real component prop).

intensitynumber

Overall brightness multiplier applied after accumulation.

Default2

speednumber

Global time multiplier controlling ray motion & distortion.

Default0.5

animationType"rotate" | "rotate3d" | "hover"

Core motion style: planar rotation, full 3D rotation, or pointer hover orbit.

Default"rotate3d"

colorsstring[]

Optional array of hex colors used as a gradient (otherwise spectral).

Default[]

distortnumber

Amount of bend/distortion applied to marching space (adds organic wobble).

Default0

pausedboolean

Freeze time progression when true (animation stops).

Defaultfalse

offset{ x?: number|string; y?: number|string }

Pixel (or CSS length) offset of focal origin from center.

Default{ x: 0, y: 0 }

hoverDampnessnumber

Smoothing factor (0-1) for pointer tracking when animationType='hover'.

Default0

rayCountnumber

If > 0 applies an angular comb filter to produce discrete ray spokes.

Defaultundefined

mixBlendModeCSSProperties['mixBlendMode'] | 'none'

Canvas CSS mix-blend-mode (e.g. lighten, screen) or 'none' for normal.

Default"lighten"

classNamestring

Extra classes applied to the root wrapper div.

Default""

demoContentboolean

Demo-only toggle to overlay sample content on the background preview (not a real component prop).

Defaultfalse

Dependencies

three 0.180.0@react-three/fiber 8.17.10

Crafted withbyMohammad Tasin