❉Recipe

SMPTE Countdown Disc

HyperFrames snippet

The film-leader 3-2-1 countdown: a sweeping SVG ring + crosshair + a back.out-popping number, on a dark plate. The HyperFrames disc() driver that times the fork decision window.

6 units use it

What it is

## What it is A cinema-leader countdown disc. An SVG ring has its `stroke-dashoffset` swept from 0 to the full circumference each tick (the wiping clock hand), a crosshair sits behind it, and the big number pops in with a `back.out(2)` scale each step. Three ticks at `step` seconds each, then the disc + its plate fade out. It gives the fork a visible decision deadline. ## When to use it - The timer on a choose-path fork (call `disc(cd, 0.5)` right after the labels appear — fast 0.5s/tick once the narration has already moved on). - Any "you have N seconds" beat. Use a 1s step only if the timer must run during a voiceover. ## Knobs - `step` = seconds per tick (0.5 fast / 1.0 narrated). - `C = 2*PI*r` = the sweep circumference (must match the ring radius). - Number pop = `back.out(2)`, plate `#cd-plate` opacity for the backing.

How to use it standalone

HyperFrames snippet

// Verbatim from the choose-path index.html disc() driver (GSAP paused timeline `tl`).
// Setup once: const C = 2*Math.PI*210; gsap.set("#cd-sweep",{strokeDasharray:C,strokeDashoffset:0});
function disc(s, step) {
  step = step || 0.5;
  tl.fromTo("#cd-plate", { opacity: 0 }, { opacity: 1, duration: 0.16, overwrite: "auto" }, s - 0.1);
  tl.fromTo("#countdown", { opacity: 0 }, { opacity: 1, duration: 0.16, overwrite: "auto" }, s - 0.1);
  for (let i = 0; i < 3; i++) {
    const t = s + i * step;
    tl.set("#cd-num", { textContent: 3 - i }, t);
    tl.fromTo("#cd-sweep", { strokeDashoffset: 0 }, { strokeDashoffset: C, duration: step, ease: "none" }, t);
    tl.fromTo("#cd-num", { scale: 1.2, opacity: 0.4 }, { scale: 1, opacity: 1, duration: step * 0.45, ease: "back.out(2)" }, t);
  }
  tl.to(["#countdown", "#cd-plate"], { opacity: 0, duration: 0.2, ease: "power2.in", overwrite: "auto" }, s + 3 * step - 0.04);
}