Crossing animated ribbons with customizable properties.
Every property is wired to the controls underneath. The demo swaps to a light palette in the light theme until you change a color yourself.
| Prop | Type | Default | Description |
|---|---|---|---|
beamWidth | number | 2 | Width of each beam. |
beamHeight | number | 15 | Height of each beam. |
beamNumber | number | 12 | Number of beams to display. |
lightColor | string | '#ffffff' | Color of the directional light. |
beamColor | string | '#000000' | Base material color of the beams. |
backgroundColor | string | '#000000' | Canvas background color. |
speed | number | 2 | Speed of the animation. |
noiseIntensity | number | 1.75 | Intensity of the noise effect overlay. |
scale | number | 0.2 | Scale of the noise pattern. |
rotation | number | 0 | Rotation of the entire beams system in degrees. |
lightMode | boolean | false | Remaps the shading so the beams read well on a light background. |
Keyboard shortcuts and ARIA behavior.