Liquid text

<!-- The GLSL, then the script. Page settings → Before </body> tag. --> <script id="frag" type="x-shader/x-fragment"> precision mediump float; varying vec2 vUv; uniform sampler2D uTex; uniform vec2 uPointer, uRes; uniform float uHover, uVel, uTime; uniform vec3 uFg, uBg; void main() { vec2 uv = vUv; // Aspect-correct, or the ripple is an ellipse on a wide canvas. vec2 p = uv - uPointer; p.x *= uRes.x / uRes.y; float d = length(p); float ring = smoothstep(0.36, 0.0, d); uv += normalize(p + 1e-5) * sin(d * 26.0 - uTime * 3.2) * 0.014 * ring * uHover; uv.x += sin(uv.y * 3.14159) * uVel * 0.045; // scroll shear float shift = 0.005 * ring * uHover + abs(uVel) * 0.006; // White text on black: the red channel IS the mask. No alpha anywhere. float mr = texture2D(uTex, uv + vec2(shift, 0.0)).r; float mg = texture2D(uTex, uv).r; float mb = texture2D(uTex, uv - vec2(shift, 0.0)).r; vec3 col = uBg; col.r = mix(uBg.r, uFg.r, mr); col.g = mix(uBg.g, uFg.g, mg); col.b = mix(uBg.b, uFg.b, mb); gl_FragColor = vec4(col, 1.0); } </script> <script> document.addEventListener("DOMContentLoaded", () => { gsap.registerPlugin(ScrollTrigger); if (matchMedia("(prefers-reduced-motion: reduce)").matches) return; const stage = document.querySelector(".type_stage"); const canvas = stage.querySelector("canvas"); const source = stage.querySelector(".type_heading"); const LINES = source.textContent.trim().split(" ").length > 2 ? ["Anvil", "Type Foundry"] : [source.textContent.trim()]; const gl = canvas.getContext("webgl", { antialias: false, alpha: false }); if (!gl) return; // heading stays visible. Done. /* … compile, link, full-screen triangle, uniforms — see the WebGL distortion lesson; the boilerplate is identical … */ // ── rasterise the type ──────────────────────────────────────────────── const text = document.createElement("canvas"); const tctx = text.getContext("2d"); function drawText() { const dpr = Math.min(devicePixelRatio || 1, 2); const w = text.width = Math.max(1, Math.round(canvas.clientWidth * dpr)); const h = text.height = Math.max(1, Math.round(canvas.clientHeight * dpr)); tctx.fillStyle = "#000"; tctx.fillRect(0, 0, w, h); // Read the font off the hidden heading. The canvas then cannot disagree // with the stylesheet about family, weight or style — ever. const cs = getComputedStyle(source); const REF = 100; // measure, then scale tctx.font = cs.fontStyle + " " + cs.fontWeight + " " + REF + "px " + cs.fontFamily; const widest = Math.max(...LINES.map(l => tctx.measureText(l).width)); const lineH = 0.94; const size = Math.min((w * 0.9 / widest) * REF, (h * 0.86) / (LINES.length * lineH)); tctx.font = cs.fontStyle + " " + cs.fontWeight + " " + size + "px " + cs.fontFamily; tctx.fillStyle = "#fff"; tctx.textAlign = "center"; tctx.textBaseline = "middle"; const block = LINES.length * size * lineH; LINES.forEach((l, i) => tctx.fillText(l, w / 2, h / 2 - block / 2 + size * lineH * (i + 0.5))); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, text); } // Fonts FIRST. Rasterise before the webfont lands and the canvas shows // the fallback typeface for the rest of the session. document.fonts.ready.then(() => { resize(); // sets viewport + uRes, then calls drawText stage.dataset.gl = "on"; // only NOW is the heading clipped away const p = { x: 0.5, y: 0.5, hover: 0, vel: 0 }; const toX = gsap.quickTo(p, "x", { duration: 0.5, ease: "power3" }); const toY = gsap.quickTo(p, "y", { duration: 0.5, ease: "power3" }); const toH = gsap.quickTo(p, "hover", { duration: 0.6, ease: "power2" }); const toV = gsap.quickTo(p, "vel", { duration: 0.6, ease: "power3.out" }); stage.addEventListener("mousemove", e => { const r = stage.getBoundingClientRect(); toX((e.clientX - r.left) / r.width); toY(1 - (e.clientY - r.top) / r.height); // WebGL's Y runs upward toH(1); }); stage.addEventListener("mouseleave", () => toH(0)); ScrollTrigger.create({ onUpdate: self => toV(gsap.utils.clamp(-1, 1, self.getVelocity() / 2600)) }); // One ticker. GSAP owns every value; the shader only draws. gsap.ticker.add(time => { gl.uniform2f(uPointer, p.x, p.y); gl.uniform1f(uHover, p.hover); gl.uniform1f(uVel, p.vel); gl.uniform1f(uTime, time); gl.drawArrays(gl.TRIANGLES, 0, 3); }); }); new ResizeObserver(() => { resize(); }).observe(canvas); }); </script>