La Technique
Four excerpts, quoted from the shipping source.
I — The gold. Value-noise FBM, warped through itself twice (js/liquid.js, fragment shader)
float vnoise(vec2 p){
vec2 i = floor(p), f = fract(p);
vec2 u = f*f*f*(f*(f*6.-15.)+10.);
float a = hash(i), b = hash(i+vec2(1,0)), c = hash(i+vec2(0,1)), d = hash(i+vec2(1,1));
return mix(mix(a,b,u.x), mix(c,d,u.x), u.y);
}
const mat2 ROT = mat2(.80,.60,-.60,.80);
float fbm(vec2 p){
float v = 0., a = .53;
for(int i=0;i<5;i++){ v += a*vnoise(p); p = ROT*p*2.03 + 7.3; a *= .52; }
return v;
}
/* in main() — two rounds of domain warp, then the field */
float t1 = uT*.11, t2 = uT*.085;
vec2 q = vec2(fbm(p + vec2(0., t1)), fbm(p + vec2(4.7,1.3) - t1*.7));
vec2 r = vec2(fbm(p + 2.6*q + vec2(1.7,9.2) + t2), fbm(p + 2.6*q + vec2(8.3,2.8) - t2));
float f0 = fbm(p + 2.4*r);
The field f0 is pushed through a five-stop ramp (lacquer → deep → amber → gilt → candle). The marbling is the warp: q bends the space r is read in, and r bends the space the color is read in.
II — The parting. A rounded-box SDF around the H1, edge roughened by the same noise
vec2 tp = (css - uTitle.xy)/S;
float dT = sdRBox(tp, uTitle.zw/S, min(uTitle.w/S, .09));
dT += (fbm(tp*2.7 + vec2(3.1,7.7) + uT*.02) - .5)*.17; /* organic, breathing edge */
float part = (uTitle.z > 1.) ? (1. - smoothstep(-.02, .27, dT)) : 0.;
part *= heroP;
/* flow around the stone, not away from it: tangential advection,
confined to the boundary band so the void center has no pinch */
vec2 away = tp / max(length(tp), 1e-3);
vec2 tang = vec2(away.y, -away.x);
float band = part*part*(1.-part)*3.4;
p += (tang*.8 + away*.25) * band * .82;
float f = f0 * mix(1., .30, part); /* the liquid recedes under the name */
float rim = exp(-abs(dT - .045)*60.) * part;
col += GILT * rim * (.06 + .55*f0) * .5; /* a faint, broken meniscus */
The same code serves twice: uTitle is the hero plate, uFoot is the footer’s “Where time sets.” block. One brand behavior, two appearances.
III — Caustics & refraction. Fold ridges of the warp, and a gradient-shifted resample of the ramp
float fold = 1. - abs(2.*fbm(p*1.8 + 2.9*r) - 1.);
float caust = pow(clamp(fold, 0., 1.), 10.);
col += vec3(1., .82, .45) * caust * (.22 + .22*f) * (1.-.85*part) * (1.-.7*setF);
/* refraction faked by re-reading the color ramp offset by the warp
gradient — stays on the amber ramp, so the palette cannot leak */
float dsh = (r.x - q.y)*.16;
col = mix(col, ramp(clamp(f + dsh, 0., 1.)), .30);
IV — Viscosity. The clock itself thickens as you descend (JavaScript, per frame)
const maxScroll = Math.max(1, doc.scrollHeight - innerHeight);
const sc = Math.min(1, scrollY / maxScroll);
const vT = 1 - Math.pow(sc, 1.35); // target viscosity from scroll depth
visc += (vT - visc) * .06; // lerped, never raw
T += dt * (.05 + .95 * visc); // at the footer the clock nearly stops
The accord panels reuse the field through per-panel rect uniforms: hover eases a presence value up, a Gaussian around the cursor gathers the gold, and a differential rotation of the sample domain produces the swirl. Each accord tints the field to its note family — Lumière brighter, Résine deeper.