mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-14 18:01:20 +08:00
Miguel Ángel
51a88b9566
The install command is the one line a reader comes to a catalog page to copy, and it sat below the whole variables explorer, under its Customize panel, a screen or more down on long items. Move the Install section above the preview and regenerate all 399 pages.
420 lines
17 KiB
Plaintext
420 lines
17 KiB
Plaintext
---
|
|
title: "Outline Draw"
|
|
description: "A rounded outline that proves a callout by drawing clockwise as a hollow conic-gradient border with a clean closure."
|
|
---
|
|
|
|
import { InstallCommand } from "/snippets/install-command.jsx";
|
|
import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
|
|
|
|
## Install
|
|
|
|
<InstallCommand command="npx hyperframes add outline-draw" item="outline-draw" />
|
|
|
|
That writes one file: `compositions/components/outline-draw.html`.
|
|
|
|
<VariablesExplorer
|
|
previewSrc="/public/catalog/components/outline-draw.json"
|
|
compositionId="outline-draw"
|
|
compositionSrc="compositions/components/outline-draw.html"
|
|
variables={[{"id":"progress","type":"number","role":"timing","label":"Draw progress","description":"Final percentage of the outline that is drawn.","default":100,"min":0,"max":100,"step":1,"unit":"%"},{"id":"thickness","type":"number","role":"layout","label":"Stroke thickness","description":"Outline stroke in tenths of the host width.","default":6,"min":1,"max":20,"step":1,"unit":"0.1cqw"},{"id":"radius","type":"number","role":"layout","label":"Corner radius","description":"Corner radius in tenths of the host smaller dimension.","default":24,"min":0,"max":80,"step":1,"unit":"0.1cqmin"}]}
|
|
>
|
|
|
|
```html outline-draw.html
|
|
<!doctype html>
|
|
<!--
|
|
outline-draw: HyperFrames video primitive (effects / burst / prove)
|
|
|
|
Concept: a conic-gradient sector draws a rounded outline clockwise. Two
|
|
opaque masks, clipped to the padding box and border box, are excluded to
|
|
leave a true hollow center over whatever content is beneath the primitive.
|
|
One mechanic, one job: visually proving or certifying a framed claim.
|
|
|
|
Compiled-from evidence: OutlineDraw, "Border that draws with a composite
|
|
donut," from the CSS mask research notes.
|
|
|
|
Use when: closing a loop around proof, a selected product region, a logo
|
|
lockup, or a UI callout. Mount it over existing content. The center remains
|
|
transparent and the overlay never intercepts pointer input.
|
|
|
|
Variables:
|
|
- progress (number, 0 to 100, default 100): final drawn percentage.
|
|
- thickness (number, default 6): stroke in tenths of host cqw.
|
|
- radius (number, default 24): corner radius in tenths of host cqmin.
|
|
|
|
Envelope: fixed 0.80s IN draws the outline, elastic HOLD preserves the
|
|
completed proof, and fixed 0.40s OUT fades it. If duration is shorter than
|
|
1.20s, IN and OUT compress proportionally and HOLD becomes zero.
|
|
|
|
Sync point: draw-complete occurs at 0.80s into IN, scaled only when the
|
|
whole envelope is compressed. It never moves into the elastic HOLD.
|
|
|
|
Sound: none. A parent scene may place a static cue at draw-complete.
|
|
|
|
Mount contract: the runtime clones only this template. The root fills the
|
|
host box, owns the container query basis, has no intrinsic width or height,
|
|
and registers one paused timeline under the hardcoded outline-draw id.
|
|
-->
|
|
<html
|
|
lang="en"
|
|
data-composition-variables='[
|
|
{ "id": "progress", "type": "number", "role": "timing", "label": "Draw progress", "description": "Final percentage of the outline that is drawn.", "default": 100, "min": 0, "max": 100, "step": 1, "unit": "%" },
|
|
{ "id": "thickness", "type": "number", "role": "layout", "label": "Stroke thickness", "description": "Outline stroke in tenths of the host width.", "default": 6, "min": 1, "max": 20, "step": 1, "unit": "0.1cqw" },
|
|
{ "id": "radius", "type": "number", "role": "layout", "label": "Corner radius", "description": "Corner radius in tenths of the host smaller dimension.", "default": 24, "min": 0, "max": 80, "step": 1, "unit": "0.1cqmin" }
|
|
]'
|
|
>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Outline Draw</title>
|
|
</head>
|
|
<body>
|
|
<template>
|
|
<div id="root" data-composition-id="outline-draw" data-duration="4" data-fps="30">
|
|
<style>
|
|
@property --od-progress {
|
|
syntax: "<number>";
|
|
inherits: false;
|
|
initial-value: 0;
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#root {
|
|
position: absolute;
|
|
inset: 0;
|
|
container-type: size;
|
|
isolation: isolate;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.od-clip {
|
|
position: absolute;
|
|
inset: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* EDIT ZONE: --space-8 controls the safe inset. The public
|
|
thickness and radius variables own the remaining geometry. */
|
|
.od-outline {
|
|
--od-progress: 0;
|
|
--od-thickness: 6;
|
|
--od-radius: 24;
|
|
--od-seam-overlap: 0.5deg;
|
|
position: absolute;
|
|
inset: var(--space-8, 8cqmin);
|
|
border: calc(var(--od-thickness) * 0.1cqw) solid transparent;
|
|
border-radius: calc(var(--od-radius) * 0.1cqmin);
|
|
background: conic-gradient(
|
|
from -90deg,
|
|
var(--accent, #38bdf8) 0deg calc(var(--od-progress) * 3.6deg),
|
|
transparent calc(var(--od-progress) * 3.6deg + var(--od-seam-overlap)) 360deg
|
|
);
|
|
background-clip: border-box;
|
|
background-origin: border-box;
|
|
mask:
|
|
linear-gradient(var(--fg, #f8fafc) 0 0) padding-box,
|
|
linear-gradient(var(--fg, #f8fafc) 0 0) border-box;
|
|
mask-composite: exclude;
|
|
will-change: opacity;
|
|
}
|
|
|
|
/* INVARIANT: the 0.5deg feather overlaps the coincident conic
|
|
edges at closure so 0deg and 360deg never expose a hard seam. */
|
|
</style>
|
|
|
|
<div
|
|
id="outline-draw-clip"
|
|
class="od-clip clip"
|
|
data-start="0"
|
|
data-duration="4"
|
|
data-track-index="0"
|
|
>
|
|
<div class="od-outline" data-layout-ignore aria-hidden="true"></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 outline = root.querySelector(".od-outline");
|
|
var vars =
|
|
window.__hyperframes && window.__hyperframes.getVariables
|
|
? window.__hyperframes.getVariables()
|
|
: {};
|
|
|
|
// INVARIANT: invalid values return to declared defaults. Valid
|
|
// zero values survive because each scalar is checked explicitly.
|
|
var progressValue = Number(vars.progress);
|
|
var thicknessValue = Number(vars.thickness);
|
|
var radiusValue = Number(vars.radius);
|
|
var progress = Number.isFinite(progressValue)
|
|
? Math.max(0, Math.min(100, progressValue))
|
|
: 100;
|
|
var thickness = Number.isFinite(thicknessValue)
|
|
? Math.max(1, Math.min(20, thicknessValue))
|
|
: 6;
|
|
var radius = Number.isFinite(radiusValue) ? Math.max(0, Math.min(80, radiusValue)) : 24;
|
|
|
|
outline.style.setProperty("--od-thickness", String(thickness));
|
|
outline.style.setProperty("--od-radius", String(radius));
|
|
|
|
// RETIME RANGE: only these fixed envelope lengths may be tuned.
|
|
// HOLD is the sole elastic phase. Never use timeScale.
|
|
var IN_BASE = 0.8;
|
|
var OUT_BASE = 0.4;
|
|
var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
|
|
var envelope = IN_BASE + OUT_BASE;
|
|
var scale = duration < envelope ? duration / envelope : 1;
|
|
var IN = IN_BASE * scale;
|
|
var OUT = OUT_BASE * scale;
|
|
var HOLD = Math.max(0, duration - IN - OUT);
|
|
var OUT_START = IN + HOLD;
|
|
|
|
gsap.set(outline, { "--od-progress": 0, opacity: 1 });
|
|
|
|
var tl = gsap.timeline({ paused: true });
|
|
// --ease-standard maps to the production GSAP name power2.out.
|
|
// The registered scalar is tweened directly, with no proxy clock.
|
|
tl.to(outline, { "--od-progress": progress, duration: IN, ease: "power2.out" }, 0);
|
|
tl.to(outline, { opacity: 0, duration: OUT, ease: "power2.out" }, OUT_START);
|
|
tl.seek(0);
|
|
|
|
window.__timelines = window.__timelines || {};
|
|
window.__timelines["outline-draw"] = tl;
|
|
})();
|
|
</script>
|
|
</div>
|
|
</template>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
</VariablesExplorer>
|
|
|
|
## Paste it into your composition
|
|
|
|
Open `compositions/components/outline-draw.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 |
|
|
| --- | --- | --- | --- |
|
|
| `progress` | `100` | 0% to 100%, step 1% | Final percentage of the outline that is drawn. |
|
|
| `thickness` | `6` | 10.1cqw to 200.1cqw, step 10.1cqw | Outline stroke in tenths of the host width. |
|
|
| `radius` | `24` | 00.1cqmin to 800.1cqmin, step 10.1cqmin | Corner radius in tenths of the host smaller dimension. |
|
|
|
|
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
|
|
<div
|
|
data-composition-id="outline-draw"
|
|
data-composition-src="compositions/components/outline-draw.html"
|
|
data-variable-values='{"progress":100,"thickness":6,"radius":24}'
|
|
></div>
|
|
```
|
|
|
|
## Source
|
|
|
|
<Accordion title={`outline-draw.html`}>
|
|
|
|
```html
|
|
<!doctype html>
|
|
<!--
|
|
outline-draw: HyperFrames video primitive (effects / burst / prove)
|
|
|
|
Concept: a conic-gradient sector draws a rounded outline clockwise. Two
|
|
opaque masks, clipped to the padding box and border box, are excluded to
|
|
leave a true hollow center over whatever content is beneath the primitive.
|
|
One mechanic, one job: visually proving or certifying a framed claim.
|
|
|
|
Compiled-from evidence: OutlineDraw, "Border that draws with a composite
|
|
donut," from the CSS mask research notes.
|
|
|
|
Use when: closing a loop around proof, a selected product region, a logo
|
|
lockup, or a UI callout. Mount it over existing content. The center remains
|
|
transparent and the overlay never intercepts pointer input.
|
|
|
|
Variables:
|
|
- progress (number, 0 to 100, default 100): final drawn percentage.
|
|
- thickness (number, default 6): stroke in tenths of host cqw.
|
|
- radius (number, default 24): corner radius in tenths of host cqmin.
|
|
|
|
Envelope: fixed 0.80s IN draws the outline, elastic HOLD preserves the
|
|
completed proof, and fixed 0.40s OUT fades it. If duration is shorter than
|
|
1.20s, IN and OUT compress proportionally and HOLD becomes zero.
|
|
|
|
Sync point: draw-complete occurs at 0.80s into IN, scaled only when the
|
|
whole envelope is compressed. It never moves into the elastic HOLD.
|
|
|
|
Sound: none. A parent scene may place a static cue at draw-complete.
|
|
|
|
Mount contract: the runtime clones only this template. The root fills the
|
|
host box, owns the container query basis, has no intrinsic width or height,
|
|
and registers one paused timeline under the hardcoded outline-draw id.
|
|
-->
|
|
<html
|
|
lang="en"
|
|
data-composition-variables='[
|
|
{ "id": "progress", "type": "number", "role": "timing", "label": "Draw progress", "description": "Final percentage of the outline that is drawn.", "default": 100, "min": 0, "max": 100, "step": 1, "unit": "%" },
|
|
{ "id": "thickness", "type": "number", "role": "layout", "label": "Stroke thickness", "description": "Outline stroke in tenths of the host width.", "default": 6, "min": 1, "max": 20, "step": 1, "unit": "0.1cqw" },
|
|
{ "id": "radius", "type": "number", "role": "layout", "label": "Corner radius", "description": "Corner radius in tenths of the host smaller dimension.", "default": 24, "min": 0, "max": 80, "step": 1, "unit": "0.1cqmin" }
|
|
]'
|
|
>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Outline Draw</title>
|
|
</head>
|
|
<body>
|
|
<template>
|
|
<div id="root" data-composition-id="outline-draw" data-duration="4" data-fps="30">
|
|
<style>
|
|
@property --od-progress {
|
|
syntax: "<number>";
|
|
inherits: false;
|
|
initial-value: 0;
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#root {
|
|
position: absolute;
|
|
inset: 0;
|
|
container-type: size;
|
|
isolation: isolate;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.od-clip {
|
|
position: absolute;
|
|
inset: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* EDIT ZONE: --space-8 controls the safe inset. The public
|
|
thickness and radius variables own the remaining geometry. */
|
|
.od-outline {
|
|
--od-progress: 0;
|
|
--od-thickness: 6;
|
|
--od-radius: 24;
|
|
--od-seam-overlap: 0.5deg;
|
|
position: absolute;
|
|
inset: var(--space-8, 8cqmin);
|
|
border: calc(var(--od-thickness) * 0.1cqw) solid transparent;
|
|
border-radius: calc(var(--od-radius) * 0.1cqmin);
|
|
background: conic-gradient(
|
|
from -90deg,
|
|
var(--accent, #38bdf8) 0deg calc(var(--od-progress) * 3.6deg),
|
|
transparent calc(var(--od-progress) * 3.6deg + var(--od-seam-overlap)) 360deg
|
|
);
|
|
background-clip: border-box;
|
|
background-origin: border-box;
|
|
mask:
|
|
linear-gradient(var(--fg, #f8fafc) 0 0) padding-box,
|
|
linear-gradient(var(--fg, #f8fafc) 0 0) border-box;
|
|
mask-composite: exclude;
|
|
will-change: opacity;
|
|
}
|
|
|
|
/* INVARIANT: the 0.5deg feather overlaps the coincident conic
|
|
edges at closure so 0deg and 360deg never expose a hard seam. */
|
|
</style>
|
|
|
|
<div
|
|
id="outline-draw-clip"
|
|
class="od-clip clip"
|
|
data-start="0"
|
|
data-duration="4"
|
|
data-track-index="0"
|
|
>
|
|
<div class="od-outline" data-layout-ignore aria-hidden="true"></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 outline = root.querySelector(".od-outline");
|
|
var vars =
|
|
window.__hyperframes && window.__hyperframes.getVariables
|
|
? window.__hyperframes.getVariables()
|
|
: {};
|
|
|
|
// INVARIANT: invalid values return to declared defaults. Valid
|
|
// zero values survive because each scalar is checked explicitly.
|
|
var progressValue = Number(vars.progress);
|
|
var thicknessValue = Number(vars.thickness);
|
|
var radiusValue = Number(vars.radius);
|
|
var progress = Number.isFinite(progressValue)
|
|
? Math.max(0, Math.min(100, progressValue))
|
|
: 100;
|
|
var thickness = Number.isFinite(thicknessValue)
|
|
? Math.max(1, Math.min(20, thicknessValue))
|
|
: 6;
|
|
var radius = Number.isFinite(radiusValue) ? Math.max(0, Math.min(80, radiusValue)) : 24;
|
|
|
|
outline.style.setProperty("--od-thickness", String(thickness));
|
|
outline.style.setProperty("--od-radius", String(radius));
|
|
|
|
// RETIME RANGE: only these fixed envelope lengths may be tuned.
|
|
// HOLD is the sole elastic phase. Never use timeScale.
|
|
var IN_BASE = 0.8;
|
|
var OUT_BASE = 0.4;
|
|
var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
|
|
var envelope = IN_BASE + OUT_BASE;
|
|
var scale = duration < envelope ? duration / envelope : 1;
|
|
var IN = IN_BASE * scale;
|
|
var OUT = OUT_BASE * scale;
|
|
var HOLD = Math.max(0, duration - IN - OUT);
|
|
var OUT_START = IN + HOLD;
|
|
|
|
gsap.set(outline, { "--od-progress": 0, opacity: 1 });
|
|
|
|
var tl = gsap.timeline({ paused: true });
|
|
// --ease-standard maps to the production GSAP name power2.out.
|
|
// The registered scalar is tweened directly, with no proxy clock.
|
|
tl.to(outline, { "--od-progress": progress, duration: IN, ease: "power2.out" }, 0);
|
|
tl.to(outline, { opacity: 0, duration: OUT, ease: "power2.out" }, OUT_START);
|
|
tl.seek(0);
|
|
|
|
window.__timelines = window.__timelines || {};
|
|
window.__timelines["outline-draw"] = tl;
|
|
})();
|
|
</script>
|
|
</div>
|
|
</template>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
</Accordion>
|
|
|
|
{/* hf:generated-footer */}
|
|
|
|
Tagged `motion-primitive` `effects` `outline` `border` `mask` `proof`.
|
|
|
|
## Related topics
|
|
|
|
- [Browse the complete Catalog](/catalog)
|
|
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
|
- [Build a richer composition](/go-further)
|