Design Atlas
한국어
◧ Film & photo

Rack focus

랙 포커스

Shifting focus from one subject to another mid-shot to deliberately redirect the viewer's attention.

Also known as: Focus pullPulling focus
···
html
<div class="stage">
  <div class="subj a">A</div>
  <div class="subj b">B</div>
  <div class="ring"></div>
</div>
css
.stage{position:absolute;inset:0;background:linear-gradient(160deg,#20222e,#14141c)}
.subj{position:absolute;border-radius:50%;display:grid;place-items:center;font:800 20px system-ui,sans-serif;color:#fff}
.a{left:18%;top:26%;width:26vmin;aspect-ratio:1;background:#5b5bf7;animation:focusA 4.4s ease-in-out infinite}
.b{left:60%;top:42%;width:19vmin;aspect-ratio:1;background:#ff5c8a;animation:focusB 4.4s ease-in-out infinite}
@keyframes focusA{0%,38%{filter:blur(0)}50%,88%{filter:blur(9px)}100%{filter:blur(0)}}
@keyframes focusB{0%,38%{filter:blur(9px)}50%,88%{filter:blur(0)}100%{filter:blur(9px)}}
.ring{position:absolute;width:27vmin;aspect-ratio:1;border:2px solid rgba(255,255,255,.55);border-radius:50%;
  animation:track 4.4s ease-in-out infinite}
@keyframes track{
  0%,38%{left:18%;top:26%;transform:scale(1)}
  50%,88%{left:60%;top:42%;transform:scale(.72)}
  100%{left:18%;top:26%;transform:scale(1)}
}

With the aperture open wide (shallow depth of field), turning the lens's focus ring shifts the focal distance — whatever was sharp a moment ago blurs, and something else snaps into focus. It's common when a conversation changes speakers, or to reveal a hidden clue later in a shot.

On a real set, a focus puller manually turns between two pre-measured marks at the right moment. Too fast and it reads as jarring; too slow and the intent gets lost — most pulls land somewhere between half a second and a second and a half.

To fake it in CSS, just animate two subjects' filter: blur() values in opposite directions. Where dolly zoom moves the camera to distort the background, rack focus keeps the camera still and only changes what counts as sharp.

When to use

Use it to swing attention between speakers in a conversation, or from a foreground clue to a background reveal. In UI work, the same idea shows up as blurring the backdrop when a modal opens to pull focus forward.