UI Focus Zoom

Install

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:

<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

ui-focus-zoom.html

<!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>

Tagged camera product-demo zoom focus pan slot servo.

Overview

Text & captions

Code

Transitions

Data & charts

Scenes & demos

Motion & effects

Surfaces

Blocks

Install

Paste it into your composition

Variables

Source

​Install

​Paste it into your composition

​Variables

​Source

​Related topics

Install

Paste it into your composition

Variables

Source

Related topics