ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-04 16:42:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

style(registry): format mk / yt / hw family HTML with oxfmt

Browse Source 
The contributed HTML predates any oxfmt pass, so format:check failed for
42 files in both the Format and Preflight jobs. All 29 items re-rendered
after formatting and verified against frames — no visual change.
This commit is contained in:
Miguel Angel Simon Sierra
2026-08-01 01:19:58 +02:00
parent f252ec6d99
commit a98c120383
42 changed files with 792 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files
registry/blocks/hw-frame/hw-frame.html
Vendored
+20 -3
View File
@@ -104,7 +104,7 @@
data-start="0"
data-duration="8"
data-track-index="0"
style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
></div>
</div>
<script>
@@ -182,7 +182,15 @@
d += " Q " + (w + wob(7)) + " " + wob(8) + " " + (w + wob(9)) + " " + (r + wob(10));
d += " L " + (w + wob(11)) + " " + (h / 2 + wob(12));
d += " L " + (w + wob(13)) + " " + (h - r + wob(14));
d += " Q " + (w + wob(15)) + " " + (h + wob(16)) + " " + (w - r + wob(17)) + " " + (h + wob(18));
d +=
" Q " +
(w + wob(15)) +
" " +
(h + wob(16)) +
" " +
(w - r + wob(17)) +
" " +
(h + wob(18));
d += " L " + (w / 2 + wob(19)) + " " + (h + wob(20));
d += " L " + (r + wob(21)) + " " + (h + wob(22));
d += " Q " + wob(23) + " " + (h + wob(24)) + " " + wob(25) + " " + (h - r + wob(26));
@@ -232,7 +240,16 @@
for (var k = 0; k < 3; k++) {
var a = -0.6 - k * 0.5 + window.hwHash(i * 9 + k, CONFIG.seed) * 0.2;
var l = 26 + window.hwHash(i * 9 + k + 4, CONFIG.seed) * 8;
dd += "M " + pt[0] + " " + pt[1] + " l " + (Math.cos(a) * l).toFixed(1) + " " + (Math.sin(a) * l).toFixed(1) + " ";
dd +=
"M " +
pt[0] +
" " +
pt[1] +
" l " +
(Math.cos(a) * l).toFixed(1) +
" " +
(Math.sin(a) * l).toFixed(1) +
" ";
}
p.setAttribute("d", dd);
svg.appendChild(p);
registry/blocks/hw-path-text/demo.html
Vendored
+1 -1
View File
@@ -87,7 +87,7 @@
data-start="0"
data-duration="6"
data-track-index="0"
style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
></div>
</div>
<script>
registry/blocks/hw-path-text/hw-path-text.html
Vendored
+1 -1
View File
@@ -84,7 +84,7 @@
data-start="0"
data-duration="6"
data-track-index="0"
style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
></div>
</div>
<script>
registry/blocks/hw-pipeline/demo.html
Vendored
+31 -6
View File
@@ -85,7 +85,7 @@
data-start="0"
data-duration="7"
data-track-index="0"
style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
></div>
</div>
<script>
@@ -158,7 +158,15 @@
d += " Q " + (w + wob(7)) + " " + wob(8) + " " + (w + wob(9)) + " " + (r + wob(10));
d += " L " + (w + wob(11)) + " " + (h / 2 + wob(12));
d += " L " + (w + wob(13)) + " " + (h - r + wob(14));
d += " Q " + (w + wob(15)) + " " + (h + wob(16)) + " " + (w - r + wob(17)) + " " + (h + wob(18));
d +=
" Q " +
(w + wob(15)) +
" " +
(h + wob(16)) +
" " +
(w - r + wob(17)) +
" " +
(h + wob(18));
d += " L " + (w / 2 + wob(19)) + " " + (h + wob(20));
d += " L " + (r + wob(21)) + " " + (h + wob(22));
d += " Q " + wob(23) + " " + (h + wob(24)) + " " + wob(25) + " " + (h - r + wob(26));
@@ -217,10 +225,27 @@
c.setAttribute("id", "hw-pl-conn-" + i);
c.setAttribute(
"d",
"M " + (cx + 10) + " " + cy +
" Q " + (cx + CONFIG.gap / 2 + window.hwHash(i * 9 + 2, CONFIG.seed) * 16) + " " + (cy - 46 - window.hwHash(i * 9 + 3, CONFIG.seed) * 12) +
" " + (ex - 10) + " " + ey +
" M " + (ex - 10) + " " + ey + " l -30 -14 M " + (ex - 10) + " " + ey + " l -26 18"
"M " +
(cx + 10) +
" " +
cy +
" Q " +
(cx + CONFIG.gap / 2 + window.hwHash(i * 9 + 2, CONFIG.seed) * 16) +
" " +
(cy - 46 - window.hwHash(i * 9 + 3, CONFIG.seed) * 12) +
" " +
(ex - 10) +
" " +
ey +
" M " +
(ex - 10) +
" " +
ey +
" l -30 -14 M " +
(ex - 10) +
" " +
ey +
" l -26 18",
);
svg.appendChild(c);
conns.push(c);
registry/blocks/hw-pipeline/hw-pipeline.html
Vendored
+31 -6
View File
@@ -82,7 +82,7 @@
data-start="0"
data-duration="7"
data-track-index="0"
style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
></div>
</div>
<script>
@@ -155,7 +155,15 @@
d += " Q " + (w + wob(7)) + " " + wob(8) + " " + (w + wob(9)) + " " + (r + wob(10));
d += " L " + (w + wob(11)) + " " + (h / 2 + wob(12));
d += " L " + (w + wob(13)) + " " + (h - r + wob(14));
d += " Q " + (w + wob(15)) + " " + (h + wob(16)) + " " + (w - r + wob(17)) + " " + (h + wob(18));
d +=
" Q " +
(w + wob(15)) +
" " +
(h + wob(16)) +
" " +
(w - r + wob(17)) +
" " +
(h + wob(18));
d += " L " + (w / 2 + wob(19)) + " " + (h + wob(20));
d += " L " + (r + wob(21)) + " " + (h + wob(22));
d += " Q " + wob(23) + " " + (h + wob(24)) + " " + wob(25) + " " + (h - r + wob(26));
@@ -214,10 +222,27 @@
c.setAttribute("id", "hw-pl-conn-" + i);
c.setAttribute(
"d",
"M " + (cx + 10) + " " + cy +
" Q " + (cx + CONFIG.gap / 2 + window.hwHash(i * 9 + 2, CONFIG.seed) * 16) + " " + (cy - 46 - window.hwHash(i * 9 + 3, CONFIG.seed) * 12) +
" " + (ex - 10) + " " + ey +
" M " + (ex - 10) + " " + ey + " l -30 -14 M " + (ex - 10) + " " + ey + " l -26 18"
"M " +
(cx + 10) +
" " +
cy +
" Q " +
(cx + CONFIG.gap / 2 + window.hwHash(i * 9 + 2, CONFIG.seed) * 16) +
" " +
(cy - 46 - window.hwHash(i * 9 + 3, CONFIG.seed) * 12) +
" " +
(ex - 10) +
" " +
ey +
" M " +
(ex - 10) +
" " +
ey +
" l -30 -14 M " +
(ex - 10) +
" " +
ey +
" l -26 18",
);
svg.appendChild(c);
conns.push(c);
registry/blocks/hw-scribble-transition/hw-scribble-transition.html
Vendored
+8 -3
View File
@@ -62,7 +62,7 @@
data-start="0"
data-duration="2.2"
data-track-index="0"
style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
></div>
</div>
<script>
@@ -104,7 +104,8 @@
var zigs = 7;
for (var i = 1; i <= zigs; i++) {
var x = (W + 160) * (i / zigs) - 80;
var y = y0 + (i % 2 ? -1 : 1) * bandH * 0.32 + window.hwHash(b * 17 + i, CONFIG.seed) * 16;
var y =
y0 + (i % 2 ? -1 : 1) * bandH * 0.32 + window.hwHash(b * 17 + i, CONFIG.seed) * 16;
d += " L " + x.toFixed(1) + " " + y.toFixed(1);
}
var p = document.createElementNS(NS, "path");
@@ -131,7 +132,11 @@
tl.to("#hw-st-solid", { opacity: 0, duration: 0.15, ease: "none" }, 1.42);
paths.forEach(function (p, i) {
var len = p.getTotalLength();
tl.to(p, { strokeDashoffset: i % 2 ? len : -len, duration: 0.5, ease: "power2.out" }, 1.42 + 0.035 * i);
tl.to(
p,
{ strokeDashoffset: i % 2 ? len : -len, duration: 0.5, ease: "power2.out" },
1.42 + 0.035 * i,
);
});
/* hard kill the moment the last band clears (learning: kill roots
registry/blocks/hw-text-cloud/hw-text-cloud.html
Vendored
+30 -5
View File
@@ -94,7 +94,7 @@
data-start="0"
data-duration="6"
data-track-index="0"
style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
></div>
</div>
<script>
@@ -179,7 +179,15 @@
for (var j = 0; j < N; j++) {
var p = pts[j],
q = pts[(j + 1) % N];
d += " Q" + p[0].toFixed(1) + " " + p[1].toFixed(1) + " " + ((p[0] + q[0]) / 2).toFixed(1) + " " + ((p[1] + q[1]) / 2).toFixed(1);
d +=
" Q" +
p[0].toFixed(1) +
" " +
p[1].toFixed(1) +
" " +
((p[0] + q[0]) / 2).toFixed(1) +
" " +
((p[1] + q[1]) / 2).toFixed(1);
}
d += "Z";
/* tail */
@@ -189,9 +197,26 @@
var tx = bx + (left ? -tip.len * 0.5 : tip.len * 0.5),
ty = by + tip.len;
d +=
" M " + (bx - 26).toFixed(1) + " " + (by - 6).toFixed(1) +
" Q " + (bx - 8 + window.hwHash(31, seed) * 6).toFixed(1) + " " + ((by + ty) / 2).toFixed(1) + " " + tx.toFixed(1) + " " + ty.toFixed(1) +
" Q " + (bx + 18).toFixed(1) + " " + ((by + ty) / 2).toFixed(1) + " " + (bx + 30).toFixed(1) + " " + (by - 2).toFixed(1);
" M " +
(bx - 26).toFixed(1) +
" " +
(by - 6).toFixed(1) +
" Q " +
(bx - 8 + window.hwHash(31, seed) * 6).toFixed(1) +
" " +
((by + ty) / 2).toFixed(1) +
" " +
tx.toFixed(1) +
" " +
ty.toFixed(1) +
" Q " +
(bx + 18).toFixed(1) +
" " +
((by + ty) / 2).toFixed(1) +
" " +
(bx + 30).toFixed(1) +
" " +
(by - 2).toFixed(1);
return d;
}
registry/blocks/hw-title/demo.html
Vendored
+19 -5
View File
@@ -83,7 +83,7 @@
data-start="0"
data-duration="6"
data-track-index="0"
style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
></div>
</div>
<script>
@@ -172,8 +172,10 @@
/* measure + position; build squiggle underline to match width */
var rect = line.getBoundingClientRect();
wrap.style.left = (CONFIG.x === null ? Math.round((1920 - rect.width) / 2) : CONFIG.x) + "px";
wrap.style.top = (CONFIG.y === null ? Math.round((1080 - rect.height) / 2) - 20 : CONFIG.y) + "px";
wrap.style.left =
(CONFIG.x === null ? Math.round((1920 - rect.width) / 2) : CONFIG.x) + "px";
wrap.style.top =
(CONFIG.y === null ? Math.round((1080 - rect.height) / 2) - 20 : CONFIG.y) + "px";
var underPath = document.getElementById("hw-t-under-path");
if (CONFIG.underline.enabled) {
@@ -188,7 +190,15 @@
var y = 16 + window.hwHash(i * 5 + 1, CONFIG.seed) * CONFIG.underline.wobble;
var cxp = x - uw / segs / 2 + window.hwHash(i * 5 + 2, CONFIG.seed) * 10;
var cyp = 16 + (i % 2 ? -1 : 1) * (8 + window.hwHash(i * 5 + 3, CONFIG.seed) * 4);
d += " Q " + cxp.toFixed(1) + " " + cyp.toFixed(1) + " " + x.toFixed(1) + " " + y.toFixed(1);
d +=
" Q " +
cxp.toFixed(1) +
" " +
cyp.toFixed(1) +
" " +
x.toFixed(1) +
" " +
y.toFixed(1);
}
underPath.setAttribute("d", d);
} else {
@@ -214,7 +224,11 @@
wordEls[i].style.color = mix(f);
}
});
tl.to(st, { p: 1, duration: CONFIG.sweep.end - CONFIG.sweep.start, ease: "none" }, CONFIG.sweep.start);
tl.to(
st,
{ p: 1, duration: CONFIG.sweep.end - CONFIG.sweep.start, ease: "none" },
CONFIG.sweep.start,
);
}
/* underline draws as the sweep lands */
registry/blocks/hw-title/hw-title.html
Vendored
+19 -5
View File
@@ -80,7 +80,7 @@
data-start="0"
data-duration="6"
data-track-index="0"
style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
></div>
</div>
<script>
@@ -169,8 +169,10 @@
/* measure + position; build squiggle underline to match width */
var rect = line.getBoundingClientRect();
wrap.style.left = (CONFIG.x === null ? Math.round((1920 - rect.width) / 2) : CONFIG.x) + "px";
wrap.style.top = (CONFIG.y === null ? Math.round((1080 - rect.height) / 2) - 20 : CONFIG.y) + "px";
wrap.style.left =
(CONFIG.x === null ? Math.round((1920 - rect.width) / 2) : CONFIG.x) + "px";
wrap.style.top =
(CONFIG.y === null ? Math.round((1080 - rect.height) / 2) - 20 : CONFIG.y) + "px";
var underPath = document.getElementById("hw-t-under-path");
if (CONFIG.underline.enabled) {
@@ -185,7 +187,15 @@
var y = 16 + window.hwHash(i * 5 + 1, CONFIG.seed) * CONFIG.underline.wobble;
var cxp = x - uw / segs / 2 + window.hwHash(i * 5 + 2, CONFIG.seed) * 10;
var cyp = 16 + (i % 2 ? -1 : 1) * (8 + window.hwHash(i * 5 + 3, CONFIG.seed) * 4);
d += " Q " + cxp.toFixed(1) + " " + cyp.toFixed(1) + " " + x.toFixed(1) + " " + y.toFixed(1);
d +=
" Q " +
cxp.toFixed(1) +
" " +
cyp.toFixed(1) +
" " +
x.toFixed(1) +
" " +
y.toFixed(1);
}
underPath.setAttribute("d", d);
} else {
@@ -211,7 +221,11 @@
wordEls[i].style.color = mix(f);
}
});
tl.to(st, { p: 1, duration: CONFIG.sweep.end - CONFIG.sweep.start, ease: "none" }, CONFIG.sweep.start);
tl.to(
st,
{ p: 1, duration: CONFIG.sweep.end - CONFIG.sweep.start, ease: "none" },
CONFIG.sweep.start,
);
}
/* underline draws as the sweep lands */
registry/blocks/mk-callout-highlight/mk-callout-highlight.html
Vendored
+6 -2
View File
@@ -57,7 +57,7 @@
data-start="0"
data-duration="8"
data-track-index="0"
style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
></div>
</div>
<script>
@@ -135,7 +135,11 @@
/* the highlight sweep — one scalar, linear so it tracks speech evenly.
To follow a real voiceover, replace with several tweens between
per-phrase progress values (keyframes on the slider). */
tl.to(st, { p: 1, duration: CONFIG.sweep.end - CONFIG.sweep.start, ease: "none" }, CONFIG.sweep.start);
tl.to(
st,
{ p: 1, duration: CONFIG.sweep.end - CONFIG.sweep.start, ease: "none" },
CONFIG.sweep.start,
);
if (CONFIG.animationOut) {
tl.to(box, { opacity: 0, y: -16, duration: 0.4, ease: "power2.in" }, DUR - 0.5);
registry/blocks/mk-clone-wall-transition/mk-clone-wall-transition.html
Vendored
+8 -3
View File
@@ -69,7 +69,12 @@
height: 1080px;
border-radius: 0;
overflow: hidden;
background: linear-gradient(120deg, #fdfbfd 0%, var(--mk-blob-1) 38%, var(--mk-blob-2) 100%);
background: linear-gradient(
120deg,
#fdfbfd 0%,
var(--mk-blob-1) 38%,
var(--mk-blob-2) 100%
);
box-shadow: var(--mk-shadow);
transform-origin: 50% 50%;
}
@@ -102,7 +107,7 @@
data-start="0"
data-duration="2.4"
data-track-index="0"
style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
></div>
</div>
<script>
@@ -190,7 +195,7 @@
duration: 0.75,
ease: "power3.inOut",
},
0.2
0.2,
);
/* 1.35–1.75 card is put away */
tl.to(card, { scale: 0.6, opacity: 0, duration: 0.4, ease: "power2.in" }, 1.35);
registry/blocks/mk-line-graph/mk-line-graph.html
Vendored
+1 -1
View File
@@ -109,7 +109,7 @@
data-start="0"
data-duration="7"
data-track-index="0"
style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
></div>
</div>
<script>
registry/blocks/mk-placeholder-grid/mk-placeholder-grid.html
Vendored
+2 -2
View File
@@ -89,7 +89,7 @@
data-start="0"
data-duration="8"
data-track-index="0"
style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
></div>
</div>
<script>
@@ -215,7 +215,7 @@
medias[i],
{ scale: base * 1.06 },
{ scale: base, duration: DUR - t0 - 0.6, ease: "sine.out" },
t0
t0,
);
}
});
registry/blocks/mk-progress-stat/mk-progress-stat.html
Vendored
+2 -2
View File
@@ -107,7 +107,7 @@
data-start="0"
data-duration="7"
data-track-index="0"
style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
></div>
</div>
<script>
@@ -168,7 +168,7 @@
num.textContent = Math.round(st.v) + CONFIG.suffix;
},
},
0.5
0.5,
);
gsap.set(fill, { scaleX: 0 });
tl.to(fill, { scaleX: CONFIG.value / CONFIG.max, duration: 1.6, ease: "power2.out" }, 0.5);
registry/blocks/mk-specs-list/mk-specs-list.html
Vendored
+1 -1
View File
@@ -112,7 +112,7 @@
data-start="0"
data-duration="8"
data-track-index="0"
style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
></div>
</div>
<script>
registry/blocks/yt-comment-card/yt-comment-card.html
Vendored
+10 -4
View File
@@ -164,7 +164,7 @@
data-start="0"
data-duration="8"
data-track-index="0"
style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
></div>
</div>
<script>
@@ -234,7 +234,11 @@
} else {
av.textContent = c.initials || "?";
av.style.background =
"linear-gradient(135deg, hsl(" + (c.avatarHue || 210) + ", 62%, 52%), hsl(" + ((c.avatarHue || 210) + 40) + ", 62%, 42%))";
"linear-gradient(135deg, hsl(" +
(c.avatarHue || 210) +
", 62%, 52%), hsl(" +
((c.avatarHue || 210) + 40) +
", 62%, 42%))";
}
card.appendChild(av);
@@ -266,7 +270,8 @@
var row = document.createElement("div");
row.className = "yt-cc-row";
row.id = "yt-cc-row-" + i;
row.innerHTML = THUMB + "<span>" + (c.likes || 0) + '</span><span class="yt-cc-reply">REPLY</span>';
row.innerHTML =
THUMB + "<span>" + (c.likes || 0) + '</span><span class="yt-cc-reply">REPLY</span>';
body.appendChild(row);
card.appendChild(body);
col.appendChild(card);
@@ -275,7 +280,8 @@
/* position (measure after building) */
col.style.left = CONFIG.x + "px";
var rect = col.getBoundingClientRect();
col.style.top = (CONFIG.y === null ? Math.round((1080 - rect.height) / 2) : CONFIG.y) + "px";
col.style.top =
(CONFIG.y === null ? Math.round((1080 - rect.height) / 2) : CONFIG.y) + "px";
var tl = gsap.timeline({ paused: true });
registry/blocks/yt-lcd-background/yt-lcd-background.html
Vendored
+59 -12
View File
@@ -62,13 +62,29 @@
position: absolute;
inset: 0;
background:
repeating-linear-gradient(0deg, rgba(0, 0, 0, var(--yt-grid-alpha)) 0 1px, transparent 1px var(--yt-grid-size)),
repeating-linear-gradient(90deg, rgba(0, 0, 0, var(--yt-grid-alpha)) 0 1px, transparent 1px var(--yt-grid-size));
repeating-linear-gradient(
0deg,
rgba(0, 0, 0, var(--yt-grid-alpha)) 0 1px,
transparent 1px var(--yt-grid-size)
),
repeating-linear-gradient(
90deg,
rgba(0, 0, 0, var(--yt-grid-alpha)) 0 1px,
transparent 1px var(--yt-grid-size)
);
}
.yt-dark #yt-lcd-grid {
background:
repeating-linear-gradient(0deg, rgba(255, 255, 255, var(--yt-grid-alpha)) 0 1px, transparent 1px var(--yt-grid-size)),
repeating-linear-gradient(90deg, rgba(255, 255, 255, var(--yt-grid-alpha)) 0 1px, transparent 1px var(--yt-grid-size));
repeating-linear-gradient(
0deg,
rgba(255, 255, 255, var(--yt-grid-alpha)) 0 1px,
transparent 1px var(--yt-grid-size)
),
repeating-linear-gradient(
90deg,
rgba(255, 255, 255, var(--yt-grid-alpha)) 0 1px,
transparent 1px var(--yt-grid-size)
);
}
#yt-lcd-grain {
position: absolute;
@@ -132,7 +148,7 @@
data-start="0"
data-duration="10"
data-track-index="0"
style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
></div>
</div>
<script>
@@ -201,7 +217,12 @@
var titleLine = buildLine(CONFIG.title, CONFIG.fontSize, "yt-lcd-t", true);
bow.appendChild(titleLine);
if (CONFIG.subtitle) {
var sub = buildLine(CONFIG.subtitle, CONFIG.subSize, "yt-lcd-s", false); /* fringe is title-only */
var sub = buildLine(
CONFIG.subtitle,
CONFIG.subSize,
"yt-lcd-s",
false,
); /* fringe is title-only */
sub.id = "yt-lcd-sub";
bow.appendChild(sub);
}
@@ -221,13 +242,21 @@
tl.to(
bow,
{ filter: "blur(" + CONFIG.blur + "px)", duration: IN * 2.2, ease: "power2.out" },
IN * 0.4
IN * 0.4,
);
if (CONFIG.prism.enabled) {
gsap.set(".yt-lcd-copy.r", { x: -O * 4, opacity: 0.5 });
gsap.set(".yt-lcd-copy.b", { x: O * 4, opacity: 0.5 });
tl.to(".yt-lcd-copy.r", { x: -O, opacity: 0.85, duration: IN * 2.2, ease: "power2.out" }, IN * 0.4);
tl.to(".yt-lcd-copy.b", { x: O, opacity: 0.85, duration: IN * 2.2, ease: "power2.out" }, IN * 0.4);
tl.to(
".yt-lcd-copy.r",
{ x: -O, opacity: 0.85, duration: IN * 2.2, ease: "power2.out" },
IN * 0.4,
);
tl.to(
".yt-lcd-copy.b",
{ x: O, opacity: 0.85, duration: IN * 2.2, ease: "power2.out" },
IN * 0.4,
);
}
} else {
gsap.set(bow, { filter: "blur(" + CONFIG.blur + "px)" });
@@ -239,11 +268,29 @@
/* ambient: slow scanline drift + a breath of prism wobble */
if (CONFIG.scanDrift) {
tl.to(scan, { y: 14, duration: 3.1, ease: "sine.inOut", yoyo: true, repeat: Math.max(1, Math.floor((DUR - 1) / 3.1) - 0) }, 0.5);
tl.to(
scan,
{
y: 14,
duration: 3.1,
ease: "sine.inOut",
yoyo: true,
repeat: Math.max(1, Math.floor((DUR - 1) / 3.1) - 0),
},
0.5,
);
}
if (CONFIG.prism.enabled) {
tl.to(".yt-lcd-copy.r", { x: -O - 1.2, duration: 2.4, ease: "sine.inOut", yoyo: true, repeat: 2 }, 2.0);
tl.to(".yt-lcd-copy.b", { x: O + 1.2, duration: 2.4, ease: "sine.inOut", yoyo: true, repeat: 2 }, 2.0);
tl.to(
".yt-lcd-copy.r",
{ x: -O - 1.2, duration: 2.4, ease: "sine.inOut", yoyo: true, repeat: 2 },
2.0,
);
tl.to(
".yt-lcd-copy.b",
{ x: O + 1.2, duration: 2.4, ease: "sine.inOut", yoyo: true, repeat: 2 },
2.0,
);
}
/* exit + hard kill */
registry/blocks/yt-logo-intro/yt-logo-intro.html
Vendored
+14 -4
View File
@@ -135,7 +135,9 @@
<div id="yt-li-logo"></div>
<div id="yt-li-textrow">
<div id="yt-li-text"></div>
<div id="yt-li-arrow"><svg viewBox="0 0 24 24"><path d="M4 12h15M13 5l7 7-7 7" /></svg></div>
<div id="yt-li-arrow">
<svg viewBox="0 0 24 24"><path d="M4 12h15M13 5l7 7-7 7" /></svg>
</div>
</div>
</div>
<div
@@ -144,7 +146,7 @@
data-start="0"
data-duration="6"
data-track-index="0"
style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
></div>
</div>
<script>
@@ -213,14 +215,22 @@
/* logo pops */
gsap.set(logo, { opacity: 0, scale: 0.55, y: 24 });
tl.to(logo, { opacity: 1, scale: 1, y: 0, duration: 0.55, ease: "back.out(1.5)" }, IN * 0.6);
tl.to(
logo,
{ opacity: 1, scale: 1, y: 0, duration: 0.55, ease: "back.out(1.5)" },
IN * 0.6,
);
/* kicker -> swap -> title + arrow */
gsap.set(text, { opacity: 0, y: 14 });
tl.set(text, { textContent: CONFIG.kicker, letterSpacing: "0.22em", fontSize: "40px" }, 0);
tl.to(text, { opacity: 1, y: 0, duration: 0.45, ease: "power2.out" }, IN * 0.6 + 0.45);
tl.to(text, { opacity: 0, y: -12, duration: 0.3, ease: "power2.in" }, 2.3);
tl.set(text, { textContent: CONFIG.title, letterSpacing: "-0.015em", fontSize: "74px", y: 14 }, 2.62);
tl.set(
text,
{ textContent: CONFIG.title, letterSpacing: "-0.015em", fontSize: "74px", y: 14 },
2.62,
);
tl.to(text, { opacity: 1, y: 0, duration: 0.5, ease: "power3.out" }, 2.66);
gsap.set(arrow, { scale: 0.5, x: -14 });
tl.to(arrow, { opacity: 1, scale: 1, x: 0, duration: 0.45, ease: "back.out(1.6)" }, 2.9);
registry/blocks/yt-prism-title/yt-prism-title.html
Vendored
+31 -7
View File
@@ -74,7 +74,7 @@
data-start="0"
data-duration="6"
data-track-index="0"
style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
></div>
</div>
<script>
@@ -143,12 +143,24 @@
if (CONFIG.animationIn) {
gsap.set(bow, { opacity: 0, filter: "blur(18px)" });
tl.to(bow, { opacity: 1, duration: IN * 1.4, ease: "power2.out" }, 0.1);
tl.to(bow, { filter: "blur(" + CONFIG.blur + "px)", duration: IN * 2.4, ease: "power2.out" }, 0.1);
tl.to(
bow,
{ filter: "blur(" + CONFIG.blur + "px)", duration: IN * 2.4, ease: "power2.out" },
0.1,
);
if (CONFIG.prism.enabled) {
gsap.set(".yt-pt-copy.r", { x: -O * 4.5, opacity: 0.45 });
gsap.set(".yt-pt-copy.b", { x: O * 4.5, opacity: 0.45 });
tl.to(".yt-pt-copy.r", { x: -O, opacity: 0.85, duration: IN * 2.4, ease: "power2.out" }, 0.1);
tl.to(".yt-pt-copy.b", { x: O, opacity: 0.85, duration: IN * 2.4, ease: "power2.out" }, 0.1);
tl.to(
".yt-pt-copy.r",
{ x: -O, opacity: 0.85, duration: IN * 2.4, ease: "power2.out" },
0.1,
);
tl.to(
".yt-pt-copy.b",
{ x: O, opacity: 0.85, duration: IN * 2.4, ease: "power2.out" },
0.1,
);
}
} else {
gsap.set(bow, { filter: "blur(" + CONFIG.blur + "px)" });
@@ -163,13 +175,25 @@
tl.to(line, { scale: 1.035, duration: DUR - 1, ease: "sine.out" }, 0.4);
}
if (CONFIG.prism.enabled) {
tl.to(".yt-pt-copy.r", { x: -O - 1.4, duration: 1.9, ease: "sine.inOut", yoyo: true, repeat: 1 }, 1.4);
tl.to(".yt-pt-copy.b", { x: O + 1.4, duration: 1.9, ease: "sine.inOut", yoyo: true, repeat: 1 }, 1.4);
tl.to(
".yt-pt-copy.r",
{ x: -O - 1.4, duration: 1.9, ease: "sine.inOut", yoyo: true, repeat: 1 },
1.4,
);
tl.to(
".yt-pt-copy.b",
{ x: O + 1.4, duration: 1.9, ease: "sine.inOut", yoyo: true, repeat: 1 },
1.4,
);
}
/* exit + hard kill */
if (CONFIG.animationOut) {
tl.to(bow, { opacity: 0, filter: "blur(12px)", duration: OUT, ease: "power2.in" }, DUR - OUT - 0.05);
tl.to(
bow,
{ opacity: 0, filter: "blur(12px)", duration: OUT, ease: "power2.in" },
DUR - OUT - 0.05,
);
}
tl.set(root, { visibility: "hidden" }, DUR - 0.02);
registry/blocks/yt-vertical-fill/yt-vertical-fill.html
Vendored
+30 -6
View File
@@ -61,8 +61,16 @@
position: absolute;
inset: 0;
background:
repeating-linear-gradient(0deg, rgba(255, 255, 255, var(--yt-grid-alpha)) 0 1px, transparent 1px var(--yt-grid-size)),
repeating-linear-gradient(90deg, rgba(255, 255, 255, var(--yt-grid-alpha)) 0 1px, transparent 1px var(--yt-grid-size));
repeating-linear-gradient(
0deg,
rgba(255, 255, 255, var(--yt-grid-alpha)) 0 1px,
transparent 1px var(--yt-grid-size)
),
repeating-linear-gradient(
90deg,
rgba(255, 255, 255, var(--yt-grid-alpha)) 0 1px,
transparent 1px var(--yt-grid-size)
);
}
#yt-vf-fg {
top: 0;
@@ -79,7 +87,12 @@
font-weight: 700;
font-size: 120px;
color: rgba(255, 255, 255, 0.9);
background: linear-gradient(160deg, var(--yt-cyan) 0%, var(--yt-prism-b) 50%, var(--yt-violet) 100%);
background: linear-gradient(
160deg,
var(--yt-cyan) 0%,
var(--yt-prism-b) 50%,
var(--yt-violet) 100%
);
}
</style>
</head>
@@ -104,7 +117,7 @@
data-start="0"
data-duration="8"
data-track-index="0"
style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
></div>
</div>
<script>
@@ -163,7 +176,13 @@
fg.appendChild(media("yt-vf-m-fg"));
fg.style.filter =
"contrast(" + CONFIG.fgContrast + ") brightness(" + CONFIG.fgBrightness + ") saturate(" + CONFIG.fgSaturation + ")";
"contrast(" +
CONFIG.fgContrast +
") brightness(" +
CONFIG.fgBrightness +
") saturate(" +
CONFIG.fgSaturation +
")";
if (CONFIG.mode === "scale") {
bg.appendChild(media("yt-vf-m-bg"));
@@ -189,7 +208,12 @@
tl.to(fg, { y: 0, opacity: 1, duration: IN * 1.6, ease: "power3.out" }, IN * 0.5);
}
if (CONFIG.kenBurns) {
tl.fromTo(fg.firstChild, { scale: 1.05 }, { scale: 1, duration: DUR - 1, ease: "sine.out" }, 0.4);
tl.fromTo(
fg.firstChild,
{ scale: 1.05 },
{ scale: 1, duration: DUR - 1, ease: "sine.out" },
0.4,
);
}
if (CONFIG.animationOut) {
registry/components/hw-arrow/demo.html
Vendored
+44 -8
View File
@@ -82,7 +82,11 @@
data-height="1080"
>
<div id="hw-ar-scene"><span>point at things</span></div>
<div class="hw-arrow" id="hw-ar-demo" style="left: 560px; top: 320px; width: 380px; height: 180px">
<div
class="hw-arrow"
id="hw-ar-demo"
style="left: 560px; top: 320px; width: 380px; height: 180px"
>
<svg viewBox="0 0 380 180"><path id="hw-ar-demo-path"></path></svg>
</div>
<div
@@ -91,7 +95,7 @@
data-start="0"
data-duration="4"
data-track-index="0"
style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
></div>
</div>
<script>
@@ -153,26 +157,58 @@
var ang = Math.atan2(y1 - cy2, x1 - cx2);
function head(da, len) {
var a = ang + Math.PI + da;
return "M " + x1.toFixed(1) + " " + y1.toFixed(1) + " l " + (Math.cos(a) * len).toFixed(1) + " " + (Math.sin(a) * len).toFixed(1);
return (
"M " +
x1.toFixed(1) +
" " +
y1.toFixed(1) +
" l " +
(Math.cos(a) * len).toFixed(1) +
" " +
(Math.sin(a) * len).toFixed(1)
);
}
return (
"M " + x0.toFixed(1) + " " + y0.toFixed(1) +
" C " + cx1.toFixed(1) + " " + cy1.toFixed(1) + ", " + cx2.toFixed(1) + " " + cy2.toFixed(1) + ", " + x1.toFixed(1) + " " + y1.toFixed(1) +
" " + head(0.5, wob(34, 9, 6)) + " " + head(-0.5, wob(34, 10, 6))
"M " +
x0.toFixed(1) +
" " +
y0.toFixed(1) +
" C " +
cx1.toFixed(1) +
" " +
cy1.toFixed(1) +
", " +
cx2.toFixed(1) +
" " +
cy2.toFixed(1) +
", " +
x1.toFixed(1) +
" " +
y1.toFixed(1) +
" " +
head(0.5, wob(34, 9, 6)) +
" " +
head(-0.5, wob(34, 10, 6))
);
};
window.hwArrowOn = function (tl, target, at, dur) {
var p = document.querySelector(target + " path");
var len = p.getTotalLength();
gsap.set(p, { strokeDasharray: len, strokeDashoffset: len });
tl.to(p, { strokeDashoffset: 0, duration: dur === undefined ? 0.7 : dur, ease: "power2.inOut" }, at);
tl.to(
p,
{ strokeDashoffset: 0, duration: dur === undefined ? 0.7 : dur, ease: "power2.inOut" },
at,
);
};
window.hwArrowOff = function (tl, target, at) {
tl.to(target, { opacity: 0, duration: 0.3, ease: "power2.in" }, at);
};
// ---- self-preview ----
document.getElementById("hw-ar-demo-path").setAttribute("d", window.hwArrowPath(380, 180, "swoop", 7));
document
.getElementById("hw-ar-demo-path")
.setAttribute("d", window.hwArrowPath(380, 180, "swoop", 7));
var tl = gsap.timeline({ paused: true });
window.hwArrowOn(tl, "#hw-ar-demo", 0.4);
window.hwBoil(tl, "#hw-ar-demo", { amp: 2, rot: 0.6, frameDrop: 3, seed: 7 });
registry/components/hw-arrow/hw-arrow.html
Vendored
+44 -8
View File
@@ -79,7 +79,11 @@
data-height="1080"
>
<div id="hw-ar-scene"><span>point at things</span></div>
<div class="hw-arrow" id="hw-ar-demo" style="left: 560px; top: 320px; width: 380px; height: 180px">
<div
class="hw-arrow"
id="hw-ar-demo"
style="left: 560px; top: 320px; width: 380px; height: 180px"
>
<svg viewBox="0 0 380 180"><path id="hw-ar-demo-path"></path></svg>
</div>
<div
@@ -88,7 +92,7 @@
data-start="0"
data-duration="4"
data-track-index="0"
style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
></div>
</div>
<script>
@@ -150,26 +154,58 @@
var ang = Math.atan2(y1 - cy2, x1 - cx2);
function head(da, len) {
var a = ang + Math.PI + da;
return "M " + x1.toFixed(1) + " " + y1.toFixed(1) + " l " + (Math.cos(a) * len).toFixed(1) + " " + (Math.sin(a) * len).toFixed(1);
return (
"M " +
x1.toFixed(1) +
" " +
y1.toFixed(1) +
" l " +
(Math.cos(a) * len).toFixed(1) +
" " +
(Math.sin(a) * len).toFixed(1)
);
}
return (
"M " + x0.toFixed(1) + " " + y0.toFixed(1) +
" C " + cx1.toFixed(1) + " " + cy1.toFixed(1) + ", " + cx2.toFixed(1) + " " + cy2.toFixed(1) + ", " + x1.toFixed(1) + " " + y1.toFixed(1) +
" " + head(0.5, wob(34, 9, 6)) + " " + head(-0.5, wob(34, 10, 6))
"M " +
x0.toFixed(1) +
" " +
y0.toFixed(1) +
" C " +
cx1.toFixed(1) +
" " +
cy1.toFixed(1) +
", " +
cx2.toFixed(1) +
" " +
cy2.toFixed(1) +
", " +
x1.toFixed(1) +
" " +
y1.toFixed(1) +
" " +
head(0.5, wob(34, 9, 6)) +
" " +
head(-0.5, wob(34, 10, 6))
);
};
window.hwArrowOn = function (tl, target, at, dur) {
var p = document.querySelector(target + " path");
var len = p.getTotalLength();
gsap.set(p, { strokeDasharray: len, strokeDashoffset: len });
tl.to(p, { strokeDashoffset: 0, duration: dur === undefined ? 0.7 : dur, ease: "power2.inOut" }, at);
tl.to(
p,
{ strokeDashoffset: 0, duration: dur === undefined ? 0.7 : dur, ease: "power2.inOut" },
at,
);
};
window.hwArrowOff = function (tl, target, at) {
tl.to(target, { opacity: 0, duration: 0.3, ease: "power2.in" }, at);
};
// ---- self-preview ----
document.getElementById("hw-ar-demo-path").setAttribute("d", window.hwArrowPath(380, 180, "swoop", 7));
document
.getElementById("hw-ar-demo-path")
.setAttribute("d", window.hwArrowPath(380, 180, "swoop", 7));
var tl = gsap.timeline({ paused: true });
window.hwArrowOn(tl, "#hw-ar-demo", 0.4);
window.hwBoil(tl, "#hw-ar-demo", { amp: 2, rot: 0.6, frameDrop: 3, seed: 7 });
registry/components/hw-boil/demo.html
Vendored
+14 -3
View File
@@ -105,7 +105,10 @@
<svg viewBox="0 0 1920 1080">
<g id="hw-b-circle-g"><path id="hw-b-circle"></path></g>
<g id="hw-b-arrow-g">
<path id="hw-b-arrow" d="M 640 640 C 760 700, 980 720, 1130 620 M 1130 620 l -64 -6 M 1130 620 l -18 58"></path>
<path
id="hw-b-arrow"
d="M 640 640 C 760 700, 980 720, 1130 620 M 1130 620 l -64 -6 M 1130 620 l -18 58"
></path>
</g>
</svg>
<div class="hw-b-label" id="hw-b-word" style="left: 1230px; top: 560px">the boil</div>
@@ -118,7 +121,7 @@
data-start="0"
data-duration="4"
data-track-index="0"
style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
></div>
</div>
<script>
@@ -185,7 +188,15 @@
for (var j = 0; j < N; j++) {
var p = pts[j],
q = pts[(j + 1) % N];
d += " Q" + p[0].toFixed(1) + " " + p[1].toFixed(1) + " " + ((p[0] + q[0]) / 2).toFixed(1) + " " + ((p[1] + q[1]) / 2).toFixed(1);
d +=
" Q" +
p[0].toFixed(1) +
" " +
p[1].toFixed(1) +
" " +
((p[0] + q[0]) / 2).toFixed(1) +
" " +
((p[1] + q[1]) / 2).toFixed(1);
}
return d;
};
registry/components/hw-boil/hw-boil.html
Vendored
+14 -3
View File
@@ -102,7 +102,10 @@
<svg viewBox="0 0 1920 1080">
<g id="hw-b-circle-g"><path id="hw-b-circle"></path></g>
<g id="hw-b-arrow-g">
<path id="hw-b-arrow" d="M 640 640 C 760 700, 980 720, 1130 620 M 1130 620 l -64 -6 M 1130 620 l -18 58"></path>
<path
id="hw-b-arrow"
d="M 640 640 C 760 700, 980 720, 1130 620 M 1130 620 l -64 -6 M 1130 620 l -18 58"
></path>
</g>
</svg>
<div class="hw-b-label" id="hw-b-word" style="left: 1230px; top: 560px">the boil</div>
@@ -115,7 +118,7 @@
data-start="0"
data-duration="4"
data-track-index="0"
style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
></div>
</div>
<script>
@@ -182,7 +185,15 @@
for (var j = 0; j < N; j++) {
var p = pts[j],
q = pts[(j + 1) % N];
d += " Q" + p[0].toFixed(1) + " " + p[1].toFixed(1) + " " + ((p[0] + q[0]) / 2).toFixed(1) + " " + ((p[1] + q[1]) / 2).toFixed(1);
d +=
" Q" +
p[0].toFixed(1) +
" " +
p[1].toFixed(1) +
" " +
((p[0] + q[0]) / 2).toFixed(1) +
" " +
((p[1] + q[1]) / 2).toFixed(1);
}
return d;
};
registry/components/hw-box-label/demo.html
Vendored
+24 -5
View File
@@ -82,7 +82,11 @@
data-height="1080"
>
<div id="hw-bx-scene"></div>
<div class="hw-box" id="hw-bx-demo" style="left: 700px; top: 420px; width: 420px; height: 230px">
<div
class="hw-box"
id="hw-bx-demo"
style="left: 700px; top: 420px; width: 420px; height: 230px"
>
<svg viewBox="0 0 420 230"><path id="hw-bx-demo-path"></path></svg>
<div class="hw-bx-label" id="hw-bx-demo-label"></div>
</div>
@@ -92,7 +96,7 @@
data-start="0"
data-duration="4"
data-track-index="0"
style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
></div>
</div>
<script>
@@ -147,7 +151,15 @@
d += " Q " + (w + wob(7)) + " " + wob(8) + " " + (w + wob(9)) + " " + (r + wob(10));
d += " L " + (w + wob(11)) + " " + (h / 2 + wob(12));
d += " L " + (w + wob(13)) + " " + (h - r + wob(14));
d += " Q " + (w + wob(15)) + " " + (h + wob(16)) + " " + (w - r + wob(17)) + " " + (h + wob(18));
d +=
" Q " +
(w + wob(15)) +
" " +
(h + wob(16)) +
" " +
(w - r + wob(17)) +
" " +
(h + wob(18));
d += " L " + (w / 2 + wob(19)) + " " + (h + wob(20));
d += " L " + (r + wob(21)) + " " + (h + wob(22));
d += " Q " + wob(23) + " " + (h + wob(24)) + " " + wob(25) + " " + (h - r + wob(26));
@@ -163,7 +175,10 @@
var vb = svg.getAttribute("viewBox").split(" ");
var W = parseFloat(vb[2]),
H = parseFloat(vb[3]);
el.querySelector("path").setAttribute("d", window.hwWobbleRect(W, H, Math.min(26, W * 0.1), opts.seed || 1));
el.querySelector("path").setAttribute(
"d",
window.hwWobbleRect(W, H, Math.min(26, W * 0.1), opts.seed || 1),
);
var label = el.querySelector(".hw-bx-label");
label.textContent = opts.label || "";
if ((opts.labelPos || "above") === "above") {
@@ -178,7 +193,11 @@
var len = p.getTotalLength();
gsap.set(p, { strokeDasharray: len, strokeDashoffset: len });
tl.to(p, { strokeDashoffset: 0, duration: 0.75, ease: "power2.inOut" }, at);
tl.to(document.querySelector(target + " .hw-bx-label"), { opacity: 1, duration: 0.4, ease: "power2.out" }, at + 0.55);
tl.to(
document.querySelector(target + " .hw-bx-label"),
{ opacity: 1, duration: 0.4, ease: "power2.out" },
at + 0.55,
);
};
window.hwBoxOff = function (tl, target, at) {
tl.to(target, { opacity: 0, duration: 0.35, ease: "power2.in" }, at);
registry/components/hw-box-label/hw-box-label.html
Vendored
+24 -5
View File
@@ -79,7 +79,11 @@
data-height="1080"
>
<div id="hw-bx-scene"></div>
<div class="hw-box" id="hw-bx-demo" style="left: 700px; top: 420px; width: 420px; height: 230px">
<div
class="hw-box"
id="hw-bx-demo"
style="left: 700px; top: 420px; width: 420px; height: 230px"
>
<svg viewBox="0 0 420 230"><path id="hw-bx-demo-path"></path></svg>
<div class="hw-bx-label" id="hw-bx-demo-label"></div>
</div>
@@ -89,7 +93,7 @@
data-start="0"
data-duration="4"
data-track-index="0"
style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
></div>
</div>
<script>
@@ -144,7 +148,15 @@
d += " Q " + (w + wob(7)) + " " + wob(8) + " " + (w + wob(9)) + " " + (r + wob(10));
d += " L " + (w + wob(11)) + " " + (h / 2 + wob(12));
d += " L " + (w + wob(13)) + " " + (h - r + wob(14));
d += " Q " + (w + wob(15)) + " " + (h + wob(16)) + " " + (w - r + wob(17)) + " " + (h + wob(18));
d +=
" Q " +
(w + wob(15)) +
" " +
(h + wob(16)) +
" " +
(w - r + wob(17)) +
" " +
(h + wob(18));
d += " L " + (w / 2 + wob(19)) + " " + (h + wob(20));
d += " L " + (r + wob(21)) + " " + (h + wob(22));
d += " Q " + wob(23) + " " + (h + wob(24)) + " " + wob(25) + " " + (h - r + wob(26));
@@ -160,7 +172,10 @@
var vb = svg.getAttribute("viewBox").split(" ");
var W = parseFloat(vb[2]),
H = parseFloat(vb[3]);
el.querySelector("path").setAttribute("d", window.hwWobbleRect(W, H, Math.min(26, W * 0.1), opts.seed || 1));
el.querySelector("path").setAttribute(
"d",
window.hwWobbleRect(W, H, Math.min(26, W * 0.1), opts.seed || 1),
);
var label = el.querySelector(".hw-bx-label");
label.textContent = opts.label || "";
if ((opts.labelPos || "above") === "above") {
@@ -175,7 +190,11 @@
var len = p.getTotalLength();
gsap.set(p, { strokeDasharray: len, strokeDashoffset: len });
tl.to(p, { strokeDashoffset: 0, duration: 0.75, ease: "power2.inOut" }, at);
tl.to(document.querySelector(target + " .hw-bx-label"), { opacity: 1, duration: 0.4, ease: "power2.out" }, at + 0.55);
tl.to(
document.querySelector(target + " .hw-bx-label"),
{ opacity: 1, duration: 0.4, ease: "power2.out" },
at + 0.55,
);
};
window.hwBoxOff = function (tl, target, at) {
tl.to(target, { opacity: 0, duration: 0.35, ease: "power2.in" }, at);
registry/components/hw-callout-circle/demo.html
Vendored
+42 -7
View File
@@ -110,7 +110,11 @@
>
<div id="hw-co-scene"></div>
<div id="hw-co-target">subject</div>
<div class="hw-callout" id="hw-co-demo" style="left: 640px; top: 370px; width: 340px; height: 250px">
<div
class="hw-callout"
id="hw-co-demo"
style="left: 640px; top: 370px; width: 340px; height: 250px"
>
<svg viewBox="0 0 340 250">
<path class="hw-co-scribble" id="hw-co-demo-scribble"></path>
<path class="hw-co-outline" id="hw-co-demo-outline"></path>
@@ -124,7 +128,7 @@
data-start="0"
data-duration="5"
data-track-index="0"
style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
></div>
</div>
<script>
@@ -180,7 +184,15 @@
for (var j = 0; j < N; j++) {
var p = pts[j],
q = pts[(j + 1) % N];
d += " Q" + p[0].toFixed(1) + " " + p[1].toFixed(1) + " " + ((p[0] + q[0]) / 2).toFixed(1) + " " + ((p[1] + q[1]) / 2).toFixed(1);
d +=
" Q" +
p[0].toFixed(1) +
" " +
p[1].toFixed(1) +
" " +
((p[0] + q[0]) / 2).toFixed(1) +
" " +
((p[1] + q[1]) / 2).toFixed(1);
}
return d;
};
@@ -202,7 +214,10 @@
rx = W * 0.42,
ry = H * 0.36;
el.querySelector(".hw-co-outline").setAttribute("d", window.hwWobbleEllipse(cx, cy, rx, ry, seed, 4));
el.querySelector(".hw-co-outline").setAttribute(
"d",
window.hwWobbleEllipse(cx, cy, rx, ry, seed, 4),
);
var scr = el.querySelector(".hw-co-scribble");
if (opts.scribble === false) {
@@ -218,7 +233,11 @@
var xa = cx - xw + window.hwHash(i * 7 + 2, seed) * 8;
var xb = cx + xw + window.hwHash(i * 7 + 3, seed) * 8;
d += (i === 0 ? "M " : " L ") + (i % 2 ? xa : xb).toFixed(1) + " " + yy.toFixed(1);
d += " L " + (i % 2 ? xb : xa).toFixed(1) + " " + (yy + window.hwHash(i * 7 + 4, seed) * 4).toFixed(1);
d +=
" L " +
(i % 2 ? xb : xa).toFixed(1) +
" " +
(yy + window.hwHash(i * 7 + 4, seed) * 4).toFixed(1);
}
scr.setAttribute("d", d);
}
@@ -235,7 +254,18 @@
var ey = sy + 55;
conn.setAttribute(
"d",
"M " + sx.toFixed(1) + " " + sy.toFixed(1) + " Q " + ((sx + ex) / 2 + window.hwHash(21, seed) * 14).toFixed(1) + " " + (sy + 46).toFixed(1) + " " + ex.toFixed(1) + " " + ey.toFixed(1)
"M " +
sx.toFixed(1) +
" " +
sy.toFixed(1) +
" Q " +
((sx + ex) / 2 + window.hwHash(21, seed) * 14).toFixed(1) +
" " +
(sy + 46).toFixed(1) +
" " +
ex.toFixed(1) +
" " +
ey.toFixed(1),
);
label.style.left = (at === "left" ? ex - 180 : ex + 12) + "px";
label.style.top = ey - 24 + "px";
@@ -264,7 +294,12 @@
};
// ---- self-preview ----
window.hwCalloutBuild("#hw-co-demo", { scribble: true, seed: 4, label: "look here!", labelAt: "right" });
window.hwCalloutBuild("#hw-co-demo", {
scribble: true,
seed: 4,
label: "look here!",
labelAt: "right",
});
var tl = gsap.timeline({ paused: true });
window.hwCalloutOn(tl, "#hw-co-demo", 0.4);
window.hwBoil(tl, "#hw-co-demo", { amp: 1.8, rot: 0.4, frameDrop: 3, seed: 4 });
registry/components/hw-callout-circle/hw-callout-circle.html
Vendored
+42 -7
View File
@@ -107,7 +107,11 @@
>
<div id="hw-co-scene"></div>
<div id="hw-co-target">subject</div>
<div class="hw-callout" id="hw-co-demo" style="left: 640px; top: 370px; width: 340px; height: 250px">
<div
class="hw-callout"
id="hw-co-demo"
style="left: 640px; top: 370px; width: 340px; height: 250px"
>
<svg viewBox="0 0 340 250">
<path class="hw-co-scribble" id="hw-co-demo-scribble"></path>
<path class="hw-co-outline" id="hw-co-demo-outline"></path>
@@ -121,7 +125,7 @@
data-start="0"
data-duration="5"
data-track-index="0"
style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
></div>
</div>
<script>
@@ -177,7 +181,15 @@
for (var j = 0; j < N; j++) {
var p = pts[j],
q = pts[(j + 1) % N];
d += " Q" + p[0].toFixed(1) + " " + p[1].toFixed(1) + " " + ((p[0] + q[0]) / 2).toFixed(1) + " " + ((p[1] + q[1]) / 2).toFixed(1);
d +=
" Q" +
p[0].toFixed(1) +
" " +
p[1].toFixed(1) +
" " +
((p[0] + q[0]) / 2).toFixed(1) +
" " +
((p[1] + q[1]) / 2).toFixed(1);
}
return d;
};
@@ -199,7 +211,10 @@
rx = W * 0.42,
ry = H * 0.36;
el.querySelector(".hw-co-outline").setAttribute("d", window.hwWobbleEllipse(cx, cy, rx, ry, seed, 4));
el.querySelector(".hw-co-outline").setAttribute(
"d",
window.hwWobbleEllipse(cx, cy, rx, ry, seed, 4),
);
var scr = el.querySelector(".hw-co-scribble");
if (opts.scribble === false) {
@@ -215,7 +230,11 @@
var xa = cx - xw + window.hwHash(i * 7 + 2, seed) * 8;
var xb = cx + xw + window.hwHash(i * 7 + 3, seed) * 8;
d += (i === 0 ? "M " : " L ") + (i % 2 ? xa : xb).toFixed(1) + " " + yy.toFixed(1);
d += " L " + (i % 2 ? xb : xa).toFixed(1) + " " + (yy + window.hwHash(i * 7 + 4, seed) * 4).toFixed(1);
d +=
" L " +
(i % 2 ? xb : xa).toFixed(1) +
" " +
(yy + window.hwHash(i * 7 + 4, seed) * 4).toFixed(1);
}
scr.setAttribute("d", d);
}
@@ -232,7 +251,18 @@
var ey = sy + 55;
conn.setAttribute(
"d",
"M " + sx.toFixed(1) + " " + sy.toFixed(1) + " Q " + ((sx + ex) / 2 + window.hwHash(21, seed) * 14).toFixed(1) + " " + (sy + 46).toFixed(1) + " " + ex.toFixed(1) + " " + ey.toFixed(1)
"M " +
sx.toFixed(1) +
" " +
sy.toFixed(1) +
" Q " +
((sx + ex) / 2 + window.hwHash(21, seed) * 14).toFixed(1) +
" " +
(sy + 46).toFixed(1) +
" " +
ex.toFixed(1) +
" " +
ey.toFixed(1),
);
label.style.left = (at === "left" ? ex - 180 : ex + 12) + "px";
label.style.top = ey - 24 + "px";
@@ -261,7 +291,12 @@
};
// ---- self-preview ----
window.hwCalloutBuild("#hw-co-demo", { scribble: true, seed: 4, label: "look here!", labelAt: "right" });
window.hwCalloutBuild("#hw-co-demo", {
scribble: true,
seed: 4,
label: "look here!",
labelAt: "right",
});
var tl = gsap.timeline({ paused: true });
window.hwCalloutOn(tl, "#hw-co-demo", 0.4);
window.hwBoil(tl, "#hw-co-demo", { amp: 1.8, rot: 0.4, frameDrop: 3, seed: 4 });
registry/components/hw-underline/demo.html
Vendored
+74 -17
View File
@@ -84,13 +84,25 @@
<div style="top: 460px">cross this out</div>
<div style="top: 660px">bracket the aside</div>
</div>
<div class="hw-mark" id="hw-un-m1" style="left: 470px; top: 350px; width: 620px; height: 34px">
<div
class="hw-mark"
id="hw-un-m1"
style="left: 470px; top: 350px; width: 620px; height: 34px"
>
<svg viewBox="0 0 620 34"><path></path></svg>
</div>
<div class="hw-mark" id="hw-un-m2" style="left: 470px; top: 500px; width: 480px; height: 34px">
<div
class="hw-mark"
id="hw-un-m2"
style="left: 470px; top: 500px; width: 480px; height: 34px"
>
<svg viewBox="0 0 480 34"><path></path></svg>
</div>
<div class="hw-mark" id="hw-un-m3" style="left: 440px; top: 650px; width: 40px; height: 110px">
<div
class="hw-mark"
id="hw-un-m3"
style="left: 440px; top: 650px; width: 40px; height: 110px"
>
<svg viewBox="0 0 40 110"><path></path></svg>
</div>
<div
@@ -99,7 +111,7 @@
data-start="0"
data-duration="4"
data-track-index="0"
style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
></div>
</div>
<script>
@@ -151,17 +163,46 @@
var mid = h / 2;
if (style === "bracket") {
return (
"M " + (w * 0.9 + wob(1, 3)) + " " + (2 + wob(2, 3)) +
" Q " + wob(3, 4) + " " + (2 + wob(4)) + " " + (4 + wob(5, 3)) + " " + (h * 0.5 + wob(6)) +
" Q " + wob(7, 4) + " " + (h - 2 + wob(8)) + " " + (w * 0.9 + wob(9, 3)) + " " + (h - 2 + wob(10, 3))
"M " +
(w * 0.9 + wob(1, 3)) +
" " +
(2 + wob(2, 3)) +
" Q " +
wob(3, 4) +
" " +
(2 + wob(4)) +
" " +
(4 + wob(5, 3)) +
" " +
(h * 0.5 + wob(6)) +
" Q " +
wob(7, 4) +
" " +
(h - 2 + wob(8)) +
" " +
(w * 0.9 + wob(9, 3)) +
" " +
(h - 2 + wob(10, 3))
);
}
if (style === "strike") {
return (
"M " + (2 + wob(1, 3)) + " " + (mid + wob(2)) +
" L " + (w - 4 + wob(3, 3)) + " " + (mid - 3 + wob(4)) +
" M " + (w - 10 + wob(5, 4)) + " " + (mid + 7 + wob(6)) +
" L " + (8 + wob(7, 4)) + " " + (mid + 3 + wob(8))
"M " +
(2 + wob(1, 3)) +
" " +
(mid + wob(2)) +
" L " +
(w - 4 + wob(3, 3)) +
" " +
(mid - 3 + wob(4)) +
" M " +
(w - 10 + wob(5, 4)) +
" " +
(mid + 7 + wob(6)) +
" L " +
(8 + wob(7, 4)) +
" " +
(mid + 3 + wob(8))
);
}
/* underline squiggle */
@@ -170,8 +211,14 @@
for (var i = 1; i <= segs; i++) {
var x = (w / segs) * i;
d +=
" Q " + (x - w / segs / 2 + wob(i * 4 + 1, 9)) + " " + (mid + (i % 2 ? -1 : 1) * (9 + wob(i * 4 + 2, 4))) +
" " + x.toFixed(1) + " " + (mid + wob(i * 4 + 3, 4));
" Q " +
(x - w / segs / 2 + wob(i * 4 + 1, 9)) +
" " +
(mid + (i % 2 ? -1 : 1) * (9 + wob(i * 4 + 2, 4))) +
" " +
x.toFixed(1) +
" " +
(mid + wob(i * 4 + 3, 4));
}
return d;
};
@@ -179,16 +226,26 @@
var p = document.querySelector(target + " path");
var len = p.getTotalLength();
gsap.set(p, { strokeDasharray: len, strokeDashoffset: len });
tl.to(p, { strokeDashoffset: 0, duration: dur === undefined ? 0.55 : dur, ease: "power2.inOut" }, at);
tl.to(
p,
{ strokeDashoffset: 0, duration: dur === undefined ? 0.55 : dur, ease: "power2.inOut" },
at,
);
};
window.hwMarkOff = function (tl, target, at) {
tl.to(target, { opacity: 0, duration: 0.3, ease: "power2.in" }, at);
};
// ---- self-preview ----
document.querySelector("#hw-un-m1 path").setAttribute("d", window.hwMarkPath(620, 34, "underline", 4));
document.querySelector("#hw-un-m2 path").setAttribute("d", window.hwMarkPath(480, 34, "strike", 6));
document.querySelector("#hw-un-m3 path").setAttribute("d", window.hwMarkPath(40, 110, "bracket", 8));
document
.querySelector("#hw-un-m1 path")
.setAttribute("d", window.hwMarkPath(620, 34, "underline", 4));
document
.querySelector("#hw-un-m2 path")
.setAttribute("d", window.hwMarkPath(480, 34, "strike", 6));
document
.querySelector("#hw-un-m3 path")
.setAttribute("d", window.hwMarkPath(40, 110, "bracket", 8));
var tl = gsap.timeline({ paused: true });
window.hwMarkOn(tl, "#hw-un-m1", 0.4);
window.hwMarkOn(tl, "#hw-un-m2", 1.0);
registry/components/hw-underline/hw-underline.html
Vendored
+74 -17
View File
@@ -81,13 +81,25 @@
<div style="top: 460px">cross this out</div>
<div style="top: 660px">bracket the aside</div>
</div>
<div class="hw-mark" id="hw-un-m1" style="left: 470px; top: 350px; width: 620px; height: 34px">
<div
class="hw-mark"
id="hw-un-m1"
style="left: 470px; top: 350px; width: 620px; height: 34px"
>
<svg viewBox="0 0 620 34"><path></path></svg>
</div>
<div class="hw-mark" id="hw-un-m2" style="left: 470px; top: 500px; width: 480px; height: 34px">
<div
class="hw-mark"
id="hw-un-m2"
style="left: 470px; top: 500px; width: 480px; height: 34px"
>
<svg viewBox="0 0 480 34"><path></path></svg>
</div>
<div class="hw-mark" id="hw-un-m3" style="left: 440px; top: 650px; width: 40px; height: 110px">
<div
class="hw-mark"
id="hw-un-m3"
style="left: 440px; top: 650px; width: 40px; height: 110px"
>
<svg viewBox="0 0 40 110"><path></path></svg>
</div>
<div
@@ -96,7 +108,7 @@
data-start="0"
data-duration="4"
data-track-index="0"
style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
></div>
</div>
<script>
@@ -148,17 +160,46 @@
var mid = h / 2;
if (style === "bracket") {
return (
"M " + (w * 0.9 + wob(1, 3)) + " " + (2 + wob(2, 3)) +
" Q " + wob(3, 4) + " " + (2 + wob(4)) + " " + (4 + wob(5, 3)) + " " + (h * 0.5 + wob(6)) +
" Q " + wob(7, 4) + " " + (h - 2 + wob(8)) + " " + (w * 0.9 + wob(9, 3)) + " " + (h - 2 + wob(10, 3))
"M " +
(w * 0.9 + wob(1, 3)) +
" " +
(2 + wob(2, 3)) +
" Q " +
wob(3, 4) +
" " +
(2 + wob(4)) +
" " +
(4 + wob(5, 3)) +
" " +
(h * 0.5 + wob(6)) +
" Q " +
wob(7, 4) +
" " +
(h - 2 + wob(8)) +
" " +
(w * 0.9 + wob(9, 3)) +
" " +
(h - 2 + wob(10, 3))
);
}
if (style === "strike") {
return (
"M " + (2 + wob(1, 3)) + " " + (mid + wob(2)) +
" L " + (w - 4 + wob(3, 3)) + " " + (mid - 3 + wob(4)) +
" M " + (w - 10 + wob(5, 4)) + " " + (mid + 7 + wob(6)) +
" L " + (8 + wob(7, 4)) + " " + (mid + 3 + wob(8))
"M " +
(2 + wob(1, 3)) +
" " +
(mid + wob(2)) +
" L " +
(w - 4 + wob(3, 3)) +
" " +
(mid - 3 + wob(4)) +
" M " +
(w - 10 + wob(5, 4)) +
" " +
(mid + 7 + wob(6)) +
" L " +
(8 + wob(7, 4)) +
" " +
(mid + 3 + wob(8))
);
}
/* underline squiggle */
@@ -167,8 +208,14 @@
for (var i = 1; i <= segs; i++) {
var x = (w / segs) * i;
d +=
" Q " + (x - w / segs / 2 + wob(i * 4 + 1, 9)) + " " + (mid + (i % 2 ? -1 : 1) * (9 + wob(i * 4 + 2, 4))) +
" " + x.toFixed(1) + " " + (mid + wob(i * 4 + 3, 4));
" Q " +
(x - w / segs / 2 + wob(i * 4 + 1, 9)) +
" " +
(mid + (i % 2 ? -1 : 1) * (9 + wob(i * 4 + 2, 4))) +
" " +
x.toFixed(1) +
" " +
(mid + wob(i * 4 + 3, 4));
}
return d;
};
@@ -176,16 +223,26 @@
var p = document.querySelector(target + " path");
var len = p.getTotalLength();
gsap.set(p, { strokeDasharray: len, strokeDashoffset: len });
tl.to(p, { strokeDashoffset: 0, duration: dur === undefined ? 0.55 : dur, ease: "power2.inOut" }, at);
tl.to(
p,
{ strokeDashoffset: 0, duration: dur === undefined ? 0.55 : dur, ease: "power2.inOut" },
at,
);
};
window.hwMarkOff = function (tl, target, at) {
tl.to(target, { opacity: 0, duration: 0.3, ease: "power2.in" }, at);
};
// ---- self-preview ----
document.querySelector("#hw-un-m1 path").setAttribute("d", window.hwMarkPath(620, 34, "underline", 4));
document.querySelector("#hw-un-m2 path").setAttribute("d", window.hwMarkPath(480, 34, "strike", 6));
document.querySelector("#hw-un-m3 path").setAttribute("d", window.hwMarkPath(40, 110, "bracket", 8));
document
.querySelector("#hw-un-m1 path")
.setAttribute("d", window.hwMarkPath(620, 34, "underline", 4));
document
.querySelector("#hw-un-m2 path")
.setAttribute("d", window.hwMarkPath(480, 34, "strike", 6));
document
.querySelector("#hw-un-m3 path")
.setAttribute("d", window.hwMarkPath(40, 110, "bracket", 8));
var tl = gsap.timeline({ paused: true });
window.hwMarkOn(tl, "#hw-un-m1", 0.4);
window.hwMarkOn(tl, "#hw-un-m2", 1.0);
registry/components/mk-emphasis-type/demo.html
Vendored
+1 -1
View File
@@ -66,7 +66,7 @@
data-start="0"
data-duration="4"
data-track-index="0"
style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
></div>
</div>
<script>
registry/components/mk-emphasis-type/mk-emphasis-type.html
Vendored
+1 -1
View File
@@ -63,7 +63,7 @@
data-start="0"
data-duration="4"
data-track-index="0"
style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
></div>
</div>
<script>
registry/components/mk-usage-arc/demo.html
Vendored
+14 -4
View File
@@ -90,7 +90,13 @@
<div class="mk-arc" id="mk-arc-demo" style="top: 430px; left: 850px">
<svg viewBox="0 0 220 220">
<circle class="mk-arc-track" cx="110" cy="110" r="92"></circle>
<circle class="mk-arc-fill" cx="110" cy="110" r="92" transform="rotate(-90 110 110)"></circle>
<circle
class="mk-arc-fill"
cx="110"
cy="110"
r="92"
transform="rotate(-90 110 110)"
></circle>
</svg>
<div class="mk-arc-center">
<span class="mk-arc-num">0%</span>
@@ -103,7 +109,7 @@
data-start="0"
data-duration="4"
data-track-index="0"
style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
></div>
</div>
<script>
@@ -121,7 +127,11 @@
gsap.set(el, { opacity: 0, y: 16 });
gsap.set(fill, { strokeDasharray: C, strokeDashoffset: C });
tl.to(el, { opacity: 1, y: 0, duration: 0.6, ease: "power3.out" }, at);
tl.to(fill, { strokeDashoffset: C * (1 - value), duration: 1.1, ease: "power2.inOut" }, at + 0.15);
tl.to(
fill,
{ strokeDashoffset: C * (1 - value), duration: 1.1, ease: "power2.inOut" },
at + 0.15,
);
var st = { v: 0 };
tl.to(
st,
@@ -133,7 +143,7 @@
num.textContent = Math.round(st.v * 100) + "%";
},
},
at + 0.15
at + 0.15,
);
};
window.mkArcOut = function (tl, target, at) {
registry/components/mk-usage-arc/mk-usage-arc.html
Vendored
+14 -4
View File
@@ -87,7 +87,13 @@
<div class="mk-arc" id="mk-arc-demo" style="top: 430px; left: 850px">
<svg viewBox="0 0 220 220">
<circle class="mk-arc-track" cx="110" cy="110" r="92"></circle>
<circle class="mk-arc-fill" cx="110" cy="110" r="92" transform="rotate(-90 110 110)"></circle>
<circle
class="mk-arc-fill"
cx="110"
cy="110"
r="92"
transform="rotate(-90 110 110)"
></circle>
</svg>
<div class="mk-arc-center">
<span class="mk-arc-num">0%</span>
@@ -100,7 +106,7 @@
data-start="0"
data-duration="4"
data-track-index="0"
style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
></div>
</div>
<script>
@@ -118,7 +124,11 @@
gsap.set(el, { opacity: 0, y: 16 });
gsap.set(fill, { strokeDasharray: C, strokeDashoffset: C });
tl.to(el, { opacity: 1, y: 0, duration: 0.6, ease: "power3.out" }, at);
tl.to(fill, { strokeDashoffset: C * (1 - value), duration: 1.1, ease: "power2.inOut" }, at + 0.15);
tl.to(
fill,
{ strokeDashoffset: C * (1 - value), duration: 1.1, ease: "power2.inOut" },
at + 0.15,
);
var st = { v: 0 };
tl.to(
st,
@@ -130,7 +140,7 @@
num.textContent = Math.round(st.v * 100) + "%";
},
},
at + 0.15
at + 0.15,
);
};
window.mkArcOut = function (tl, target, at) {
registry/components/yt-camera-move/demo.html
Vendored
+7 -4
View File
@@ -103,7 +103,7 @@
data-start="0"
data-duration="4"
data-track-index="0"
style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
></div>
</div>
<script>
@@ -117,7 +117,10 @@
window.ytCameraMove = function (tl, target, at, opts) {
opts = opts || {};
var dur = opts.dur === undefined ? 1.2 : opts.dur;
gsap.set(target, { transformPerspective: 1200, transformOrigin: opts.origin || "50% 50%" });
gsap.set(target, {
transformPerspective: 1200,
transformOrigin: opts.origin || "50% 50%",
});
tl.to(
target,
{
@@ -130,7 +133,7 @@
duration: dur,
ease: opts.ease || "power2.inOut",
},
at
at,
);
};
// Return to rest (same easing family).
@@ -148,7 +151,7 @@
duration: opts.dur === undefined ? 1.2 : opts.dur,
ease: opts.ease || "power2.inOut",
},
at
at,
);
};
// Edge-defocus pulse synced to a move (overlay fades in then out).
registry/components/yt-camera-move/yt-camera-move.html
Vendored
+7 -4
View File
@@ -100,7 +100,7 @@
data-start="0"
data-duration="4"
data-track-index="0"
style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
></div>
</div>
<script>
@@ -114,7 +114,10 @@
window.ytCameraMove = function (tl, target, at, opts) {
opts = opts || {};
var dur = opts.dur === undefined ? 1.2 : opts.dur;
gsap.set(target, { transformPerspective: 1200, transformOrigin: opts.origin || "50% 50%" });
gsap.set(target, {
transformPerspective: 1200,
transformOrigin: opts.origin || "50% 50%",
});
tl.to(
target,
{
@@ -127,7 +130,7 @@
duration: dur,
ease: opts.ease || "power2.inOut",
},
at
at,
);
};
// Return to rest (same easing family).
@@ -145,7 +148,7 @@
duration: opts.dur === undefined ? 1.2 : opts.dur,
ease: opts.ease || "power2.inOut",
},
at
at,
);
};
// Edge-defocus pulse synced to a move (overlay fades in then out).
registry/components/yt-circle-pointer/demo.html
Vendored
+12 -4
View File
@@ -94,7 +94,11 @@
data-height="1080"
>
<div id="yt-ptr-scene"><span>the thing</span></div>
<div class="yt-circle" id="yt-ptr-circle" style="left: 760px; top: 440px; width: 420px; height: 210px">
<div
class="yt-circle"
id="yt-ptr-circle"
style="left: 760px; top: 440px; width: 420px; height: 210px"
>
<svg viewBox="0 0 420 210"><ellipse cx="210" cy="105" rx="196" ry="88"></ellipse></svg>
</div>
<div class="yt-count" id="yt-ptr-count" style="right: 140px; top: 110px">
@@ -106,7 +110,7 @@
data-start="0"
data-duration="5"
data-track-index="0"
style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
></div>
</div>
<script>
@@ -118,7 +122,11 @@
var el = document.querySelector(target + " ellipse");
var len = el.getTotalLength();
gsap.set(el, { strokeDasharray: len, strokeDashoffset: len });
tl.to(el, { strokeDashoffset: 0, duration: dur === undefined ? 0.7 : dur, ease: "power2.inOut" }, at);
tl.to(
el,
{ strokeDashoffset: 0, duration: dur === undefined ? 0.7 : dur, ease: "power2.inOut" },
at,
);
};
window.ytCircleOff = function (tl, target, at) {
tl.to(target, { opacity: 0, duration: 0.35, ease: "power2.in" }, at);
@@ -140,7 +148,7 @@
num.textContent = String(Math.ceil(st.v));
},
},
at
at,
);
for (var i = 1; i <= from; i++) {
tl.to(target, { scale: 1.07, duration: 0.09, ease: "sine.out" }, at + i - 0.09);
registry/components/yt-circle-pointer/yt-circle-pointer.html
Vendored
+12 -4
View File
@@ -91,7 +91,11 @@
data-height="1080"
>
<div id="yt-ptr-scene"><span>the thing</span></div>
<div class="yt-circle" id="yt-ptr-circle" style="left: 760px; top: 440px; width: 420px; height: 210px">
<div
class="yt-circle"
id="yt-ptr-circle"
style="left: 760px; top: 440px; width: 420px; height: 210px"
>
<svg viewBox="0 0 420 210"><ellipse cx="210" cy="105" rx="196" ry="88"></ellipse></svg>
</div>
<div class="yt-count" id="yt-ptr-count" style="right: 140px; top: 110px">
@@ -103,7 +107,7 @@
data-start="0"
data-duration="5"
data-track-index="0"
style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
></div>
</div>
<script>
@@ -115,7 +119,11 @@
var el = document.querySelector(target + " ellipse");
var len = el.getTotalLength();
gsap.set(el, { strokeDasharray: len, strokeDashoffset: len });
tl.to(el, { strokeDashoffset: 0, duration: dur === undefined ? 0.7 : dur, ease: "power2.inOut" }, at);
tl.to(
el,
{ strokeDashoffset: 0, duration: dur === undefined ? 0.7 : dur, ease: "power2.inOut" },
at,
);
};
window.ytCircleOff = function (tl, target, at) {
tl.to(target, { opacity: 0, duration: 0.35, ease: "power2.in" }, at);
@@ -137,7 +145,7 @@
num.textContent = String(Math.ceil(st.v));
},
},
at
at,
);
for (var i = 1; i <= from; i++) {
tl.to(target, { scale: 1.07, duration: 0.09, ease: "sine.out" }, at + i - 0.09);
registry/components/yt-feather-highlight/demo.html
Vendored
+1 -1
View File
@@ -99,7 +99,7 @@
data-start="0"
data-duration="5"
data-track-index="0"
style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
></div>
</div>
<script>
registry/components/yt-feather-highlight/yt-feather-highlight.html
Vendored
+1 -1
View File
@@ -96,7 +96,7 @@
data-start="0"
data-duration="5"
data-track-index="0"
style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
></div>
</div>
<script>
registry/components/yt-screen-warp/demo.html
Vendored
+1 -1
View File
@@ -91,7 +91,7 @@
data-start="0"
data-duration="4"
data-track-index="0"
style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
></div>
</div>
<script>
registry/components/yt-screen-warp/yt-screen-warp.html
Vendored
+1 -1
View File
@@ -88,7 +88,7 @@
data-start="0"
data-duration="4"
data-track-index="0"
style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
></div>
</div>
<script>