Glow record

When to use

Use when an alert turns into a live state: a notification leads to a recording, a call or a live stream. The red of a notification badge floods the frame from the badge, reaches the farthest corner in about 0.35 s, and then gathers back into one point: the red dot of the recording light in the next scene. The red is the handoff object. The swap of the scenes happens inside the full-frame red, so the viewer never sees it. Clip: glow-record.mp4. Demo: demo/glow-record.html.

The code

const R_FULL = (FAR * 1.02) / (1 - FEATHER);                               // the opaque core must reach the farthest corner
vawe.onFrame((t) => {
  const e = land(clamp((t - 1.35) / 0.35)), g = land(clamp((t - T_GATHER) / 0.8));
  const cx = lerp(SRC.x, DST.x, g), cy = lerp(SRC.y, DST.y, g);            // badge to recording light
  const R = t < T_GATHER ? lerp(SRC.r, R_FULL, e) : lerp(R_FULL, DST.r, g);
  const f = Math.max(R * 0.2, 0.25 * u);
  const gel = (a) => `radial-gradient(circle at ${cx}px ${cy}px, rgba(255,31,51,${a}) ${Math.max(R - f, 0)}px, rgba(255,31,51,0) ${R}px)`;
  flood.style.background = gel(1);                                         // mix-blend-mode: screen, adds the light
  body.style.background = gel(0.7);                                        // normal blend, under the screen layer: hides the swap
  host.style.filter = `brightness(${1 + 0.45 * lit})`;                     // the frame over-exposes under the light
  shotA.style.visibility = t >= T_FULL ? 'hidden' : 'visible';
  shotB.style.visibility = t >= T_FULL ? 'visible' : 'hidden';
});

Easing and timing

The clip runs 3.8 s. The look is vawe.

The clip uses one named ease from core/motion/presets.js. Each is a pair of After Effects handles: influence is how far along the segment the handle reaches, and speed is how fast the value moves at the key, as a multiple of the segment's average speed. Motion in the docs explains both.

Notes

• The light is the exposure-flash recipe with a red gel (exposure-flash): the layer is mix-blend-mode: screen, so it adds light to the screen, and the host takes filter: brightness() up to 1.45, so the UI over-exposes where the red lands. Do not paint the glow with a box-shadow or a blurred copy of the badge. core/surfaces/lens.js bloom has 6 levels and a glow of a few hundred pixels at most, so it cannot reach the far corner; use it for the small glow of the end dot when the page has a lens.
• A screen layer alone leaves the old scene visible through the red, so the swap shows as a pink cut. A second layer of the same red at 70 percent in normal blend sits under it: the red stays saturated and the swap is a shift of 30 percent contrast, which does not read.
• Timing: the badge count rolls 2 to 3 on EASE.land in 0.2 s; the badge swells to 1.35x in the 0.15 s before the flood (anticipation); the flood reaches the farthest corner in 0.35 s on EASE.land; it holds 0.08 s; it gathers in 0.8 s on EASE.land. The flood is fast because it is the exit of scene A. The gather decelerates into the recording light, which is the arrival.
• The soft edge is 20 percent of the radius while the light is large, and it shrinks with the radius to 0.25 u, so the last frames of the gather are a crisp dot.
• Speed: the centre moves from the badge to the dot on the same curve as the radius, so the red contracts toward the dot, not toward the middle. The scene swap is at the first full-frame frame, before the hold; the viewer sees red on red.
• The end dot is its own element, the same colour and size as the disc at the end of the gather and 0.05 s under it. It then pulses at 1 Hz between 55 and 100 percent opacity, so the hold is alive; the timecode and the level bars run beside it.
• What goes wrong: a flood slower than 0.5 s reads as a fade. A flood that stops before the corner leaves a wedge of A. A recording dot of another size or red pops when the disc ends. Keep a full-frame red hold under 0.1 s: longer is a strobe.

Looks (ground, type, radius, accent) live in demo/demo.css; this snippet keeps neutral tokens.

Sound

Sound: a short ping when the badge count rolls; one low swell that stops dead when the red is full; nothing on the gather.