<shader-doodle> is one: https://github.com/halvves/shader-doodle but it hasn't been updated in a long time and I think builds to UMD
<shaderview> is a newer one with a nice site, but I haven't used it: https://keithclark.github.io/shaderview/
<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>
---
[1]: https://misery.co/shaderpad/docs/components/web-component/
Give me a few days and check back in.