Atmosphere

Light, texture and depth over the slides — the details that make a hero feel produced. Each is a separate chunk loaded only when used, paused off screen and static under reduced motion.

<style>
  body { padding: 0; }
  .wrap { position: relative; }
  .bar { position: absolute; z-index: 5; top: 12px; left: 12px; display: flex; gap: 8px; }
  select { font: 13px system-ui; padding: 6px 8px; border-radius: 8px; border: 0; }
</style>
<div class="wrap">
  <div class="bar">
    <select id="o" aria-label="Overlay">
      <option>none</option><option selected>beams</option><option>rays</option><option>light-leak</option><option>grain</option>
      <option>letterbox</option><option>vignette</option><option>scanlines</option><option>fog</option>
    </select>
    <select id="p" aria-label="Particles">
      <option selected>none</option><option>stars</option><option>warp</option><option>dust</option><option>snow</option>
      <option>embers</option><option>bokeh</option><option>fireflies</option><option>bubbles</option>
    </select>
  </div>
  <div id="s">
    <div><img data-bg src="https://picsum.photos/id/1018/1600/1000" alt="Mountains"></div>
    <div><img data-bg src="https://picsum.photos/id/1015/1600/1000" alt="Fjord"></div>
  </div>
</div>

<script type="module">
  const s = new InsigneSlider('#s', { overlay: 'beams', aspect: '16/9', autoplay: 5000 });
  const o = document.querySelector('#o');
  const p = document.querySelector('#p');
  o.onchange = p.onchange = () => s.update({ overlay: o.value, particles: p.value });
</script>

Loading preview…

Live previewEdit in playground →

Overlays

overlay: beams (soft sun rays), rays (a slowly turning fan of light), light-leak, grain (film grain), letterbox (cinema bars), vignette, scanlines, fog. CSS only — every animation is transform / opacity.

Particles

particles: stars, warp, dust, snow, embers, bokeh, fireflies, bubbles, with particleDensity (0.1–3). One 2D canvas with pre-rendered sprites; fewer particles at 30 fps on low-power devices. Changing slides gives the field a small gust; warp accelerates.

Scroll depth

scrollDepth (0–1): while the page scrolls, backgrounds and text move at different speeds. It composes with Ken Burns and layer animations because it uses the individual translate / scale properties.

Scroll-driven sliders

scrollDrive: true lets the page scroll move the slides — scroll-telling without another library. The slider glides toward the scroll position instead of stepping.