mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-10 22:20:14 +00:00
Miguel Ángel
9734578e60
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.
175 lines
7.3 KiB
Plaintext
175 lines
7.3 KiB
Plaintext
---
|
|
title: "RGB Glitch Text"
|
|
description: "RGB-offset text copies jitter briefly for a controlled glitch window."
|
|
---
|
|
|
|
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="rgb-glitch-text 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/rgb-glitch-text.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/rgb-glitch-text.png");document.body.appendChild(p)});<\/script></body></html>`}
|
|
/>
|
|
|
|
## Install
|
|
|
|
<InstallCommand command="npx hyperframes add rgb-glitch-text" />
|
|
|
|
That writes one file: `compositions/components/rgb-glitch-text.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 |
|
|
| --- | --- | --- | --- |
|
|
| `text` | `GLITCH` | string | The word shown on all three stacked copies. |
|
|
| `intensity` | `standard` | `subtle`, `standard`, `extreme` | Scales the red and cyan offsets the timeline drives, so the split reads as a hairline or a hard tear. |
|
|
| `tone` | `ink` | `ink`, `paper`, `accent` | Colour of the solid copy the two ghosts split away from: ink for light frames, paper for dark ones, accent rides --brand. |
|
|
|
|
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="rgb-glitch-text"
|
|
data-composition-src="compositions/components/rgb-glitch-text.html"
|
|
data-variable-values='{"text":"GLITCH","intensity":"standard","tone":"ink"}'
|
|
></div>
|
|
```
|
|
|
|
## Source
|
|
|
|
<Accordion title={`rgb-glitch-text.html`}>
|
|
|
|
```html
|
|
<!--
|
|
RGB Glitch Text - remocn typography primitive for HyperFrames.
|
|
|
|
Paste the markup, CSS and script 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 above consumes. The timeline recipe below is untouched by them: it
|
|
keeps driving one red offset and one cyan offset, and intensity decides how
|
|
far those offsets actually carry.
|
|
|
|
- text (any short word, default "GLITCH"): the word set on all three
|
|
stacked copies at once, so they stay in register.
|
|
- intensity (subtle | standard | extreme, default standard): scales the
|
|
driven offsets, from a hairline fringe to a hard tear. Both offsets are
|
|
zero at rest, so this one only shows once the timeline runs.
|
|
- tone (ink | paper | accent, default ink): colour of the solid copy the
|
|
red and cyan ghosts split away from. ink is near-black for light frames,
|
|
paper near-white for dark ones, accent rides --brand.
|
|
|
|
On every default the result is identical to the original: near-black GLITCH
|
|
with red and cyan copies tearing 8px either way.
|
|
-->
|
|
|
|
<div
|
|
class="hf-remocn-rgb-glitch-text"
|
|
data-composition-variables='[
|
|
{ "id": "text", "type": "string", "role": "content", "label": "Text", "description": "The word shown on all three stacked copies.", "default": "GLITCH", "maxLength": 24 },
|
|
{ "id": "intensity", "type": "enum", "role": "motion", "label": "Intensity", "description": "Scales the red and cyan offsets the timeline drives, so the split reads as a hairline or a hard tear.", "default": "standard", "options": [{ "value": "subtle", "label": "Subtle" }, { "value": "standard", "label": "Standard" }, { "value": "extreme", "label": "Extreme" }] },
|
|
{ "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Colour of the solid copy the two ghosts split away from: ink for light frames, paper for dark ones, accent rides --brand.", "default": "ink", "options": [{ "value": "ink", "label": "Ink" }, { "value": "paper", "label": "Paper" }, { "value": "accent", "label": "Accent" }] }
|
|
]'
|
|
>
|
|
<span>GLITCH</span><span>GLITCH</span><strong>GLITCH</strong>
|
|
</div>
|
|
|
|
<style>
|
|
.hf-remocn-rgb-glitch-text {
|
|
color: var(--hf-glitch-ink, #18181b);
|
|
font-family: Inter, system-ui, sans-serif;
|
|
font-weight: 900;
|
|
letter-spacing: -0.04em;
|
|
}
|
|
.hf-remocn-rgb-glitch-text {
|
|
position: relative;
|
|
width: 420px;
|
|
height: 82px;
|
|
font-size: 72px;
|
|
line-height: 1;
|
|
}
|
|
.hf-remocn-rgb-glitch-text span,
|
|
.hf-remocn-rgb-glitch-text strong {
|
|
position: absolute;
|
|
inset: 0;
|
|
}
|
|
.hf-remocn-rgb-glitch-text span:first-child {
|
|
color: #ef4444;
|
|
transform: translateX(calc(var(--hf-glitch-red, 0px) * var(--hf-glitch-reach, 1)));
|
|
}
|
|
.hf-remocn-rgb-glitch-text span:nth-child(2) {
|
|
color: #22d3ee;
|
|
transform: translateX(calc(var(--hf-glitch-blue, 0px) * var(--hf-glitch-reach, 1)));
|
|
}
|
|
.hf-remocn-rgb-glitch-text strong {
|
|
color: var(--hf-glitch-ink, #18181b);
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
(function () {
|
|
"use strict";
|
|
|
|
var vars =
|
|
window.__hyperframes && window.__hyperframes.getVariables
|
|
? window.__hyperframes.getVariables()
|
|
: {};
|
|
|
|
// Unrecognised overrides return to their declared defaults.
|
|
var reaches = { subtle: 0.5, standard: 1, extreme: 2.25 };
|
|
var tones = {
|
|
ink: "#18181b",
|
|
paper: "#fafafa",
|
|
accent: "var(--brand, #34d399)",
|
|
};
|
|
|
|
function pick(table, value, fallback) {
|
|
return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
|
|
}
|
|
|
|
var reach = reaches[pick(reaches, vars.intensity, "standard")];
|
|
var tone = tones[pick(tones, vars.tone, "ink")];
|
|
var text =
|
|
typeof vars.text === "string" && vars.text.trim() !== "" ? vars.text.trim() : "GLITCH";
|
|
|
|
var roots = document.querySelectorAll(".hf-remocn-rgb-glitch-text");
|
|
for (var i = 0; i < roots.length; i += 1) {
|
|
roots[i].style.setProperty("--hf-glitch-reach", String(reach));
|
|
roots[i].style.setProperty("--hf-glitch-ink", tone);
|
|
var copies = roots[i].querySelectorAll("span, strong");
|
|
for (var j = 0; j < copies.length; j += 1) {
|
|
copies[j].textContent = text;
|
|
}
|
|
}
|
|
})();
|
|
</script>
|
|
|
|
<!--
|
|
Timeline integration:
|
|
tl.to('.hf-remocn-rgb-glitch-text', { opacity: 1, duration: 0.01 }, startTime); tl.to('.hf-remocn-rgb-glitch-text', { '--hf-glitch-red': '-8px', '--hf-glitch-blue': '8px', duration: 0.06, repeat: 5, yoyo: true, ease: 'steps(1)' }, startTime + 0.1);
|
|
-->
|
|
```
|
|
|
|
</Accordion>
|
|
|
|
## Usage
|
|
|
|
Open `compositions/components/rgb-glitch-text.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)
|