Pull back reveal

When to use

Use when a film opens on a detail and the whole should arrive as an answer: a status dot, a letter, one number. The first frame is tight on the detail (9x), and the camera pulls back to the full composition. The detail is the hook and the wide frame is the payoff. Clip: pull-back-reveal.mp4. Demo: demo/pull-back-reveal.html.

The code

import '../../core/engine/page-api.js';
import { easeFn } from '../../core/motion/presets.js';
const r = dot.getBoundingClientRect();                     // measured before the first frame
const d = { x: r.left + r.width / 2, y: r.top + r.height / 2 }, c = { x: innerWidth / 2, y: innerHeight / 2 };
const s0 = 9, t0 = 0.1, dur = 1.6;                         // world { transform-origin: 0 0 }
const ease = easeFn('land');     // fast, then a long soft arrival
vawe.onFrame((t) => {
  const u = Math.min(1, Math.max(0, (t - t0) / dur)), p = ease(u);
  const s = Math.exp(Math.log(s0) * (1 - p));              // zoom is multiplicative: scale on a log path
  const cam = { x: d.x + (c.x - d.x) * p, y: d.y + (c.y - d.y) * p };   // the dot is centred first, the card last
  world.style.transform = `translate(${c.x - s * cam.x}px, ${c.y - s * cam.y}px) scale(${s})`;
  const sb = Math.pow(s, 0.55);                            // the ground scales less, so it reads as far behind
  ground.style.transform = `translate(${c.x - sb * cam.x}px, ${c.y - sb * cam.y}px) scale(${sb})`;
});

Easing and timing

The clip runs 1.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

Interpolating scale linearly from 9 to 1 spends its first frames at a speed the eye cannot follow and its last ones crawling; the log path keeps each frame the same percentage larger. The camera centre moves from the detail to the frame centre on the same p, so the detail leaves the middle as the card arrives. The ground layer needs a box much larger than the frame (here 700 vw) with transform-origin at the frame origin, or its edge shows at 9x. Hold the tight frame 0.1 s, not longer: the detail must be a hook, not a still. The tight frame needs one clear subject and nothing half-cropped beside it.

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

Sound

Sound: bloom at 0.10 s into the move, when the pull back leaves the detail, so the film has sound from its first beat (default gain).