ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-07 01:56:04 +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/chromatic-aberration-wipe/chromatic-aberration-wipe.html
Vendored
+11 -11
View File
@@ -1,5 +1,5 @@
<!--
Chromatic Aberration Wipe - remocn component ported to HyperFrames authoring format.
Chromatic Aberration Wipe - catalog component for HyperFrames.
Paste the markup and CSS into a composition. Drive the timeline integration
from a paused GSAP timeline so renders remain deterministic.
@@ -26,7 +26,7 @@
-->
<div
class="hf-remocn-chromatic-aberration-wipe"
class="hf-catalog-chromatic-aberration-wipe"
data-composition-variables='[
{ "id": "direction", "type": "enum", "role": "motion", "label": "Direction", "description": "The direction the reveal travels; both scenes slide the same way and the wipe edge follows.", "default": "left", "options": [{ "value": "left", "label": "Left" }, { "value": "right", "label": "Right" }, { "value": "up", "label": "Up" }, { "value": "down", "label": "Down" }] },
{ "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Colour family of the incoming scene&#39;s gradient.", "default": "blue", "options": [{ "value": "blue", "label": "Blue" }, { "value": "green", "label": "Green" }, { "value": "violet", "label": "Violet" }] },
@@ -40,7 +40,7 @@
</div>
<style>
.hf-remocn-chromatic-aberration-wipe {
.hf-catalog-chromatic-aberration-wipe {
--hf-accent: #2563eb;
--hf-ink: #111827;
--hf-muted: #6b7280;
@@ -48,7 +48,7 @@
color: var(--hf-ink);
font-family: Inter, system-ui, sans-serif;
}
.hf-remocn-chromatic-aberration-wipe {
.hf-catalog-chromatic-aberration-wipe {
position: relative;
width: 760px;
height: 428px;
@@ -57,7 +57,7 @@
background: #111827;
box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
}
.hf-remocn-chromatic-aberration-wipe .scene {
.hf-catalog-chromatic-aberration-wipe .scene {
position: absolute;
inset: 0;
display: grid;
@@ -67,7 +67,7 @@
letter-spacing: -0.05em;
color: #fff;
}
.hf-remocn-chromatic-aberration-wipe .from {
.hf-catalog-chromatic-aberration-wipe .from {
background: linear-gradient(135deg, #111827, #374151);
transform: translate(
calc(var(--hf-from-x, 0px) * var(--hf-wipe-ax, 1)),
@@ -76,7 +76,7 @@
scale(var(--hf-from-scale, 1));
filter: blur(var(--hf-from-blur, 0px));
}
.hf-remocn-chromatic-aberration-wipe .to {
.hf-catalog-chromatic-aberration-wipe .to {
background: linear-gradient(135deg, var(--hf-scene-a, #2563eb), var(--hf-scene-b, #7c3aed));
transform: translate(
calc(var(--hf-to-x, 0px) * var(--hf-wipe-ax, 1)),
@@ -90,14 +90,14 @@
calc(var(--hf-clip-left, 0%) + var(--hf-clip-right, 100%) * var(--hf-wipe-l, 0))
);
}
.hf-remocn-chromatic-aberration-wipe .fx {
.hf-catalog-chromatic-aberration-wipe .fx {
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
mix-blend-mode: screen;
transform: translateX(var(--hf-fx-x, -110%));
}
.hf-remocn-chromatic-aberration-wipe .rgb {
.hf-catalog-chromatic-aberration-wipe .rgb {
position: absolute;
inset: 0;
pointer-events: none;
@@ -144,7 +144,7 @@
var raw = typeof vars.aberration === "string" ? parseFloat(vars.aberration) : vars.aberration;
var aberration = typeof raw === "number" && isFinite(raw) ? Math.min(2, Math.max(0, raw)) : 1;
var roots = document.querySelectorAll(".hf-remocn-chromatic-aberration-wipe");
var roots = document.querySelectorAll(".hf-catalog-chromatic-aberration-wipe");
for (var i = 0; i < roots.length; i += 1) {
roots[i].style.setProperty("--hf-wipe-ax", direction.ax);
roots[i].style.setProperty("--hf-wipe-ay", direction.ay);
@@ -161,5 +161,5 @@
<!--
Timeline integration:
tl.fromTo('.hf-remocn-chromatic-aberration-wipe .to', { '--hf-clip-right': '100%', '--hf-to-x': '60px', '--hf-to-scale': 1.04 }, { '--hf-clip-right': '0%', '--hf-to-x': '0px', '--hf-to-scale': 1, duration: 0.9, ease: 'power3.inOut' }, startTime); tl.to('.hf-remocn-chromatic-aberration-wipe .from', { '--hf-from-x': '-70px', '--hf-from-scale': 0.96, '--hf-from-blur': '5px', duration: 0.9, ease: 'power3.inOut' }, startTime); tl.fromTo('.hf-remocn-chromatic-aberration-wipe .fx', { '--hf-fx-x': '-110%' }, { '--hf-fx-x': '110%', duration: 0.58, ease: 'power2.inOut' }, startTime + 0.18); tl.fromTo('.hf-remocn-chromatic-aberration-wipe .rgb', { '--hf-rgb-opacity': 0, '--hf-rgb-x': '-16px' }, { '--hf-rgb-opacity': 1, '--hf-rgb-x': '16px', repeat: 3, yoyo: true, duration: 0.07, ease: 'steps(1)' }, startTime + 0.32);
tl.fromTo('.hf-catalog-chromatic-aberration-wipe .to', { '--hf-clip-right': '100%', '--hf-to-x': '60px', '--hf-to-scale': 1.04 }, { '--hf-clip-right': '0%', '--hf-to-x': '0px', '--hf-to-scale': 1, duration: 0.9, ease: 'power3.inOut' }, startTime); tl.to('.hf-catalog-chromatic-aberration-wipe .from', { '--hf-from-x': '-70px', '--hf-from-scale': 0.96, '--hf-from-blur': '5px', duration: 0.9, ease: 'power3.inOut' }, startTime); tl.fromTo('.hf-catalog-chromatic-aberration-wipe .fx', { '--hf-fx-x': '-110%' }, { '--hf-fx-x': '110%', duration: 0.58, ease: 'power2.inOut' }, startTime + 0.18); tl.fromTo('.hf-catalog-chromatic-aberration-wipe .rgb', { '--hf-rgb-opacity': 0, '--hf-rgb-x': '-16px' }, { '--hf-rgb-opacity': 1, '--hf-rgb-x': '16px', repeat: 3, yoyo: true, duration: 0.07, ease: 'steps(1)' }, startTime + 0.32);
-->