mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-11-08 07:46:59 +00:00
miga-heygenandMiguel Ángel
7b5fdb1ad2
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>
600 lines
21 KiB
Plaintext
600 lines
21 KiB
Plaintext
---
|
|
title: "Micro Transitions"
|
|
description: "A transitions.dev-inspired pack of badge, dropdown, modal, tabs, tooltip, and success-check micro transitions"
|
|
---
|
|
|
|
import { InstallCommand } from "/snippets/install-command.jsx";
|
|
import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
|
|
|
|
## Install
|
|
|
|
<InstallCommand command="npx hyperframes add micro-transitions" item="micro-transitions" />
|
|
|
|
That writes one file: `compositions/components/micro-transitions.html`.
|
|
|
|
<VariablesExplorer
|
|
previewSrc="/public/catalog/components/micro-transitions.json"
|
|
compositionId="micro-transitions"
|
|
compositionSrc="compositions/components/micro-transitions.html"
|
|
variables={[{"id":"badge","type":"string","role":"content","label":"Badge","description":"Count inside the notification badge on the bell.","default":"3"},{"id":"tooltip","type":"string","role":"content","label":"Tooltip","description":"Wording inside the small dark tooltip.","default":"Copied"},{"id":"tone","type":"enum","role":"style","label":"Badge tone","description":"Colour of the notification badge chip.","default":"red","options":[{"value":"red","label":"Red"},{"value":"amber","label":"Amber"},{"value":"violet","label":"Violet"}]},{"id":"travel","type":"enum","role":"motion","label":"Travel","description":"Scales how far every panel starts from its resting place before it settles.","default":"standard","options":[{"value":"close","label":"Close"},{"value":"standard","label":"Standard"},{"value":"far","label":"Far"}]}]}
|
|
>
|
|
|
|
```html micro-transitions.html
|
|
<!--
|
|
Micro Transitions - transitions.dev-inspired UI motion pack for HyperFrames.
|
|
|
|
Includes six app-transition patterns in one copy-paste snippet:
|
|
badge pop, dropdown reveal, modal open, tab indicator, tooltip appear,
|
|
and success check draw.
|
|
|
|
Animate --hf-micro-progress from 0 to 1, then optionally animate
|
|
--hf-micro-tab from 0 to 1 for the segmented control.
|
|
|
|
Variables. The script reads each one, falls back to the declared default on
|
|
anything missing or unrecognised, and writes either the panel wording or a
|
|
custom property the CSS below consumes. The two progress drivers above are
|
|
untouched by them.
|
|
|
|
- badge (any short text, default 3): the count inside the red chip on the
|
|
bell. Blank or non-text input falls back to the default.
|
|
- tooltip (any short text, default Copied): wording inside the small dark
|
|
tooltip.
|
|
- tone (red | amber | violet, default red): colour of that badge chip, the
|
|
one accent-carrying element in the pack. red and amber are literal alert
|
|
conventions; violet rides the composition's own accent-2 token and falls
|
|
back to ink when the composition declares none.
|
|
- travel (close | standard | far, default standard): scales how far every
|
|
panel starts from its resting place, so the whole pack drifts half as far
|
|
or nearly twice as far into position over the same progress run. At full
|
|
progress each panel lands in exactly the same place.
|
|
|
|
On every default the result is identical to the original: a red 3 on the
|
|
bell, a Copied tooltip, and panels that rise between 6px and 18px.
|
|
-->
|
|
|
|
<div
|
|
class="hf-micro-transitions"
|
|
style="--hf-micro-progress: 0; --hf-micro-tab: 0"
|
|
data-composition-variables='[
|
|
{"id": "badge", "type": "string", "role": "content", "label": "Badge", "description": "Count inside the notification badge on the bell.", "default": "3"},
|
|
{"id": "tooltip", "type": "string", "role": "content", "label": "Tooltip", "description": "Wording inside the small dark tooltip.", "default": "Copied"},
|
|
{"id": "tone", "type": "enum", "role": "style", "label": "Badge tone", "description": "Colour of the notification badge chip.", "default": "red", "options": [{"value": "red", "label": "Red"}, {"value": "amber", "label": "Amber"}, {"value": "violet", "label": "Violet"}]},
|
|
{"id": "travel", "type": "enum", "role": "motion", "label": "Travel", "description": "Scales how far every panel starts from its resting place before it settles.", "default": "standard", "options": [{"value": "close", "label": "Close"}, {"value": "standard", "label": "Standard"}, {"value": "far", "label": "Far"}]}
|
|
]'
|
|
>
|
|
<div class="hf-micro-bell"><span>3</span></div>
|
|
<div class="hf-micro-dropdown">
|
|
<strong>Actions</strong>
|
|
<p>Export, duplicate, archive</p>
|
|
</div>
|
|
<div class="hf-micro-modal">
|
|
<strong>Ready to publish?</strong><span>All checks passed.</span>
|
|
</div>
|
|
<div class="hf-micro-tabs"><i></i><b>Draft</b><b>Live</b></div>
|
|
<div class="hf-micro-tooltip">Copied</div>
|
|
<svg class="hf-micro-check" viewBox="0 0 48 48" aria-hidden="true">
|
|
<path d="M12 25l8 8 17-19" />
|
|
</svg>
|
|
</div>
|
|
|
|
<style>
|
|
.hf-micro-transitions {
|
|
--hf-micro-progress: 0;
|
|
--hf-micro-tab: 0;
|
|
position: relative;
|
|
width: min(640px, 100%);
|
|
height: 360px;
|
|
font-family: Inter, system-ui, sans-serif;
|
|
color: #18181b;
|
|
}
|
|
.hf-micro-bell,
|
|
.hf-micro-dropdown,
|
|
.hf-micro-modal,
|
|
.hf-micro-tabs,
|
|
.hf-micro-tooltip,
|
|
.hf-micro-check {
|
|
position: absolute;
|
|
will-change: transform, opacity;
|
|
}
|
|
.hf-micro-bell {
|
|
top: 18px;
|
|
left: 28px;
|
|
width: 54px;
|
|
height: 54px;
|
|
border-radius: 18px;
|
|
background: #18181b;
|
|
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
|
|
}
|
|
.hf-micro-bell::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 15px 17px 13px;
|
|
border: 2px solid #fff;
|
|
border-radius: 12px 12px 9px 9px;
|
|
}
|
|
.hf-micro-bell span {
|
|
position: absolute;
|
|
top: -8px;
|
|
right: -8px;
|
|
min-width: 24px;
|
|
height: 24px;
|
|
display: grid;
|
|
place-items: center;
|
|
border: 3px solid #fff;
|
|
border-radius: 999px;
|
|
background: var(--hf-micro-badge, #ef4444);
|
|
color: #fff;
|
|
font-size: 12px;
|
|
font-weight: 850;
|
|
opacity: var(--hf-micro-progress);
|
|
transform: translate(
|
|
calc((1 - var(--hf-micro-progress)) * -7px * var(--hf-micro-travel, 1)),
|
|
calc((1 - var(--hf-micro-progress)) * 10px * var(--hf-micro-travel, 1))
|
|
)
|
|
scale(calc(0.25 + var(--hf-micro-progress) * 0.75));
|
|
}
|
|
.hf-micro-dropdown {
|
|
top: 92px;
|
|
left: 28px;
|
|
width: 210px;
|
|
padding: 18px;
|
|
border: 1px solid #e4e4e7;
|
|
border-radius: 18px;
|
|
background: #fff;
|
|
opacity: var(--hf-micro-progress);
|
|
transform: translateY(calc((1 - var(--hf-micro-progress)) * -12px * var(--hf-micro-travel, 1)))
|
|
scale(calc(0.95 + var(--hf-micro-progress) * 0.05));
|
|
transform-origin: top left;
|
|
box-shadow: 0 24px 65px rgba(0, 0, 0, 0.16);
|
|
}
|
|
.hf-micro-dropdown strong,
|
|
.hf-micro-modal strong {
|
|
display: block;
|
|
font-size: 16px;
|
|
}
|
|
.hf-micro-dropdown p,
|
|
.hf-micro-modal span {
|
|
display: block;
|
|
margin: 8px 0 0;
|
|
color: #71717a;
|
|
font-size: 13px;
|
|
line-height: 1.4;
|
|
}
|
|
.hf-micro-modal {
|
|
top: 48px;
|
|
right: 34px;
|
|
width: 260px;
|
|
padding: 22px;
|
|
border: 1px solid #e4e4e7;
|
|
border-radius: 22px;
|
|
background: #fff;
|
|
opacity: var(--hf-micro-progress);
|
|
transform: translateY(calc((1 - var(--hf-micro-progress)) * 18px * var(--hf-micro-travel, 1)))
|
|
scale(calc(0.96 + var(--hf-micro-progress) * 0.04));
|
|
box-shadow: 0 32px 80px rgba(0, 0, 0, 0.2);
|
|
}
|
|
.hf-micro-tabs {
|
|
left: 260px;
|
|
bottom: 46px;
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 4px;
|
|
width: 210px;
|
|
padding: 4px;
|
|
border-radius: 14px;
|
|
background: #f4f4f5;
|
|
opacity: var(--hf-micro-progress);
|
|
transform: translateY(calc((1 - var(--hf-micro-progress)) * 14px * var(--hf-micro-travel, 1)));
|
|
}
|
|
.hf-micro-tabs i {
|
|
position: absolute;
|
|
top: 4px;
|
|
left: 4px;
|
|
width: calc((100% - 8px) / 2);
|
|
height: calc(100% - 8px);
|
|
border-radius: 11px;
|
|
background: #fff;
|
|
transform: translateX(calc(var(--hf-micro-tab) * 100%));
|
|
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
|
|
}
|
|
.hf-micro-tabs b {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: grid;
|
|
place-items: center;
|
|
height: 38px;
|
|
color: #52525b;
|
|
font-size: 13px;
|
|
}
|
|
.hf-micro-tooltip {
|
|
right: 54px;
|
|
bottom: 48px;
|
|
padding: 8px 11px;
|
|
border-radius: 10px;
|
|
background: #18181b;
|
|
color: #fff;
|
|
font-size: 12px;
|
|
font-weight: 750;
|
|
opacity: var(--hf-micro-progress);
|
|
transform: translateY(calc((1 - var(--hf-micro-progress)) * 6px * var(--hf-micro-travel, 1)))
|
|
scale(calc(0.96 + var(--hf-micro-progress) * 0.04));
|
|
}
|
|
.hf-micro-check {
|
|
right: 116px;
|
|
bottom: 92px;
|
|
width: 48px;
|
|
height: 48px;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 5;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
opacity: var(--hf-micro-progress);
|
|
}
|
|
.hf-micro-check path {
|
|
stroke-dasharray: 42;
|
|
stroke-dashoffset: calc((1 - var(--hf-micro-progress)) * 42);
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
(function () {
|
|
"use strict";
|
|
|
|
var vars =
|
|
window.__hyperframes && window.__hyperframes.getVariables
|
|
? window.__hyperframes.getVariables()
|
|
: {};
|
|
|
|
// Unrecognised overrides return to their declared defaults.
|
|
function pick(table, value, fallback) {
|
|
return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
|
|
}
|
|
|
|
function text(value, fallback) {
|
|
return typeof value === "string" && value.trim() !== "" ? value.trim() : fallback;
|
|
}
|
|
|
|
// The badge is the pack's one accent-carrying element. red and amber are
|
|
// literal alert conventions; violet rides the composition's own token and
|
|
// falls back to ink.
|
|
var tones = { red: "#ef4444", amber: "#f59e0b", violet: "var(--accent-2, #18181b)" };
|
|
var travels = { close: 0.5, standard: 1, far: 1.9 };
|
|
|
|
var tone = tones[pick(tones, vars.tone, "red")];
|
|
var travel = travels[pick(travels, vars.travel, "standard")];
|
|
var badgeText = text(vars.badge, "3");
|
|
var tooltipText = text(vars.tooltip, "Copied");
|
|
|
|
var roots = document.querySelectorAll(".hf-micro-transitions");
|
|
for (var i = 0; i < roots.length; i += 1) {
|
|
var root = roots[i];
|
|
root.style.setProperty("--hf-micro-badge", tone);
|
|
root.style.setProperty("--hf-micro-travel", String(travel));
|
|
var badge = root.querySelector(".hf-micro-bell span");
|
|
var tooltip = root.querySelector(".hf-micro-tooltip");
|
|
if (badge) badge.textContent = badgeText;
|
|
if (tooltip) tooltip.textContent = tooltipText;
|
|
}
|
|
})();
|
|
</script>
|
|
|
|
<!--
|
|
Timeline integration:
|
|
tl.to('.hf-micro-transitions', { '--hf-micro-progress': 1, duration: 0.5, ease: 'power3.out' }, startTime);
|
|
tl.to('.hf-micro-transitions', { '--hf-micro-tab': 1, duration: 0.35, ease: 'power3.out' }, startTime + 0.55);
|
|
-->
|
|
```
|
|
|
|
</VariablesExplorer>
|
|
|
|
## 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 |
|
|
| --- | --- | --- | --- |
|
|
| `badge` | `3` | string | Count inside the notification badge on the bell. |
|
|
| `tooltip` | `Copied` | string | Wording inside the small dark tooltip. |
|
|
| `tone` | `red` | `red`, `amber`, `violet` | Colour of the notification badge chip. |
|
|
| `travel` | `standard` | `close`, `standard`, `far` | Scales how far every panel starts from its resting place before it settles. |
|
|
|
|
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="micro-transitions"
|
|
data-composition-src="compositions/components/micro-transitions.html"
|
|
data-variable-values='{"badge":"3","tooltip":"Copied","tone":"red","travel":"standard"}'
|
|
></div>
|
|
```
|
|
|
|
## Source
|
|
|
|
<Accordion title="micro-transitions.html">
|
|
|
|
```html
|
|
<!--
|
|
Micro Transitions - transitions.dev-inspired UI motion pack for HyperFrames.
|
|
|
|
Includes six app-transition patterns in one copy-paste snippet:
|
|
badge pop, dropdown reveal, modal open, tab indicator, tooltip appear,
|
|
and success check draw.
|
|
|
|
Animate --hf-micro-progress from 0 to 1, then optionally animate
|
|
--hf-micro-tab from 0 to 1 for the segmented control.
|
|
|
|
Variables. The script reads each one, falls back to the declared default on
|
|
anything missing or unrecognised, and writes either the panel wording or a
|
|
custom property the CSS below consumes. The two progress drivers above are
|
|
untouched by them.
|
|
|
|
- badge (any short text, default 3): the count inside the red chip on the
|
|
bell. Blank or non-text input falls back to the default.
|
|
- tooltip (any short text, default Copied): wording inside the small dark
|
|
tooltip.
|
|
- tone (red | amber | violet, default red): colour of that badge chip, the
|
|
one accent-carrying element in the pack. red and amber are literal alert
|
|
conventions; violet rides the composition's own accent-2 token and falls
|
|
back to ink when the composition declares none.
|
|
- travel (close | standard | far, default standard): scales how far every
|
|
panel starts from its resting place, so the whole pack drifts half as far
|
|
or nearly twice as far into position over the same progress run. At full
|
|
progress each panel lands in exactly the same place.
|
|
|
|
On every default the result is identical to the original: a red 3 on the
|
|
bell, a Copied tooltip, and panels that rise between 6px and 18px.
|
|
-->
|
|
|
|
<div
|
|
class="hf-micro-transitions"
|
|
style="--hf-micro-progress: 0; --hf-micro-tab: 0"
|
|
data-composition-variables='[
|
|
{"id": "badge", "type": "string", "role": "content", "label": "Badge", "description": "Count inside the notification badge on the bell.", "default": "3"},
|
|
{"id": "tooltip", "type": "string", "role": "content", "label": "Tooltip", "description": "Wording inside the small dark tooltip.", "default": "Copied"},
|
|
{"id": "tone", "type": "enum", "role": "style", "label": "Badge tone", "description": "Colour of the notification badge chip.", "default": "red", "options": [{"value": "red", "label": "Red"}, {"value": "amber", "label": "Amber"}, {"value": "violet", "label": "Violet"}]},
|
|
{"id": "travel", "type": "enum", "role": "motion", "label": "Travel", "description": "Scales how far every panel starts from its resting place before it settles.", "default": "standard", "options": [{"value": "close", "label": "Close"}, {"value": "standard", "label": "Standard"}, {"value": "far", "label": "Far"}]}
|
|
]'
|
|
>
|
|
<div class="hf-micro-bell"><span>3</span></div>
|
|
<div class="hf-micro-dropdown">
|
|
<strong>Actions</strong>
|
|
<p>Export, duplicate, archive</p>
|
|
</div>
|
|
<div class="hf-micro-modal">
|
|
<strong>Ready to publish?</strong><span>All checks passed.</span>
|
|
</div>
|
|
<div class="hf-micro-tabs"><i></i><b>Draft</b><b>Live</b></div>
|
|
<div class="hf-micro-tooltip">Copied</div>
|
|
<svg class="hf-micro-check" viewBox="0 0 48 48" aria-hidden="true">
|
|
<path d="M12 25l8 8 17-19" />
|
|
</svg>
|
|
</div>
|
|
|
|
<style>
|
|
.hf-micro-transitions {
|
|
--hf-micro-progress: 0;
|
|
--hf-micro-tab: 0;
|
|
position: relative;
|
|
width: min(640px, 100%);
|
|
height: 360px;
|
|
font-family: Inter, system-ui, sans-serif;
|
|
color: #18181b;
|
|
}
|
|
.hf-micro-bell,
|
|
.hf-micro-dropdown,
|
|
.hf-micro-modal,
|
|
.hf-micro-tabs,
|
|
.hf-micro-tooltip,
|
|
.hf-micro-check {
|
|
position: absolute;
|
|
will-change: transform, opacity;
|
|
}
|
|
.hf-micro-bell {
|
|
top: 18px;
|
|
left: 28px;
|
|
width: 54px;
|
|
height: 54px;
|
|
border-radius: 18px;
|
|
background: #18181b;
|
|
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
|
|
}
|
|
.hf-micro-bell::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 15px 17px 13px;
|
|
border: 2px solid #fff;
|
|
border-radius: 12px 12px 9px 9px;
|
|
}
|
|
.hf-micro-bell span {
|
|
position: absolute;
|
|
top: -8px;
|
|
right: -8px;
|
|
min-width: 24px;
|
|
height: 24px;
|
|
display: grid;
|
|
place-items: center;
|
|
border: 3px solid #fff;
|
|
border-radius: 999px;
|
|
background: var(--hf-micro-badge, #ef4444);
|
|
color: #fff;
|
|
font-size: 12px;
|
|
font-weight: 850;
|
|
opacity: var(--hf-micro-progress);
|
|
transform: translate(
|
|
calc((1 - var(--hf-micro-progress)) * -7px * var(--hf-micro-travel, 1)),
|
|
calc((1 - var(--hf-micro-progress)) * 10px * var(--hf-micro-travel, 1))
|
|
)
|
|
scale(calc(0.25 + var(--hf-micro-progress) * 0.75));
|
|
}
|
|
.hf-micro-dropdown {
|
|
top: 92px;
|
|
left: 28px;
|
|
width: 210px;
|
|
padding: 18px;
|
|
border: 1px solid #e4e4e7;
|
|
border-radius: 18px;
|
|
background: #fff;
|
|
opacity: var(--hf-micro-progress);
|
|
transform: translateY(calc((1 - var(--hf-micro-progress)) * -12px * var(--hf-micro-travel, 1)))
|
|
scale(calc(0.95 + var(--hf-micro-progress) * 0.05));
|
|
transform-origin: top left;
|
|
box-shadow: 0 24px 65px rgba(0, 0, 0, 0.16);
|
|
}
|
|
.hf-micro-dropdown strong,
|
|
.hf-micro-modal strong {
|
|
display: block;
|
|
font-size: 16px;
|
|
}
|
|
.hf-micro-dropdown p,
|
|
.hf-micro-modal span {
|
|
display: block;
|
|
margin: 8px 0 0;
|
|
color: #71717a;
|
|
font-size: 13px;
|
|
line-height: 1.4;
|
|
}
|
|
.hf-micro-modal {
|
|
top: 48px;
|
|
right: 34px;
|
|
width: 260px;
|
|
padding: 22px;
|
|
border: 1px solid #e4e4e7;
|
|
border-radius: 22px;
|
|
background: #fff;
|
|
opacity: var(--hf-micro-progress);
|
|
transform: translateY(calc((1 - var(--hf-micro-progress)) * 18px * var(--hf-micro-travel, 1)))
|
|
scale(calc(0.96 + var(--hf-micro-progress) * 0.04));
|
|
box-shadow: 0 32px 80px rgba(0, 0, 0, 0.2);
|
|
}
|
|
.hf-micro-tabs {
|
|
left: 260px;
|
|
bottom: 46px;
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 4px;
|
|
width: 210px;
|
|
padding: 4px;
|
|
border-radius: 14px;
|
|
background: #f4f4f5;
|
|
opacity: var(--hf-micro-progress);
|
|
transform: translateY(calc((1 - var(--hf-micro-progress)) * 14px * var(--hf-micro-travel, 1)));
|
|
}
|
|
.hf-micro-tabs i {
|
|
position: absolute;
|
|
top: 4px;
|
|
left: 4px;
|
|
width: calc((100% - 8px) / 2);
|
|
height: calc(100% - 8px);
|
|
border-radius: 11px;
|
|
background: #fff;
|
|
transform: translateX(calc(var(--hf-micro-tab) * 100%));
|
|
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
|
|
}
|
|
.hf-micro-tabs b {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: grid;
|
|
place-items: center;
|
|
height: 38px;
|
|
color: #52525b;
|
|
font-size: 13px;
|
|
}
|
|
.hf-micro-tooltip {
|
|
right: 54px;
|
|
bottom: 48px;
|
|
padding: 8px 11px;
|
|
border-radius: 10px;
|
|
background: #18181b;
|
|
color: #fff;
|
|
font-size: 12px;
|
|
font-weight: 750;
|
|
opacity: var(--hf-micro-progress);
|
|
transform: translateY(calc((1 - var(--hf-micro-progress)) * 6px * var(--hf-micro-travel, 1)))
|
|
scale(calc(0.96 + var(--hf-micro-progress) * 0.04));
|
|
}
|
|
.hf-micro-check {
|
|
right: 116px;
|
|
bottom: 92px;
|
|
width: 48px;
|
|
height: 48px;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 5;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
opacity: var(--hf-micro-progress);
|
|
}
|
|
.hf-micro-check path {
|
|
stroke-dasharray: 42;
|
|
stroke-dashoffset: calc((1 - var(--hf-micro-progress)) * 42);
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
(function () {
|
|
"use strict";
|
|
|
|
var vars =
|
|
window.__hyperframes && window.__hyperframes.getVariables
|
|
? window.__hyperframes.getVariables()
|
|
: {};
|
|
|
|
// Unrecognised overrides return to their declared defaults.
|
|
function pick(table, value, fallback) {
|
|
return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
|
|
}
|
|
|
|
function text(value, fallback) {
|
|
return typeof value === "string" && value.trim() !== "" ? value.trim() : fallback;
|
|
}
|
|
|
|
// The badge is the pack's one accent-carrying element. red and amber are
|
|
// literal alert conventions; violet rides the composition's own token and
|
|
// falls back to ink.
|
|
var tones = { red: "#ef4444", amber: "#f59e0b", violet: "var(--accent-2, #18181b)" };
|
|
var travels = { close: 0.5, standard: 1, far: 1.9 };
|
|
|
|
var tone = tones[pick(tones, vars.tone, "red")];
|
|
var travel = travels[pick(travels, vars.travel, "standard")];
|
|
var badgeText = text(vars.badge, "3");
|
|
var tooltipText = text(vars.tooltip, "Copied");
|
|
|
|
var roots = document.querySelectorAll(".hf-micro-transitions");
|
|
for (var i = 0; i < roots.length; i += 1) {
|
|
var root = roots[i];
|
|
root.style.setProperty("--hf-micro-badge", tone);
|
|
root.style.setProperty("--hf-micro-travel", String(travel));
|
|
var badge = root.querySelector(".hf-micro-bell span");
|
|
var tooltip = root.querySelector(".hf-micro-tooltip");
|
|
if (badge) badge.textContent = badgeText;
|
|
if (tooltip) tooltip.textContent = tooltipText;
|
|
}
|
|
})();
|
|
</script>
|
|
|
|
<!--
|
|
Timeline integration:
|
|
tl.to('.hf-micro-transitions', { '--hf-micro-progress': 1, duration: 0.5, ease: 'power3.out' }, startTime);
|
|
tl.to('.hf-micro-transitions', { '--hf-micro-tab': 1, duration: 0.35, ease: 'power3.out' }, startTime + 0.55);
|
|
-->
|
|
```
|
|
|
|
</Accordion>
|
|
|
|
## Usage
|
|
|
|
Open `compositions/components/micro-transitions.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
|
|
|
|
{/* hf:generated-footer */}
|
|
|
|
Tagged `transition-primitive` `motion-primitive` `transitions-dev-port` `ui` `transition` `microinteraction`.
|
|
|
|
## Related topics
|
|
|
|
- [Browse the complete Catalog](/catalog)
|
|
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
|
- [Build a richer composition](/go-further)
|