ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-11 14:50:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Revert "feat(registry): the video-primitive moves, documented and customisable (#3090)" (#3162)

Browse Source 
This reverts commit 3b53bfd2f7.
This commit is contained in:
Miguel Ángel
2026-08-10 14:47:47 -04:00
committed by GitHub
parent 3b53bfd2f7
commit c86d4013f5
2328 changed files with 5906 additions and 458525 deletions
Download Patch File Download Diff File Expand all files Collapse all files
registry/components/text-shimmer/text-shimmer.html
Vendored
-178
View File
@@ -1,178 +0,0 @@
<!doctype html>
<!--
text-shimmer: HyperFrames video primitive (text effects / drift / emphasize)
Concept: a headline remains fixed while one narrow specular band crosses
its glyphs. The text is clean before and after the pass. There is no
entrance, exit, pulse, scale, or supporting decoration.
Evidence: design-inspiration/INDEX.md and viral-micro-interactions.md,
animated text shimmer by jhey Tan, adapted from an infinite CSS loop into
one deterministic, seek-driven video beat.
Variables:
- text (string, default "Effortless"): headline copy.
- accent (green | blue | violet, default green): shimmer hue.
- sweep_at (number, 0.2 to 2 seconds, default 1.2): requested sweep start.
Envelope: IN includes clean stillness until sweep_at, then one fixed 0.9s
sweep. If the mounted duration is too short, the sweep starts earlier and
compresses only when it cannot fit. HOLD is elastic and keeps the clean end
state alive with an off-glyph drift. OUT is intentionally zero because the
treatment returns to ordinary text rather than dismissing it.
Mount contract: everything renderable lives inside the template. #root is
elastic, fills the host box, establishes the container query basis, and has
no data-width or data-height. The paused GSAP timeline registers under the
hardcoded text-shimmer key.
-->
<html
lang="en"
data-composition-id="text-shimmer"
data-composition-duration="3"
data-composition-variables='[
{ "id": "text", "type": "string", "role": "content", "label": "Headline", "description": "Text receiving the single shimmer pass.", "default": "Effortless" },
{ "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Hue of the specular shimmer band.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
{ "id": "sweep_at", "type": "number", "role": "timing", "label": "Sweep start", "description": "Requested start time for the shimmer sweep.", "default": 1.2, "min": 0.2, "max": 2, "step": 0.1, "unit": "s" }
]'
>
<head>
<meta charset="UTF-8" />
<title>Text Shimmer</title>
</head>
<body>
<template>
<div id="root" data-composition-id="text-shimmer" data-duration="3" data-fps="30">
<style>
*,
*::before,
*::after {
box-sizing: border-box;
}
#root {
position: absolute;
inset: 0;
container-type: size;
isolation: isolate;
overflow: hidden;
background: var(--bg, transparent);
color: var(--fg, #f8fafc);
font-family: var(--font-display, Inter, system-ui, sans-serif);
pointer-events: none;
}
.ts-clip {
position: absolute;
inset: 0;
display: grid;
place-items: center;
overflow: hidden;
padding: var(--space-3, 4cqmin);
background: var(--surface, transparent);
}
.ts-headline {
--ts-base: var(--fg, #f8fafc);
--ts-accent: var(--brand, #22c55e);
display: block;
max-width: 90cqw;
color: transparent;
font-size: clamp(28px, 16cqmin, 176px);
font-weight: 780;
line-height: 0.96;
letter-spacing: -0.055em;
overflow-wrap: anywhere;
text-align: center;
background-image: linear-gradient(
110deg,
var(--ts-base) 0%,
var(--ts-base) 40%,
color-mix(in srgb, var(--ts-accent) 58%, var(--fg, white)) 47%,
var(--fg, white) 50%,
color-mix(in srgb, var(--ts-accent) 72%, var(--fg, white)) 53%,
var(--ts-base) 60%,
var(--ts-base) 100%
);
background-position: 100% 50%;
background-repeat: no-repeat;
background-size: 300% 100%;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
will-change: background-position;
}
</style>
<div
id="text-shimmer-clip"
class="ts-clip clip"
data-start="0"
data-duration="3"
data-track-index="0"
>
<span class="ts-headline"></span>
</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 headline = root.querySelector(".ts-headline");
var vars =
window.__hyperframes && window.__hyperframes.getVariables
? window.__hyperframes.getVariables()
: {};
var text = vars.text == null ? "Effortless" : String(vars.text);
var accent = vars.accent === "blue" || vars.accent === "violet" ? vars.accent : "green";
var accentTokens = {
green: "var(--brand, #22c55e)",
blue: "var(--accent, #38bdf8)",
violet: "var(--accent-2, #a78bfa)",
};
var accentColor = accentTokens[accent];
var sweepAtValue = vars.sweep_at;
var sweepAt =
typeof sweepAtValue === "number" && Number.isFinite(sweepAtValue)
? Math.max(0.2, Math.min(2, sweepAtValue))
: 1.2;
headline.textContent = text;
headline.style.setProperty("--ts-accent", accentColor);
var SWEEP_BASE = 0.9;
var durationValue = parseFloat(root.dataset.duration || "3");
var duration = Number.isFinite(durationValue) ? Math.max(0.001, durationValue) : 3;
var SWEEP = Math.min(SWEEP_BASE, duration);
var SWEEP_START = Math.min(sweepAt, Math.max(0, duration - SWEEP));
var IN = SWEEP_START + SWEEP;
var HOLD = Math.max(0, duration - IN);
var tl = gsap.timeline({ paused: true });
tl.fromTo(
headline,
{ backgroundPosition: "100% 50%" },
{ backgroundPosition: "0% 50%", duration: SWEEP, ease: "sine.inOut" },
SWEEP_START,
);
if (HOLD > 0) {
tl.to(
headline,
{ backgroundPosition: "4% 50%", duration: HOLD, ease: "sine.inOut" },
IN,
);
}
tl.seek(0);
window.__timelines = window.__timelines || {};
window.__timelines["text-shimmer"] = tl;
})();
</script>
</div>
</template>
</body>
</html>