JSFiddle - React, Tailwind, and code Playground

by HDL52

HTML

<script src="https://unpkg.com/kokomi.js/build/kokomi.umd.js"></script>
<shader-toy>
    <script type="frag"></script>
</shader-toy>

CSS

body {
  margin: 0;
  background: black;
}

JavaScript

document.querySelector('[type=frag]').textContent = /* glsl */ `
  void mainImage(out vec4 fragColor, in vec2 fragCoord) {
      vec2 uv = fragCoord / iResolution.xy;
      fragColor = vec4(uv.x, 0.0, 0.0, 1.0);
  }
  `;

kokomi.ShaderToyElement.register();