> ## Documentation Index
> Fetch the complete documentation index at: https://hyperframes.heygen.com/llms.txt
> Use this file to discover all available pages before exploring further.

# UI Focus Zoom

> A full app surface establishes with one settle, then the camera zooms and pans to an anchored region on its cue and holds the zoomed state, with an optional soft focus halo at the anchor. The surface is a slot with a token-styled skeleton default.

export const InstallCommand = ({command}) => {
  const [copied, setCopied] = React.useState(false);
  const copy = async () => {
    try {
      if (navigator.clipboard && window.isSecureContext) {
        await navigator.clipboard.writeText(command);
      } else {
        const previous = document.activeElement;
        const scratch = document.createElement("textarea");
        scratch.value = command;
        scratch.setAttribute("readonly", "");
        scratch.style.position = "fixed";
        scratch.style.opacity = "0";
        document.body.appendChild(scratch);
        scratch.select();
        document.execCommand("copy");
        document.body.removeChild(scratch);
        previous?.focus?.();
      }
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch {}
  };
  return <div className="hf-install-command not-prose my-4 flex items-stretch overflow-hidden rounded-xl border border-zinc-200 bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900">
      <code className="flex-1 overflow-x-auto whitespace-nowrap border-r border-zinc-200 px-4 py-3 font-mono text-sm text-zinc-800 dark:border-zinc-800 dark:text-zinc-100">
        {command}
      </code>
      <button type="button" onClick={copy} data-copied={copied ? "true" : "false"} aria-label={`Copy ${command} to the clipboard`} className="hf-install-copy">
        <svg className="hf-install-copy-clipboard" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
          <path d="M14.25 5.25H7.25C6.14543 5.25 5.25 6.14543 5.25 7.25V14.25C5.25 15.3546 6.14543 16.25 7.25 16.25H14.25C15.3546 16.25 16.25 15.3546 16.25 14.25V7.25C16.25 6.14543 15.3546 5.25 14.25 5.25Z" />
          <path d="M2.80103 11.998L1.77203 5.07397C1.61003 3.98097 2.36403 2.96397 3.45603 2.80197L10.38 1.77297C11.313 1.63397 12.19 2.16297 12.528 3.00097" />
        </svg>
        <svg className="hf-install-copy-check" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
          <path d="M2.75 9.5L6.5 13.25L15.25 4.5" />
        </svg>
      </button>
      <span className="hf-install-copy-status" role="status" aria-live="polite">
        {copied ? "Copied" : ""}
      </span>
    </div>;
};

<iframe className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800" title="ui-focus-zoom preview" loading="lazy" srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/ui-focus-zoom.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/ui-focus-zoom.png");document.body.appendChild(p)});<\/script></body></html>`} />

## Install

<InstallCommand command="npx hyperframes add ui-focus-zoom" />

That writes one file: `compositions/components/ui-focus-zoom.html`.

## Paste it into your composition

Open `compositions/components/ui-focus-zoom.html` and copy what is inside into your own composition.

A component has no size or duration of its own. It takes both from the composition
you paste it into.

## 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                                                                              |
| ---------- | ------- | ------------------------- | ----------------------------------------------------------------------------------------- |
| `anchor_x` | `64`    | 0% to 100%, step 1%       | Focus anchor, percent from the left edge of the surface.                                  |
| `anchor_y` | `36`    | 0% to 100%, step 1%       | Focus anchor, percent from the top edge of the surface.                                   |
| `zoom`     | `1.6`   | 1 to 3, step 0.05         | Camera scale at the focused state.                                                        |
| `zoom_at`  | `1.4`   | 0s to 30s, step 0.1s      | Seconds from mount start when the camera departs for the anchor. Clamped inside the hold. |
| `halo`     | `show`  | `show`, `hide`            | Soft accent bloom at the anchor as the camera arrives.                                    |
| `accent`   | `green` | `green`, `blue`, `violet` | Token the halo and skeleton accent elements ride.                                         |
| `exit`     | `none`  | `none`, `fade`, `up`      | Optional departure. None holds the final frame.                                           |

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 theme={null}
<div
  data-composition-id="ui-focus-zoom"
  data-composition-src="compositions/components/ui-focus-zoom.html"
  data-variable-values='{"anchor_x":64,"anchor_y":36,"zoom":1.6,"zoom_at":1.4,"halo":"show","accent":"green","exit":"none"}'
></div>
```

