Vertical pillar of light with glow effects.
Colors, glow and pillar shape are wired to the controls underneath. Turn on Interactive and move the pointer to spin the pillar.
| Prop | Type | Default | Description |
|---|---|---|---|
topColor | string | '#5227FF' | Hex color string for the top gradient color of the light pillar. |
bottomColor | string | '#FF9FFC' | Hex color string for the bottom gradient color of the light pillar. |
intensity | number | 1.0 | Controls the overall brightness and intensity of the effect. |
rotationSpeed | number | 0.3 | Speed multiplier for the pillar rotation animation. |
interactive | boolean | false | Enable mouse interaction to control the pillar rotation. Read when the component mounts, so change the key to toggle it. |
glowAmount | number | 0.005 | Controls the glow intensity and spread of the light effect. |
pillarWidth | number | 3.0 | Width/radius of the light pillar. |
pillarHeight | number | 0.4 | Height scaling factor for the pillar distortion. |
noiseIntensity | number | 0.5 | Intensity of the film grain noise postprocessing effect. |
mixBlendMode | string | 'screen' | CSS mix-blend-mode property to control how the component blends with its background. |
pillarRotation | number | 0 | Rotation angle of the pillar in degrees (0-360). |
quality | 'low' | 'medium' | 'high' | 'high' | Rendering quality level. Lower settings improve performance on mobile devices. Mobile devices automatically downgrade from high to medium. |
lightMode | boolean | false | Renders the pillar over a white background instead of black. |
Keyboard shortcuts and ARIA behavior.