@razorpay/blade
Version:
The Design System that powers Razorpay
19 lines (14 loc) • 3.69 kB
JavaScript
var FLUID_GRADIENT_LOOP = 12.0;
// vec3 c0 = vec3(0.55, 0.95, 0.75);
// vec3 c1 = vec3(0.35, 0.90, 0.65);
// vec3 c2 = vec3(0.20, 0.88, 0.70);
// vec3 c3 = vec3(0.08, 0.82, 0.48);
// vec3 c4 = vec3(0.04, 0.68, 0.30);
// vec3 c0 = vec3(0.72, 0.92, 1.00); // light sky blue
// vec3 c1 = vec3(0.38, 0.72, 0.98); // cornflower blue
// vec3 c2 = vec3(0.16, 0.50, 0.92); // medium blue
// vec3 c3 = vec3(0.08, 0.30, 0.78); // deep royal blue
// vec3 c4 = vec3(0.10, 0.28, 0.72); // deep blue (not black)
var fragmentShader = /* glsl */"\nprecision mediump float;\n\nuniform float uTime; // pre-wrapped: mod(raw, LOOP)\nuniform vec2 iResolution;\nuniform vec2 uOrigin; // gradient origin in UV space (0,0)=top-left (1,1)=bottom-right\nvarying vec2 vUv;\n\n// Cubic smoothstep inside each segment \u2014 no kink at stop boundaries\nvec3 gradientColor(float t) {\n t = clamp(t, 0.0, 1.0);\n vec3 c0 = vec3(0.682, 0.957, 0.831); // 174, 244, 212\n vec3 c1 = vec3(0.310, 0.882, 0.620); // 79, 225, 158\n vec3 c2 = vec3(0.306, 0.973, 0.910); // 78, 248, 232\n vec3 c3 = vec3(0.004, 0.753, 0.443); // 1, 192, 113\n vec3 c4 = vec3(0.004, 0.753, 0.443); // 1, 192, 113\n float s;\n if (t < 0.25) { s = smoothstep(0.0,1.0, t/0.25); return mix(c0,c1,s); }\n if (t < 0.55) { s = smoothstep(0.0,1.0,(t-0.25)/0.30); return mix(c1,c2,s); }\n if (t < 0.80) { s = smoothstep(0.0,1.0,(t-0.55)/0.25); return mix(c2,c3,s); }\n s = smoothstep(0.0,1.0,(t-0.80)/0.20); return mix(c3,c4,s);\n}\n\n// Value noise\nfloat hash(vec2 p) { return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453); }\nfloat vnoise(vec2 p) {\n vec2 i = floor(p), f = fract(p);\n vec2 u = f*f*(3.0-2.0*f);\n return mix(mix(hash(i),hash(i+vec2(1,0)),u.x), mix(hash(i+vec2(0,1)),hash(i+vec2(1,1)),u.x),u.y);\n}\n\nvoid main() {\n // Envelope controls: how the gradient fades from center outward\n const float FADE_OUTER_EDGE = 1.4; // distance where gradient fully fades to black\n const float FADE_INNER_EDGE = 0.4; // distance where gradient is at full opacity\n\n vec2 uv = vUv - uOrigin;\n float angle = atan(uv.y, uv.x);\n float r = length(uv);\n\n // Warp: traces a circle in noise space \u2192 exactly periodic in LOOP seconds.\n // speed = 2\u03C0 * n / LOOP (n integer \u2192 1 full orbit per loop)\n float ws = 6.2832 / 12.0; // 2\u03C0/LOOP \u2014 1 orbit in LOOP s\n float ws2 = ws * 2.0; // 2 orbits in LOOP s\n float warp =\n vnoise(vec2(cos(angle)*1.4 + sin(uTime*ws )*2.0, sin(angle)*1.4 + cos(uTime*ws )*2.0)) * 0.50 +\n vnoise(vec2(cos(angle)*2.6 + sin(uTime*ws2)*1.2, sin(angle)*2.6 + cos(uTime*ws2)*1.2)) * 0.25;\n float organicR = r + (warp - 0.45) * 0.04;\n\n // Three wave sines \u2014 speeds are 2\u03C0*n/LOOP (n=3,2,1) \u2192 integer cycles in LOOP s.\n // Spatial frequencies are irrational ratios so they never phase-lock into\n // distinct bands; the result is one broad, shifting swell.\n float s1 = 6.2832 * 3.0 / 12.0; // 3 cycles in LOOP s\n float s2 = 6.2832 * 2.0 / 12.0; // 2 cycles\n float s3 = 6.2832 * 1.0 / 12.0; // 1 cycle\n float w =\n sin(organicR * 4.80 - uTime * s1) * 0.55 +\n sin(organicR * 2.55 - uTime * s2) * 0.30 +\n sin(organicR * 1.45 - uTime * s3) * 0.15;\n\n float phase = w * 0.5 + 0.5;\n vec3 color = gradientColor(phase);\n\n float envelope = smoothstep(FADE_OUTER_EDGE, FADE_INNER_EDGE, r);\n color = color * envelope;\n\n // Film grain effect\n float grain = hash(vUv * 500.0 + fract(uTime * 0.5)) * 2.0 - 1.0;\n color += grain * 0.0002;\n\n gl_FragColor = vec4(color, 1.0);\n}\n";
export { FLUID_GRADIENT_LOOP, fragmentShader };
//# sourceMappingURL=shader.js.map