Skip to main content

Rack Focus

A focus pull with real aperture bokeh: the focal plane travels from a near subject to a far one, so one resolves as the other blows into hard-edged polygon discs that clip to a cat’s eye toward the corners. A focus pull only reads against content at two clearly separated depths, so this block carries its own depth-layered night exterior and puts both subject depths on variables.

Add it to your video

It runs for 6 seconds at 1920×1080. Paste this into your composition:
index.html
Move it in time with data-start. Put it on a different timeline row with data-track-index. See data attributes for the rest.

Change how it looks

Set these CSS variables on the block:
  • --nearfocus — Near focal distance in metres (where the pull starts and the near subject sits). Defaults to 1.2.
  • --farfocus — Far focal distance in metres (where the pull ends and the far subject sits). Defaults to 80.
  • --focallength — Focal length in mm (longer lens = shallower depth of field). Defaults to 85.
  • --aperture — Aperture f-number (lower = bigger bokeh). Defaults to 1.8.
  • --blades — Aperture blade count, the bokeh polygon’s sides. Defaults to 6.
  • --catseye — Cat’s-eye clipping at the frame corners (mechanical vignetting). Defaults to 0.62.
  • --pullstart — Seconds held on the near subject before the pull starts. Defaults to 1.2.
  • --pullduration — Pull duration in seconds. Defaults to 3.2.
  • --pullease — Pull easing (any GSAP ease name). Defaults to power2.inOut.
  • --bokeh — Bokeh exposure. Defaults to 1.
  • --backdrop — Backdrop. Defaults to #05060a.

Variables

Every one of these has a default, so the piece works untouched. Set the ones you want to change on the element:Set them with data-variable-values on the element that mounts it. These are the defaults, so this behaves exactly like the preview above until you change one:
Tagged webgl shader camera depth cinematic showcase.

Related topics