#version 300 es precision highp float; uniform vec2 u_resolution; uniform float u_time; uniform float u_pixelRatio; uniform vec4 u_colors[8]; uniform int u_colors_length; uniform float u_seed; uniform float u_speed; uniform float u_loop; uniform float u_scale; uniform float u_turbAmp; uniform float u_turbFreq; uniform float u_turbIter; uniform float u_waveFreq; uniform float u_distBias; uniform float u_jellify; uniform float u_ditherMode; uniform float u_dither; uniform float u_exposure; uniform float u_contrast; uniform float u_saturation; uniform float u_progress; uniform float u_revealDir; uniform float u_revealWidth; uniform float u_revealScaleX; uniform float u_revealScaleY; uniform float u_revealNoise; uniform float u_revealSoft; uniform float u_revealSpeed; uniform float u_alphaReveal; in vec2 v_uv; out vec4 fragColor; // === CONSTANTS === const float GOLDEN_ANGLE = 2.3999632; const float TAU = 6.28318530; // === PCG hash - https://www.jcgt.org/published/0009/03/02/ uvec3 hash3(uvec3 v) { v = v * 1664525u + 1013904223u; v.x += v.y * v.z; v.y += v.z * v.x; v.z += v.x * v.y; v ^= v >> 16u; v.x += v.y * v.z; v.y += v.z * v.x; v.z += v.x * v.y; return v; } // Seed vec3 seedRandom(float seedVal) { uvec3 s = uvec3( floatBitsToUint(seedVal), floatBitsToUint(seedVal * 1.5 + 7.31), floatBitsToUint(seedVal * 2.7 + 13.37) ); s = hash3(s); return vec3(s) / float(0xFFFFFFFFu); } // === COLOR SPACE UTILITIES === vec3 toLinear(vec3 c) { return pow(c, vec3(2.2)); } vec3 toSrgb(vec3 c) { return pow(clamp(c, 0.0, 1.0), vec3(0.4545)); } vec3 linearToOklab(vec3 c) { float l = 0.4122214708 * c.r + 0.5363325363 * c.g + 0.0514459929 * c.b; float m = 0.2119034982 * c.r + 0.6806995451 * c.g + 0.1073969566 * c.b; float s = 0.0883024619 * c.r + 0.2817188376 * c.g + 0.6299787005 * c.b; l = pow(max(l, 0.0), 1.0/3.0); m = pow(max(m, 0.0), 1.0/3.0); s = pow(max(s, 0.0), 1.0/3.0); return vec3( 0.2104542553 * l + 0.7936177850 * m - 0.0040720468 * s, 1.9779984951 * l - 2.4285922050 * m + 0.4505937099 * s, 0.0259040371 * l + 0.7827717662 * m - 0.8086757660 * s ); } vec3 oklabToLinear(vec3 c) { float l = c.x + 0.3963377774 * c.y + 0.2158037573 * c.z; float m = c.x - 0.1055613458 * c.y - 0.0638541728 * c.z; float s = c.x - 0.0894841775 * c.y - 1.2914855480 * c.z; l = l * l * l; m = m * m * m; s = s * s * s; return vec3( +4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s, -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s, -0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s ); } vec3 oklabToLch(vec3 lab) { return vec3(lab.x, length(lab.yz), atan(lab.z, lab.y)); } vec3 lchToOklab(vec3 lch) { return vec3(lch.x, lch.y * cos(lch.z), lch.y * sin(lch.z)); } vec3 mixLch(vec3 lab0, vec3 lab1, float t) { vec3 lch0 = oklabToLch(lab0); vec3 lch1 = oklabToLch(lab1); if (lch0.y < 0.05) lch0.z = lch1.z; if (lch1.y < 0.05) lch1.z = lch0.z; float dh = lch1.z - lch0.z; if (dh > 3.14159265) dh -= 6.28318530; if (dh < -3.14159265) dh += 6.28318530; return lchToOklab(vec3( mix(lch0.x, lch1.x, t), mix(lch0.y, lch1.y, t), lch0.z + dh * t )); } // === PALETTE SAMPLING === vec3 getColor(int idx) { if (u_colors_length < 1) return vec3(0.0); int safeIdx = clamp(idx, 0, u_colors_length - 1); return u_colors[safeIdx].rgb; } vec3 paletteN(float t, int count) { if (count < 1) return vec3(0.0); if (count < 2) return toLinear(getColor(0)); float segmentSize = 1.0 / float(count - 1); t = clamp(t, 0.0, 1.0); int idx = min(int(floor(t / segmentSize)), count - 2); float localT = clamp((t - float(idx) * segmentSize) / segmentSize, 0.0, 1.0); vec3 lab0 = linearToOklab(toLinear(getColor(idx))); vec3 lab1 = linearToOklab(toLinear(getColor(idx + 1))); return oklabToLinear(mixLch(lab0, lab1, localT)); } // === DITHER === float IGN(vec2 uv) { return fract(52.9829189 * fract(dot(uv, vec2(0.06711056, 0.00583715)))); } float quickNoise(vec2 I) { return fract(sin(dot(I, vec2(12.9898, 78.233))) * 43758.5453); } // Dither Mode: 0=Off, 1=IGN, 2=quickNoise float getDither(vec2 I, float mode) { if (mode < 0.5) return 0.5; // 0: Off if (mode < 1.5) return IGN(I); // 1: Smooth return quickNoise(I); // 2: Grain } // === POST-PROCESS === vec3 softGamutMap(vec3 linearRgb) { float maxC = max(linearRgb.r, max(linearRgb.g, linearRgb.b)); float minC = min(linearRgb.r, min(linearRgb.g, linearRgb.b)); if (minC >= 0.0 && maxC <= 1.0) return linearRgb; vec3 lab = linearToOklab(max(linearRgb, 0.0)); float L = clamp(lab.x, 0.0, 1.0); float C = length(lab.yz); float h = atan(lab.z, lab.y); float maxChroma = 0.4 * (1.0 - pow(abs(2.0 * L - 1.0), 2.0)); if (C > maxChroma * 0.7) { float knee = maxChroma * 0.7; C = knee + (maxChroma - knee) * tanh((C - knee) / (maxChroma - knee + 0.001)); } return clamp(oklabToLinear(vec3(L, C * cos(h), C * sin(h))), 0.0, 1.0); } vec3 applyContrastSaturation(vec3 linearRgb, float contrast, float saturation) { vec3 lab = linearToOklab(linearRgb); float C = length(lab.yz); float h = atan(lab.z, lab.y); lab.x = clamp((lab.x - 0.5) * contrast + 0.5, 0.0, 1.0); C *= saturation; lab.y = C * cos(h); lab.z = C * sin(h); return oklabToLinear(lab); } // === WHITE-REVEAL NOISE (Classic Perlin 4D, Stefan Gustavson) === vec4 permute(vec4 x) { return mod(((x * 34.0) + 1.0) * x, 289.0); } vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; } vec4 fade(vec4 t) { return t * t * t * (t * (t * 6.0 - 15.0) + 10.0); } float cnoise(vec4 P) { vec4 Pi0 = floor(P); vec4 Pi1 = Pi0 + 1.0; Pi0 = mod(Pi0, 289.0); Pi1 = mod(Pi1, 289.0); vec4 Pf0 = fract(P); vec4 Pf1 = Pf0 - 1.0; vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x); vec4 iy = vec4(Pi0.yy, Pi1.yy); vec4 iz0 = vec4(Pi0.zzzz); vec4 iz1 = vec4(Pi1.zzzz); vec4 iw0 = vec4(Pi0.wwww); vec4 iw1 = vec4(Pi1.wwww); vec4 ixy = permute(permute(ix) + iy); vec4 ixy0 = permute(ixy + iz0); vec4 ixy1 = permute(ixy + iz1); vec4 ixy00 = permute(ixy0 + iw0); vec4 ixy01 = permute(ixy0 + iw1); vec4 ixy10 = permute(ixy1 + iw0); vec4 ixy11 = permute(ixy1 + iw1); vec4 gx00 = ixy00 / 7.0; vec4 gy00 = floor(gx00) / 7.0; vec4 gz00 = floor(gy00) / 6.0; gx00 = fract(gx00) - 0.5; gy00 = fract(gy00) - 0.5; gz00 = fract(gz00) - 0.5; vec4 gw00 = vec4(0.75) - abs(gx00) - abs(gy00) - abs(gz00); vec4 sw00 = step(gw00, vec4(0.0)); gx00 -= sw00 * (step(0.0, gx00) - 0.5); gy00 -= sw00 * (step(0.0, gy00) - 0.5); vec4 gx01 = ixy01 / 7.0; vec4 gy01 = floor(gx01) / 7.0; vec4 gz01 = floor(gy01) / 6.0; gx01 = fract(gx01) - 0.5; gy01 = fract(gy01) - 0.5; gz01 = fract(gz01) - 0.5; vec4 gw01 = vec4(0.75) - abs(gx01) - abs(gy01) - abs(gz01); vec4 sw01 = step(gw01, vec4(0.0)); gx01 -= sw01 * (step(0.0, gx01) - 0.5); gy01 -= sw01 * (step(0.0, gy01) - 0.5); vec4 gx10 = ixy10 / 7.0; vec4 gy10 = floor(gx10) / 7.0; vec4 gz10 = floor(gy10) / 6.0; gx10 = fract(gx10) - 0.5; gy10 = fract(gy10) - 0.5; gz10 = fract(gz10) - 0.5; vec4 gw10 = vec4(0.75) - abs(gx10) - abs(gy10) - abs(gz10); vec4 sw10 = step(gw10, vec4(0.0)); gx10 -= sw10 * (step(0.0, gx10) - 0.5); gy10 -= sw10 * (step(0.0, gy10) - 0.5); vec4 gx11 = ixy11 / 7.0; vec4 gy11 = floor(gx11) / 7.0; vec4 gz11 = floor(gy11) / 6.0; gx11 = fract(gx11) - 0.5; gy11 = fract(gy11) - 0.5; gz11 = fract(gz11) - 0.5; vec4 gw11 = vec4(0.75) - abs(gx11) - abs(gy11) - abs(gz11); vec4 sw11 = step(gw11, vec4(0.0)); gx11 -= sw11 * (step(0.0, gx11) - 0.5); gy11 -= sw11 * (step(0.0, gy11) - 0.5); vec4 g0000 = vec4(gx00.x, gy00.x, gz00.x, gw00.x); vec4 g1000 = vec4(gx00.y, gy00.y, gz00.y, gw00.y); vec4 g0100 = vec4(gx00.z, gy00.z, gz00.z, gw00.z); vec4 g1100 = vec4(gx00.w, gy00.w, gz00.w, gw00.w); vec4 g0010 = vec4(gx10.x, gy10.x, gz10.x, gw10.x); vec4 g1010 = vec4(gx10.y, gy10.y, gz10.y, gw10.y); vec4 g0110 = vec4(gx10.z, gy10.z, gz10.z, gw10.z); vec4 g1110 = vec4(gx10.w, gy10.w, gz10.w, gw10.w); vec4 g0001 = vec4(gx01.x, gy01.x, gz01.x, gw01.x); vec4 g1001 = vec4(gx01.y, gy01.y, gz01.y, gw01.y); vec4 g0101 = vec4(gx01.z, gy01.z, gz01.z, gw01.z); vec4 g1101 = vec4(gx01.w, gy01.w, gz01.w, gw01.w); vec4 g0011 = vec4(gx11.x, gy11.x, gz11.x, gw11.x); vec4 g1011 = vec4(gx11.y, gy11.y, gz11.y, gw11.y); vec4 g0111 = vec4(gx11.z, gy11.z, gz11.z, gw11.z); vec4 g1111 = vec4(gx11.w, gy11.w, gz11.w, gw11.w); vec4 norm00 = taylorInvSqrt(vec4(dot(g0000, g0000), dot(g0100, g0100), dot(g1000, g1000), dot(g1100, g1100))); g0000 *= norm00.x; g0100 *= norm00.y; g1000 *= norm00.z; g1100 *= norm00.w; vec4 norm01 = taylorInvSqrt(vec4(dot(g0001, g0001), dot(g0101, g0101), dot(g1001, g1001), dot(g1101, g1101))); g0001 *= norm01.x; g0101 *= norm01.y; g1001 *= norm01.z; g1101 *= norm01.w; vec4 norm10 = taylorInvSqrt(vec4(dot(g0010, g0010), dot(g0110, g0110), dot(g1010, g1010), dot(g1110, g1110))); g0010 *= norm10.x; g0110 *= norm10.y; g1010 *= norm10.z; g1110 *= norm10.w; vec4 norm11 = taylorInvSqrt(vec4(dot(g0011, g0011), dot(g0111, g0111), dot(g1011, g1011), dot(g1111, g1111))); g0011 *= norm11.x; g0111 *= norm11.y; g1011 *= norm11.z; g1111 *= norm11.w; float n0000 = dot(g0000, Pf0); float n1000 = dot(g1000, vec4(Pf1.x, Pf0.yzw)); float n0100 = dot(g0100, vec4(Pf0.x, Pf1.y, Pf0.zw)); float n1100 = dot(g1100, vec4(Pf1.xy, Pf0.zw)); float n0010 = dot(g0010, vec4(Pf0.xy, Pf1.z, Pf0.w)); float n1010 = dot(g1010, vec4(Pf1.x, Pf0.y, Pf1.z, Pf0.w)); float n0110 = dot(g0110, vec4(Pf0.x, Pf1.yz, Pf0.w)); float n1110 = dot(g1110, vec4(Pf1.xyz, Pf0.w)); float n0001 = dot(g0001, vec4(Pf0.xyz, Pf1.w)); float n1001 = dot(g1001, vec4(Pf1.x, Pf0.yz, Pf1.w)); float n0101 = dot(g0101, vec4(Pf0.x, Pf1.y, Pf0.z, Pf1.w)); float n1101 = dot(g1101, vec4(Pf1.xy, Pf0.z, Pf1.w)); float n0011 = dot(g0011, vec4(Pf0.xy, Pf1.zw)); float n1011 = dot(g1011, vec4(Pf1.x, Pf0.y, Pf1.zw)); float n0111 = dot(g0111, vec4(Pf0.x, Pf1.yzw)); float n1111 = dot(g1111, Pf1); vec4 fade_xyzw = fade(Pf0); vec4 n_0w = mix(vec4(n0000, n1000, n0100, n1100), vec4(n0001, n1001, n0101, n1101), fade_xyzw.w); vec4 n_1w = mix(vec4(n0010, n1010, n0110, n1110), vec4(n0011, n1011, n0111, n1111), fade_xyzw.w); vec4 n_zw = mix(n_0w, n_1w, fade_xyzw.z); vec2 n_yzw = mix(n_zw.xy, n_zw.zw, fade_xyzw.y); float n_xyzw = mix(n_yzw.x, n_yzw.y, fade_xyzw.x); return 2.2 * n_xyzw; } float parabola(float x, float k) { return pow(4.0 * x * (1.0 - x), k); } // === MAIN === void main() { vec2 fragCoord = v_uv * u_resolution; vec2 r = u_resolution; vec2 p = (fragCoord * 2.0 - r) / r.y; int colorCount = u_colors_length; // Early out: no colors -> black if (colorCount < 1) { fragColor = vec4(0.0, 0.0, 0.0, 1.0); return; } float t = u_time * 0.3; // Map time onto a circle so animation seamlessly wraps. float looping = step(0.5, u_loop); float phase = TAU * u_time / max(u_loop, 0.01); float radius = u_loop * u_speed * 0.3 / TAU; float tA = sin(phase) * radius; float tB = (1.0 - cos(phase)) * radius; // Seed-based offsets vec3 seedOffset = seedRandom(u_seed); vec3 seedOffset2 = seedRandom(u_seed + 100.0); // Golden angle rotation float seedAngle = u_seed * GOLDEN_ANGLE; vec2 seedPhase = (seedOffset2.xy - 0.5) * TAU; // Seed-based rotation float cs = cos(seedAngle); float sn = sin(seedAngle); p = mat2(cs, -sn, sn, cs) * p; // Get dither value float dither = getDither(floor(fragCoord / u_pixelRatio), u_ditherMode); // === TURBULENCE === float totalVal = 0.0; float totalWeight = 0.0; int turbIter = int(u_turbIter); float freq = 1.0 / max(u_turbFreq, 0.01); for (float i = 0.0; i < 4.0; i++) { float eph = i / 4.0; vec2 q = p * u_scale; float sq = eph * eph; if (u_jellify > 0.5) { q.yx *= mix(1.0, 0.5, 1.0 - exp(-sq)); } float a = seedPhase.x; float d = seedPhase.y; for (int j = 2; j < 13; j++) { if (j >= turbIter) break; float fj = float(j); // When looping, use circular time. Otherwise original t. float t1 = mix(t * u_speed, tA, looping); float t2 = mix(t * u_speed, tB, looping); q += u_turbAmp * sin(q.yx / freq * fj + t1 + vec2(a, d) + seedOffset.xy * fj) / fj; a += cos(fj + d * 1.2 + q.x * 2.0 - t1 + seedOffset2.z + t2 * 0.3 * looping); d += sin(fj * q.y + a + seedOffset.z + t1 + seedOffset2.y + t2 * 0.3 * looping); } float v = 0.5 + 0.5 * sin(length(q.yx + vec2(a, d) * 0.2) * u_waveFreq + i * i + seedOffset.x); float weight = smoothstep(0.0, 0.5, eph) * smoothstep(1.0, 0.5, eph); totalVal += v * weight; totalWeight += weight; } float val = totalVal / totalWeight; val = clamp((val - 0.3) / 0.4, 0.0, 1.0); val = pow(val, exp(-u_distBias)); val = clamp(val + (dither - 0.5) * u_dither, 0.0, 1.0); vec3 col = paletteN(val, colorCount); col *= u_exposure; col = applyContrastSaturation(col, u_contrast, u_saturation); col = softGamutMap(col); col = toSrgb(col); // === WHITE REVEAL (organic dissolve, bottom -> top) === // A static Perlin field modulates a sweeping band, so white dissolves into the // colours in organic islands and tongues. The noise has no time term on purpose: // the dissolve pattern stays put while only the threshold rises, which keeps the // transition organic but calm (no jitter). parabola() pins both ends perfectly clean. float pr = clamp(u_progress, 0.0, 1.0); float dt = parabola(pr, 1.0); float axis = mix(v_uv.y, 1.0 - v_uv.y, clamp(u_revealDir, 0.0, 1.0)); // dir 1 = bottom-first, 0 = top-first // Drift through the noise field's 4th dimension so the mask morphs softly in // place (blobs grow/merge like a lava lamp). u_revealSpeed 0 = static. float realnoise = 0.5 * (cnoise(vec4(v_uv.x * u_revealScaleX, v_uv.y * u_revealScaleY, 0.0, u_time * u_revealSpeed)) + 1.0); float w = max(u_revealWidth * dt, 1e-4); // avoid the degenerate zero-width smoothstep at the ends float maskvalue = smoothstep(1.0 - w, 1.0, axis + mix(-w * 0.5, 1.0 - w * 0.5, pr)); float mask = maskvalue + maskvalue * realnoise * u_revealNoise; float final = smoothstep(1.0, 1.0 + max(u_revealSoft, 0.001), mask); // Guarantee a perfectly white end state: noise troughs sit at mask == 1.0 exactly, // which the threshold above maps to 0 (colour). Fill those in over the last sliver of // progress so progress == 1 is fully white (safe to pause rendering) without touching // the tuned mid-transition look. final = max(final, smoothstep(0.9, 1.0, pr)); if (u_alphaReveal > 0.5) { // Reveal als Transparenz (statt Weiss): "unenthüllt" = durchsichtig. // So kann ein fixierter Gradient als Overlay liegen und den Inhalt // darunter zeigen, bis die Farbe ihn von unten überdeckt. // RGB mit Alpha vormultipliziert (premultiplied) ausgeben – sonst // compositet iOS-Safari den fixierten, halbtransparenten Canvas additiv // über den Inhalt (falscher Blend/Schimmer auf dem Büro-Bild). Auf // korrekten Compositorn ist das Ergebnis identisch (col*a + bg*(1-a)). float a = 1.0 - final; fragColor = vec4(col * a, a); } else { col = mix(col, vec3(1.0), final); fragColor = vec4(col, 1.0); } }

H E A R T

Crafting Possibility.