Light Rays

`<pura-light-rays>` paints volumetric light rays (god rays) falling from above its slotted content, in the style of Magic UI's Light Rays and React Bits' Lightfall. Each ray is a narrow translucent conic-gradient wedge anchored to an origin point above the frame, softened by a shared blur, and swaying slowly in angle and opacity via CSS `@keyframes` with staggered delays. The fan is scattered deterministically in the pure template (no `Math.random`), so the server and client render the same field and the effect needs no client JS. Set `count`, `origin`, `spread`, `intensity` and `speed` to shape the light; theme with `--pura-light-rays-color` and `--pura-light-rays-blur`. Under reduced motion the rays hold still at peak opacity. Each instance registers in `window.__puraLightRayss` by `data-pura-id` for agent enumeration.

Preview

<!-- centered god rays over a dark hero -->
<pura-light-rays count="10" style="background: #060913; --pura-light-rays-color: #dbeafe;">
  <header class="hero">Ship faster with pura</header>
</pura-light-rays>

<!-- warm side rays from the left, wider fan, softer and slower -->
<pura-light-rays origin="left" spread="70" intensity="0.45" speed="14"
  style="background: #140d06; --pura-light-rays-color: #ffe9c2; --pura-light-rays-blur: 18px;">
  <section class="hero">Morning light</section>
</pura-light-rays>

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/light-rays.js"></script>

import "./pura/lib/light-rays.js";