STAY MINDFUL

TOOLS

SITE

OVERVIEW

Audio

GSLS

// Author: (you)
// Title: Cloud-Blue Waves

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

void main() {
    // -------------------------------------------------
    // 1. Centered, aspect-corrected coordinates (-1..1)
    // -------------------------------------------------
    vec2 uv = (2.0 * gl_FragCoord.xy - u_resolution.xy) /
               min(u_resolution.x, u_resolution.y);

    // -------------------------------------------------
    // 2. Multi-layer wavy distortion (cloud-like flow)
    // -------------------------------------------------
    vec2 p = uv;

    for (float i = 1.0; i < 8.0; i++) {          // fewer layers = softer
        float speed = 0.8;
        p.x += 0.5 / i * sin(i * 2.0 * p.y + u_time * speed);
        p.y += 0.5 / i * sin(i * 1.5 * p.x + u_time * speed);
    }

    // -------------------------------------------------
    // 3. Soft cloud colour (light-blue to white only)
    // -------------------------------------------------
    // Base vertical gradient – sky blue at bottom, white at top
    vec3 skyBlue = vec3(0.352,0.829,0.980);   // #BFEBFA
    vec3 white   = vec3(0.820,0.942,1.000);
    vec3 base    = mix(skyBlue, white, uv.y * 0.5 + 0.5); // -1..1 → 0..1

    // Gentle wave brightness (0.0 – 1.0, never dark)
    float wave = 0.5 + 0.5 * sin(p.x + p.y - u_time * 0.7);
    // Smoothstep makes transitions even softer
    wave = smoothstep(0.3, 0.7, wave);

    // Final colour: only brighten/whiten the base – no dark parts
    vec3 color = mix(base, white, wave * 0.6);   // max 60 % toward white

    gl_FragColor = vec4(color, 1.0);
}

SPLINE

<iframe src='https://my.spline.design/animatedbackgroundgradientforweb-Mxmc9jmBug0t0fe3eY83KKer/' frameborder='0' width='100%' height='100%'></iframe>

Remix Site