Updated: Light Rays
By Steven Van ·
The rebuilt React Bits background adds a glowing source, haze, a cursor shadow and a click wave, and the vendor says it costs far less to render.
Light Rays, the volumetric light background in React Bits, has been rebuilt on the same rays, with a glowing source, drifting haze and crisper shafts. The vendor says it now runs at a fraction of the cost.
What changed
- A glowing source at the point the rays come from.
- Drifting haze through the beam.
- Crisper shafts.
- Lower cost than the previous version.
Cursor and click behaviour
The cursor steers the beam and now casts a soft shadow. Clicking sends a wave of light down the beam. The rays can come from any edge.
Installing
The component is available in JavaScript or TypeScript, with plain CSS or Tailwind. For the TypeScript and Tailwind version, the install command is npx shadcn@latest add @react-bits/LightRays-TS-TW.
React Bits
An open-source collection of 200+ animated, interactive React components and micro-interactions.
View React Bits →