Rack focus

When to use

Status: a layer swap, not a lens. Two filter: blur() layers are a uniform blur with no depth (lens, rejected approximations). Use this only to move the viewer's attention between two flat layers; for a real depth of field and focus pull on a screen, use the lens dof option with a focus that follows the target (core/surfaces/lens.js).

Use when two things at different depths share a frame and the story passes from one to the other: the draft in front, the shipped result behind. The near layer is sharp and the far layer soft; the focus pulls, the near layer melts and the far one resolves. Pinpoint lights behind grow into soft discs when out of focus and snap to points when in it, which is what sells a lens. Clip: rack-focus.mp4. Demo: demo/rack-focus.html.

Use once per film: the lights that swell into discs is a stock device (rule no-tells), never the idea.

The code

import { EASE } from '../../core/motion/presets.js';
const pull = EASE.settle;
const beat = { duration: 700, delay: 550, easing: pull, fill: 'both' };
near.animate([{ filter: 'blur(0px)' }, { filter: 'blur(1.9vh)' }], beat);
far.animate([{ filter: 'blur(1.9vh)' }, { filter: 'blur(0px)' }], beat);
far.animate([{ scale: 1.015 }, { scale: 1 }], beat);        // focus breathing
near.animate([{ scale: 1 }, { scale: 0.985 }], beat);
near.animate([{ opacity: 1 }, { opacity: 0.55 }], beat);    // the defocused layer also steps back

Easing and timing

The clip runs 1.4 s. The look is dusk.

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

Both blurs run on the same curve, so at the midpoint the two layers are equally soft: that is the moment the lens is between planes, and it must be brief (0.7 s in all). The curve eases in, peaks and lands soft, like a hand on a focus ring. Blur is a state here, not motion blur: the layers hold still and only the focus moves. Keep the blur radius in vh (1.9 vh) so it scales with the frame. The 1.5 percent scale change is focus breathing; more than 3 percent looks like a zoom.

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

Sound

Sound: none; a focus pull is felt, never heard.