Rack Focus

> ## Documentation Index > Fetch the complete documentation index at: /llms.txt > Use this file to discover all available pages before exploring further. # 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. # 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. **Rack Focus** ```html rack-focus.html Rack Focus

``` Copy npx hyperframes add rack-focus to the clipboard That writes one file: `compositions/rack-focus.html`. ## Add it to your video It runs for 6 seconds at 1920×1080. Paste this into your composition: ```html index.html

``` Move it in time with `data-start`. Put it on a different timeline row with `data-track-index`. See [data attributes](/concepts/data-attributes.md) 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: | Variable | Default | Accepts | What it does | | - | - | - | - | | `nearfocus` | `1.2` | 0.2m to 100m, step 0.05m | | | `farfocus` | `80` | 0.3m to 400m, step 0.5m | | | `focallength` | `85` | 12mm to 300mm, step 1mm | | | `aperture` | `1.8` | 0.95 to 22, step 0.05 | | | `blades` | `6` | 3 to 14, step 1 | | | `catseye` | `0.62` | 0 to 1, step 0.02 | | | `pullstart` | `1.2` | 0s to 30s, step 0.05s | | | `pullduration` | `3.2` | 0.1s to 30s, step 0.05s | | | `pullease` | `power2.inOut` | string | | | `bokeh` | `1` | 0 to 3, step 0.05 | | | `backdrop` | `#05060a` | color | | 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: ```html wrap

``` {/* hf:generated-footer */} Tagged `webgl` `shader` `camera` `depth` `cinematic` `showcase`. ## Related topics * [Browse the complete Catalog](/catalog.md) * [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks.md) * [Put blocks together into one video](/concepts/compositions.md)