# Burning plan card — complete build prompt Build a billing card for a settings screen: "Current plan", the plan's name, a line about what it gets you, a renewal date, and an **Adjust plan** button. On its right edge sits a picture that is **on fire**. The picture ripples like cloth, its edges char, glow and burn through to the card behind it, embers drift off it, and **the pointer is a heat source**: wherever it goes, a hole burns open under it and follows it around. ``` ┌────────────────────────────────────────────────────────┐ │ [Current plan] ░▒▓ picture ▓▒░│ │ Max plan ▒▓ burning at ▓│ │ 20x more usage than Pro ░▒ its edges ▒░ │ │ Your subscription will auto renew… ░ embers ░ │ │ [Adjust plan] │ └────────────────────────────────────────────────────────┘ ``` Stack: **React + TypeScript + Tailwind** (Next.js App Router shown, anything works). No dependencies: raw WebGL1, one fragment shader, the image as a texture. Two files: 1. `burning-art.tsx` — `"use client"`. Any image, set on fire. Reusable on its own. 2. `plan-card.tsx` — the card that uses it. --- # The decisions that shape everything else **The burn cuts real transparency.** Burnt areas become `alpha = 0`, so they show whatever is behind the canvas: the card, a dark page, a gradient. Do not paint the holes in a background colour. **The soft fade into the card is in the shader too.** The obvious version puts a radial gradient `div` over the canvas, painted in the card's colour. That ties the art to one background and breaks on the first dark mode. Fading alpha in the shader means the art knows nothing about what it sits on. **The whole card heats the fire, not just the canvas.** The canvas is decoration under the card's text. A pointer resting on the headline is already near the fire's left edge and should warm it. Listen on the card and map the pointer into the canvas's coordinates. **The fire trails the pointer; it does not stick to it.** The shader gets an eased copy of the pointer. Position eases quickly, heat slowly, so the fire takes a moment to catch and a moment to die down. That lag *is* the feel. Without it this is a circle glued to your cursor. --- # Part 1 — the image Any square image works; the shader is the effect. What burns best: - **The subject in the middle 40%.** The centre survives, the edges burn and fade out. Anything near the border gets eaten. - **Saturated colour all the way to the edges.** The burn holes show the card behind. Pale or near-white edges make the holes invisible. Deep blues, crimsons and blacks make the char and the glowing rim pop. - **Warm tones help.** The fire runs orange → yellow-white. A red or orange in the picture makes the burn look like it belongs to it. - **Grain or texture in the picture.** The shader ripples pixels, and texture keeps that looking like cloth instead of smeared digital art. - **Square, 800–1200px, WebP.** It renders at ~260 CSS px (≈520 device px). Anything larger is wasted download. Image prompt used for the original (a fighter jet over the curve of the earth): ``` A fighter jet climbing steeply at a 40-degree diagonal from lower-left to upper-right, seen in dark silhouette, small in frame, positioned slightly right of center. Two long straight afterburner contrails stream behind it toward the bottom-right corner: one hot magenta-pink, one pale white-blue, glowing, perfectly parallel. A red-orange ember glow at the engine nozzle. Background: deep saturated ultramarine sky at the top-right, falling through a soft diagonal band of hazy white atmosphere, into a thick band of crimson red at the bottom-left — the curve of the earth's horizon seen from very high altitude, tilted on the same diagonal as the jet. Style: 1980s Japanese anime cel / analog film still, airbrushed gradients, slight chromatic bleed at the color boundaries, soft bloom on the contrails, fine film grain, subtle VHS softness. Rich, saturated, high contrast. Clean composition, no text. Square 1:1. ``` Then **crop the result so the subject sits near the centre.** Generators like to put the subject high up, where the fade will eat it. --- # Part 2 — `burning-art.tsx` ## Props ```ts export function BurningArt(props: { src: string; // the image className?: string; // position + size; default "relative" surface?: React.RefObject; // element whose pointer heats the fire }): JSX.Element; ``` The component has no positioning of its own. The caller passes it (`absolute` off the edge of a card, or `relative` in a flow), and the two layers inside are `absolute inset-0` against it. ## Vertex shader ```glsl attribute vec2 aPos; varying vec2 vUv; void main() { vUv = aPos * 0.5 + 0.5; gl_Position = vec4(aPos, 0.0, 1.0); } ``` Drawn as **one triangle**, `[-1,-1, 3,-1, -1,3]`, covering the viewport: no quad and no diagonal seam. `vUv` still runs 0..1 across the visible area. ## Fragment shader — the whole effect ```glsl precision highp float; uniform sampler2D uTex; uniform float uTime; uniform vec2 uPointer; // canvas UV, y up uniform float uHeat; // 0..1, eased in JS varying vec2 vUv; 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); } // Four octaves here, not three. The burn front is a contour of this field and // the eye follows a contour closely — at three it reads as blobs, at four the // edge frays the way paper does. float fbm(vec2 p) { float v = 0.0, a = 0.5; for (int i = 0; i < 4; i++) { v += a * noise(p); p = p * 2.03 + vec2(17.0, 9.2); a *= 0.5; } return v; } void main() { float t = uTime; vec2 uv = vUv; // 0 at the centre, 1 toward the corners. Drives the ripple amplitude and the // burn, so the middle of the picture is the part that survives. float edge = clamp(distance(vUv, vec2(0.5)) * 1.6, 0.0, 1.0); float heat = uHeat * smoothstep(0.2, 0.02, distance(vUv, uPointer)); // Cloth in wind: crossed sines pinned at the centre, a little turbulence on // top, and more of both under the pointer. float amp = 0.004 + 0.022 * edge * edge + 0.012 * heat; uv.x += sin(uv.y * 9.0 + t * 2.2) * amp; uv.y += sin(uv.x * 12.0 - t * 2.7) * amp * 0.85; uv += (vec2(fbm(vUv * 3.0 + vec2(t * 0.35, 0.0)), fbm(vUv * 3.0 + vec2(0.0, t * 0.31) + 31.7)) - 0.5) * 0.03 * edge; vec4 img = texture2D(uTex, uv); // The burn: drifting noise against a threshold that rises toward the edges, // breathes, and jumps under the pointer. d > 0 is consumed. float n = fbm(uv * 4.5 + vec2(t * 0.3, -t * 0.48)); float breathe = 0.78 + 0.22 * sin(t * 1.1 + n * 7.0); float burn = min(edge * breathe * 0.85 + heat * 0.45, 1.05); float d = n - (1.0 - burn); // Three bands, outside in: charred, then a glowing rim, then the hole. float hole = smoothstep(0.0, 0.07, d); float rim = smoothstep(-0.11, 0.0, d) * (1.0 - hole); float charr = smoothstep(-0.26, -0.08, d) * (1.0 - rim) * (1.0 - hole); // Deep orange at the outside of the rim, white-yellow right at the tear. vec3 ember = mix(vec3(1.0, 0.38, 0.08), vec3(1.0, 0.85, 0.35), smoothstep(-0.05, 0.0, d)); vec3 col = img.rgb; col = mix(col, col * vec3(0.32, 0.24, 0.22), charr * 0.75); col = mix(col, ember, rim); col += ember * rim * 0.6; float alpha = 1.0 - hole; // Embers: three parallax layers of small tumbling slivers drifting up and to // the right. Each ignites, cools to orange and dies, and they only spawn // where something is burning — the edges, or wherever the pointer is. float gate = smoothstep(0.12, 0.5, edge * breathe) + heat; for (int i = 0; i < 3; i++) { float fi = float(i); vec2 sp = vUv * (13.0 + fi * 8.0) + vec2(-t * (0.8 + fi * 0.5), -t * (2.0 + fi * 1.1)); vec2 cell = floor(sp); float sh = hash(cell + fi * 13.7); if (sh > 0.7) { vec2 pos = 0.2 + 0.6 * vec2(hash(cell + 3.1), hash(cell + 7.7)); pos.x += sin(t * (2.0 + sh * 3.0) + sh * 20.0) * 0.08; float a = sh * 6.2831 + t * (1.2 + sh * 2.0); vec2 r = mat2(cos(a), -sin(a), sin(a), cos(a)) * (fract(sp) - pos); float body = smoothstep(0.17, 0.03, length(r * vec2(1.0, 2.6))); float life = fract(t * (0.35 + sh * 0.5) + sh * 11.0); float glow = smoothstep(0.0, 0.1, life) * (1.0 - smoothstep(0.5, 0.95, life)); float flicker = 0.75 + 0.25 * sin(t * 11.0 + sh * 40.0); float lum = body * glow * flicker * min(gate, 1.2); col += mix(vec3(1.0, 0.4, 0.07), vec3(1.0, 0.93, 0.55), glow * flicker) * lum; alpha = max(alpha, lum * 0.95); } } // The fade into the surroundings, as alpha rather than a painted gradient: // whole to about a sixth of the radius, nearly gone at the rim. Applied last // so the embers fade with the picture instead of floating over the card. float r = distance(vUv, vec2(0.5)) * 2.0; alpha *= 1.0 - smoothstep(0.15, 1.0, r); // Premultiplied on the way out, for the compositor's default. Straight // alpha with premultipliedAlpha: false is what the spec allows, and it is // what WebKit on iOS gets wrong: every see-through pixel — the fade, the // burnt holes — came out solid white in the in-app browsers. Premultiplied // is the form every browser composites the same way. gl_FragColor = vec4(clamp(col, 0.0, 1.0) * alpha, alpha); } ``` ### What each block does 1. **`edge`**: 0 at the centre, 1 toward the corners. Drives ripple amplitude and burn level, which is why the middle of the picture survives. 2. **`heat`**: a soft spot of radius 0.2 (in UV) around the eased pointer, scaled by the eased heat. 3. **Cloth**: two crossed sines on the sample coordinate plus a little fbm turbulence. The amplitude grows with `edge²` and with heat, so the centre is pinned and the edges flap. 4. **Burn**: drifting fbm `n` against a threshold `1 - burn`. `burn` rises toward the edges, **breathes** (`sin(t * 1.1 + n * 7.0)`, so different parts breathe out of phase) and jumps under the pointer. `d > 0` is gone. 5. **Three bands off one number**: char (darken to a brown-black), then the rim (orange outside, white-yellow at the tear, over-bright), then the hole (alpha 0). All three come from `d`, so they can never disagree about where the front is. 6. **Embers**: three parallax layers of hashed grid cells. ~30% of cells hold a rotated, elongated sliver that sways, tumbles, ignites, cools and dies. Gated by `edge * breathe` and heat, so embers only come off burning parts. They write alpha too, so they float over the holes. 7. **Fade**: alpha falls off with distance from the centre, applied **last** so the embers fade with the picture instead of floating over the card text. 8. **Premultiplied output**: `col * alpha`. This is what makes the transparency work in every browser; see the traps. ## JavaScript side **Context:** `canvas.getContext("webgl", { alpha: true, antialias: false, depth: false, stencil: false })`. Leave `premultipliedAlpha` at its default (`true`); the shader's last line multiplies the colour by alpha to match. **Program:** compile both shaders, call `gl.bindAttribLocation(program, 0, "aPos")` **before** `linkProgram`, link, and check `LINK_STATUS`. Set up the triangle buffer with `enableVertexAttribArray(0)` and `vertexAttribPointer(0, 2, FLOAT, false, 0, 0)`. Set `uTex` to 0. **Texture:** `CLAMP_TO_EDGE` on both axes, `LINEAR` min and mag filters. The image is not a power of two, so WebGL1 allows no mipmaps and no repeat. On load: `pixelStorei(UNPACK_FLIP_Y_WEBGL, true)`, then `texImage2D`. **Start partway in:** set `time = 4` when the image loads, so the first frame already has burnt edges. Starting at 0, the picture visibly catches fire on page load. **Pointer state:** two copies, target and eased. ```ts const target = { x: 0.5, y: 0.5, heat: 0 }; const eased = { x: 0.5, y: 0.5, heat: 0 }; // per frame, frame-rate independent: const kPos = 1 - Math.exp(-dt * 7.5); const kHeat = 1 - Math.exp(-dt * 4.2); eased.x += (target.x - eased.x) * kPos; eased.y += (target.y - eased.y) * kPos; eased.heat += (target.heat - eased.heat) * kHeat; ``` **Pointer events**, on `surface.current ?? canvas`: ```ts const onMove = (e: PointerEvent) => { const rect = canvas.getBoundingClientRect(); // the CANVAS, not the surface const x = (e.clientX - rect.left) / rect.width; const y = 1 - (e.clientY - rect.top) / rect.height; // y up, like the shader const inside = x > -0.15 && x < 1.15 && y > -0.15 && y < 1.15; if (inside) { target.x = x; target.y = y; } target.heat = inside ? 1 : 0; }; const onLeave = () => { target.heat = 0; }; const onUp = (e: PointerEvent) => { if (e.pointerType !== "mouse") onLeave(); }; pointermove → onMove, pointerdown → onMove, pointerleave → onLeave, pointerup → onUp, pointercancel → onLeave ``` The ±15% margin lets the fire lean toward a pointer on its way in rather than waking at the border. Pointer events (not mouse events) make touch work: a tap lights a spot, a drag moves the fire, and lifting the finger lets it die down. **Size:** a `ResizeObserver` on the canvas. Backing size = `round(clientWidth × min(devicePixelRatio, 2))`, same for height. Reassign only when it changed (assigning clears the buffer), always reset the viewport, then redraw. **The loop, and when it does not run.** One `run()` decides: 1. Cancel any pending frame. 2. Image not loaded, or canvas off screen (`IntersectionObserver`): stop. 3. `prefers-reduced-motion` or `document.hidden`: draw **one** still frame and stop. 4. Otherwise start `requestAnimationFrame`. Call `run()` on image load, intersection change, `visibilitychange` and the reduced-motion media query's `change`. Each frame: `dt = min(now - last, 1/30 s)`, `time += dt`, ease, draw. Time is integrated, never `now * speed`, and the clamp stops a tab returning from the background from jumping the fire forward. **Cleanup** has to be complete: cancel the frame, remove all five pointer listeners, disconnect both observers, remove the document and media listeners, delete the texture, buffer, program and shaders. React StrictMode mounts twice in development, and browsers allow only ~16 WebGL contexts before killing the oldest. ## Markup ```tsx

