Rays shader for WebGL

Copy embed gives one block to paste into any page or site builder, no setup. For your own code: add rays.js, ittybitty-shader.js, runtime.js, pointer.js next to this page. Highlighted values follow the controls.

<!-- Quickest: one element. Size it with CSS; it fills its box. -->
<script type="module" src="./ittybitty-shader.js"></script>
<ittybitty-shader effect="rays" style="width: 100%; height: 480px;"></ittybitty-shader>

<!-- Or with JavaScript, for full control: -->
<canvas id="rays" aria-hidden="true" style="width: 100%; height: 480px; display: block"></canvas>

<script type="module">
  import { rays } from './rays.js';

  const canvas = document.getElementById('rays');
  const effect = rays(canvas, {
    showBackground: true,
    speed: 0.4,
    intensity: 0.9,
    originX: 0.25,
    originY: -0.2,
    spread: 0.5,
    softness: 0.6,
    length: 0.5,
    palette: 'solid',
    color: '#fff1dc',
    gradient: [[0, '#ffb38a'], [0.5, '#fff1dc'], [1, '#9cc3ff']],
    style: 'shafts',
    interactive: false,
    responsiveness: 0.5,
    background: '#101114',
    // Performance
    dpr: 1.5,
    adaptive: true,
  });

  // Later: effect.set(…), effect.pause(), effect.resume(), effect.destroy()
</script>

Rays

Code

Details