mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-04 16:42:27 +00:00
This reverts commit 3b53bfd2f7.
This commit is contained in:
Miguel Ángel
@@ -1,78 +0,0 @@
|
||||
# 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. An optional focus halo blooms softly at the anchor as the camera arrives. The camera-servo law applies: all camera motion is ONE world wrapper transform, and the micro-drift is built from integer sine cycles that end at exactly zero before the authored stillness, so the hold is dead still.
|
||||
|
||||
- 4.5s authored, elastic HOLD (the envelope never time-scales).
|
||||
- Timeline registered at `window.__timelines["ui-focus-zoom"]`.
|
||||
- Elastic root: no `data-width`/`data-height`, sized by the host clip, `cqmin` units.
|
||||
|
||||
## Variables
|
||||
|
||||
| Variable | Type | Default | Notes |
|
||||
| ---------- | ------ | ------- | -------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `anchor_x` | number | `64` | Focus anchor, percent from the left edge of the surface (0 to 100). |
|
||||
| `anchor_y` | number | `36` | Focus anchor, percent from the top edge of the surface (0 to 100). |
|
||||
| `zoom` | number | `1.6` | Camera scale at the focused state (1 to 3). At `1` the camera cannot pan. |
|
||||
| `zoom_at` | number | `1.4` | Seconds from mount start when the camera departs. Clamped inside the hold so the move never fights the entrance or the exit. |
|
||||
| `halo` | enum | `show` | `show` blooms a soft accent glow at the anchor as the camera arrives; `hide` removes it. |
|
||||
| `accent` | enum | `green` | `green` rides `--brand`, `blue` rides `--accent`, `violet` rides `--accent-2`. Colors the halo and the skeleton accent elements. |
|
||||
| `exit` | enum | `none` | `none` holds the final frame (frame roots own transitions), `fade`, or `up`. |
|
||||
|
||||
## The surface slot
|
||||
|
||||
The app surface is a slot. Callers supply content by placing an inert `<template>` element anywhere in the **host page** (typically next to the mount clip). Templates never render on their own, and the runtime clears the host clip's children on mount, so the slot deliberately lives at document level:
|
||||
|
||||
```html
|
||||
<template data-slot="ui-focus-zoom-screen"> ...full app surface... </template>
|
||||
```
|
||||
|
||||
Slot content can be an `<img>`, a `<video>`, or arbitrary HTML. Direct `img`/`video` children of the surface are stretched to `object-fit: cover`. 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).
|
||||
|
||||
Notes:
|
||||
|
||||
- Slot lookup is by the fixed name above, so two slotted instances on one page share the same slot content. Give multiple instances distinct content by mounting them from different host frames.
|
||||
- A `<video>` in the slot is not seek-synced by the framework (framework-owned media playback applies to clips, not slot children). Prefer a still image or HTML for deterministic renders.
|
||||
- Aim `anchor_x`/`anchor_y` at the region of your artwork the story lands on; the camera centers it as closely as the edge clamp allows.
|
||||
|
||||
## The camera
|
||||
|
||||
The camera lives on one world wrapper as `translate(x, y) scale(S)`. Translate percentages resolve against the world's own box, so no pixel measurement is needed and the primitive stays fully elastic to its host. The pan is clamped so the scaled world always covers the viewport: with an extreme edge anchor or a low `zoom`, the camera centers the anchor as closely as it can without revealing background. At `zoom: 1` there is no pan at all (nothing to zoom into).
|
||||
|
||||
## Worked examples
|
||||
|
||||
Mount host with a skeleton surface (no slot):
|
||||
|
||||
```html
|
||||
<div
|
||||
class="clip"
|
||||
data-composition-id="ui-focus-zoom"
|
||||
data-composition-src="./components/ui-focus-zoom.html"
|
||||
data-variable-values='{"anchor_x":72,"anchor_y":30,"zoom":1.8,"zoom_at":1.6,"accent":"blue"}'
|
||||
data-start="0"
|
||||
data-duration="4.5"
|
||||
data-track-index="0"
|
||||
style="position:absolute; inset:0; container-type:size;"
|
||||
></div>
|
||||
```
|
||||
|
||||
### Zoom into a product screenshot
|
||||
|
||||
```html
|
||||
<template data-slot="ui-focus-zoom-screen">
|
||||
<img src="./assets/dashboard.png" alt="" />
|
||||
</template>
|
||||
```
|
||||
|
||||
Set `anchor_x`/`anchor_y` to the feature's position in the artwork (percent of the image after cover-fit) and `zoom_at` to the narration beat that names it.
|
||||
|
||||
### Quiet establish, late push
|
||||
|
||||
Mount with `{"zoom_at":2.6,"zoom":1.5,"halo":"hide"}` for a long readable establish and a restrained late push with no halo.
|
||||
|
||||
## Motion envelope
|
||||
|
||||
- IN 0.9s: one settle (rise from 4.5cqh + scale 0.965 to 1 + fade, power ease-out).
|
||||
- Camera 1.1s at `zoom_at` (clamped): one servo move to the anchor, power2.inOut.
|
||||
- Halo (optional): 0.75s soft bloom starting halfway through the camera move.
|
||||
- HOLD: elastic; micro-drift from integer sine cycles (2 and 3 full cycles) ends at exactly zero, then 0.35s authored stillness.
|
||||
- OUT 0.5s only when `exit` is `fade` or `up`; the default `none` holds to the last frame.
|
||||
-91
@@ -1,91 +0,0 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
ui-focus-zoom demo. This standalone composition mounts the primitive
|
||||
through data-composition-src. Non-default anchor, zoom, cue, and accent
|
||||
values prove the variable path while the primitive remains elastic to its
|
||||
host.
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=1920, height=1080" />
|
||||
<title>ui-focus-zoom Demo</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: var(--bg, #0b0c0e);
|
||||
}
|
||||
|
||||
#root {
|
||||
--bg: #0b0c0e;
|
||||
--fg: #f8fafc;
|
||||
--surface: #14171c;
|
||||
--border: #343a46;
|
||||
--brand: #71f5a7;
|
||||
--accent: #c5a3ff;
|
||||
--font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: radial-gradient(
|
||||
ellipse at 50% 44%,
|
||||
var(--bg, #171a20) 0%,
|
||||
var(--bg, #0b0c0e) 72%
|
||||
);
|
||||
}
|
||||
|
||||
.mount-card {
|
||||
width: 72%;
|
||||
height: 64%;
|
||||
left: 14%;
|
||||
top: 18%;
|
||||
container-type: size;
|
||||
overflow: hidden;
|
||||
border: 1px solid color-mix(in srgb, var(--border, #94a3b8) 20%, transparent);
|
||||
border-radius: 30px;
|
||||
background: color-mix(in srgb, var(--surface, #101318) 72%, transparent);
|
||||
box-shadow: 0 40px 100px color-mix(in srgb, var(--bg, #000000) 48%, transparent);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="root"
|
||||
data-composition-id="ui-focus-zoom-demo"
|
||||
data-start="0"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
data-duration="4.5"
|
||||
data-fps="30"
|
||||
>
|
||||
<div
|
||||
id="ui-focus-zoom-mount"
|
||||
class="mount-card clip"
|
||||
data-composition-id="ui-focus-zoom"
|
||||
data-composition-src="./ui-focus-zoom.html"
|
||||
data-variable-values='{"anchor_x":30,"anchor_y":60,"zoom":2,"zoom_at":1.2,"accent":"blue"}'
|
||||
data-start="0"
|
||||
data-duration="4.5"
|
||||
data-track-index="0"
|
||||
data-width="1382"
|
||||
data-height="691"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
window.__timelines["ui-focus-zoom-demo"] = gsap.timeline({ paused: true });
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,107 +0,0 @@
|
||||
{
|
||||
"$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
|
||||
"name": "ui-focus-zoom",
|
||||
"type": "hyperframes:component",
|
||||
"title": "UI Focus Zoom",
|
||||
"description": "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.",
|
||||
"tags": ["camera", "product-demo", "zoom", "focus", "pan", "slot", "servo"],
|
||||
"jobs": ["demonstrate"],
|
||||
"family": "product-demo",
|
||||
"profile": "camera",
|
||||
"evidence": "Wave J J2-2: adversarial panel hero shelf, camera-servo law from flagship frame 04 (one world wrapper, integer-cycle micro-drift ending at zero)",
|
||||
"syncPoints": [{ "id": "focus-arrive", "phase": "in", "offset": 2.5 }],
|
||||
"files": [
|
||||
{
|
||||
"path": "ui-focus-zoom.html",
|
||||
"target": "compositions/components/ui-focus-zoom.html",
|
||||
"type": "hyperframes:snippet"
|
||||
}
|
||||
],
|
||||
"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" }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1,564 +0,0 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user