Logo wall

When to use

Use when the proof beat comes before the call to action: a wall of customer logos passes as social proof. Three lanes of hairline cells slide in from alternate sides, fast and blurred, and land on a soft curve under one line of copy; they never stop, so the last frame still moves. The detail that sells it is that no two logos look alike: each has its own mark and its own typeface, so the wall reads as different companies and not as one font repeated. Clip: logo-wall.mp4. Demo: demo/logo-wall.html.

The code

import { EASE, easeFn } from '../../core/motion/presets.js';
const run = 190 * u;      // u = 1 percent of the frame height
// lane markup: .lane (overflow hidden) > .row (absolute, left -20u) > .track (flex, 2 x 12 cells of 38u)
// a cell is an inline SVG mark (24 x 24 viewBox, filled, currentColor) plus a wordmark; invented brands only (demo/assets/logos.js)
lanes.forEach((row, i) => {
  const dir = i % 2 ? 1 : -1, delay = 150 + i * 110;                // lanes alternate, 110 ms apart
  row.animate([{ translate: `${-dir * run}px 0` }, { translate: '0 0' }], { duration: 1300, delay, easing: EASE.land, fill: 'both' });
  row.firstElementChild.animate([{ translate: '0 0' }, { translate: `${dir * 6 * u}px 0` }], { duration: 2000, easing: EASE.glide, fill: 'both' });
  // blur: SVG feGaussianBlur on the row, x only, stdDeviation = 0.3 x its travel per frame, set in vawe.onFrame as in push-blur
});

Easing and timing

The clip runs 2 s. The look is daylight.

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

Three lanes at 110 ms apart tear the wall in as one gesture; one lane reads as a ticker, five as a screen saver. The blur ends before the logos can be read, which is right: the eye should read the count, not the names. The drift (6 percent of the height over the whole clip) keeps the wall alive after the landing. Never use a real brand: draw invented marks as inline SVG at one visual weight, and give each wordmark its own face and case. Keep the ink one colour; the accent belongs to the number in the line above.

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

Sound

Sound: none; the eye reads the count, and the number in the line above carries the beat's cue.