{/* Fallback: the picture, faded the same way. Underneath, not swapped in. */}

``` Without WebGL, or before the image loads, you still get the picture with the same circular fade. --- # Part 3 — `plan-card.tsx` ```tsx export function PlanCard() { const cardRef = useRef(null); return (

Current plan

Max plan

20x more usage than Pro

Your subscription will auto renew on Oct 3, 2026.

); } ``` - **The art hangs off the card's top-right corner** (`-top-[40px] -right-[70px]`) and `overflow-hidden` clips it. It reads as the card burning through, not as an illustration placed next to the text. - **The content is `relative`**, so it paints above the absolutely positioned art. - **`surface={cardRef}`** makes the whole card the heat surface. - **Narrow, the art moves to the top.** Below 480px of card width there is no room beside the text: the art ends up behind the copy or pushed off the card, and it is the one thing the card is for. The `@max-[480px]` variants centre it over the top edge and push the content down under it. It is a **container** query on the card (`@container`), not a viewport breakpoint, so the card's own width decides wherever it is placed. - **`max-w-full` needs a parent with a definite width.** Inside a CSS grid with an implicit `auto` column, the column grows to fit the 580px card and `max-w-full` never bites; on a phone the card runs off the side and the art is clipped away. Give such a grid `grid-cols-[minmax(0,1fr)]`. --- # Customising | To change | Edit | Notes | |---|---|---| | How far the fire eats in | `edge * breathe * 0.85` in `burn` | Lower = a thinner burning border. Above ~1.0 the centre starts going. | | Size of the pointer's hole | `smoothstep(0.2, 0.02, …)` in `heat`, and `heat * 0.45` in `burn` | The first sets the radius, the second how deep it burns. | | How the fire follows you | `7.5` (position) and `4.2` (heat) in the easing | Higher = snappier. Below ~3 it feels sluggish, above ~15 it sticks to the cursor. | | Fire colours | the two `ember` vec3s and the two ember-particle vec3s | Blue flame: `(0.1,0.4,1.0)` → `(0.7,0.9,1.0)`. Green: `(0.2,0.9,0.3)` → `(0.8,1.0,0.6)`. | | Char colour | `vec3(0.32, 0.24, 0.22)` | Multiplied into the image. Lower = blacker. | | Ripple | `0.004 + 0.022 * edge * edge` | Set to `0.0` for a still picture that only burns. | | Embers | `sh > 0.7` (density), `13.0 + fi * 8.0` (size) | `sh > 0.85` gives half as many. | | Fade shape | `smoothstep(0.15, 1.0, r)` | Raise the first number to keep more of the picture whole. | | Burn speed | `vec2(t * 0.3, -t * 0.48)` in `n` | Scale both together. | On a **dark card** everything still works, because the holes are transparent. The char is then barely visible, so lower its multiplier or lean on the rim. --- # Traps - **Painting the fade or the holes in a colour.** It breaks the moment the background changes. Use alpha. - **`premultipliedAlpha: false` with straight alpha out of the shader.** The spec allows it and desktop browsers draw it correctly, but WebKit on iOS (Safari and in-app browsers like X's) renders every see-through pixel solid white: the fade and the burnt holes turn into a white square. Premultiply in the shader and keep the default. - **Forgetting `UNPACK_FLIP_Y_WEBGL`.** The picture renders upside down: image rows start at the top, GL textures at the bottom. - **Measuring the pointer against the surface instead of the canvas.** The fire appears offset from the cursor by the art's position in the card. - **No easing on the pointer.** A hard-edged circle glued to the cursor, not fire. - **`time = elapsed * speed`.** Changing speed teleports the fire. Integrate `dt`. - **Mipmaps or `REPEAT` on a non-power-of-two texture.** In WebGL1 the texture renders black. - **The loop running forever.** Stop it off screen and in hidden tabs. - **Subject near the image border.** The fade and the burn will eat it. Crop. - **Keeping the side-by-side layout on a phone.** The art either covers the text or is clipped off the card. Stack it on top below ~480px. --- # Acceptance - The picture's edges burn, breathe and throw embers with no input. - Moving the pointer over the art opens a glowing hole that follows with a slight lag, and closes gradually when the pointer leaves. - A pointer on the card's text near the art warms the art's left edge. - On a phone: tapping lights a spot, dragging moves it, lifting lets it die. - At 375px wide: the art sits whole across the top, the text below it, no horizontal scroll. - Put the card on a black page: the holes show black, not a white patch. - Scrolled off screen or tab hidden: no animation frames. - Reduced motion: a still, burnt frame, no loop. - WebGL disabled: the picture shows with the same circular fade, nothing throws. - Mount and unmount 30 times in dev: no "too many WebGL contexts" warning. --- # Do not - Use three.js, a shader library or an animation library. It's one triangle. - Put the card's text in the canvas. It stays DOM text. - Put the pointer listener on `window`. Listen on the card. - Ship a 4K image. It renders at 260px.