Astra

Light Rays

Volumetric light rays from any edge, with source glow and haze. The cursor steers the beam and casts a shadow.

Light Rays, a Astra component

Use Light Rays in your project

Choose JavaScript or TypeScript and plain CSS or Tailwind. Enable JavaScript for the interactive preview, customization controls and source tabs.

npx shadcn@latest add @react-bits/LightRays-TS-TW
How to install Astra components

Related components

  • Prismatic Burst

    A burst of prismatic light rays that leans toward the cursor and sends a wave of light outward on click.

  • Side Rays

    Shafts of light that fan in from a corner or side, shimmer slowly and lean toward the cursor.

  • Beams

    Glossy ribbons that ripple in the dark and catch the light, which follows your cursor.