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

chore(catalog): remove internal source markers

Browse Source
This commit is contained in:
Miguel Ángel
2026-08-13 21:10:12 -04:00
committed by GitHub
parent f7d2260f9d
commit 532caf7aa2
144 changed files with 1347 additions and 1425 deletions
Download Patch File Download Diff File Expand all files Collapse all files
registry/components/line-by-line-slide/line-by-line-slide.html
Vendored
+7 -7
View File
@@ -1,5 +1,5 @@
<!--
Line-by-Line Slide - remocn typography primitive for HyperFrames.
Line-by-Line Slide - 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.
@@ -24,7 +24,7 @@
-->
<div
class="hf-remocn-line-by-line-slide"
class="hf-catalog-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"}]},
@@ -36,20 +36,20 @@
</div>
<style>
.hf-remocn-line-by-line-slide {
.hf-catalog-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 {
.hf-catalog-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 {
.hf-catalog-line-by-line-slide span {
display: block;
transform: translate(
calc(var(--hf-line-x, 0px) * var(--hf-line-axis-x, 1)),
@@ -88,7 +88,7 @@
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");
var roots = document.querySelectorAll(".hf-catalog-line-by-line-slide");
for (var i = 0; i < roots.length; i += 1) {
var root = roots[i];
root.style.setProperty("--hf-line-size", size);
@@ -101,5 +101,5 @@
<!--
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);
tl.fromTo('.hf-catalog-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);
-->