Fragment
Shader
Widget

Privacy Policy

No additional information is collected other than what Wix collects for usage and download data, which I have no control over.

Known Issues

There is a scaling issue inside the Wix Editor and this also affects the Section height, but when previewed or published on your website, it should display as expected. If not, just delete the Widget and try again once you have everything set.

Terms of Use

This App Widget software is being provided as-is and is purely experimental, by using this App Widget software you absolve the creator from any costs, losses, damages, or tech issues resulting from its use. This widget may or may not be updated in the future. Use at your own risk.

Important Notes

This is an experimental widget. It may or may not be updated in the future.
Use MUST remove all comments from your code.
GLSL can be picky. There are no failure checks, but if the screen is just showing black or white it means your shader code has an issue.
This uses three.js to render the shader on a fixed plane.

More Info

uniform float uTime; Already declared by the widget.
uniform vec2 uResolution; Already declared by the widget.
uTime is already declared as: this.uniforms.uTime.value += 0.01
Rendered on a full-screen quad. void main() { gl_Position = vec4(position, 1.0); }
Responsiveness is managed for you using ResizeObserver.
You only need to provide the pure pixel coloring logic (fragment shader body), while the widget handles all the surrounding Three.js infrastructure and GLSL boilerplate required to run it in a browser.

Default Shader

void main() {
vec2 uv = gl_FragCoord.xy / uResolution;
vec3 color = 0.5 + 0.5 * cos(uTime + uv.xyx + vec3(0, 2, 4));
gl_FragColor = vec4(color, 1.0);
}

How to Use

Easily drag and drop the widget into your webpage and paste in your shader code.
Be mindful to create shaders that have a high frame rate.
Avoid complex shaders.
You MUST remove all //comments or /*comments*/ from your shader code.
Use "void main()", "uTime", "uResolution", and "gl_FragColor." Standard for three.js.
Since the shader is applied to a full-screen quad, derive normalized UVs (0.0 to 1.0) from the pixel's screen position (gl_FragCoord) and the screen size (uResolution). Standard interpolated UVs (vUv) are not used in this setup.
For normalized UVs, use:

vec2 uv = gl_FragCoord.xy / uResolution;

Description

This is a WebGL GLSL Fragment Shader Widget for the Wix Studio Editor built on Three.js.
This widget is currently limited in scope. It is a Fragment Shader Renderer for Full-Screen Effects.
It does not support vertex shaders.
It is designed to be optimal for background section effects only.
YOU ARE DIRECTLY RESPONSIBLE for overall performance. Avoid complex shaders.

Updates

11-30-25: Submitted app for review and release.
11-29-25: Optimized some code and created a more detailed instructions panel.

Fragment Shader Widget for Wix Studio

This Wix Studio Block Widget provides the ability to add GLSL shaders to your Wix Studio editor while utilizing three.js.