Viewport Change · Hyperframes Animation · heygen-com/hyperframes · Skills Docs

Viewport Change · Hyperframes Animation · heygen-com/hyperframes · Skills Docs

<div class="world" id="world">
  <div class="content">
    <div class="hero">{Brand}</div>
    <div class="tagline">{tagline}</div>
    <div class="cta" id="cta">{ctaUrl}</div>
  </div>
</div>

.scene {
  overflow: hidden; /* REQUIRED — any non-1.0 scale reveals edges or pushes content off-frame */
  background: {bgGradient}; /* on .scene, NOT .world — a world-borne background warps with the camera */
}
.world {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform-origin: 50% 50%; /* centered scaling is what the math assumes */
  will-change: transform;
}

const world = document.getElementById("world");

// Camera state — single source of truth. The world transform is composed from
// this object in ONE place so the transform string order is stable.
const cam = { scale: 1, x: 0, y: 0 };
function applyCamera() {
  world.style.transform = `translate(${cam.x}px, ${cam.y}px) scale(${cam.scale})`;
}
applyCamera(); // seed frame 0

// Zoom in on the CTA: single-element composite transform → T = -offset × S.
// TARGET_OFFSET_Y is the target's measured offset from viewport center at
// neutral camera (sign matters — positive = below center).
const counterY = -TARGET_OFFSET_Y * TARGET_SCALE;

tl.to(
  cam,
  {
    scale: TARGET_SCALE,
    y: counterY,
    duration: ZOOM_DUR,
    ease: "power3.inOut",
    onUpdate: applyCamera,
  },
  ZOOM_START,
);

Effect	Scale	Feel
Subtle	1.02 - 1.05	Barely perceptible — “professional”
Medium	1.05 - 1.15	“Ta-da” emphasis
Noticeable	1.15 - 1.30	Focus on region
Dramatic	1.5 - 2.5	Element fills screen
Full-screen	3.0+	Element covers viewport

const focusEl = document.querySelector(".moving-cursor");
const targetScreenX = VIEWPORT_WIDTH * FOCUS_SCREEN_X_FRAC; // 0.4–0.7; 0.5 = dead center
const focusUpdate = { p: 0 };
tl.to(
  focusUpdate,
  {
    p: 1,
    duration: FOLLOW_DUR, // matches how long the focused element is in motion
    ease: "power2.inOut",
    onUpdate: () => {
      const rect = focusEl.getBoundingClientRect();
      cam.x = targetScreenX - (rect.left + rect.width / 2);
      applyCamera();
    },
  },
  FOLLOW_START,
);

token	range	notes
TARGET_OFFSET_Y	measured, not a free parameter	target’s offset from viewport center at neutral camera; measure via `getBoundingClientRect`
TARGET_SCALE	1.3× modest → 1.6–2.0× typical → 3×+	raster media needs `sourceResolution ≥ rendered × TARGET_SCALE`
ZOOM_START	content landed + ~0.5s scan time	let the viewer read before the camera moves
ZOOM_DUR	1.0–2.0s	under 0.8s teleports, over 2.5s drags
DWELL	≥ 1.0s after the zoom settles	the viewer must be able to read the focal point (climax dwell)
VIEWPORT_WIDTH	= the root’s `data-width`	real value, not abstract