Liquid Metal shader for WebGL

Copy embed gives one block to paste into any page or site builder, no setup. For your own code: add liquid-metal.js, ittybitty-shader.js, runtime.js, pointer.js, shape.js, texture.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="liquid-metal" style="width: 100%; height: 480px;"></ittybitty-shader>

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

<script type="module">
  import { liquidMetal } from './liquid-metal.js';

  const canvas = document.getElementById('liquid-metal');
  const effect = liquidMetal(canvas, {
    speed: 0.35,
    scale: 1,
    flow: 0.9,
    contrast: 1.1,
    warmth: 0.5,
    form: 'fill',
    vector: 'itty',
    font: '',
    finish: 'chrome',
    interactive: true,
    responsiveness: 0.5,
    palette: [[0, '#10131f'], [0.5, '#6a4bff'], [1, '#ffd9f0']],
    tint: '#c9ccd6',
    // Performance
    dpr: 1.25,
    adaptive: true,
  });

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

Liquid Metal

Code

Details