ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-05 00:56:23 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
9734578e6065d6dec8993c4e30a978263c3eaa8b
hyperframes/docs/catalog/components/chromatic-aberration-wipe.mdx
T
Miguel Ángel 9734578e60 feat(registry): bring back the video-primitive moves (#3169) 
Restores the 208 catalog items reverted after their previews 404'd in
production, this time on the payload mechanism rather than the .html files
that caused the outage.

The generator no longer writes a preview document to docs/public. That writer,
and the machinery under it, existed only to produce files the docs host
discards, so it is gone rather than bypassed. Items now embed the composition
itself via a payload, which is what the previous change already does for the
items that were already in the catalog.

The variables explorer is parked, not restored: it drove its preview through
the same unpublished .html path, so it would have shown an empty frame. Items
that declare variables get the live player plus the static variables table, and
reconnecting the explorer to payloads is a follow-up.
2026-08-10 18:46:03 -04:00

230 lines
10 KiB
Plaintext
Raw Blame History

---
title: "Chromatic Aberration Wipe"
description: "A fast slide wipe with RGB channel split on peak frames."
---
import { InstallCommand } from "/snippets/install-command.jsx";
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="chromatic-aberration-wipe preview"
loading="lazy"
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/chromatic-aberration-wipe.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/chromatic-aberration-wipe.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add chromatic-aberration-wipe" />
That writes one file: `compositions/components/chromatic-aberration-wipe.html`.
## Variables
Every one of these has a default, so the piece works untouched. Set the ones you
want to change on the element:
| Variable | Default | Accepts | What it does |
| --- | --- | --- | --- |
| `direction` | `left` | `left`, `right`, `up`, `down` | The direction the reveal travels; both scenes slide the same way and the wipe edge follows. |
| `accent` | `blue` | `blue`, `green`, `violet` | Colour family of the incoming scene's gradient. |
| `aberration` | `1` | 0x to 2x, step 0.1x | Multiplies the red/cyan channel split: 0 removes it, 1 is the stock strength, 2 doubles the offset and saturates the flash. |
Set them with `data-variable-values` on the element that mounts it. These are the
defaults, so this behaves exactly like the preview above until you change one:
```html wrap
<div
data-composition-id="chromatic-aberration-wipe"
data-composition-src="compositions/components/chromatic-aberration-wipe.html"
data-variable-values='{"direction":"left","accent":"blue","aberration":1}'
></div>
```
## Source
<Accordion title={`chromatic-aberration-wipe.html`}>
```html
<!--
Chromatic Aberration Wipe - remocn component ported to HyperFrames authoring format.
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 the result as a custom property
the CSS consumes. The timeline recipe below is untouched by them: it keeps
driving one clip edge, one pair of offsets and one channel-split flash, and
these decide which way that edge sweeps and how hard the flash reads.
- direction (left | right | up | down, default left): the direction the
reveal travels. Both scenes slide the same way and the wipe edge follows,
so up and down turn the horizontal wipe into a vertical one.
- accent (blue | green | violet, default blue): the incoming scene's
gradient family.
- aberration (0 to 2, default 1): multiplies the red/cyan channel split.
0 removes it entirely, 2 doubles the offset and saturates the flash.
On every default the result is identical to the original: a left-to-right
wipe into the blue/violet scene with the stock RGB split.
The white sheen sweeps horizontally in every direction; it is a flash rather
than an edge, so it is left alone.
-->
<div
class="hf-remocn-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" }] },
{ "id": "aberration", "type": "number", "role": "style", "label": "Aberration", "description": "Multiplies the red/cyan channel split: 0 removes it, 1 is the stock strength, 2 doubles the offset and saturates the flash.", "default": 1, "min": 0, "max": 2, "step": 0.1, "unit": "x" }
]'
>
<div class="scene from">Before</div>
<div class="scene to">Chromatic Aberration Wipe</div>
<div class="fx"></div>
<div class="rgb"></div>
</div>
<style>
.hf-remocn-chromatic-aberration-wipe {
--hf-accent: #2563eb;
--hf-ink: #111827;
--hf-muted: #6b7280;
--hf-surface: #ffffff;
color: var(--hf-ink);
font-family: Inter, system-ui, sans-serif;
}
.hf-remocn-chromatic-aberration-wipe {
position: relative;
width: 760px;
height: 428px;
overflow: hidden;
border-radius: 30px;
background: #111827;
box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
}
.hf-remocn-chromatic-aberration-wipe .scene {
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-weight: 900;
font-size: 58px;
letter-spacing: -0.05em;
color: #fff;
}
.hf-remocn-chromatic-aberration-wipe .from {
background: linear-gradient(135deg, #111827, #374151);
transform: translate(
calc(var(--hf-from-x, 0px) * var(--hf-wipe-ax, 1)),
calc(var(--hf-from-y, 0px) + var(--hf-from-x, 0px) * var(--hf-wipe-ay, 0))
)
scale(var(--hf-from-scale, 1));
filter: blur(var(--hf-from-blur, 0px));
}
.hf-remocn-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)),
calc(var(--hf-to-y, 0px) + var(--hf-to-x, 0px) * var(--hf-wipe-ay, 0))
)
scale(var(--hf-to-scale, 1));
clip-path: inset(
calc(var(--hf-clip-top, 0%) + var(--hf-clip-right, 100%) * var(--hf-wipe-t, 0))
calc(var(--hf-clip-right, 100%) * var(--hf-wipe-r, 1))
calc(var(--hf-clip-bottom, 0%) + var(--hf-clip-right, 100%) * var(--hf-wipe-b, 0))
calc(var(--hf-clip-left, 0%) + var(--hf-clip-right, 100%) * var(--hf-wipe-l, 0))
);
}
.hf-remocn-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 {
position: absolute;
inset: 0;
pointer-events: none;
opacity: calc(var(--hf-rgb-opacity, 0) * var(--hf-rgb-strength, 1));
background: linear-gradient(
90deg,
rgba(239, 68, 68, 0.35),
transparent,
rgba(34, 211, 238, 0.35)
);
transform: translateX(calc(var(--hf-rgb-x, 0px) * var(--hf-rgb-strength, 1)));
}
</style>
<script>
(function () {
"use strict";
var vars =
window.__hyperframes && window.__hyperframes.getVariables
? window.__hyperframes.getVariables()
: {};
// Unrecognised overrides return to their declared defaults.
var directions = {
left: { ax: "1", ay: "0", t: "0", r: "1", b: "0", l: "0" },
right: { ax: "-1", ay: "0", t: "0", r: "0", b: "0", l: "1" },
up: { ax: "0", ay: "1", t: "1", r: "0", b: "0", l: "0" },
down: { ax: "0", ay: "-1", t: "0", r: "0", b: "1", l: "0" },
};
var accents = {
blue: ["#2563eb", "#7c3aed"],
green: ["#047857", "#34d399"],
violet: ["#6d28d9", "#a78bfa"],
};
function pick(table, value, fallback) {
return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
}
var direction = directions[pick(directions, vars.direction, "left")];
var accent = accents[pick(accents, vars.accent, "blue")];
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");
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);
roots[i].style.setProperty("--hf-wipe-t", direction.t);
roots[i].style.setProperty("--hf-wipe-r", direction.r);
roots[i].style.setProperty("--hf-wipe-b", direction.b);
roots[i].style.setProperty("--hf-wipe-l", direction.l);
roots[i].style.setProperty("--hf-scene-a", accent[0]);
roots[i].style.setProperty("--hf-scene-b", accent[1]);
roots[i].style.setProperty("--hf-rgb-strength", String(aberration));
}
})();
</script>
<!--
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);
-->
```
</Accordion>
## Usage
Open `compositions/components/chromatic-aberration-wipe.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
{/* hf:generated-footer */}
Tagged `video-primitive` `transition-primitive` `remocn-port`.
## Related topics
- [Browse the complete Catalog](/catalog)
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
- [Build a richer composition](/go-further)
Reference in New Issue View Git Blame Copy Permalink