Paper Cinder Transition

Paper Cinder Transition

A page does not fade into the next one, it is eaten by a line of fire. Reach for fire-paper-loader when the burn is a ring on a loading screen that must survive a blocked main thread; reach for this when the burn is the change between two scenes you own. For text that is written in by a mask rather than burned, use masked-reveal; for a scroll-scrubbed sequence with no burn, scroll-scrubbed-visual-sequence.

The mechanism

One full-screen pass decides, per pixel, whether it belongs to the frozen old frame (ahead of the line), to the burning zone (the line), or to the live new scene (behind it), from a single signed distance to a noisy front. Everything else is staging. Remove any of the three layers and it stops reading as fire: no frozen frame and the old page keeps moving under the flame, no live scene and the reveal is a still, no pixel-true distance and the edge is a soft blotch.

xc  = signed distance to the front in CSS px (+ ahead, - burnt)
reveal = clamp(0.5 - xc/aa, 0, 1)      // new frame from the front back, cut to the pixel
col = mix(fromFrozen, toLive, reveal)
col = mix(col, charcoal,  bed * pores) // 26 px band of torn, porous char (alpha-masked)
col += flame(xc) + charGlow(xc)        // additive: thread, ember zone, tight glow

Staging split

Rules, each tied to the failure it prevents

Draw the frozen old frame and the live new scene, never one fading into the other. Snapshot the outgoing scene once into a full-resolution target when the transition starts (clock frozen) and keep rendering the incoming scene live. A cross-fade, or a burn over a still-animating old scene, shows two chapters in one patch of screen and the fire stops being the thing that changes the page.

Measure the front in pixels, not in field units. xc = (field - T)/grad * pxHeight / pxScale. A level set alone runs a hair-thin seam wherever the noise leans with the sweep and a fat one where it leans against it, so the flame's width is uneven for no reason.

Take the slope by finite differences a few px apart, never dFdx of the baked texture. The baked noise's slope is constant across each texel; per pixel it stripes the band across the line. Sample the broad field at +4 px in x and y (hStep = 4*uPxS/uPxH) and clamp the gradient to 0.35/aspect .. 3/aspect.

The ember zone is a smooth luminous gradient, not steps. Symptom: it reads as a non-realistic poster. Grade it continuously by a heat variable: yellow at the front, then orange, then deep red at a crisp torn lip. Hot stretches carry yellow further back. Ramp constants (linear, before tone map):

Keep hot colours gold, never cream. A pale yellow reads cream at full heat and khaki when dimmed. Nothing on the ramp is grey or white; a dim stretch goes down the ramp, it is not just darker.

The front is a bright thread that beads and pinches, 0.7 to 5 px, not an even stroke. An even stroke reads as neon. Width (0.9 + 2.6*heat) * bead with bead 0.5 to 1.5 from a noise along the edge. Give it a tight glow only (exp(-|xc+0.5wc| / (2 + 2.8*heat))), no wide halo.

It must visibly move, at rest of the sweep too. Symptom: "too stale/static". Drive heat with pulses that run along the edge in both directions (sA*0.018 - t*1.30, sA*0.027 + t*1.70), flicker at t*7, a roll back through the zone at -t*2.6, drifting beads (-t*0.8), and licking tongues on the front (t*1.1, t*2.8, at most 0.022 and 0.010 of the screen). Stills hide all of this, so judge the burn in a real-time held clip.

Alpha-mask the black char; it is not a flat slab. The char is a band 26 px wide (plus 12 px of front slack) that crumbles off the live scene along a torn far edge, with pores opening in it as it ages, down to whatever lies beneath. A solid black strip reads as a wipe. Cover = bed * pores, edge torn by 8*noise(0.08) + 3*noise(0.25) px, which is gentler than the front's own slope so it frays without cutting loose an island.

Never ring the pores with a glowing rim. Rims joined into one drawn contour along the char edge. Pores are just holes.

Take the char's edge from the broad front, not the fine one. A 2-D noise cut loose islands of char that floated on the new frame. Use a noise along the edge only (kbEdgeNLine), and let edge = zoneW + fs + bedW*(0.35 + 1.10*n) with fs at most 12.

Scorch the old frame ahead of the flame in one continuous darkening, 20 to 40 px reach, from tan 0.80, 0.62, 0.42 to dark brown 0.20, 0.10, 0.045 by tk^2, reach varied by noise. Three separate steps drew outlines that copied the flame.

