Component
Technical Specifications
-
Standard Uniforms are pre-declared and handled by the engine.
-
uTime (float) and uResolution (vec2)
-
-
Entry Points: Supports both standards.
-
void main() and ShaderToy's void mainImage()
-
-
Automatic Conversion: The engine automatically maps common ShaderToy variables (like iTime, iResolution, and fragColor) to WebGL standards.
-
Coordinate System: Shaders are rendered on a precision-optimized full-screen quad. Standard interpolated UVs (vUv) are not used. To derive normalized UVs (0.0 to 1.0), use:
-
vec2 uv = gl_FragCoord.xy / uResolution;
-
Privacy Policy
This widget operates entirely on the client-side (the visitor's browser). No personal data, shader code, or user configurations are transmitted to, stored by, or collected by the creator. All usage and download metrics are handled exclusively by the Wix platform in accordance with the Wix Privacy Policy.
Optimization & Performance
-
Frame Rate: Aim for shaders that maintain 60 FPS.
-
Test on mobile devices and 4k full screens to ensure a smooth experience for all visitors.
-
-
Complexity: While the engine is highly optimized, the user is responsible for GPU performance. Avoid excessive loops or heavy branching for mobile compatibility.
-
Resolution: Managed automatically via ResizeObserver for perfect responsiveness across all screen sizes.
Terms of Use
"AS-IS" WARRANTY: This software is provided "as-is" and "as-available," without warranty of any kind, express or implied, including but not limited to the warranties of merchantability or fitness for a particular purpose.
LIMITATION OF LIABILITY: In no event shall the creator (Mr. Tipton) be liable for any claim, damages, or other liability, whether in an action of contract, tort, or otherwise, arising from, out of, or in connection with the software or the use or other dealings in the software.
USE AT YOUR OWN RISK: The user assumes all responsibility for any costs, technical issues, or data loss resulting from the use of this widget. The creator is under no obligation to provide updates, maintenance, or technical support.
Coordinate Mapping (UVs)
Since the shader is applied to a precision-optimized full-screen quad, derive your normalized UV coordinates (0.0 to 1.0) directly from the pixel position. Standard interpolated UVs (vUv) are not required.
For normalized UVs, use:
-
vec2 uv = gl_FragCoord.xy / uResolution.xy;
Syntax & Uniforms
This player supports both Standard Fragment and ShaderToy syntax. It is compatible with common three.js and webglconventions.
-
Entry Point: Supports both void main() and void mainImage().
-
Time: Use uTime or iTime (float) for continuous animation.
-
Resolution: Use uResolution (vec2) or iResolution (vec3) for coordinate scaling.
-
Output: Use gl_FragColor or fragColor (vec4) to set the pixel color.
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
-
Drag & Drop: Add the component to your Section or Container.
-
Choose a preset shader or paste your shader code into the Shader Code property inside the Edit Panel.
-
For a distraction-free workspace, toggle Play while designing in the editor.
-
Use the Edit Panel to toggle Bloom intensity, adjust thresholds, or pause motion while you work.
-
You MUST remove any //Comments or /*Comment Blocks*/ before inputting your shader code.
Description
-
Supports standard GLSL, ShaderToy (mainImage), and FragCoord.xyz (main) formats.
-
Use uResolution (vec2) or iResolution (vec3) for coordinate normalization.
-
Use uTime or iTime (float) for animations.
-
Includes a built-in Bloom/Glow pipeline that can be toggled via the Editor Panel.
-
Optimized with a single-triangle strip to maximize GPU efficiency and minimize draw calls.
-
It is designed to be optimal for background section effects.
-
YOU ARE DIRECTLY RESPONSIBLE for overall performance. Avoid complex shaders. Watch your frame rate!
Updates
-
3-18-26: The Shader Component is live on the Wix App Market.
-
3-14-26: Completely rebuilt to remove dependency on three.js and utilize the canvas element directly for performance gains.
-
11-30-25: Submitted app for review and release.
-
11-29-25: Optimized some code and created a more detailed instructions panel.
