Controls
Text
Font Size (px)
Flow Speed
0.6Turbulence (Freq)
9.5Distortion (Amp)
0.08Effect Radius
0.21Description
Features a "boiling" fluid simulation hidden beneath the text. Unlike a simple ripple, this effect creates complex, organic turbulence that only reveals itself when you interact with it.
The core of this effect is Domain Warping. Instead of distorting the image directly with a simple noise function, we distort the coordinate space of the noise itself. We start with a standard Fractal Brownian Motion (FBM) function, which layers multiple octaves of noise:
float fbm(vec2 p) {
float value = 0.0;
float amplitude = 0.5;
for (int i = 0; i < 3; i++) {
value += amplitude * noise(p);
p *= 2.0;
amplitude *= 0.5;
}
return value;
}
To create the swirling "boiling" motion, we don't just ask for fbm(uv). We ask for FBM of a coordinate that has already been distorted by another FBM calculation, which itself changes over time using sin (sine) and cos (cosine) functions. This recursive distortion creates the complex, cloud-like folding patterns:
vec2 q = vec2(fbm(p + vec2(cos(t), sin(t))), ...);
vec2 r = vec2(fbm(p + 4.0*q + ...), ...);
vec2 flow = (r - 0.4375) * 2.5;
Because this turbulence is chaotic, we don't want it applied everywhere. We use a Radial Mask based on the mouse position to ensure the text remains readable until touched. We calculate the distance dist from the cursor and use smoothstep to create a soft edge:
float mask = smoothstep(u_radius, u_radius * 0.2, dist);
vec2 distortion = flow * u_amplitude * mask;
Finally, we apply this masked distortion vector to our texture lookup. Where the mask is black (far from mouse), the offset is zero and the text is crisp. Where the mask is white (near mouse), the UVs are heavily twisted by our fluid simulation:
vec4 color = texture(u_texture, tc + distortion);