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-09-07 01:56:04 +00:00 · 2026-08-10 18:46:03 -04:00
parent 0f76305191
commit 9734578e60
1383 changed files with 255573 additions and 5760 deletions
@@ -0,0 +1,110 @@
+<!--
+  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);
+-->