mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-11-11 19:09:20 +00:00
The generated catalog pages rendered the "Source" accordion title as a
JSX expression, `<Accordion title={`name.html`}>`. Mintlify's search
indexer stringifies expression attribute nodes rather than evaluating
them, so every one of the 399 catalog pages surfaced its Source section
in search results as "[object Object]" (visible on the Scroll Feed page,
among others).
The template literal carried no escaping benefit: every title is a
single-segment `name.html` path, and a double-quoted JSX string handles
it directly. Introduce `mdxStringAttribute`, which emits a plain
`name="value"` attribute and escapes `& " < { }` as HTML character
references (MDX decodes references inside quoted attribute values, and
unlike JSON.stringify it does not rely on backslash escapes, which JSX
strings do not honour). Use it for both the Source accordion title and
the preview iframe title, and regenerate the catalog pages.
Regenerated with `npx tsx scripts/generate-catalog-pages.ts`; the only
change across the 399 pages is the one Accordion title line each.
Co-authored-by: Miguel Ángel <miguel.sierra@heygen.com>
722 lines
28 KiB
Plaintext
722 lines
28 KiB
Plaintext
---
|
|
title: "Beat Accent"
|
|
description: "A single music-hit sting: impact flash, micro scale-pulse on the subject, immediate decay."
|
|
---
|
|
|
|
import { InstallCommand } from "/snippets/install-command.jsx";
|
|
import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
|
|
|
|
## Install
|
|
|
|
<InstallCommand command="npx hyperframes add beat-accent" item="beat-accent" />
|
|
|
|
That writes one file: `compositions/components/beat-accent.html`.
|
|
|
|
<VariablesExplorer
|
|
previewSrc="/public/catalog/components/beat-accent.json"
|
|
compositionId="beat-accent"
|
|
compositionSrc="compositions/components/beat-accent.html"
|
|
variables={[{"id":"text","type":"string","role":"content","label":"Accent text","description":"Word or short label emphasized by the beat hit.","default":"BOOM"},{"id":"flashColor","type":"enum","role":"style","label":"Flash color","description":"Token-backed accent tone used by the radial flash.","default":"accent","options":[{"value":"accent","label":"Accent"},{"value":"soft","label":"Soft accent"},{"value":"bright","label":"Bright accent"}]},{"id":"intensity","type":"number","role":"timing","label":"Intensity","description":"Strength of the scale pulse, flash, and shake.","default":1,"min":0.5,"max":2,"step":0.1}]}
|
|
>
|
|
|
|
```html beat-accent.html
|
|
<!doctype html>
|
|
<!--
|
|
beat-accent: HyperFrames video primitive (effects / burst / emphasize)
|
|
|
|
Concept: a single music-hit sting. A centered word snaps up in scale as a
|
|
radial impact flash erupts behind it, shakes by a small amount, then settles
|
|
immediately. One mechanic, one job: visual punctuation on one beat during IN.
|
|
This burst fires once and never loops. HOLD stays deliberately calm and still
|
|
after the decay.
|
|
|
|
Compiled-from evidence: Video Primitives v1 GAP C1, "sting: impact
|
|
flash/scale on a music hit." The candidates catalog describes a C1 gap:
|
|
music-driven films need visual punctuation on the downbeat and had nothing
|
|
atomic to reach for. A declared sync point makes the primitive weldable to
|
|
any audio hit. Catalog shelf: effects / burst / emphasize. The impact uses
|
|
the easing vocabulary's --ease-slam, GSAP expo.out, with the CSS mirror
|
|
cubic-bezier(0.19, 1, 0.22, 1), kept brief per taste rule 3.
|
|
|
|
Use when: one downbeat, edit point, reveal, or hard musical hit needs a short
|
|
visual accent. Mount it over the subject or use its centered word as the
|
|
subject. Do not use it as an ambient loop or a repeated visualizer.
|
|
|
|
Variables (declared in data-composition-variables below):
|
|
- text (string, default "BOOM"): the word or label that receives the hit.
|
|
- flashColor (enum, default "accent"): accent, soft accent, or bright
|
|
accent. Every option is derived from var(--accent), so theme changes
|
|
always repaint the flash.
|
|
- intensity (number, 0.5 to 2, default 1, step 0.1): scales subject pulse,
|
|
flash opacity and spread, and shake distance as one legible control.
|
|
|
|
Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
|
|
IN_BASE = 0.90s, calm lead, impact snap, flash, shake, and full decay
|
|
HOLD = elastic = max(0, D - (IN_BASE + OUT_BASE)), deliberately still
|
|
OUT_BASE = 0.40s, clean release fade
|
|
If D < IN_BASE + OUT_BASE, IN and OUT scale down together so IN + OUT == D
|
|
and HOLD == 0. All fixed offsets and motion durations use the same scale.
|
|
|
|
Sync point: impact-hard lands at IMPACT_AT = 0.25s into an unscaled IN. It
|
|
scales proportionally only when the full envelope is compressed. ADR-0007
|
|
requires declared sync points to remain in a fixed phase, never inside the
|
|
elastic HOLD, so audio and visual timing cannot drift as duration changes.
|
|
|
|
Sound cue: the primitive never plays audio. At IMPACT_AT it dispatches a
|
|
bubbling `hf:sfx` CustomEvent with detail { id: "impact-hard", t: IMPACT_AT }.
|
|
A host mix stage may catch that event and route the id to its chosen asset.
|
|
|
|
Mount contract: this file is a MOUNTABLE SUB-COMPOSITION, not a standalone
|
|
composition. A host loads it via data-composition-src; the runtime clones
|
|
only <template> contents, while everything outside <template>, including
|
|
<head>, is discarded on mount. #root has no data-width or data-height. It is
|
|
styled by id, never by class, and fills the host box with position:absolute,
|
|
inset:0, container-type:size. Variables are read through
|
|
window.__hyperframes.getVariables(), never by parsing document.documentElement,
|
|
because the mounted document element belongs to the host composition.
|
|
-->
|
|
<html
|
|
lang="en"
|
|
data-composition-variables='[
|
|
{ "id": "text", "type": "string", "role": "content", "label": "Accent text", "description": "Word or short label emphasized by the beat hit.", "default": "BOOM" },
|
|
{ "id": "flashColor", "type": "enum", "role": "style", "label": "Flash color", "description": "Token-backed accent tone used by the radial flash.", "default": "accent", "options": [{ "value": "accent", "label": "Accent" }, { "value": "soft", "label": "Soft accent" }, { "value": "bright", "label": "Bright accent" }] },
|
|
{ "id": "intensity", "type": "number", "role": "timing", "label": "Intensity", "description": "Strength of the scale pulse, flash, and shake.", "default": 1, "min": 0.5, "max": 2, "step": 0.1 }
|
|
]'
|
|
>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Beat Accent</title>
|
|
</head>
|
|
<body>
|
|
<template>
|
|
<div id="root" data-composition-id="beat-accent" data-duration="4" data-fps="30">
|
|
<style>
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#root {
|
|
--ease-slam: cubic-bezier(0.19, 1, 0.22, 1);
|
|
--ba-flash-color: var(--accent, #ff4f8b);
|
|
position: absolute;
|
|
inset: 0;
|
|
container-type: size;
|
|
isolation: isolate;
|
|
overflow: hidden;
|
|
background: var(--bg, #0b1120);
|
|
color: var(--fg, #f8fafc);
|
|
font-family: var(--font-body, system-ui, sans-serif);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.ba-clip {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: grid;
|
|
place-items: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ba-stage {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: grid;
|
|
place-items: center;
|
|
will-change: transform, opacity;
|
|
}
|
|
|
|
.ba-flash {
|
|
position: absolute;
|
|
width: 62cqw;
|
|
aspect-ratio: 1;
|
|
border-radius: 50%;
|
|
background: radial-gradient(
|
|
circle,
|
|
color-mix(in srgb, var(--ba-flash-color) 92%, transparent) 0%,
|
|
color-mix(in srgb, var(--ba-flash-color) 54%, transparent) 24%,
|
|
color-mix(in srgb, var(--ba-flash-color) 16%, transparent) 48%,
|
|
transparent 72%
|
|
);
|
|
opacity: 0;
|
|
will-change: transform, opacity;
|
|
}
|
|
|
|
.ba-flash::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 22%;
|
|
border: 0.45cqmin solid color-mix(in srgb, var(--ba-flash-color) 78%, transparent);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.ba-subject {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: block;
|
|
width: 86cqw;
|
|
color: var(--fg, #f8fafc);
|
|
font-family: var(--font-display, var(--font-body, system-ui, sans-serif));
|
|
font-size: 20cqmin;
|
|
font-weight: 900;
|
|
line-height: 0.9;
|
|
letter-spacing: -0.055em;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
text-shadow:
|
|
0 0 2cqmin color-mix(in srgb, var(--accent, #ff4f8b) 46%, transparent),
|
|
0 1.2cqh 3.8cqh color-mix(in srgb, var(--bg, #0b1120) 68%, transparent);
|
|
transform-origin: 50% 50%;
|
|
will-change: transform;
|
|
}
|
|
</style>
|
|
|
|
<div
|
|
id="beat-accent-clip"
|
|
class="ba-clip clip"
|
|
data-start="0"
|
|
data-duration="4"
|
|
data-track-index="0"
|
|
>
|
|
<div class="ba-stage">
|
|
<div class="ba-flash" aria-hidden="true"></div>
|
|
<div class="ba-subject"></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(".ba-stage");
|
|
var flash = root.querySelector(".ba-flash");
|
|
var subject = root.querySelector(".ba-subject");
|
|
var vars =
|
|
window.__hyperframes && window.__hyperframes.getVariables
|
|
? window.__hyperframes.getVariables()
|
|
: {};
|
|
|
|
var text = vars.text == null ? "BOOM" : String(vars.text);
|
|
var flashChoice =
|
|
vars.flashColor === "soft" || vars.flashColor === "bright"
|
|
? vars.flashColor
|
|
: "accent";
|
|
var intensityValue = Number(vars.intensity);
|
|
var intensity = Number.isFinite(intensityValue)
|
|
? Math.max(0.5, Math.min(2, intensityValue))
|
|
: 1;
|
|
|
|
var flashColors = {
|
|
accent: "var(--accent, #ff4f8b)",
|
|
soft: "color-mix(in srgb, var(--accent, #ff4f8b) 70%, var(--bg, #0b1120))",
|
|
bright: "color-mix(in srgb, var(--accent, #ff4f8b) 72%, var(--fg, #f8fafc))",
|
|
};
|
|
|
|
subject.textContent = text;
|
|
root.style.setProperty("--ba-flash-color", flashColors[flashChoice]);
|
|
|
|
var IN_BASE = 0.9;
|
|
var OUT_BASE = 0.4;
|
|
var IMPACT_AT_BASE = 0.25;
|
|
var SNAP_BASE = 0.12;
|
|
var SETTLE_BASE = 0.28;
|
|
var FLASH_IN_BASE = 0.08;
|
|
var FLASH_OUT_BASE = 0.28;
|
|
|
|
var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
|
|
var totalBase = IN_BASE + OUT_BASE;
|
|
var envelopeScale = duration < totalBase ? duration / totalBase : 1;
|
|
var IN = IN_BASE * envelopeScale;
|
|
var OUT = OUT_BASE * envelopeScale;
|
|
var IMPACT_AT = IMPACT_AT_BASE * envelopeScale;
|
|
var SNAP = SNAP_BASE * envelopeScale;
|
|
var SETTLE = SETTLE_BASE * envelopeScale;
|
|
var FLASH_IN = FLASH_IN_BASE * envelopeScale;
|
|
var FLASH_OUT = FLASH_OUT_BASE * envelopeScale;
|
|
var HOLD = Math.max(0, duration - (IN + OUT));
|
|
var OUT_START = IN + HOLD;
|
|
|
|
var restScale = 1 - 0.06 * intensity;
|
|
var peakScale = 1 + 0.18 * intensity;
|
|
var flashPeakScale = 0.78 + 0.3 * intensity;
|
|
var flashEndScale = 1.08 + 0.32 * intensity;
|
|
var flashPeakOpacity = Math.min(0.96, 0.5 + 0.23 * intensity);
|
|
var shakeX = 0.9 * intensity;
|
|
var shakeY = 0.34 * intensity;
|
|
|
|
gsap.set(stage, { x: 0, y: 0, opacity: 1 });
|
|
gsap.set(subject, { scale: restScale });
|
|
gsap.set(flash, { scale: 0.25, opacity: 0 });
|
|
|
|
var tl = gsap.timeline({ paused: true });
|
|
|
|
tl.to(subject, { scale: peakScale, duration: SNAP, ease: "expo.out" }, IMPACT_AT);
|
|
tl.to(subject, { scale: 1, duration: SETTLE, ease: "power3.out" }, IMPACT_AT + SNAP);
|
|
|
|
tl.to(
|
|
flash,
|
|
{
|
|
scale: flashPeakScale,
|
|
opacity: flashPeakOpacity,
|
|
duration: FLASH_IN,
|
|
ease: "expo.out",
|
|
},
|
|
IMPACT_AT,
|
|
);
|
|
tl.to(
|
|
flash,
|
|
{ scale: flashEndScale, opacity: 0, duration: FLASH_OUT, ease: "power3.out" },
|
|
IMPACT_AT + FLASH_IN,
|
|
);
|
|
|
|
tl.to(
|
|
stage,
|
|
{
|
|
x: shakeX + "cqw",
|
|
y: -shakeY + "cqh",
|
|
duration: 0.04 * envelopeScale,
|
|
ease: "none",
|
|
},
|
|
IMPACT_AT,
|
|
);
|
|
tl.to(
|
|
stage,
|
|
{
|
|
x: -shakeX * 0.7 + "cqw",
|
|
y: shakeY * 0.75 + "cqh",
|
|
duration: 0.05 * envelopeScale,
|
|
ease: "none",
|
|
},
|
|
IMPACT_AT + 0.04 * envelopeScale,
|
|
);
|
|
tl.to(
|
|
stage,
|
|
{
|
|
x: shakeX * 0.3 + "cqw",
|
|
y: -shakeY * 0.35 + "cqh",
|
|
duration: 0.05 * envelopeScale,
|
|
ease: "none",
|
|
},
|
|
IMPACT_AT + 0.09 * envelopeScale,
|
|
);
|
|
tl.to(
|
|
stage,
|
|
{
|
|
x: 0,
|
|
y: 0,
|
|
duration: 0.12 * envelopeScale,
|
|
ease: "power3.out",
|
|
},
|
|
IMPACT_AT + 0.14 * envelopeScale,
|
|
);
|
|
|
|
tl.call(
|
|
function () {
|
|
root.dispatchEvent(
|
|
new CustomEvent("hf:sfx", {
|
|
detail: { id: "impact-hard", t: IMPACT_AT },
|
|
bubbles: true,
|
|
}),
|
|
);
|
|
},
|
|
[],
|
|
IMPACT_AT,
|
|
);
|
|
|
|
tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.out" }, OUT_START);
|
|
tl.seek(0);
|
|
|
|
window.__timelines = window.__timelines || {};
|
|
// Literal id is required. Mount flattening strips data-composition-id
|
|
// from this inner root, so reading the id from root would register
|
|
// under null and leave the host unable to find this timeline.
|
|
window.__timelines["beat-accent"] = tl;
|
|
})();
|
|
</script>
|
|
</div>
|
|
</template>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
</VariablesExplorer>
|
|
|
|
## Paste it into your composition
|
|
|
|
Open `compositions/components/beat-accent.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 |
|
|
| --- | --- | --- | --- |
|
|
| `text` | `BOOM` | string | Word or short label emphasized by the beat hit. |
|
|
| `flashColor` | `accent` | `accent`, `soft`, `bright` | Token-backed accent tone used by the radial flash. |
|
|
| `intensity` | `1` | 0.5 to 2, step 0.1 | Strength of the scale pulse, flash, and shake. |
|
|
|
|
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="beat-accent"
|
|
data-composition-src="compositions/components/beat-accent.html"
|
|
data-variable-values='{"text":"BOOM","flashColor":"accent","intensity":1}'
|
|
></div>
|
|
```
|
|
|
|
## Source
|
|
|
|
<Accordion title="beat-accent.html">
|
|
|
|
```html
|
|
<!doctype html>
|
|
<!--
|
|
beat-accent: HyperFrames video primitive (effects / burst / emphasize)
|
|
|
|
Concept: a single music-hit sting. A centered word snaps up in scale as a
|
|
radial impact flash erupts behind it, shakes by a small amount, then settles
|
|
immediately. One mechanic, one job: visual punctuation on one beat during IN.
|
|
This burst fires once and never loops. HOLD stays deliberately calm and still
|
|
after the decay.
|
|
|
|
Compiled-from evidence: Video Primitives v1 GAP C1, "sting: impact
|
|
flash/scale on a music hit." The candidates catalog describes a C1 gap:
|
|
music-driven films need visual punctuation on the downbeat and had nothing
|
|
atomic to reach for. A declared sync point makes the primitive weldable to
|
|
any audio hit. Catalog shelf: effects / burst / emphasize. The impact uses
|
|
the easing vocabulary's --ease-slam, GSAP expo.out, with the CSS mirror
|
|
cubic-bezier(0.19, 1, 0.22, 1), kept brief per taste rule 3.
|
|
|
|
Use when: one downbeat, edit point, reveal, or hard musical hit needs a short
|
|
visual accent. Mount it over the subject or use its centered word as the
|
|
subject. Do not use it as an ambient loop or a repeated visualizer.
|
|
|
|
Variables (declared in data-composition-variables below):
|
|
- text (string, default "BOOM"): the word or label that receives the hit.
|
|
- flashColor (enum, default "accent"): accent, soft accent, or bright
|
|
accent. Every option is derived from var(--accent), so theme changes
|
|
always repaint the flash.
|
|
- intensity (number, 0.5 to 2, default 1, step 0.1): scales subject pulse,
|
|
flash opacity and spread, and shake distance as one legible control.
|
|
|
|
Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
|
|
IN_BASE = 0.90s, calm lead, impact snap, flash, shake, and full decay
|
|
HOLD = elastic = max(0, D - (IN_BASE + OUT_BASE)), deliberately still
|
|
OUT_BASE = 0.40s, clean release fade
|
|
If D < IN_BASE + OUT_BASE, IN and OUT scale down together so IN + OUT == D
|
|
and HOLD == 0. All fixed offsets and motion durations use the same scale.
|
|
|
|
Sync point: impact-hard lands at IMPACT_AT = 0.25s into an unscaled IN. It
|
|
scales proportionally only when the full envelope is compressed. ADR-0007
|
|
requires declared sync points to remain in a fixed phase, never inside the
|
|
elastic HOLD, so audio and visual timing cannot drift as duration changes.
|
|
|
|
Sound cue: the primitive never plays audio. At IMPACT_AT it dispatches a
|
|
bubbling `hf:sfx` CustomEvent with detail { id: "impact-hard", t: IMPACT_AT }.
|
|
A host mix stage may catch that event and route the id to its chosen asset.
|
|
|
|
Mount contract: this file is a MOUNTABLE SUB-COMPOSITION, not a standalone
|
|
composition. A host loads it via data-composition-src; the runtime clones
|
|
only <template> contents, while everything outside <template>, including
|
|
<head>, is discarded on mount. #root has no data-width or data-height. It is
|
|
styled by id, never by class, and fills the host box with position:absolute,
|
|
inset:0, container-type:size. Variables are read through
|
|
window.__hyperframes.getVariables(), never by parsing document.documentElement,
|
|
because the mounted document element belongs to the host composition.
|
|
-->
|
|
<html
|
|
lang="en"
|
|
data-composition-variables='[
|
|
{ "id": "text", "type": "string", "role": "content", "label": "Accent text", "description": "Word or short label emphasized by the beat hit.", "default": "BOOM" },
|
|
{ "id": "flashColor", "type": "enum", "role": "style", "label": "Flash color", "description": "Token-backed accent tone used by the radial flash.", "default": "accent", "options": [{ "value": "accent", "label": "Accent" }, { "value": "soft", "label": "Soft accent" }, { "value": "bright", "label": "Bright accent" }] },
|
|
{ "id": "intensity", "type": "number", "role": "timing", "label": "Intensity", "description": "Strength of the scale pulse, flash, and shake.", "default": 1, "min": 0.5, "max": 2, "step": 0.1 }
|
|
]'
|
|
>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Beat Accent</title>
|
|
</head>
|
|
<body>
|
|
<template>
|
|
<div id="root" data-composition-id="beat-accent" data-duration="4" data-fps="30">
|
|
<style>
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#root {
|
|
--ease-slam: cubic-bezier(0.19, 1, 0.22, 1);
|
|
--ba-flash-color: var(--accent, #ff4f8b);
|
|
position: absolute;
|
|
inset: 0;
|
|
container-type: size;
|
|
isolation: isolate;
|
|
overflow: hidden;
|
|
background: var(--bg, #0b1120);
|
|
color: var(--fg, #f8fafc);
|
|
font-family: var(--font-body, system-ui, sans-serif);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.ba-clip {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: grid;
|
|
place-items: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ba-stage {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: grid;
|
|
place-items: center;
|
|
will-change: transform, opacity;
|
|
}
|
|
|
|
.ba-flash {
|
|
position: absolute;
|
|
width: 62cqw;
|
|
aspect-ratio: 1;
|
|
border-radius: 50%;
|
|
background: radial-gradient(
|
|
circle,
|
|
color-mix(in srgb, var(--ba-flash-color) 92%, transparent) 0%,
|
|
color-mix(in srgb, var(--ba-flash-color) 54%, transparent) 24%,
|
|
color-mix(in srgb, var(--ba-flash-color) 16%, transparent) 48%,
|
|
transparent 72%
|
|
);
|
|
opacity: 0;
|
|
will-change: transform, opacity;
|
|
}
|
|
|
|
.ba-flash::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 22%;
|
|
border: 0.45cqmin solid color-mix(in srgb, var(--ba-flash-color) 78%, transparent);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.ba-subject {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: block;
|
|
width: 86cqw;
|
|
color: var(--fg, #f8fafc);
|
|
font-family: var(--font-display, var(--font-body, system-ui, sans-serif));
|
|
font-size: 20cqmin;
|
|
font-weight: 900;
|
|
line-height: 0.9;
|
|
letter-spacing: -0.055em;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
text-shadow:
|
|
0 0 2cqmin color-mix(in srgb, var(--accent, #ff4f8b) 46%, transparent),
|
|
0 1.2cqh 3.8cqh color-mix(in srgb, var(--bg, #0b1120) 68%, transparent);
|
|
transform-origin: 50% 50%;
|
|
will-change: transform;
|
|
}
|
|
</style>
|
|
|
|
<div
|
|
id="beat-accent-clip"
|
|
class="ba-clip clip"
|
|
data-start="0"
|
|
data-duration="4"
|
|
data-track-index="0"
|
|
>
|
|
<div class="ba-stage">
|
|
<div class="ba-flash" aria-hidden="true"></div>
|
|
<div class="ba-subject"></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(".ba-stage");
|
|
var flash = root.querySelector(".ba-flash");
|
|
var subject = root.querySelector(".ba-subject");
|
|
var vars =
|
|
window.__hyperframes && window.__hyperframes.getVariables
|
|
? window.__hyperframes.getVariables()
|
|
: {};
|
|
|
|
var text = vars.text == null ? "BOOM" : String(vars.text);
|
|
var flashChoice =
|
|
vars.flashColor === "soft" || vars.flashColor === "bright"
|
|
? vars.flashColor
|
|
: "accent";
|
|
var intensityValue = Number(vars.intensity);
|
|
var intensity = Number.isFinite(intensityValue)
|
|
? Math.max(0.5, Math.min(2, intensityValue))
|
|
: 1;
|
|
|
|
var flashColors = {
|
|
accent: "var(--accent, #ff4f8b)",
|
|
soft: "color-mix(in srgb, var(--accent, #ff4f8b) 70%, var(--bg, #0b1120))",
|
|
bright: "color-mix(in srgb, var(--accent, #ff4f8b) 72%, var(--fg, #f8fafc))",
|
|
};
|
|
|
|
subject.textContent = text;
|
|
root.style.setProperty("--ba-flash-color", flashColors[flashChoice]);
|
|
|
|
var IN_BASE = 0.9;
|
|
var OUT_BASE = 0.4;
|
|
var IMPACT_AT_BASE = 0.25;
|
|
var SNAP_BASE = 0.12;
|
|
var SETTLE_BASE = 0.28;
|
|
var FLASH_IN_BASE = 0.08;
|
|
var FLASH_OUT_BASE = 0.28;
|
|
|
|
var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
|
|
var totalBase = IN_BASE + OUT_BASE;
|
|
var envelopeScale = duration < totalBase ? duration / totalBase : 1;
|
|
var IN = IN_BASE * envelopeScale;
|
|
var OUT = OUT_BASE * envelopeScale;
|
|
var IMPACT_AT = IMPACT_AT_BASE * envelopeScale;
|
|
var SNAP = SNAP_BASE * envelopeScale;
|
|
var SETTLE = SETTLE_BASE * envelopeScale;
|
|
var FLASH_IN = FLASH_IN_BASE * envelopeScale;
|
|
var FLASH_OUT = FLASH_OUT_BASE * envelopeScale;
|
|
var HOLD = Math.max(0, duration - (IN + OUT));
|
|
var OUT_START = IN + HOLD;
|
|
|
|
var restScale = 1 - 0.06 * intensity;
|
|
var peakScale = 1 + 0.18 * intensity;
|
|
var flashPeakScale = 0.78 + 0.3 * intensity;
|
|
var flashEndScale = 1.08 + 0.32 * intensity;
|
|
var flashPeakOpacity = Math.min(0.96, 0.5 + 0.23 * intensity);
|
|
var shakeX = 0.9 * intensity;
|
|
var shakeY = 0.34 * intensity;
|
|
|
|
gsap.set(stage, { x: 0, y: 0, opacity: 1 });
|
|
gsap.set(subject, { scale: restScale });
|
|
gsap.set(flash, { scale: 0.25, opacity: 0 });
|
|
|
|
var tl = gsap.timeline({ paused: true });
|
|
|
|
tl.to(subject, { scale: peakScale, duration: SNAP, ease: "expo.out" }, IMPACT_AT);
|
|
tl.to(subject, { scale: 1, duration: SETTLE, ease: "power3.out" }, IMPACT_AT + SNAP);
|
|
|
|
tl.to(
|
|
flash,
|
|
{
|
|
scale: flashPeakScale,
|
|
opacity: flashPeakOpacity,
|
|
duration: FLASH_IN,
|
|
ease: "expo.out",
|
|
},
|
|
IMPACT_AT,
|
|
);
|
|
tl.to(
|
|
flash,
|
|
{ scale: flashEndScale, opacity: 0, duration: FLASH_OUT, ease: "power3.out" },
|
|
IMPACT_AT + FLASH_IN,
|
|
);
|
|
|
|
tl.to(
|
|
stage,
|
|
{
|
|
x: shakeX + "cqw",
|
|
y: -shakeY + "cqh",
|
|
duration: 0.04 * envelopeScale,
|
|
ease: "none",
|
|
},
|
|
IMPACT_AT,
|
|
);
|
|
tl.to(
|
|
stage,
|
|
{
|
|
x: -shakeX * 0.7 + "cqw",
|
|
y: shakeY * 0.75 + "cqh",
|
|
duration: 0.05 * envelopeScale,
|
|
ease: "none",
|
|
},
|
|
IMPACT_AT + 0.04 * envelopeScale,
|
|
);
|
|
tl.to(
|
|
stage,
|
|
{
|
|
x: shakeX * 0.3 + "cqw",
|
|
y: -shakeY * 0.35 + "cqh",
|
|
duration: 0.05 * envelopeScale,
|
|
ease: "none",
|
|
},
|
|
IMPACT_AT + 0.09 * envelopeScale,
|
|
);
|
|
tl.to(
|
|
stage,
|
|
{
|
|
x: 0,
|
|
y: 0,
|
|
duration: 0.12 * envelopeScale,
|
|
ease: "power3.out",
|
|
},
|
|
IMPACT_AT + 0.14 * envelopeScale,
|
|
);
|
|
|
|
tl.call(
|
|
function () {
|
|
root.dispatchEvent(
|
|
new CustomEvent("hf:sfx", {
|
|
detail: { id: "impact-hard", t: IMPACT_AT },
|
|
bubbles: true,
|
|
}),
|
|
);
|
|
},
|
|
[],
|
|
IMPACT_AT,
|
|
);
|
|
|
|
tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.out" }, OUT_START);
|
|
tl.seek(0);
|
|
|
|
window.__timelines = window.__timelines || {};
|
|
// Literal id is required. Mount flattening strips data-composition-id
|
|
// from this inner root, so reading the id from root would register
|
|
// under null and leave the host unable to find this timeline.
|
|
window.__timelines["beat-accent"] = tl;
|
|
})();
|
|
</script>
|
|
</div>
|
|
</template>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
</Accordion>
|
|
|
|
{/* hf:generated-footer */}
|
|
|
|
Tagged `motion-primitive` `effects` `burst` `sting` `emphasize` `impact`.
|
|
|
|
## Related topics
|
|
|
|
- [Browse the complete Catalog](/catalog)
|
|
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
|
- [Build a richer composition](/go-further)
|