Colour block wipe

When to use

Use when a brand-colour block should carry the cut: it sweeps across, fills the frame for a beat, and sweeps on, and the next shot is behind it. The block is the cut, so shot A is swapped for shot B while the frame is one flat colour. Unlike iris-wipe it has a direction and carries the accent. The details that sell it are the slanted leading edge with speed blur, the wordmark that rides the block, and a second, darker block that follows 80 ms behind, so the exit shows two colour steps instead of one flat edge. Clip: color-block-wipe.mp4. Demo: demo/color-block-wipe.html.

The code

import { EASE, easeFn } from '../../core/motion/presets.js';
const E = easeFn('land'), W = innerWidth;
const tIn = 0.3, dIn = 0.36, hold = 0.04, dOut = 0.42, lag = 0.08;
const from = -1.3 * W, cover = -0.16 * W, to = 1.05 * W;       // block is 130vw wide; at `cover` it fills the frame, skew included
const pos = (t) => {
  if (t <= tIn) return from;
  if (t < tIn + dIn) return from + (cover - from) * E((t - tIn) / dIn);            // arrive fast, land soft
  const u = Math.min(1, Math.max(0, (t - tIn - dIn - hold) / dOut));
  return cover + (to - cover) * easeFn('launch')(u);                    // slow off the mark, fastest leaving
};
vawe.onFrame((t) => {
  lead.style.transform = `translateX(${pos(t)}px)`;      // .face inside is skewX(-9deg); the wordmark is not skewed
  trail.style.transform = `translateX(${pos(t - lag)}px)`;
  shotA.style.visibility = t >= tIn + dIn + 0.03 ? 'hidden' : 'visible';             // the swap happens under the block
  const v = Math.abs(pos(t + 1 / 120) - pos(t - 1 / 120)) * 60;
  blur.setAttribute('stdDeviation', `${(v / 60 * 0.3).toFixed(2)} 0`);              // one filter on both blocks, x only
});

Easing and timing

The clip runs 1.7 s. The look is field.

The clip uses 2 named eases 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

Position is a pure function of t, so the blur reads the same curve and never disagrees with the move. Shot A needs its own ground (background: var(--ground)) or shot B shows through at the start. Put something on the block while it covers the frame (the wordmark), or the render refuses the flat run as a blank. A hold over 0.1 s on flat colour reads as a stall. The exit blends 30 percent linear speed into the accelerating curve so the block does not sit still for its first tenth of a second.

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

Sound

Sound: none; the block is loud enough to the eye, and the film keeps its one swell for a stronger cut.