❉Recipe

VHS Pause Freeze

HyperFrames snippet

The "||PAUSE" overlay of a paused VCR: a canvas snow field + a jittering tracking band + scanlines + a tape tint + a PAUSE caption, driven for an exact window in HyperFrames. Used to hold the freeze on every fork.

7 units use it

What it is

## What it is The artifact of a paused VHS tape. A `<canvas>` redraws per-frame snow (deterministic mulberry32 noise) plus a horizontal tracking-error band, layered under CSS scanlines + a warm tape tint + a `||PAUSE` caption. A tiny `y: +/-1` vertical jitter every 0.1s sells the unstable head. The whole stack fades in for the freeze window and out when play resumes. ## When to use it - To hold a freeze beat (the fork moment) so it reads as "someone hit pause", not a render glitch. - Anywhere you want a momentary analog-pause punctuation. For a whole-clip VHS bake use `vhs-overlay` instead. ## Knobs - `drawVHS(t)` snow alpha = `(r()*54)` and the 22 tracking streaks per band. - `#vcr` opacity (0.45) = snow strength; the jitter loop pitch (0.1s). - `vhs(s, dur)` = show from `s` for `dur` seconds.

How to use it standalone

HyperFrames snippet

// Verbatim from the choose-path index.html: the deterministic snow draw + the vhs() driver.
function mulberry32(a){return function(){a|=0;a=a+0x6D2B79F5|0;let t=Math.imul(a^a>>>15,1|a);t=t+Math.imul(t^t>>>7,61|t)^t;return((t^t>>>14)>>>0)/4294967296;};}
function drawVHS(t){const r=mulberry32((Math.floor(t*30)|0)+1);const w=vcr.width,h=vcr.height;const img=vctx.createImageData(w,h),d=img.data;for(let i=0;i<d.length;i+=4){const v=(r()*255)|0;d[i]=d[i+1]=d[i+2]=v;d[i+3]=(r()*54)|0;}vctx.putImageData(img,0,0);const band=Math.floor((t*60)%h);vctx.fillStyle="rgba(255,255,255,0.5)";for(let k=0;k<22;k++){const x=(r()*w)|0,y=band+((r()*46)|0)-23;vctx.fillRect(x,y,(r()*7)|0,2);}}
function vhs(s,dur){tl.set("#vhs",{opacity:1},s);const pf={v:s};tl.to(pf,{v:s+dur,duration:dur,ease:"none",onUpdate:()=>drawVHS(pf.v),overwrite:"auto"},s);let t=s,k=0;while(t<s+dur){tl.set("#vhs",{y:(k%2?1:-1)},t);t+=0.1;k++;}tl.set("#vhs",{y:0},s+dur);tl.to("#vhs",{opacity:0,duration:0.12,overwrite:"auto"},s+dur);}