mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-04 16:42:27 +00:00
This reverts commit 3b53bfd2f7.
This commit is contained in:
Miguel Ángel
-108
@@ -1,108 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=1920, height=1080" />
|
||||
<title>Text Stagger - Demo</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
}
|
||||
#demo {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: #fafafa;
|
||||
font-family: Inter, system-ui, sans-serif;
|
||||
}
|
||||
.demo-frame {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
gap: 28px;
|
||||
/* ponytail: scale on non-GSAP wrapper; text was ~7% frame height, now fills ~55% */
|
||||
transform: scale(2.6);
|
||||
transform-origin: center center;
|
||||
}
|
||||
.demo-label {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: #a1a1aa;
|
||||
}
|
||||
.hf-transition-text-stagger {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.24em;
|
||||
color: #18181b;
|
||||
font:
|
||||
900 74px/0.95 Inter,
|
||||
system-ui,
|
||||
sans-serif;
|
||||
letter-spacing: -0.045em;
|
||||
}
|
||||
.hf-transition-text-stagger span {
|
||||
display: inline-block;
|
||||
background: linear-gradient(90deg, #18181b, #18181b, #71717a, #18181b);
|
||||
background-size: 240% 100%;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
will-change: transform, opacity, filter, background-position;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="demo"
|
||||
data-composition-id="text-stagger-demo"
|
||||
data-start="0"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
data-duration="5"
|
||||
>
|
||||
<div class="demo-frame">
|
||||
<div class="demo-label">text-stagger</div>
|
||||
<div class="hf-transition-text-stagger">
|
||||
<span>Build</span>
|
||||
<span>motion</span>
|
||||
<span>systems</span>
|
||||
<span>fast</span>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
tl.fromTo(
|
||||
".hf-transition-text-stagger span",
|
||||
{ opacity: 0, y: 48, filter: "blur(14px)" },
|
||||
{
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
filter: "blur(0px)",
|
||||
duration: 0.54,
|
||||
stagger: 0.09,
|
||||
ease: "power3.out",
|
||||
},
|
||||
0.35,
|
||||
);
|
||||
tl.to(
|
||||
".hf-transition-text-stagger span",
|
||||
{ backgroundPosition: "100% 0%", duration: 0.72, stagger: 0.04, ease: "power2.inOut" },
|
||||
1.05,
|
||||
);
|
||||
tl.set({}, {}, 5);
|
||||
window.__timelines = window.__timelines || {};
|
||||
window.__timelines["text-stagger-demo"] = tl;
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,80 +0,0 @@
|
||||
{
|
||||
"$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
|
||||
"name": "text-stagger",
|
||||
"type": "hyperframes:component",
|
||||
"title": "Text Stagger",
|
||||
"description": "A transitions.dev-inspired text stagger primitive with enter, shimmer, and exit-ready words",
|
||||
"tags": ["video-primitive", "transition-primitive", "transitions-dev-port", "text", "stagger"],
|
||||
"files": [
|
||||
{
|
||||
"path": "text-stagger.html",
|
||||
"target": "compositions/components/text-stagger.html",
|
||||
"type": "hyperframes:snippet"
|
||||
}
|
||||
],
|
||||
"variables": [
|
||||
{
|
||||
"id": "text",
|
||||
"type": "string",
|
||||
"role": "content",
|
||||
"label": "Text",
|
||||
"description": "Headline copy. Every whitespace-separated word becomes one staggered span.",
|
||||
"default": "Build motion systems fast"
|
||||
},
|
||||
{
|
||||
"id": "size",
|
||||
"type": "number",
|
||||
"role": "layout",
|
||||
"label": "Size",
|
||||
"description": "Type size of every word in pixels, clamped to 24-160. Line height stays proportional.",
|
||||
"default": 74,
|
||||
"min": 24,
|
||||
"max": 160,
|
||||
"step": 1,
|
||||
"unit": "px"
|
||||
},
|
||||
{
|
||||
"id": "tone",
|
||||
"type": "enum",
|
||||
"role": "style",
|
||||
"label": "Tone",
|
||||
"description": "Base word colour: ink for light frames, paper for dark ones.",
|
||||
"default": "ink",
|
||||
"options": [
|
||||
{
|
||||
"value": "ink",
|
||||
"label": "Ink"
|
||||
},
|
||||
{
|
||||
"value": "paper",
|
||||
"label": "Paper"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "accent",
|
||||
"type": "enum",
|
||||
"role": "style",
|
||||
"label": "Accent",
|
||||
"description": "Colour of the shimmer the second timeline step sweeps across the words.",
|
||||
"default": "blue",
|
||||
"options": [
|
||||
{
|
||||
"value": "blue",
|
||||
"label": "Blue"
|
||||
},
|
||||
{
|
||||
"value": "green",
|
||||
"label": "Green"
|
||||
},
|
||||
{
|
||||
"value": "violet",
|
||||
"label": "Violet"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"preview": {
|
||||
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/text-stagger.png"
|
||||
}
|
||||
}
|
||||
-132
@@ -1,132 +0,0 @@
|
||||
<!--
|
||||
Text Stagger - 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 into the markup or
|
||||
into a custom property the CSS above consumes. The timeline recipe below is
|
||||
untouched by them: it keeps driving the same rise, blur and shimmer sweep.
|
||||
|
||||
- text (string, default "Build motion systems fast"): the headline. It is
|
||||
split on whitespace and every word becomes its own span, so the word
|
||||
count decides how many steps the stagger has. Blank falls back to the
|
||||
default sentence.
|
||||
- size (number, default 74, clamped to 24-160 px): type size of every
|
||||
word. Line height stays proportional, so the block grows and shrinks as
|
||||
one. A missing or non-numeric value falls back to 74.
|
||||
- tone (ink | paper, default ink): base word colour. ink is near-black for
|
||||
light frames, paper near-white for dark ones. It paints both the resting
|
||||
words and the two dark stops of the shimmer gradient.
|
||||
- accent (blue | green | violet, default blue): the shimmer colour that the
|
||||
second timeline step sweeps across the words. It sits outside the visible
|
||||
band while the words rest, so it only shows once that sweep runs.
|
||||
|
||||
On every default the result is identical to the original: four near-black
|
||||
74px words that rise through a blur and take one sky-blue shimmer pass.
|
||||
-->
|
||||
|
||||
<div
|
||||
class="hf-transition-text-stagger"
|
||||
data-composition-variables='[
|
||||
{"id": "text", "type": "string", "role": "content", "label": "Text", "description": "Headline copy. Every whitespace-separated word becomes one staggered span.", "default": "Build motion systems fast"},
|
||||
{"id": "size", "type": "number", "role": "layout", "label": "Size", "description": "Type size of every word in pixels, clamped to 24-160. Line height stays proportional.", "default": 74, "min": 24, "max": 160, "step": 1, "unit": "px"},
|
||||
{"id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Base word colour: ink for light frames, paper for dark ones.", "default": "ink", "options": [{"value": "ink", "label": "Ink"}, {"value": "paper", "label": "Paper"}]},
|
||||
{"id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Colour of the shimmer the second timeline step sweeps across the words.", "default": "blue", "options": [{"value": "blue", "label": "Blue"}, {"value": "green", "label": "Green"}, {"value": "violet", "label": "Violet"}]}
|
||||
]'
|
||||
>
|
||||
<span>Build</span>
|
||||
<span>motion</span>
|
||||
<span>systems</span>
|
||||
<span>fast</span>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.hf-transition-text-stagger {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.24em;
|
||||
color: var(--hf-stagger-ink, #111827);
|
||||
font:
|
||||
900 74px/0.95 Inter,
|
||||
system-ui,
|
||||
sans-serif;
|
||||
font-size: var(--hf-stagger-size, 74px);
|
||||
letter-spacing: -0.045em;
|
||||
}
|
||||
.hf-transition-text-stagger span {
|
||||
display: inline-block;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--hf-stagger-ink, #111827),
|
||||
var(--hf-stagger-ink, #111827),
|
||||
var(--hf-stagger-accent, #38bdf8),
|
||||
var(--hf-stagger-ink, #111827)
|
||||
);
|
||||
background-size: 240% 100%;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
will-change: transform, opacity, filter, background-position;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
var vars =
|
||||
window.__hyperframes && window.__hyperframes.getVariables
|
||||
? window.__hyperframes.getVariables()
|
||||
: {};
|
||||
|
||||
// Unrecognised overrides return to their declared defaults.
|
||||
var DEFAULT_TEXT = "Build motion systems fast";
|
||||
var tones = { ink: "#111827", paper: "#f8fafc" };
|
||||
var accents = { blue: "#38bdf8", green: "#34d399", violet: "#a78bfa" };
|
||||
|
||||
function pick(table, value, fallback) {
|
||||
return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
|
||||
}
|
||||
|
||||
var words = String(vars.text == null ? DEFAULT_TEXT : vars.text)
|
||||
.split(/\s+/)
|
||||
.filter(function (word) {
|
||||
return word.length > 0;
|
||||
});
|
||||
if (words.length === 0) words = DEFAULT_TEXT.split(" ");
|
||||
|
||||
// Number(null) is 0, so null has to miss the numeric branch and clamp back
|
||||
// to the declared default instead of snapping to the minimum.
|
||||
var size = typeof vars.size === "number" ? vars.size : parseFloat(vars.size);
|
||||
if (!isFinite(size)) size = 74;
|
||||
size = Math.min(160, Math.max(24, size));
|
||||
|
||||
var tone = tones[pick(tones, vars.tone, "ink")];
|
||||
var accent = accents[pick(accents, vars.accent, "blue")];
|
||||
|
||||
var roots = document.querySelectorAll(".hf-transition-text-stagger");
|
||||
for (var i = 0; i < roots.length; i += 1) {
|
||||
var root = roots[i];
|
||||
root.style.setProperty("--hf-stagger-size", size + "px");
|
||||
root.style.setProperty("--hf-stagger-ink", tone);
|
||||
root.style.setProperty("--hf-stagger-accent", accent);
|
||||
// Rebuilt without whitespace between the spans: whitespace-only text
|
||||
// between flex items is not rendered, so this matches the markup above.
|
||||
root.textContent = "";
|
||||
for (var w = 0; w < words.length; w += 1) {
|
||||
var span = document.createElement("span");
|
||||
span.textContent = words[w];
|
||||
root.appendChild(span);
|
||||
}
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!--
|
||||
Timeline integration:
|
||||
tl.fromTo('.hf-transition-text-stagger span', { opacity: 0, y: 48, filter: 'blur(14px)' }, { opacity: 1, y: 0, filter: 'blur(0px)', duration: 0.54, stagger: 0.09, ease: 'power3.out' }, 0.35);
|
||||
tl.to('.hf-transition-text-stagger span', { backgroundPosition: '100% 0%', duration: 0.72, stagger: 0.04, ease: 'power2.inOut' }, 1.05);
|
||||
-->
|
||||
Reference in New Issue
Block a user