# Shader badges — complete build prompt Build an announcement badge: a black pill with a small chip at its left end and a sentence after it. The chip is a live, animated material — smoke, woven satin, or grainy blur — with a short word on top of it (`New`, `1500+`, `$4.99`). ``` ┌──────────────────────────────────────────┐ │ ┌───────┐ │ │ │▓▒New░▓│ UI Vision is now available │ │ └───────┘ │ └──────────────────────────────────────────┘ ↑ chip: WebGL field, animated ``` Stack: **Next.js (App Router) + TypeScript + Tailwind v4**. No dependencies — raw WebGL1, one fragment shader per material. Three files: 1. `badge-shaders.ts` — the materials. GLSL strings, a preset list, and a CSS fallback per preset. 2. `badge-renderer.ts` — one shared WebGL context that draws every badge on the page. 3. `badge.tsx` — `"use client"`. The pill, the chip, the word. --- # The one decision that shapes everything else **One WebGL context for the whole page, not one per badge.** A browser hands out about sixteen WebGL contexts, then starts killing the oldest one — which goes blank, silently. Badges come in rows: a changelog, a list of launches, a grid of cards. A canvas-per-badge implementation works in the demo and breaks on the twelfth badge in production. So: one off-screen WebGL canvas, owned by a module. Each badge owns a plain **2D** canvas (these have no budget). Every frame, for each visible badge: set the viewport to that chip's size, set its uniforms, draw, then `drawImage` the result onto the badge's 2D canvas. The copy happens in the same task as the draw, before compositing, so the buffer is intact without `preserveDrawingBuffer`. --- # Part 1 — `badge-shaders.ts` ## Presets ```ts export const badgePresets = ["smoke", "satin", "blur"] as const; export type BadgePreset = (typeof badgePresets)[number]; ``` ## Coordinates — normalise to height, not width ```glsl vec2 uv = gl_FragCoord.xy / uResolution.y; float aspect = uResolution.x / uResolution.y; ``` The chip is sized by its word, so its width varies (`New` vs `1500+`) while its height does not. Normalised to height, a longer chip shows *more* of the field. Normalised to width, the field stretches every time the word gets longer. ## Vertex shader ```glsl attribute vec2 aPos; void main() { gl_Position = vec4(aPos, 0.0, 1.0); } ``` Drawn as **one triangle** `[-1,-1, 3,-1, -1,3]` covering the viewport — no quad, no diagonal seam. ## Shared head (prepended to every material) ```glsl precision highp float; uniform vec2 uResolution; uniform float uTime; uniform float uSeed; // 0..1, different per badge float hash(vec2 p) { return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123); } float noise(vec2 p) { vec2 i = floor(p), f = fract(p); vec2 u = f * f * (3.0 - 2.0 * f); 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); } // Three octaves. More detail averages out in a 30px chip anyway. float fbm(vec2 p) { float v = 0.0, a = 0.5; for (int i = 0; i < 3; i++) { v += a * noise(p); p *= 2.0; a *= 0.5; } return v; } // Noise warped by noise, twice: filaments instead of blobs. // Returns the field in .x and the first warp in .yz (useful for tinting). vec3 warp(vec2 p, float t, float k) { vec2 q = vec2(fbm(p + vec2(0.0, t * 0.07)), fbm(p + vec2(5.2, 1.3) - t * 0.05)); vec2 r = vec2(fbm(p + k * q + vec2(1.7, 9.2) + t * 0.04), fbm(p + k * q + vec2(8.3, 2.8) - t * 0.03)); return vec3(fbm(p + k * r), q); } ``` Each material's `main()` starts with: ```glsl vec2 uv = gl_FragCoord.xy / uResolution.y; float aspect = uResolution.x / uResolution.y; float t = uTime; vec2 o = vec2(uSeed * 13.7, uSeed * 7.3); // per-badge offset into the field ``` ## Material — `smoke` (cream smoke on navy, stippled, with a glint) ```glsl vec3 w = warp(uv * vec2(0.55, 1.15) + o + vec2(t * 0.14, 0.0), t * 2.4, 2.0); float f = smoothstep(0.26, 0.70, w.x); // Grain added BEFORE the colour ramp: stipple, not film grain. float grain = hash(gl_FragCoord.xy + o * 100.0) - 0.5; float s = clamp(f + grain * 0.22, 0.0, 1.0); vec3 navy = vec3(0.098, 0.118, 0.161); vec3 blue = vec3(0.302, 0.604, 0.812); vec3 cream = vec3(0.961, 0.929, 0.780); vec3 col = mix(navy, blue, smoothstep(0.18, 0.55, s)); col = mix(col, cream, smoothstep(0.58, 0.94, s)); // A four-point glint that opens briefly each cycle, somewhere new each time. float cycle = t * 0.11 + uSeed; float k = fract(cycle); float open = smoothstep(0.0, 0.05, k) * (1.0 - smoothstep(0.05, 0.16, k)); vec2 at = vec2(aspect * (0.25 + 0.5 * hash(vec2(floor(cycle), 3.1))), 0.52); vec2 d = abs(uv - at); float star = exp(-d.x * 5.0) * exp(-d.y * 70.0) + exp(-d.y * 9.0) * exp(-d.x * 70.0) + exp(-length(d) * 22.0); col += cream * star * open * 1.4; gl_FragColor = vec4(col, 1.0); ``` The field is sampled stretched flat (`0.55, 1.15`) so it runs in horizontal strata. The glint is an event, not a fixture — a permanent 3px star in a 30px chip reads as a dead pixel. ## Material — `satin` (a tiny Bliss wallpaper, woven) ```glsl vec2 p = uv * 1.5 + o; float hill = 0.40 + 0.16 * sin(uv.x * 1.3 + 0.9 + uSeed * 6.0) + 0.12 * (fbm(vec2(uv.x * 1.4 + o.x, t * 0.05)) - 0.5); float land = smoothstep(hill + 0.03, hill - 0.03, uv.y); vec3 w = warp(p * vec2(1.0, 1.7) + vec2(t * 0.20, 0.0), t * 2.0, 1.8); float cloud = smoothstep(0.42, 0.72, w.x); vec3 sky = vec3(0.063, 0.337, 0.557); vec3 lilac = vec3(0.690, 0.600, 0.820); vec3 white = vec3(0.960, 0.965, 0.990); vec3 col = mix(sky, mix(lilac, white, smoothstep(0.4, 0.75, w.y)), cloud); float shade = fbm(uv * vec2(1.2, 2.2) + o + vec2(t * 0.02, 0.0)); vec3 grass = mix(vec3(0.063, 0.157, 0.047), vec3(0.380, 0.560, 0.200), smoothstep(0.30, 0.62, shade)); col = mix(col, grass, land); // Sheen: a normal taken off the field so light slides over real folds. float h = w.x + land * shade; float e = 0.02; vec2 n2 = vec2( fbm((p + vec2(e, 0.0)) * vec2(1.0, 1.7)) - fbm((p - vec2(e, 0.0)) * vec2(1.0, 1.7)), fbm((p + vec2(0.0, e)) * vec2(1.0, 1.7)) - fbm((p - vec2(0.0, e)) * vec2(1.0, 1.7)) ) / (2.0 * e); vec3 n = normalize(vec3(-n2 * 0.35, 1.0)); vec3 L = normalize(vec3(cos(t * 0.8), sin(t * 0.8) * 0.6, 1.1)); float spec = pow(max(dot(n, L), 0.0), 12.0); // Diagonal rib, 4 DEVICE pixels per period. float rib = 0.5 + 0.5 * sin(dot(gl_FragCoord.xy, normalize(vec2(1.0, 0.42))) * 6.2831 / 4.0); // A light band that sweeps across now and then. float band = uv.x - uv.y * 0.6 - (mod(t * 0.9 + uSeed * 4.0, aspect + 3.0) - 1.5); float sweep = exp(-band * band * 6.0); float lit = 0.35 * spec + 0.45 * sweep + 0.05 * h; col *= 0.95 + 0.07 * rib; col += white * lit * (0.6 + 0.4 * rib); gl_FragColor = vec4(clamp(col, 0.0, 1.0), 1.0); ``` The rib is deliberately faint and coarse. Real satin threads are finer than a pixel at this size; a finer or stronger rib turns into moiré or stripes. The sheen is what sells "fabric". ## Material — `blur` (out-of-focus blue, film grain) ```glsl vec3 w = warp(uv * vec2(1.4, 2.0) + o + vec2(t * 0.16, -t * 0.08), t * 2.8, 2.0); // Twice-warped fbm piles up mid-range — stretch it to 0..1 first. float f = smoothstep(0.36, 0.64, w.x); vec3 deep = vec3(0.047, 0.110, 0.420); vec3 mid = vec3(0.133, 0.290, 0.880); vec3 light = vec3(0.310, 0.620, 1.000); vec3 col = mix(deep, mid, smoothstep(0.10, 0.50, f)); col = mix(col, light, smoothstep(0.55, 0.95, f)); col += vec3(0.20, 0.10, 0.45) * smoothstep(0.55, 0.85, w.y) * 0.45; // Grain AFTER the ramp: this is a photo of a blur, grain is on the film. col += (hash(gl_FragCoord.xy + o * 100.0) - 0.5) * 0.14; gl_FragColor = vec4(clamp(col, 0.0, 1.0), 1.0); ``` ## CSS fallback per preset Painted as the chip's `background`, underneath the canvas. Shows without WebGL and for the instant before the first frame lands. ```ts export const FALLBACK: Record = { smoke: "radial-gradient(120% 90% at 30% 40%, #f5edc7 0%, #4d9acf 45%, #191e29 100%)", satin: "linear-gradient(180deg, #10568e 0%, #b099d1 45%, #61902f 60%, #10280c 100%)", blur: "radial-gradient(120% 100% at 70% 70%, #4f9eff 0%, #224ae0 45%, #0c1c6b 100%)", }; ``` --- # Part 2 — `badge-renderer.ts` Module state, no React provider. Exposes one function: ```ts export function registerBadge( canvas: HTMLCanvasElement, preset: BadgePreset, ): (() => void) | null; // cleanup, or null if WebGL is unavailable ``` ## Init (lazy, once) - `document.createElement("canvas").getContext("webgl", { alpha: false, antialias: false, depth: false, stencil: false })`. Not in the DOM. - If it fails, remember that and return `null` from every `registerBadge` — the CSS fallback simply stays. - Create the one-triangle buffer, `enableVertexAttribArray(0)`, `vertexAttribPointer(0, 2, FLOAT, false, 0, 0)` — once, for all programs. - Listen to `prefers-reduced-motion` changes and `visibilitychange`, both calling `run()`. ## Programs Compile lazily per preset on first use and cache. Call `gl.bindAttribLocation(program, 0, "aPos")` **before** `linkProgram`, so every program uses location 0 and the attribute setup above holds for all of them. Cache failures as `null` so a broken shader is not recompiled every frame. ## Drawing one badge ```ts // Grow the shared canvas to the largest chip seen; never shrink it. if (shared.width < w) shared.width = w; if (shared.height < h) shared.height = h; gl.viewport(0, 0, w, h); gl.useProgram(p.program); gl.uniform2f(p.uResolution, w, h); gl.uniform1f(p.uTime, time); gl.uniform1f(p.uSeed, entry.seed); gl.drawArrays(gl.TRIANGLES, 0, 3); // GL's origin is bottom-left, the 2D canvas's is top-left: ctx.drawImage(shared, 0, shared.height - h, w, h, 0, 0, w, h); ``` ## Per-badge registration - `seed = (counter++ * 0.618034) % 1` — golden-ratio spacing so neighbouring badges show unrelated parts of the field. - **ResizeObserver** on the canvas: backing size = `round(clientWidth × min(devicePixelRatio, 2))`, same for height. Reassign only when changed, then draw once immediately (resizing clears the canvas). - **IntersectionObserver**: keep a `visible` flag; draw once on becoming visible; call `run()`. - Cleanup disconnects both observers, removes the entry, calls `run()`. ## The loop — `run()` The one place the loop starts or stops: 1. Cancel any pending frame. 2. No visible badges → stop. 3. Reduced motion or hidden tab → draw every visible badge **once** and stop (a still frame, never an empty chip). 4. Otherwise start `requestAnimationFrame`. Each frame: `dt = min(now - last, 1/30 s)`; `time += dt`; draw every visible badge. Time is integrated, and the clamp stops a tab returning from the background from jumping the field forward by minutes. --- # Part 3 — `badge.tsx` ```tsx UI Vision is now available ``` ```tsx

