Comment by rileyjshaw

I spent the weekend adding a new version with a web component export. Documentation is here[1]. A quick example:

  <shader-pad style="width: 320px; height: 480px">
    <img src="/trees.jpg" data-texture="u_trees" />
    <script type="x-shader/x-fragment">
      #version 300 es
      precision highp float;
      in vec2 v_uv;
      uniform float u_time;
      uniform sampler2D u_trees;
      out vec4 outColor;
      void main() {
        vec2 p = 2.0 * (v_uv - 0.5);
        float r = length(p);
        vec2 uv = 0.15 + v_uv * 0.7 + p * (0.1 + 0.025 * sin(u_time * 2.0)) * r;
        outColor = texture(u_trees, uv);
      }
    </script>
  </shader-pad>

Let me know if you have any feedback, or if you make something cool with it!

---

[1]: https://misery.co/shaderpad/docs/components/web-component/