Prism
prismRaymarches a refractive octahedral prism that casts volumetric rainbow light.
Usage
Basic usage
is placed in the relative overflow-hidden container. The component comes with absolute inset-0 z-0; the content is stacked on top with relative z-10.
Prism
tsx
<div className="relative h-64 overflow-hidden rounded-xl"
style={{ background: "oklch(0.11 0.02 275)" }}>
<Prism />
<div className="relative z-10 flex h-full items-center justify-center">
<p className="text-2xl font-bold text-white/90">Prism</p>
</div>
</div>Animation mode
animationType Choose one of three: rotate (breathing swing) / 3drotate (three-dimensional rotation) / hover (follow the pointer).
3D Rotation
tsx
<Prism animationType="3drotate" glow={1.2} />High Glow·Purity
glow brightens volumetric light, noise=0 removes film grain and obtains a clean and transparent light spectrum.
High Glow · Pure
tsx
<Prism animationType="3drotate" glow={1.6} bloom={1.3} noise={0} />Product Hero
Use offset to move the prism up to avoid the title, and layer a top halo to create a decorative background for the first marketing screen.
A beam of light refracts the entire spectrum
Enterprise component library · WebGL decorative background
tsx
<div className="relative h-64 overflow-hidden rounded-xl"
style={{ background: "oklch(0.09 0.025 270)" }}>
<Prism
animationType="3drotate"
glow={1.3}
scale={4.2}
offset={{ x: 0, y: -40 }}
colorFrequency={1.2}
/>
<div className="relative z-10 flex h-full flex-col items-center justify-center gap-3 px-8">
<h1 className="text-3xl font-bold text-white">A beam of light, refracting the entire spectrum</h1>
<p className="text-sm text-white/50">Enterprise-level component library · WebGL decorative background</p>
</div>
</div>When to Use
Use Prism as a single sculptural focal point in a product hero or brand composition. Its offset, scale, and transparent canvas make room for adjacent copy without changing the surrounding layout. Choose PrismaticBurst for light radiating across the full frame, or Plasma and PlasmaWave for continuous surface texture.
Import
ts
import { Prism } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| height | number | 3.5 | Prism height along the Y axis; increasing it produces a taller, narrower silhouette |
| baseWidth | number | 5.5 | Width of the prism base; use it with height to control the silhouette's proportions |
| animationType | "rotate" | "3drotate" | "hover" | "rotate" | rotate oscillates the base in the XZ plane, 3drotate applies organic three-axis motion, and hover tilts toward the global pointer with inertia |
| glow | number | 1 | Volumetric-light strength; 0 leaves a dark outline |
| offset | { x?: number; y?: number } | { x: 0, y: 0 } | Translation from the viewport center in CSS pixels, useful for balancing the prism beside foreground content |
| noise | number | 0.5 | Film-grain strength; 0 renders a clean image |
| transparent | boolean | true | Preserve canvas alpha so the parent background shows through; this mode also raises saturation internally |
| scale | number | 3.6 | Overall prism scale; higher values occupy more of the viewport |
| hueShift | number | Derived from --color-chart-1 | Hue rotation in radians; an explicit value replaces the theme-derived hue |
| colorFrequency | number | 1 | Spectral-band frequency; higher values create denser bands and lower positive values create wider bands. The current runtime normalizes 0 to 1. |
| hoverStrength | number | 2 | Maximum pointer-driven tilt in hover mode. The current runtime normalizes 0 to 1. |
| inertia | number | 0.05 | Pointer interpolation factor from 0 to 1; lower positive values ease for longer and higher values track more directly. The current runtime normalizes 0 to 0.12. |
| bloom | number | 1 | Brightness multiplier applied together with glow. The current runtime normalizes 0 to 1. |
| timeScale | number | 0.5 | Overall animation-speed multiplier. The current runtime normalizes 0 to 1 rather than freezing the frame. |
| className | string | — | Class name forwarded to the root container or reduced-motion fallback |
Slots
| Slot | Type | Description |
|---|---|---|
| fallback | ReactNode | Decorative content rendered inside the static chart-token radial glow when reduced motion is enabled; the fallback root is aria-hidden |
Usage Guidelines
- Prism is an
absolute inset-0 z-0decorative layer. Give its parentposition: relative, explicit dimensions, and clipping as needed; place foreground content atrelative z-10or above. See [[webgl-canvas-rendered-but-invisible-negative-zindex-covered]]. animationType="hover"follows the global pointer, not just movement within the container. Only this mode installs pointer listeners;rotateand3drotateignore pointer movement.- During SSR, the live root has no canvas. After hydration, a canvas is appended before OGL import and scene setup; if either step fails, that uninitialized or blank canvas remains and Prism does not switch to the reduced-motion fallback. Reduced motion instead renders the static radial glow plus decorative
fallbackcontent. - When
hueShiftis omitted, the base hue is derived from--color-chart-1through an off-screen canvas. An explicithueShiftreplaces that derived value. Theme variables must use the--color-prefix. See [[oklch-css-var-color-must-parse-via-offscreen-canvas]]. - Throttled animation frames can make headless screenshots appear static or empty. Verify rotation on a real device or with Playwright frame measurements; see [[recharts-headless-screenshot-blank-clippath-animation-starved]].
Related
DotPattern · GridPattern · StripedPattern · Spotlight · RetroGrid · Ripple
Playground
Prism · WebGL Background
<div className="relative h-64 overflow-hidden rounded-xl"
style={{ background: "oklch(0.11 0.02 275)" }}>
<Prism
animationType="rotate"
glow={1}
scale={3.6}
noise={0.5}
timeScale={0.5}
/>
<div className="relative z-10">Content</div>
</div>