3D & WebGLNew
Photon Beam
A fan of thin fibers merges into one beam with glowing pulses running along it. Built with three.js and bloom.
Customize
colorBg
colorLine
colorSignal
Based on Photon Beam (MIT license) · Terms of use
More in Pro
View allProps
13 properties| Property | Type | Default | Description |
|---|---|---|---|
| colorBg | string | "#0a0a0a" | Background color. |
| colorLine | string | "#525252" | Fiber color. |
| colorSignal | string | "#ffffff" | Color of the light pulses. |
| lineCount | number | 80 | Number of fibers. |
| signalCount | number | 90 | Number of pulses at once. |
| spreadHeight | number | 30 | How wide the fan opens on the left. |
| waveHeight | number | 0.15 | Wave height on the fan. |
| trailLength | number | 3 | Pulse tail length. |
| speed | number | 1 | Speed. 0 stops the motion. |
| bloomStrength | number | 1.6 | Glow strength. |
| lineOpacity | number | 0.55 | Fiber opacity. |
| children | ReactNode | — | Content on top of the effect. |
| className | string | — | Classes for the wrapper. |
Dependencies
3 required packages
npm install three clsx tailwind-merge