Lamp Effect

`<pura-lamp>` is the Linear-style lamp header: a bright horizontal bar with a blurred halo and two mirrored conic-gradient cones that spread light downward onto the slotted heading. The entrance animates the lamp opening (width and opacity of bar, glow and cones) once when the element scrolls into view; `trigger="scrub"` instead ties the opening 1:1 to a scroll-driven timeline (`animation-timeline: view()`) with zero per-frame JS. `color` sets the light color, `--pura-lamp-width` the bar width, `--pura-lamp-height` the space above the bar and `--pura-lamp-spread` how far the cones reach. SSR and pre-JS render the lamp fully open, and reduced motion skips the entrance and lands open. Each instance registers in `window.__puraLamps` by `data-pura-id` with `{ trigger, replay }`.

Preview

<!-- section header: lamp opens once when scrolled into view -->
<pura-lamp style="--pura-lamp-height: 10rem;">
  <h2>Plan. Build. Ship.</h2>
  <p>Everything your team needs, under one light.</p>
</pura-lamp>

<!-- warm light, opening scrubbed by scroll position -->
<pura-lamp trigger="scrub" color="#f59e0b" range="entry 0% cover 60%" style="--pura-lamp-width: 36rem;">
  <h2>Crafted in the glow</h2>
</pura-lamp>

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

import "./pura/lib/lamp.js";