mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-07 01:56:04 +00:00
This reverts commit 3b53bfd2f7.
This commit is contained in:
Miguel Ángel
@@ -1,135 +0,0 @@
|
||||
<!--
|
||||
Success Check - transitions.dev-inspired primitive for HyperFrames.
|
||||
|
||||
Paste the markup, CSS and script into a composition. Use the timeline
|
||||
integration note at the bottom as the starting point for deterministic GSAP
|
||||
animation.
|
||||
|
||||
Variables. The script reads each one, falls back to the declared default on
|
||||
anything missing or unrecognised, and writes the result as a custom property
|
||||
the CSS below consumes. The timeline recipe at the bottom is untouched by
|
||||
them: it keeps popping the mark in and drawing the tick, and these decide how
|
||||
big it is, what colour it wears and how far the pop swings.
|
||||
|
||||
- tint (green | blue | violet | amber, default green): the colour pair, a
|
||||
pale halo behind a saturated mark. green and amber are literal state
|
||||
colours and stay legible whatever the surrounding theme tokens hold; blue
|
||||
and violet name no state, so their mark rides the composition's own accent
|
||||
and accent-2 tokens over a neutral halo and falls back to ink when the
|
||||
composition declares none.
|
||||
- size (small | standard | large, default standard): diameter of the halo
|
||||
and of the mark inside it, 60px, 82px or 110px. The stroke is in viewBox
|
||||
units, so it thickens with the mark instead of staying pinned.
|
||||
- ring (subtle | standard | bold, default standard): opacity of the circle
|
||||
the tick sits in, 0.12, 0.28 or 0.6.
|
||||
- spin (subtle | standard | bold, default standard): multiplies the rotation
|
||||
the timeline drives, so the mark swings a quarter as far or twice as far
|
||||
into place. It scales what is already there rather than replacing it, so
|
||||
it still lands square at the end of the pop, and at rest, with no rotation
|
||||
driven, all three settle identically.
|
||||
|
||||
On every default the result is identical to the original: an 82px pale green
|
||||
halo, a green tick, a 0.28 ring, and the authored -18deg pop.
|
||||
-->
|
||||
|
||||
<div
|
||||
class="hf-transition-success-check"
|
||||
aria-label="Success"
|
||||
data-composition-variables='[
|
||||
{ "id": "tint", "type": "enum", "role": "style", "label": "Tint", "description": "Colour pair, a pale halo behind a saturated mark. green and amber are literal state colours; blue and violet ride the composition theme tokens.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }, { "value": "amber", "label": "Amber" }] },
|
||||
{ "id": "size", "type": "enum", "role": "layout", "label": "Size", "description": "Diameter of the halo and of the mark inside it.", "default": "standard", "options": [{ "value": "small", "label": "Small" }, { "value": "standard", "label": "Standard" }, { "value": "large", "label": "Large" }] },
|
||||
{ "id": "ring", "type": "enum", "role": "style", "label": "Ring", "description": "Opacity of the circle the tick sits in.", "default": "standard", "options": [{ "value": "subtle", "label": "Subtle" }, { "value": "standard", "label": "Standard" }, { "value": "bold", "label": "Bold" }] },
|
||||
{ "id": "spin", "type": "enum", "role": "motion", "label": "Spin", "description": "Multiplies the rotation the timeline drives, so the mark swings less or more into place.", "default": "standard", "options": [{ "value": "subtle", "label": "Subtle" }, { "value": "standard", "label": "Standard" }, { "value": "bold", "label": "Bold" }] }
|
||||
]'
|
||||
>
|
||||
<svg viewBox="0 0 64 64">
|
||||
<circle cx="32" cy="32" r="27" />
|
||||
<path d="M20 33.5l8 8L45 23" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.hf-transition-success-check {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: var(--hf-check-size, 82px);
|
||||
height: var(--hf-check-size, 82px);
|
||||
border-radius: 999px;
|
||||
background: var(--hf-check-halo, #dcfce7);
|
||||
color: var(--hf-check-ink, #16a34a);
|
||||
}
|
||||
.hf-transition-success-check svg {
|
||||
width: var(--hf-check-mark-size, 64px);
|
||||
height: var(--hf-check-mark-size, 64px);
|
||||
fill: none;
|
||||
stroke: currentColor;
|
||||
stroke-width: 5;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
filter: blur(var(--hf-check-blur, 0px));
|
||||
transform: rotate(calc(var(--hf-check-rotate, 0deg) * var(--hf-check-spin, 1)))
|
||||
scale(var(--hf-check-scale, 1));
|
||||
}
|
||||
.hf-transition-success-check circle {
|
||||
opacity: var(--hf-check-ring-opacity, 0.28);
|
||||
}
|
||||
.hf-transition-success-check path {
|
||||
stroke-dasharray: 36;
|
||||
stroke-dashoffset: var(--hf-check-dash, 0);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
var vars =
|
||||
window.__hyperframes && window.__hyperframes.getVariables
|
||||
? window.__hyperframes.getVariables()
|
||||
: {};
|
||||
|
||||
// Unrecognised overrides return to their declared defaults.
|
||||
// The mark is the whole composition and its colour is its meaning, so this
|
||||
// is the one place an accent belongs. green and amber are the literal
|
||||
// success and caution conventions; blue and violet named no state, so they
|
||||
// ride the composition's own tokens over a neutral halo and fall back to
|
||||
// ink when the composition declares none.
|
||||
var tints = {
|
||||
green: { halo: "#dcfce7", ink: "#16a34a" },
|
||||
blue: { halo: "#f4f4f5", ink: "var(--accent, #18181b)" },
|
||||
violet: { halo: "#f4f4f5", ink: "var(--accent-2, #18181b)" },
|
||||
amber: { halo: "#fef3c7", ink: "#d97706" },
|
||||
};
|
||||
var sizes = {
|
||||
small: { box: "60px", mark: "47px" },
|
||||
standard: { box: "82px", mark: "64px" },
|
||||
large: { box: "110px", mark: "86px" },
|
||||
};
|
||||
var rings = { subtle: "0.12", standard: "0.28", bold: "0.6" };
|
||||
var spins = { subtle: "0.4", standard: "1", bold: "2" };
|
||||
|
||||
function pick(table, value, fallback) {
|
||||
return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
|
||||
}
|
||||
|
||||
var tint = tints[pick(tints, vars.tint, "green")];
|
||||
var size = sizes[pick(sizes, vars.size, "standard")];
|
||||
var ring = rings[pick(rings, vars.ring, "standard")];
|
||||
var spin = spins[pick(spins, vars.spin, "standard")];
|
||||
|
||||
var roots = document.querySelectorAll(".hf-transition-success-check");
|
||||
for (var i = 0; i < roots.length; i += 1) {
|
||||
roots[i].style.setProperty("--hf-check-halo", tint.halo);
|
||||
roots[i].style.setProperty("--hf-check-ink", tint.ink);
|
||||
roots[i].style.setProperty("--hf-check-size", size.box);
|
||||
roots[i].style.setProperty("--hf-check-mark-size", size.mark);
|
||||
roots[i].style.setProperty("--hf-check-ring-opacity", ring);
|
||||
roots[i].style.setProperty("--hf-check-spin", spin);
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!--
|
||||
Timeline integration:
|
||||
tl.fromTo('.hf-transition-success-check svg', { opacity: 0, '--hf-check-scale': 0.72, '--hf-check-rotate': '-18deg', '--hf-check-blur': '7px' }, { opacity: 1, '--hf-check-scale': 1, '--hf-check-rotate': '0deg', '--hf-check-blur': '0px', duration: 0.34, ease: 'back.out(1.8)' }, startTime); tl.fromTo('.hf-transition-success-check path', { '--hf-check-dash': 36 }, { '--hf-check-dash': 0, duration: 0.42, ease: 'power2.out' }, startTime + 0.12);
|
||||
-->
|
||||
Reference in New Issue
Block a user