PrismaticBurst
prismatic-burstEmits configurable curved spectral rays from an interactive central burst.
Usage
Basic usage
Default continuous halo + theme chart token spectrum; placed in the relative container comes with absolute inset-0 z-0.
<div className="relative h-56 overflow-hidden rounded-xl"
style={{ background: "oklch(0.13 0.02 275)" }}>
<PrismaticBurst className="opacity-90" />
</div>Number of ray lobes
rayCount>0 Sort out N symmetrical rays according to angle, 6 = hexagram-like burst.
<PrismaticBurst rayCount={6} intensity={2.4} className="opacity-95" />Three-dimensional tumbling + twisting
animationType=rotate3d tumbles three-dimensionally, distort twists the rays like a gravitational lens, and noiseAmount weakens the strips.
<PrismaticBurst
animationType="rotate3d"
distort={18}
speed={1.4}
noiseAmount={0.4}
className="opacity-90"
/>Custom ribbon
colors passes the CSS color array (supports var token) baked into a gradient texture; the hover mode follows the pointer tilt.
<PrismaticBurst
animationType="hover"
colors={[
"oklch(0.72 0.22 30)",
"var(--color-chart-3)",
"oklch(0.78 0.16 90)",
]}
intensity={2.2}
className="opacity-90"
/>When to Use
Use it when you need a "spectral ray bursting from the center" as a strong visual focus (product release page, event Hero), with the largest sense of radiation and spectrum span. If you want a single pyramid light splitter, choose Prism, if you want a full flow texture, choose Plasma / PlasmaWave; this component is a central radiated light burst, the number of petals can be adjusted to make a hexagram/starburst, and mixBlendMode is often used for superimposed base images.
Import
import { PrismaticBurst } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| intensity | number | 2 | Overall brightness gain (directly multiplied by the final color); 0=full black |
| speed | number | 1 | Volume step animation speed factor; the larger it is, the faster it surges |
| animationType | "rotate" | "rotate3d" | "hover" | "rotate" | rotate=single-axis plane rotation (most restrained)/rotate3d=three-dimensional Euler rotation/hover=tilt following the pointer |
| colors | string[] | --color-chart-1..5 | Color strip (baked into a one-dimensional gradient texture and sampled according to march progress); any CSS color string, default chart token light and dark adaptive |
| distort | number | 0 | Light bending and distortion amount 0–50 (clamped within the shader); the larger the ray, the more likely it is to be twisted by a gravitational lens |
| noiseAmount | number | 0 | Grain jitter noise amount 0–1; weaken the sense of banding |
| rayCount | number | 0 | Number of radiation beam lobes; 0=continuous halo, >0 comb N symmetrical rays according to angle (6=hexagram) |
| offset | { x?: number; y?: number } | { x: 0, y: 0 } | The offset of the burst center relative to the center of the screen (CSS pixels), x is positive to the right, y is positive downward |
| mixBlendMode | string | "none" | mix-blend-mode forwarded to the canvas; lighten and screen are useful for overlay compositions |
| className | string | — | Merge into root container (or reduced div) |
Slots
| Slot | Type | Description |
|---|---|---|
| fallback | ReactNode | reduced-motion / static alternative content without WebGL; default chart token radial light burst gradient |
Usage Guidelines
- The component covers the entire canvas, the parent container must be `relative` + `overflow-hidden`, and the overlay content must be `absolute inset-0` / `relative z-10`, otherwise the content [[webgl-canvas-rendered-but-invisible-negative-zindex-covered]] will be covered.
- WebGL client component (
"use client"), ogl lazy loading and reuse useGlCanvas are safe for React StrictMode dual mounting; only fallback is rendered in the SSR stage. colorsis parsed by off-screen canvas when passingvar(--color-…), must be prefixed with `--color-`, and the parsing of barevar(--primary)fails with [[oklch-css-var-color-must-parse-via-offscreen-canvas]].- Headless screenshots can capture a still or blank frame when rAF is throttled. Verify the burst on a real device or with Playwright measurements; see [[recharts-headless-screenshot-blank-clippath-animation-starved]].
Related
DotPattern · GridPattern · StripedPattern · Spotlight · RetroGrid · Ripple
Playground
<div className="relative h-56 overflow-hidden rounded-xl"
style={{ background: "oklch(0.13 0.02 275)" }}>
<PrismaticBurst
intensity={2}
speed={1}
animationType="rotate"
rayCount={0}
distort={0}
className="opacity-90"
/>
</div>