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
@@ -1,105 +0,0 @@
|
||||
<!--
|
||||
Bottom Up Letters - deterministic text splitter.
|
||||
|
||||
Add class="hf-bottom-up-letters" to a plain text element. This script wraps
|
||||
each character in a span so your paused GSAP timeline can stagger the reveal.
|
||||
|
||||
Variables. This fragment has no markup of its own, so the declaration rides
|
||||
the <style> element below; the runtime collects every element carrying
|
||||
data-composition-variables, not just the document root. The script reads each
|
||||
value, falls back to the declared default on anything missing or
|
||||
unrecognised, and either changes how the text is split or writes a custom
|
||||
property the CSS consumes. The timeline recipe below is untouched by them: it
|
||||
still tweens opacity and y back to rest, and these decide what a single
|
||||
stagger step covers and where rest is travelled from.
|
||||
|
||||
- unit (letter | word, default letter): what each animated span holds.
|
||||
letter staggers glyph by glyph; word keeps whole words intact, so a long
|
||||
line reads instead of shimmers.
|
||||
- direction (up | down, default up): where the spans start. up starts
|
||||
below the baseline and rises into place, down starts above and drops.
|
||||
- travel (close | standard | far, default standard): how far each span
|
||||
starts from rest, from 0.45em through 0.85em to 1.5em.
|
||||
|
||||
On every default the result is identical to the original: one span per
|
||||
character, each starting 0.85em below the baseline.
|
||||
-->
|
||||
|
||||
<style
|
||||
data-composition-variables='[
|
||||
{ "id": "unit", "type": "enum", "role": "content", "label": "Split unit", "description": "What each animated span holds. Letter staggers glyph by glyph, word keeps whole words intact.", "default": "letter", "options": [{ "value": "letter", "label": "Letter" }, { "value": "word", "label": "Word" }] },
|
||||
{ "id": "direction", "type": "enum", "role": "motion", "label": "Direction", "description": "Where each span starts. Up starts below the baseline and rises, down starts above and drops.", "default": "up", "options": [{ "value": "up", "label": "Up" }, { "value": "down", "label": "Down" }] },
|
||||
{ "id": "travel", "type": "enum", "role": "motion", "label": "Travel", "description": "How far each span starts from its resting position, from 0.45em to 1.5em.", "default": "standard", "options": [{ "value": "close", "label": "Close" }, { "value": "standard", "label": "Standard" }, { "value": "far", "label": "Far" }] }
|
||||
]'
|
||||
>
|
||||
.hf-bottom-up-letters {
|
||||
display: inline-block;
|
||||
}
|
||||
.hf-bottom-up-letters-char {
|
||||
display: inline-block;
|
||||
opacity: 0;
|
||||
transform: translate3d(
|
||||
0,
|
||||
calc(var(--hf-letters-travel, 0.85em) * var(--hf-letters-direction, 1)),
|
||||
0
|
||||
);
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
</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;
|
||||
}
|
||||
|
||||
var travels = { close: "0.45em", standard: "0.85em", far: "1.5em" };
|
||||
var directions = { up: "1", down: "-1" };
|
||||
var units = { letter: true, word: true };
|
||||
|
||||
var travel = travels[pick(travels, vars.travel, "standard")];
|
||||
var direction = directions[pick(directions, vars.direction, "up")];
|
||||
var unit = pick(units, vars.unit, "letter");
|
||||
|
||||
document.querySelectorAll(".hf-bottom-up-letters").forEach((el) => {
|
||||
el.style.setProperty("--hf-letters-travel", travel);
|
||||
el.style.setProperty("--hf-letters-direction", direction);
|
||||
if (el.dataset.hfLettersReady === "1") return;
|
||||
const text = el.textContent || "";
|
||||
el.textContent = "";
|
||||
const parts = unit === "word" ? text.split(/(\s+)/) : Array.from(text);
|
||||
for (const part of parts) {
|
||||
if (part === "") continue;
|
||||
if (unit === "word" && /^\s+$/.test(part)) {
|
||||
el.appendChild(document.createTextNode(part));
|
||||
continue;
|
||||
}
|
||||
const span = document.createElement("span");
|
||||
span.className = "hf-bottom-up-letters-char";
|
||||
span.textContent = part === " " ? "\u00a0" : part;
|
||||
el.appendChild(span);
|
||||
}
|
||||
el.dataset.hfLettersReady = "1";
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!--
|
||||
Timeline integration:
|
||||
|
||||
tl.to(".hf-bottom-up-letters-char", {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
duration: 0.48,
|
||||
ease: "back.out(1.7)",
|
||||
stagger: 0.025,
|
||||
}, startTime);
|
||||
-->
|
||||
-74
@@ -1,74 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=1920, height=1080" />
|
||||
<title>Bottom Up Letters - 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: #16120e;
|
||||
color: #f7ead6;
|
||||
font-family: Inter, system-ui, sans-serif;
|
||||
}
|
||||
.hf-bottom-up-letters {
|
||||
display: inline-block;
|
||||
font-size: 180px; /* ponytail: scaled up from 126px — fills ~65% of 1920px frame width */
|
||||
line-height: 1;
|
||||
font-weight: 900;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
.hf-bottom-up-letters-char {
|
||||
display: inline-block;
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 0.85em, 0);
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="demo"
|
||||
data-composition-id="bottom-up-letters-demo"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
data-duration="4"
|
||||
>
|
||||
<div class="hf-bottom-up-letters">Build with motion</div>
|
||||
<script>
|
||||
document.querySelectorAll(".hf-bottom-up-letters").forEach((el) => {
|
||||
const text = el.textContent || "";
|
||||
el.textContent = "";
|
||||
for (const char of text) {
|
||||
const span = document.createElement("span");
|
||||
span.className = "hf-bottom-up-letters-char";
|
||||
span.textContent = char === " " ? "\u00a0" : char;
|
||||
el.appendChild(span);
|
||||
}
|
||||
});
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
tl.to(
|
||||
".hf-bottom-up-letters-char",
|
||||
{ opacity: 1, y: 0, duration: 0.48, ease: "back.out(1.7)", stagger: 0.025 },
|
||||
0.45,
|
||||
);
|
||||
window.__timelines = window.__timelines || {};
|
||||
window.__timelines["bottom-up-letters-demo"] = tl;
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,78 +0,0 @@
|
||||
{
|
||||
"$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
|
||||
"name": "bottom-up-letters",
|
||||
"type": "hyperframes:component",
|
||||
"title": "Bottom Up Letters",
|
||||
"description": "Splits text into letters and reveals each glyph from below with deterministic staggered timing",
|
||||
"tags": ["motion-primitive", "text", "letters", "reveal"],
|
||||
"files": [
|
||||
{
|
||||
"path": "bottom-up-letters.html",
|
||||
"target": "compositions/components/bottom-up-letters.html",
|
||||
"type": "hyperframes:snippet"
|
||||
}
|
||||
],
|
||||
"variables": [
|
||||
{
|
||||
"id": "unit",
|
||||
"type": "enum",
|
||||
"role": "content",
|
||||
"label": "Split unit",
|
||||
"description": "What each animated span holds. Letter staggers glyph by glyph, word keeps whole words intact.",
|
||||
"default": "letter",
|
||||
"options": [
|
||||
{
|
||||
"value": "letter",
|
||||
"label": "Letter"
|
||||
},
|
||||
{
|
||||
"value": "word",
|
||||
"label": "Word"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "direction",
|
||||
"type": "enum",
|
||||
"role": "motion",
|
||||
"label": "Direction",
|
||||
"description": "Where each span starts. Up starts below the baseline and rises, down starts above and drops.",
|
||||
"default": "up",
|
||||
"options": [
|
||||
{
|
||||
"value": "up",
|
||||
"label": "Up"
|
||||
},
|
||||
{
|
||||
"value": "down",
|
||||
"label": "Down"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "travel",
|
||||
"type": "enum",
|
||||
"role": "motion",
|
||||
"label": "Travel",
|
||||
"description": "How far each span starts from its resting position, from 0.45em to 1.5em.",
|
||||
"default": "standard",
|
||||
"options": [
|
||||
{
|
||||
"value": "close",
|
||||
"label": "Close"
|
||||
},
|
||||
{
|
||||
"value": "standard",
|
||||
"label": "Standard"
|
||||
},
|
||||
{
|
||||
"value": "far",
|
||||
"label": "Far"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"preview": {
|
||||
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/bottom-up-letters.png"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user