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
docs/catalog/components/line-by-line-slide.mdx
-144
View File
@@ -1,144 +0,0 @@
---
title: "Line-by-Line Slide"
description: "Each line enters from the left with staggered slide and exits to the right."
---
import { InstallCommand } from "/snippets/install-command.jsx";
import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
<VariablesExplorer
previewSrc="/public/catalog/preview/components/line-by-line-slide.html"
compositionId="line-by-line-slide"
compositionSrc="compositions/components/line-by-line-slide.html"
variables={[{"id":"size","type":"enum","role":"layout","label":"Size","description":"Type size of the whole stack.","default":"standard","options":[{"value":"compact","label":"Compact"},{"value":"standard","label":"Standard"},{"value":"display","label":"Display"}]},{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Line colour: ink for light frames, paper for dark ones, accent rides the brand token.","default":"ink","options":[{"value":"ink","label":"Ink"},{"value":"paper","label":"Paper"},{"value":"accent","label":"Accent"}]},{"id":"density","type":"enum","role":"layout","label":"Density","description":"The gap between lines, from a tight block to an airy stack.","default":"standard","options":[{"value":"fine","label":"Fine"},{"value":"standard","label":"Standard"},{"value":"coarse","label":"Coarse"}]},{"id":"direction","type":"enum","role":"motion","label":"Direction","description":"Which side the lines slide in from as the timeline drives the offset.","default":"left","options":[{"value":"left","label":"Left"},{"value":"right","label":"Right"}]}]}
>
```html line-by-line-slide.html
<!--
Line-by-Line Slide - remocn typography primitive for HyperFrames.
Paste the markup and CSS into a composition. Drive the timeline integration
from a paused GSAP timeline so renders remain deterministic.
Variables. The script reads each one, falls back to the declared default on
anything missing or unrecognised, and writes a custom property the CSS above
consumes. The timeline recipe below is untouched by them: it keeps driving
one sideways offset, and direction decides which way that offset points.
- size (compact | standard | display, default standard): type size of the
stack, 40px, 52px, or 68px.
- tone (ink | paper | accent, default ink): line colour. ink is near-black
for light frames, paper near-white for dark ones, accent rides the
brand token.
- density (fine | standard | coarse, default standard): the gap between
lines, 4px, 10px, or 20px.
- direction (left | right, default left): which side the lines slide in
from. left keeps the original entry, right mirrors it.
On every default the result is identical to the original: near-black 52px
lines, 10px apart, entering from the left.
-->
<div
class="hf-remocn-line-by-line-slide"
data-composition-variables='[
{"id": "size", "type": "enum", "role": "layout", "label": "Size", "description": "Type size of the whole stack.", "default": "standard", "options": [{"value": "compact", "label": "Compact"}, {"value": "standard", "label": "Standard"}, {"value": "display", "label": "Display"}]},
{"id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Line colour: ink for light frames, paper for dark ones, accent rides the brand token.", "default": "ink", "options": [{"value": "ink", "label": "Ink"}, {"value": "paper", "label": "Paper"}, {"value": "accent", "label": "Accent"}]},
{"id": "density", "type": "enum", "role": "layout", "label": "Density", "description": "The gap between lines, from a tight block to an airy stack.", "default": "standard", "options": [{"value": "fine", "label": "Fine"}, {"value": "standard", "label": "Standard"}, {"value": "coarse", "label": "Coarse"}]},
{"id": "direction", "type": "enum", "role": "motion", "label": "Direction", "description": "Which side the lines slide in from as the timeline drives the offset.", "default": "left", "options": [{"value": "left", "label": "Left"}, {"value": "right", "label": "Right"}]}
]'
>
<span>Design faster</span><span>Render cleaner</span><span>Ship louder</span>
</div>
<style>
.hf-remocn-line-by-line-slide {
color: var(--hf-line-color, #18181b);
font-family: Inter, system-ui, sans-serif;
font-weight: 900;
letter-spacing: -0.04em;
}
.hf-remocn-line-by-line-slide {
display: grid;
gap: var(--hf-line-gap, 10px);
font-size: var(--hf-line-size, 52px);
line-height: 1;
overflow: hidden;
}
.hf-remocn-line-by-line-slide span {
display: block;
transform: translate(
calc(var(--hf-line-x, 0px) * var(--hf-line-axis-x, 1)),
var(--hf-line-y, 0px)
);
filter: blur(var(--hf-line-blur, 0px));
will-change: transform, filter, 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 sizes = { compact: "40px", standard: "52px", display: "68px" };
var tones = {
ink: "#18181b",
paper: "#fafafa",
accent: "var(--brand, #34d399)",
};
var gaps = { fine: "4px", standard: "10px", coarse: "20px" };
var axes = { left: 1, right: -1 };
var size = sizes[pick(sizes, vars.size, "standard")];
var tone = tones[pick(tones, vars.tone, "ink")];
var gap = gaps[pick(gaps, vars.density, "standard")];
var axis = axes[pick(axes, vars.direction, "left")];
var roots = document.querySelectorAll(".hf-remocn-line-by-line-slide");
for (var i = 0; i < roots.length; i += 1) {
var root = roots[i];
root.style.setProperty("--hf-line-size", size);
root.style.setProperty("--hf-line-color", tone);
root.style.setProperty("--hf-line-gap", gap);
root.style.setProperty("--hf-line-axis-x", String(axis));
}
})();
</script>
<!--
Timeline integration:
tl.fromTo('.hf-remocn-line-by-line-slide span', { opacity: 0, '--hf-line-x': '-36px', '--hf-line-y': '18px', '--hf-line-blur': '6px' }, { opacity: 1, '--hf-line-x': '0px', '--hf-line-y': '0px', '--hf-line-blur': '0px', duration: 0.34, stagger: 0.08, ease: 'power3.out' }, startTime);
-->
```
</VariablesExplorer>
## Install
<InstallCommand command="npx hyperframes add line-by-line-slide" />
That writes one file: `compositions/components/line-by-line-slide.html`.
## Usage
Open `compositions/components/line-by-line-slide.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
{/* hf:generated-footer */}
Tagged `motion-primitive` `remocn-port` `typography`.
## Related topics
- [Browse the complete Catalog](/catalog)
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
- [Build a richer composition](/go-further)