Snow

`<pura-snow>` paints gently falling snowflakes behind its slotted content, a seasonal and marketing background in the spirit of tsParticles' Snow preset. Flakes fall with a soft lateral sway, and three depth layers vary size, speed and opacity by index so the field reads as parallax. The scatter is deterministic in the pure template (no `Math.random`), so the server and client render the same field and the effect needs no client JS; each flake is driven by two CSS `@keyframes` (fall plus sway), so there is no animation runtime. Set `count` for density and theme with `--pura-snow-color`, `--pura-snow-glow`, `--pura-snow-size`, `--pura-snow-speed` and `--pura-snow-drift`. Under reduced motion (and pre-JS SSR) the flakes hold their static scattered positions, a still snowfall snapshot. It registers in `window.__puraSnows` by `data-pura-id` for agent enumeration.

Preview

<!-- seasonal hero background -->
<pura-snow count="80" style="background: #0b1020; --pura-snow-color: #e0e7ff;">
  <div class="hero">Winter sale starts now</div>
</pura-snow>

<!-- subtle, slow flurry on a card -->
<pura-snow count="30" style="--pura-snow-speed: 0.6; --pura-snow-size: 0.8; --pura-snow-drift: 1.5;">
  <article class="card">Holiday gift guide</article>
</pura-snow>

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

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