{children} ``` - The **word sizes the chip**; the canvas is `absolute inset-0` behind it and follows whatever box the word makes. - `isolate` + `-z-10`: the canvas paints above the chip's fallback background but below the word. - The word carries its own shadow. The materials are allowed to go bright (cream smoke, white cloud); do not dim the shaders to protect the text. - `useEffect(() => registerBadge(canvas, preset) ?? undefined, [preset])`. --- # Customising Every material is the same four knobs. Change these and nothing else first. | Knob | Where | What it does | |---|---|---| | **Palette** | the `vec3` constants | The whole look. Keep it to 2–4 colours; more reads as a rainbow gradient, not a material. | | **Scale** | `uv * vec2(x, y)` into `warp` | Bigger numbers = smaller forms. Unequal x/y stretches the field into strata. If the chip looks like one flat colour, the scale is too low — the chip is sitting inside a single blob. | | **Speed** | `t * N` passed to `warp`, and the `vec2(t * a, t * b)` drift | Churn and drift. Drift is what makes motion readable at 30px; churn alone barely shows. | | **Grain** | `hash(gl_FragCoord.xy) * amount` | Before the ramp = stipple (smoke). After = film grain (blur). 0.1–0.25 is the useful range. | ## Adding a preset 1. Add the name to `badgePresets`. 2. Write its body with `main(\`...\`)`, reusing `warp`, `hash`, `uv`, `o`, `t`. 3. Add a `FALLBACK` gradient in the same palette. Recipes to start from: - **Aurora** — `smoke` with navy → teal `(0.1,0.8,0.6)` → violet `(0.6,0.3,0.9)`, scale `vec2(0.8, 2.5)`, no glint. - **Lava** — `blur` with black → red `(0.8,0.1,0.05)` → orange `(1.0,0.55,0.1)`, grain before the ramp. - **Chrome** — `satin` without the hill: grey ramp, `spec` exponent 30, sweep weight 0.8. - **Mono** — any preset, then `col = vec3(dot(col, vec3(0.299, 0.587, 0.114)))` before `gl_FragColor`. --- # Traps - **A context per badge.** Works with three, blanks out around twelve. - **Normalising `uv` to width.** The field stretches when the word changes. - **Speeds borrowed from a big canvas.** A 30px chip shows a sliver of the field; motion tuned for 300px is invisible here. Add drift. - **A ramp over raw fbm.** Warped fbm clusters mid-range; without a `smoothstep` stretch the chip is one flat colour. - **Fine texture at sub-pixel pitch.** Threads, lines, dot screens under ~4 device pixels beat against the pixel grid. Keep patterns coarse or drop them. - **Animated grain.** Keep grain keyed to `gl_FragCoord` only. Moving grain is TV static. - **Forgetting `bindAttribLocation`** before linking — the second program draws nothing. - **Skipping the fallback.** No WebGL = an empty chip with a white word on it. --- # Acceptance - Three badges, three materials, visibly moving within half a second of looking. - Two badges of the same preset show different parts of the field. - Twenty badges on one page: one WebGL context (`about:gpu` / devtools), all animating. - Scrolled out of view: the loop stops (no rAF in the performance panel). - Reduced motion: a still frame on every chip, no loop. - WebGL disabled: every chip shows its gradient; nothing throws. - Word readable on the brightest frame of every preset. --- # Do not - Use a library (three.js, regl, shader packages). This is one triangle. - Put the badge's text inside the canvas. It stays DOM text — selectable, translatable, read by screen readers. - Animate the pill or the chip's size. The material moves; the badge holds still.