← All components
Atmospheres / background
Prism
A luminous, grain-textured prism with three distinct rotation modes.
Open in studio ↗PLAYGROUND
Take it with you.
SOURCE ACCESS
Preview freely. Unlock the files.
Enter the shared password to copy the complete source, download every file, and install components in your app.
Access lasts 24 hours. Your preview settings stay with you.
Component notes
- Give the background an explicitly sized parent. Demo.tsx contains the complete composition.
- Reduced motion renders a static state. Paused, hidden and offscreen instances stop requesting animation frames.
- Original shader equations retained. A CSS fallback appears without WebGL2. Canvas dimensions are capped at 2048 pixels.
- Hover uses local pointer coordinates. Offscreen suspension is always enabled. Zero-valued controls are honored.
React 19WebGL2OGL 1.0.11
React Bits · MIT with Commons Clause. Used with explicit project permission; see bundled notice.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
height | number | 3.5 | Prism height |
baseWidth | number | 5.5 | Base width |
animationType | "rotate" | "hover" | "3drotate" | "rotate" | Animation |
glow | number | 1 | Glow |
noise | number | 0.5 | Grain |
scale | number | 3.6 | Scale |
hueShift | number | 0 | Hue rotation |
colorFrequency | number | 1 | Color frequency |
hoverStrength | number | 2 | Hover strength |
inertia | number | 0.05 | Hover inertia |
bloom | number | 1 | Bloom |
timeScale | number | 0.5 | Rotation speed |
transparent | boolean | true | Transparent |
lightMode | boolean | false | Light mode |
offset | { x?: number; y?: number } | { x: 0, y: 0 } | Offset in CSS pixels. |
time | number | undefined | Explicit shader time in seconds; stops automatic frames. Reduced motion takes precedence. |
paused | boolean | false | Freeze decorative motion; controls remain usable. |
replayToken | number | 0 | Change to reset decorative motion. |
className | string | '' | Additional outer classes. |