Orb shader for WebGL

Copy embed gives one block to paste into any page or site builder, no setup. For your own code: add orb.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="orb" style="width: 320px; height: 320px;"></ittybitty-shader>

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

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

  const canvas = document.getElementById('orb');
  const effect = orb(canvas, {
    showOrb: true,
    showHalo: true,
    speed: 0.6,
    size: 0.32,
    energy: 1,
    turbulence: 0.6,
    rim: 0.6,
    glow: 0.5,
    level: 0,
    style: 'sphere',
    interactive: true,
    responsiveness: 0.5,
    palette: [[0, '#3b2bff'], [0.45, '#b04bff'], [0.75, '#ff6fb1'], [1, '#ffd0a8']],
    // Performance
    dpr: 1.5,
    adaptive: true,
  });

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

Orb

Code

Details