Bake the noise; do not stack fbm per pixel. Cost at 2880x1800: per-pixel fbm 1.5 to 3 ms a pass; one tileable texture and a hash table, 0.3 to 0.6 ms with the same look. Bake once: a 1024^2 RGBA16F texture on a 16-cell period (r fbm 3 octaves, g ridged 3, b gradient, a ridged 2, all sampled at x*0.0625) and the integer hash lattice in a 2048^2 R16F table, filtered at the smoothstep of the fraction so it equals the value noise exactly.

Scissor the live scene to the revealed side, and render it small. Behind the line only, plus 0.16 of the screen for bays and haze. During a burn draw it at 0.75 scale (the composite stays full size, because the edge is what the eye reads); once the transition has rested 150 ms, cross-fade to the full-size scene over 0.3 s, both drawn meanwhile, so the sharpness step is never seen and never costs a moving frame. Put text on the live side at full size in the composite; drawn in the 0.75 buffer it goes soft.

Skip the noise where nothing can reach. By hx: more than 0.215 + 0.15 ahead of the front return the frozen frame, and behind 0.25 - 0.215 return the live one. Inside the band, more than 62 px ahead (plus slack) or 125 px behind does the same. That is what pays for full device resolution.

Sweep from the side the incoming words sit. hx = dir>0 ? uv.x : 1-uv.x; a chapter whose text is on the right is burned in from the right. Going backward uses the target's side too. A line that always runs left to right crosses its own new title last.

Seed every burn. seed = (chapter+1)*17.3 picks 2.0 to 3.6 broad bays up the frame, their depth (0.055 to 0.115) and lean ((sv.x-0.5)*0.07), so two burns are never the same silhouette.

Constants

Gotchas, symptom first

• The flame is a thin red line on black char, no ember zone. The baked noise and hash samplers are unbound, so life reads as the frame texture's value. Bind uKbN and uKbH.

• Bare garbage or a hard cut behind the line. The live scene is only drawn inside the scissor (front + 0.215 + 0.16); a narrower margin lets the composite read undrawn texels.

• Stair-steps or 2x2 blocks along the char edge. A derivative taken past a skipped branch. Compute the pixel change from the field's own scale (kbAA(v, w)).

• Islands of char floating on the new frame. The far edge was cut from fine noise; take it from the broad front.

• A milky band inside the ember edge. Lifting the blacks with a curve washed it white over paper; light the dark areas by a gain instead.

• The scene behind the line looks soft after the burn ends. The 0.75 buffer stayed; run the full-size cross-fade after the rest interval.

• Timings look slow. A hidden Browser pane keeps rendering and steals the GPU; measure in a headless browser on the GPU flags (--use-angle=metal --enable-gpu) with the pane parked. Kibori's transitions held p50 8.3 ms (120 Hz cap) once the noise was baked and the scene scissored; this demo's burn measured p50 8.3 ms, p90 8.8 ms at 1440x900 the same way.

• The grain and embers swim as the front passes. Keep them on the paper (g in paper coordinates plus a per-burn offset), never in screen space; only the front moves.

Accessibility and lifecycle

• prefers-reduced-motion: reduce: no burn. Render the designed still of each scene at a fixed time and cross-fade the frozen and live frames over 0.35 s (smoothstep). Controls stay live.

• Pause on document.hidden and when the canvas leaves the viewport; reset the time base on resume so the first frame does not integrate the pause.

• Clamp dt to 1/30 s, cap DPR at 2, size from a ResizeObserver and build nothing at a zero viewport.

• A press during a burn queues the target; the last one wins after the line leaves.

• Real buttons, arrow keys and 1 to 3 change chapters, and a live region names the arrival.

Cost

Measured in the source page: per-pixel noise was the cost, not the flame. Baking it, and returning the plain scene away from the line, is the lever. The 0.75 scale and the scissor come second. Do not chase MSAA on the composite: the edge is drawn to the pixel by kbAA.

Provenance

Extracted from KIBORI, a WebGL timber-workshop page whose chapters burn into each other and whose footer paper burn set the look. The EDGE GLSL (flame, char, pores, crust, scorch) and the burn pass in demo.html are that page's own, ported, with the scenes replaced by three shader-drawn rooms.