## Source

<Accordion title={`ui-focus-zoom.html`}>
  ```html theme={null}
  <!doctype html>
  <!--
    ui-focus-zoom -- HyperFrames video primitive (product demo / camera)

    A full app surface establishes with one settle, then the camera zooms and
    pans to an anchored region on its cue and holds the zoomed state. An
    optional focus halo blooms softly at the anchor as the camera arrives.

    Camera-servo law: the camera lives on ONE world wrapper transform,
    translate(x, y) scale(S). A world point offset o from center lands at
    S * o + T, so T = -offset * S. Offsets are percentages of the world's own
    box (the world fills the viewport), so no pixel measurement is needed and
    the primitive stays fully elastic. Micro-drift is built from integer sine
    cycles (2 and 3 full cycles) that end at exactly zero before the authored
    stillness, so the hold is dead still and every seek is reproducible.

    The pan is clamped so the scaled world always covers the viewport:
    |T| <= 50 * (S - 1) minus the drift amplitude. Extreme anchors near an
    edge center as close as the clamp allows without revealing background.

    The surface is a SLOT. Callers supply content by placing an inert template
    anywhere in the HOST page (templates never render, and the runtime wipes
    the host clip's own children on mount, so the slot lives at document
    level):

      <template data-slot="ui-focus-zoom-screen"> ... </template>

    Slot content may be an <img>, a muted <video>, or arbitrary HTML; direct
    img/video children are stretched to cover the surface. When no slot
    exists, the primitive renders a token-styled skeleton app (header bar,
    sidebar, content cards; hairline borders, surface mixes, one accent
    element, no branding).

    Variables (declared in data-composition-variables below):
      - anchor_x (number percent, default 64): focus anchor from the left edge.
      - anchor_y (number percent, default 36): focus anchor from the top edge.
      - zoom (number, default 1.6): camera scale at the focused state (1 to 3).
      - zoom_at (number seconds, default 1.4): camera departure cue from mount
        start; clamped inside [IN, D - OUT - move] so the move never fights
        the entrance or the exit.
      - halo ("show" | "hide", default "show"): soft accent bloom at the anchor.
      - accent ("green" | "blue" | "violet", default "green"): green rides
        --brand, blue rides --accent, violet rides --accent-2.
      - exit ("none" | "fade" | "up", default "none"): frame roots own
        transitions; the default holds the final frame to the last pixel.

    Envelope, fixed IN and OUT with elastic HOLD only (never timeScale):
      IN_BASE   = 0.90s  one settle: rise + soft scale + fade
      ZOOM_BASE = 1.10s  the camera move, power2.inOut servo ease
      HOLD      = elastic; micro-drift ends at zero, then authored stillness
      OUT_BASE  = 0.50s  only when exit != none
      If D < IN_BASE + ZOOM_BASE + OUT_BASE, the phases compress together.

    Mount contract: the runtime clones only this template. #root fills the
    host box (no data-width/data-height, container-type: size, cqmin units),
    is styled via #root only, and registers one paused timeline under the
    LITERAL "ui-focus-zoom" key. Camera and drift tween plain objects and
    repaint through one applyCamera writer, so any seek order lands the same
    transform.
  -->
  <html
    lang="en"
    data-composition-id="ui-focus-zoom"
    data-composition-duration="4.5"
    data-composition-variables='[
      { "id": "anchor_x", "type": "number", "role": "content", "label": "Anchor X", "description": "Focus anchor, percent from the left edge of the surface.", "default": 64, "min": 0, "max": 100, "step": 1, "unit": "%" },
      { "id": "anchor_y", "type": "number", "role": "content", "label": "Anchor Y", "description": "Focus anchor, percent from the top edge of the surface.", "default": 36, "min": 0, "max": 100, "step": 1, "unit": "%" },
      { "id": "zoom", "type": "number", "role": "content", "label": "Zoom", "description": "Camera scale at the focused state.", "default": 1.6, "min": 1, "max": 3, "step": 0.05 },
      { "id": "zoom_at", "type": "number", "role": "timing", "label": "Zoom at", "description": "Seconds from mount start when the camera departs for the anchor. Clamped inside the hold.", "default": 1.4, "min": 0, "max": 30, "step": 0.1, "unit": "s" },
      { "id": "halo", "type": "enum", "role": "style", "label": "Halo", "description": "Soft accent bloom at the anchor as the camera arrives.", "default": "show", "options": [{ "value": "show", "label": "Show" }, { "value": "hide", "label": "Hide" }] },
      { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Token the halo and skeleton accent elements ride.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
      { "id": "exit", "type": "enum", "role": "style", "label": "Exit", "description": "Optional departure. None holds the final frame.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
    ]'
  >
    <head>
      <meta charset="UTF-8" />
      <title>UI Focus Zoom</title>
    </head>
    <body>
      <template>
        <div id="root" data-composition-id="ui-focus-zoom" data-duration="4.5" data-fps="30">
          <style>
            *,
            *::before,
            *::after {
              box-sizing: border-box;
            }

            #root {
              position: absolute;
              inset: 0;
              overflow: hidden;
              container-type: size;
              isolation: isolate;
              color: var(--fg, #f8fafc);
              font-family: var(--font-body, ui-sans-serif, system-ui, sans-serif);
              pointer-events: none;
            }

            .ufz-clip {
              position: absolute;
              inset: 0;
              display: grid;
              place-items: center;
              overflow: hidden;
              background: var(--bg, transparent);
            }

            .ufz-stage {
              position: relative;
              width: 100%;
              height: 100%;
              will-change: transform, opacity;
            }

            /* the fixed frame: the camera moves the world inside this window */
            .ufz-frame {
              position: absolute;
              inset: 0;
              overflow: hidden;
              border: 0.16cqmin solid color-mix(in srgb, var(--border, #475569) 85%, transparent);
              border-radius: calc(var(--radius, 2cqmin) * 1.2);
              background: color-mix(in srgb, var(--surface, #0b1016) 96%, var(--ufz-accent));
              box-shadow: 0 3cqh 9cqh color-mix(in srgb, var(--bg, #000000) 45%, transparent);
            }

            /* ONE world wrapper: all camera motion is this element's transform */
            .ufz-world {
              position: absolute;
              inset: 0;
              will-change: transform;
            }

            .ufz-surface {
              position: absolute;
              inset: 0;
              overflow: hidden;
              background: color-mix(in srgb, var(--surface, #0b1016) 88%, var(--bg, #05070c));
            }

            .ufz-surface > img,
            .ufz-surface > video {
              display: block;
              width: 100%;
              height: 100%;
              object-fit: cover;
            }

            .ufz-halo {
              position: absolute;
              z-index: 2;
              width: 30cqmin;
              height: 30cqmin;
              border-radius: 50%;
              background: radial-gradient(
                circle,
                color-mix(in srgb, var(--ufz-accent) 26%, transparent) 0%,
                color-mix(in srgb, var(--ufz-accent) 12%, transparent) 42%,
                transparent 70%
              );
              will-change: transform, opacity;
            }

            /* default skeleton surface: pure token furniture, no branding */
            .ufz-skel {
              position: absolute;
              inset: 0;
              display: grid;
              grid-template-rows: auto minmax(0, 1fr);
            }

            .ufz-skel-top {
              display: flex;
              align-items: center;
              gap: var(--space-1, 1.6cqmin);
              padding: 1.8cqmin 2.6cqmin;
              border-bottom: 0.14cqmin solid
                color-mix(in srgb, var(--border, #475569) 55%, transparent);
            }

            .ufz-skel-mark {
              width: 2.6cqmin;
              height: 2.6cqmin;
              border-radius: 0.8cqmin;
              background: color-mix(in srgb, var(--ufz-accent) 74%, var(--surface, #0b1016));
            }

            .ufz-skel-line {
              height: 1.25cqmin;
              border-radius: 999px;
              background: color-mix(in srgb, var(--fg, #f8fafc) 13%, transparent);
            }

            .ufz-skel-top .ufz-skel-line:nth-of-type(1) {
              width: 9cqmin;
            }

            .ufz-skel-top .ufz-skel-line:nth-of-type(2) {
              width: 6.5cqmin;
            }

            .ufz-skel-spring {
              flex: 1;
            }

            .ufz-skel-chip {
              width: 8.5cqmin;
              height: 2.9cqmin;
              border: 0.14cqmin solid color-mix(in srgb, var(--ufz-accent) 55%, transparent);
              border-radius: 999px;
              background: color-mix(in srgb, var(--ufz-accent) 28%, transparent);
            }

            .ufz-skel-avatar {
              width: 2.8cqmin;
              height: 2.8cqmin;
              border-radius: 50%;
              background: color-mix(in srgb, var(--fg, #f8fafc) 18%, transparent);
            }

            .ufz-skel-body {
              display: grid;
              grid-template-columns: 22% minmax(0, 1fr);
              min-height: 0;
            }

            .ufz-skel-side {
              display: flex;
              flex-direction: column;
              gap: 2cqmin;
              padding: 2.6cqmin;
              border-right: 0.14cqmin solid
                color-mix(in srgb, var(--border, #475569) 55%, transparent);
            }

            .ufz-skel-side .ufz-skel-line:nth-child(1) {
              width: 78%;
              background: color-mix(in srgb, var(--fg, #f8fafc) 22%, transparent);
            }

            .ufz-skel-side .ufz-skel-line:nth-child(2) {
              width: 56%;
            }

            .ufz-skel-side .ufz-skel-line:nth-child(3) {
              width: 66%;
            }

            .ufz-skel-side .ufz-skel-line:nth-child(4) {
              width: 44%;
            }

            .ufz-skel-side .ufz-skel-line:nth-child(5) {
              width: 60%;
            }

            .ufz-skel-main {
              display: flex;
              flex-direction: column;
              gap: var(--space-2, 1.8cqmin);
              min-height: 0;
              padding: var(--space-3, 2.8cqmin);
            }

            .ufz-skel-heading {
              width: 34%;
              height: 2.5cqmin;
              border-radius: 999px;
              background: color-mix(in srgb, var(--fg, #f8fafc) 21%, transparent);
            }

            .ufz-skel-sub {
              width: 52%;
              height: 1.25cqmin;
              border-radius: 999px;
              background: color-mix(in srgb, var(--fg, #f8fafc) 9%, transparent);
            }

            .ufz-skel-cards {
              display: grid;
              flex: 1;
              grid-template-columns: repeat(3, minmax(0, 1fr));
              gap: 2.1cqmin;
              min-height: 0;
              margin-top: 0.8cqmin;
            }

            .ufz-skel-card {
              display: flex;
              flex-direction: column;
              gap: 1.5cqmin;
              min-height: 0;
              padding: 2.1cqmin;
              border: 0.14cqmin solid color-mix(in srgb, var(--border, #475569) 60%, transparent);
              border-radius: var(--radius, 1.6cqmin);
              background: color-mix(in srgb, var(--bg, #05070c) 30%, transparent);
            }

            .ufz-skel-card .ufz-skel-line {
              width: 55%;
            }

            .ufz-skel-block {
              flex: 1;
              min-height: 3cqmin;
              border-radius: calc(var(--radius, 1.6cqmin) * 0.6);
              background: color-mix(in srgb, var(--fg, #f8fafc) 7%, transparent);
            }

            .ufz-skel-card:nth-child(2) .ufz-skel-block {
              background: color-mix(in srgb, var(--ufz-accent) 17%, transparent);
            }
          </style>

          <div
            id="ui-focus-zoom-clip"
            class="ufz-clip clip"
            data-start="0"
            data-duration="4.5"
            data-track-index="0"
          >
            <div class="ufz-stage">
              <div class="ufz-frame" role="img" aria-label="App surface with a camera focus zoom">
                <div class="ufz-world">
                  <div class="ufz-surface">
                    <div class="ufz-skel" aria-hidden="true">
                      <div class="ufz-skel-top">
                        <span class="ufz-skel-mark"></span>
                        <span class="ufz-skel-line"></span>
                        <span class="ufz-skel-line"></span>
                        <span class="ufz-skel-spring"></span>
                        <span class="ufz-skel-chip"></span>
                        <span class="ufz-skel-avatar"></span>
                      </div>
                      <div class="ufz-skel-body">
                        <div class="ufz-skel-side">
                          <span class="ufz-skel-line"></span>
                          <span class="ufz-skel-line"></span>
                          <span class="ufz-skel-line"></span>
                          <span class="ufz-skel-line"></span>
                          <span class="ufz-skel-line"></span>
                        </div>
                        <div class="ufz-skel-main">
                          <span class="ufz-skel-heading"></span>
                          <span class="ufz-skel-sub"></span>
                          <div class="ufz-skel-cards">
                            <div class="ufz-skel-card">
                              <span class="ufz-skel-line"></span>
                              <span class="ufz-skel-block"></span>
                            </div>
                            <div class="ufz-skel-card">
                              <span class="ufz-skel-line"></span>
                              <span class="ufz-skel-block"></span>
                            </div>
                            <div class="ufz-skel-card">
                              <span class="ufz-skel-line"></span>
                              <span class="ufz-skel-block"></span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="ufz-halo" aria-hidden="true"></div>
                </div>
              </div>
            </div>
          </div>

          <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
          <script>
            (function () {
              "use strict";

              var root = document.getElementById("root");
              var stage = root.querySelector(".ufz-stage");
              var world = root.querySelector(".ufz-world");
              var surface = root.querySelector(".ufz-surface");
              var halo = root.querySelector(".ufz-halo");
              var vars =
                window.__hyperframes && window.__hyperframes.getVariables
                  ? window.__hyperframes.getVariables()
                  : {};

              function num(value, fallback, min, max) {
                var parsed = parseFloat(value);
                if (!isFinite(parsed)) parsed = fallback;
                return Math.min(max, Math.max(min, parsed));
              }

              var anchorX = num(vars.anchor_x, 64, 0, 100);
              var anchorY = num(vars.anchor_y, 36, 0, 100);
              var zoom = num(vars.zoom, 1.6, 1, 3);
              var zoomAt = num(vars.zoom_at, 1.4, 0, 30);
              var haloOn = vars.halo !== "hide";
              // Each enum choice routes to a DIFFERENT contract token so the
              // variable stays meaningful under a theme.
              var accentColors = {
                green: "var(--brand, #71f5a7)",
                blue: "var(--accent, #61a8ff)",
                violet: "var(--accent-2, #c5a3ff)",
              };
              var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
                ? vars.accent
                : "green";
              var exitMode = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";

              root.style.setProperty("--ufz-accent", accentColors[accent]);

              // SLOT. Caller templates live at HOST DOCUMENT level (the mount
              // wipes host-clip children, and templates never render). The
              // scoped `document` proxy filters queries to this composition's
              // subtree, so the lookup deliberately goes through ownerDocument.
              var hostDoc = root.ownerDocument;
              var slotTemplate = null;
              try {
                slotTemplate = hostDoc.querySelector('template[data-slot="ui-focus-zoom-screen"]');
              } catch (error) {
                slotTemplate = null;
              }
              if (slotTemplate) {
                surface.querySelector(".ufz-skel").remove();
                surface.appendChild(hostDoc.importNode(slotTemplate.content, true));
              }

              /* ===== Camera (camera-servo law): translate(x, y) scale(S) on the
                 ONE world wrapper. Translate percentages resolve against the
                 world's own box, which fills the viewport, so a world point at
                 offset o percent from center lands at S * o + T and the target
                 transform is T = -(anchor - 50) * S, no measurement needed.
                 The pan is clamped so the scaled world always covers the
                 viewport (|T| <= 50 * (S - 1) minus the drift amplitude). ===== */
              var DRIFT_X = 0.16;
              var DRIFT_Y = 0.11;
              var panMax = Math.max(0, 50 * (zoom - 1) - Math.max(DRIFT_X, DRIFT_Y) - 0.2);
              var targetX = Math.min(panMax, Math.max(-panMax, -(anchorX - 50) * zoom));
              var targetY = Math.min(panMax, Math.max(-panMax, -(anchorY - 50) * zoom));

              var cam = { s: 1, x: 0, y: 0 };
              var drift = { p: 0, dx: 0, dy: 0 };
              function applyCamera() {
                world.style.transform =
                  "translate(" +
                  (cam.x + drift.dx) +
                  "%, " +
                  (cam.y + drift.dy) +
                  "%) scale(" +
                  cam.s +
                  ")";
              }
              applyCamera();

              // Halo pinned to the anchor in world space; it rides the camera.
              // Explicit both-endpoint state BEFORE the timeline exists: the
              // bloom fromTo sits mid-timeline, so without this set a seek that
              // lands before the cue would show the halo unstyled.
              halo.style.left = anchorX + "%";
              halo.style.top = anchorY + "%";
              if (!haloOn) halo.remove();
              else
                gsap.set(halo, {
                  opacity: 0,
                  scale: 0.55,
                  xPercent: -50,
                  yPercent: -50,
                  transformOrigin: "50% 50%",
                });

              // Envelope: fixed IN/ZOOM/OUT, elastic HOLD, never time-scaled.
              var IN_BASE = 0.9;
              var ZOOM_BASE = 1.1;
              var OUT_BASE = exitMode === "none" ? 0 : 0.5;
              var STILLNESS = 0.35;
              var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4.5"));
              var totalBase = IN_BASE + ZOOM_BASE + OUT_BASE;
              var scale = duration < totalBase ? duration / totalBase : 1;
              var IN = IN_BASE * scale;
              var ZOOM = ZOOM_BASE * scale;
              var OUT = OUT_BASE * scale;
              var OUT_START = duration - OUT;

              // The camera departs on its cue, clamped so the move never fights
              // the entrance or the exit.
              var zoomStart = Math.min(Math.max(zoomAt, IN), Math.max(IN, OUT_START - ZOOM - 0.05));

              var tl = gsap.timeline({ paused: true });

              // IN: one settle. Rise + soft scale + fade, smooth ease-out.
              tl.fromTo(
                stage,
                { opacity: 0, y: "4.5cqh", scale: 0.965, transformOrigin: "50% 60%" },
                { opacity: 1, y: "0cqh", scale: 1, duration: IN, ease: "power3.out" },
                0,
              );

              // Camera servo: one move to the anchored region, then hold zoomed.
              tl.to(
                cam,
                {
                  s: zoom,
                  x: targetX,
                  y: targetY,
                  duration: ZOOM,
                  ease: "power2.inOut",
                  onUpdate: applyCamera,
                },
                zoomStart,
              );

              // Micro-drift: 2 and 3 INTEGER sine cycles that end at exactly
              // zero before the authored stillness, so the final hold is dead
              // still and every seek reproduces the same frame.
              var driftDuration = Math.max(0, OUT_START - STILLNESS);
              if (driftDuration >= 1.2) {
                tl.to(
                  drift,
                  {
                    p: Math.PI * 2 * 2,
                    duration: driftDuration,
                    ease: "none",
                    onUpdate: function () {
                      drift.dx = Math.sin(drift.p) * DRIFT_X;
                      drift.dy = Math.sin(drift.p * 1.5) * DRIFT_Y;
                      applyCamera();
                    },
                  },
                  0,
                );
              }

              // Halo: soft bloom at the anchor as the camera arrives, then hold.
              if (haloOn) {
                tl.fromTo(
                  halo,
                  { opacity: 0, scale: 0.55, xPercent: -50, yPercent: -50 },
                  {
                    opacity: 0.85,
                    scale: 1,
                    xPercent: -50,
                    yPercent: -50,
                    duration: 0.75 * scale,
                    ease: "power2.out",
                  },
                  zoomStart + ZOOM * 0.5,
                );
              }

              // OUT: only when exit != none; the default holds the last frame.
              if (exitMode !== "none") {
                tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
                if (exitMode === "up") {
                  tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
                }
              }

              tl.seek(0);
              window.__timelines = window.__timelines || {};
              window.__timelines["ui-focus-zoom"] = tl;
            })();
          </script>
        </div>
      </template>
    </body>
  </html>
  ```
</Accordion>

Tagged `camera` `product-demo` `zoom` `focus` `pan` `slot` `servo`.

## Related topics

* [Browse the complete Catalog](/catalog)
* [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
* [Build a richer composition](/go-further)


## Related topics

- [Parallax Zoom](/catalog/components/parallax-zoom.md)
- [Focus Swap](/catalog/components/focus-swap.md)
- [Parallax Unzoom](/catalog/components/parallax-unzoom.md)
