Subchapter 18.77

Depth Of Field Blur

rules/depth-of-field-blur.mdMarkdown9 KBView on GitHub

Depth-of-Field Blur (Selective Focus / Rack Focus)

Pulls the eye to one focal element by blurring (and slightly dimming) everything around it while the focal layer stays sharp — the camera’s depth-of-field falling off the background, or a rack-focus shifting which plane is in focus. and are paint-only, so both tween seek-safe. This is the backing rule for the focus-falloff beat the blueprints reach for: outer nodes blurring during a push-in (), rack-focus across a parallax card stack (), non-highlighted cards dimming to spotlight a hero metric ().

Depth Of Field Blur · Hyperframes Animation · heygen-com/hyperframes · Skills Docs

filter

opacity

constellation-hub

cursor-ui-demo

dataviz-countup

<div class="world" id="world">
  <!-- Focal layer — stays sharp -->
  <div class="layer focal" id="focal">{FocalLabel}</div>
  <!-- Off-focus layers — blur + dim; data-depth orders near→far -->
  <div class="layer ctx" data-depth="1">{Context A}</div>
  <div class="layer ctx" data-depth="2">{Context B}</div>
  <div class="layer ctx" data-depth="3">{Context C}</div>
</div>

.world {
  /* single wrapper so a concurrent camera push-in transforms everything
     together; DoF is independent of the camera */
  position: relative;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
}
.layer {
  --dof: 0px; /* px of blur; filter reads it — starts sharp */
  filter: blur(var(--dof));
  will-change: filter; /* promotes the layer so per-frame re-rasterization is cheap */
}
.focal {
  z-index: 2; /* sharp layer must sit ABOVE the blurred ones, or its crisp
     edges read as bleeding into the haze */
}
.ctx {
  z-index: 1;
}

// Mechanic 1 — FOCAL PULL. Blur scales with data-depth so far planes blur
// more than near ones; the focal layer (--dof: 0, opacity: 1) is untouched.
gsap.utils.toArray(".ctx").forEach((el) => {
  const depth = Number(el.dataset.depth) || 1;
  tl.to(
    el,
    {
      "--dof": `${BLUR_PER_DEPTH * depth}px`,
      opacity: DIM_LEVEL, // dim, not gone
      duration: FOCUS_DUR,
      ease: "power2.inOut",
    },
    FOCUS_START,
  );
});

token	range	notes
BLUR_PER_DEPTH	3–6 px per depth step	a 3-plane stack tops out ~9–18 px; low = gentle DoF, high = tilt-shift falloff
MAX_BLUR	8 soft → 16 default → 24 heavy px	terminal blur for a fully-defocused plane; above ~24 px on a big surface, shrink/group the layer instead
GRID_BLUR	6–12 px	pushes cards back without losing the grid’s shape
DIM_LEVEL	0.4 strong → 0.55 default → 0.7 subtle	rarely below 0.35 — fully dark reads as “removed,” not “defocused”
FOCUS_DUR	0.5–1.2 s	a rack/pull is a deliberate move, not a snap; shorter = snap focus, longer = languid
RACK_START / RACK_DUR	shared by both planes	`gsap.set` the pre-blurred plane BEFORE `RACK_START`
FOCAL_BREATH_PX	≤ 0.6 px, period 2–3 s	barely-there nicety
FOCAL vs CTX sizing	context smaller / grouped	small context layers let a modest radius still read as “out of focus” — and blur cheaply

Depth Of Field Blur

Depth-of-Field Blur (Selective Focus / Rack Focus)

Depth Of Field Blur

Depth-of-Field Blur (Selective Focus / Rack Focus)

How It Works

Recipe

Variations

Values

Critical Constraints

See also