szeproka/hyperframes-registry

Eine gekachelte Kopffläche, deren Zellen sich einzeln unter einem durchlaufenden Tiefenfeld drehen, um die hintere Überschrift zu enthüllen. HyperFrames-Block, 1920×1080, 8s, 18 Variablen.

Was ist hyperframes-registry?

Dieses Skill, genannt „Code Slice Hero“, erzeugt eine visuell beeindruckende Animation, bei der eine vollständig gekachelte Fläche zunächst eine nahtlose Überschrift trägt. Ein imaginärer Cursor bewegt sich über die Oberfläche; nahegelegene Kacheln reagieren mit Anhebung und Neigung auf sein Gauß’sches Tiefenfeld. Nur die Zellen, die den Umriss einer der beiden Überschriften schneiden, drehen sich um und geben die hintere Überschrift frei. Das gesamte Raster wird als eine einzige instanziierte WebGL 2-Zeichnung mit einem gemeinsamen Texturpaar für Vorder- und Rückseite sowie einem gebündelten projizierten Schatten-Pass gerendert. Es unterstützt 18 anpassbare Variablen wie Schriftgröße, Zellgröße, Sweep-Richtung und mehr und ist für eine Laufzeit von 8 Sekunden bei 30 fps und einer Auflösung von 1920×1080 ausgelegt. Das Skill ist Teil des HyperFrames-Ökosystems und kann einfach mit `npx hyperframes add code-slice-hero` installiert werden. Die Komposition ist als geschlossene Funktion der Zeit definiert (seeded PRNG, keine rAF-Schleifen, kein Date.now), was eine exakte Synchronisation und Wiederholbarkeit über `hf-seek`-Events ermöglicht. Entwickler können die Animation über `window.__hyperframes.getVariables()` steuern und direkt in ihre HTML-Seiten einbetten.

Funktioniert mit~Claude Code~Codex CLI✓Cursor

npx skills add https://github.com/szeproka/hyperframes-registry/tree/HEAD/registry/blocks/code-slice-hero

Dokumentation

Code Slice Hero

Eine vollständige quadratische Kachelfläche trägt eine nahtlose Überschrift. Ein imaginärer Cursor bewegt sich über die Oberfläche; nahegelegene Kacheln reagieren auf sein Gauß’sches Tiefenfeld mit Anhebung und Neigung, und nur die Zellen, die den Umriss einer der beiden Überschriften schneiden, drehen sich um, um die hintere Überschrift freizugeben. Das gesamte Raster ist eine einzelne instanziierte WebGL 2-Zeichnung mit einem gemeinsamen Vorder-/Rückseite-Texturpaar, plus einem gebündelten projizierten Schatten-Pass. Kopie, Textgröße und quadratische Zellgröße sind unabhängig, sodass Kacheln nie gestreckt werden. Sweep-Richtung, Easing-Stärke, Cursor-Radius, Abfall, Tiefe, Bounce und Schatten sind alles Variablen.

Kompositions-ID: code-slice-hero. Dauer 8 s bei 30 fps, 1920×1080.

Dateien

code-slice-hero.html (24 KB)
assets/Geist-Bold.ttf (65 KB)
assets/Geist-OFL.txt (4 KB)
assets/gsap-3.14.2.min.js (128 KB)
assets/GSAP-NOTICE.txt (1 KB)
shadows.js (10 KB)
surface.js (8 KB)

Installation

Installieren Sie mit npx hyperframes add code-slice-hero; standardmäßig landen die obigen Dateien unter compositions/code-slice-hero/. Dann binden Sie den Block in der Host-index.html ein:

<div
  data-composition-id="code-slice-hero"
  data-composition-src="compositions/code-slice-hero/code-slice-hero.html"
  data-start="0"
  data-duration="8"
  data-track-index="1"
  data-width="1920"
  data-height="1080"
></div>

Rendern Sie mit benutzerdefinierten Werten, indem Sie die Kompositionsdatei direkt ansprechen:

npx --yes [email protected] render 'compositions/code-slice-hero/code-slice-hero.html' --variables '{"headline":"MAKE IT","reverseHeadline":"MATTER."}'

Variablen

Zur Laufzeit über window.__hyperframes.getVariables() lesbar; auf dem Kompositionsstamm als data-composition-variables deklariert (Attribut in einfachen Anführungszeichen, reines JSON).

| id | ------------------- | headline | reverseHeadline | direction | sweepDuration | sweepEaseStrength | flipDuration | cursorRadius | cursorFalloff | cursorDepth | tiltStrength | noiseStrength | flipBounce | cellSize | formationScale | fontSize | behindColor | shadowStrength | shadowSoftness | type | standard | label / bereich | | ------ | ----------------- | ------------------------------------------------- | -------------- | | string | "MAKE IT" | Kopie · Vordere Überschrift max. 32 Zeichen | | string | "MATTER." | Kopie · Hintere Überschrift max. 32 Zeichen | | enum | "left-to-right" | Bewegung · Sweep-Richtung (left-to-right | right-to-left) | | number | 4.2 | Bewegung · Sweep-Dauer 2.6–4.5 Schritt 0.05 | | number | 3 | Bewegung · Sweep-Easing-Stärke 0–3 Schritt 0.05 | | number | 0.75 | Bewegung · Dauer jeder Kachel-Drehung 0.65–1.65 Schritt 0.05 | | number | 210 | Cursor · Einflussradius 160–480 Schritt 10 | | number | 1.4 | Cursor · Einflussabfall 0.4–3.5 Schritt 0.05 | | number | 80 | Cursor · Tiefe (+ Richtung Kamera) -320–320 Schritt 10 | | number | 55 | Cursor · Zug-/Neigungsstärke 0–55 Schritt 1 | | number | 2 | Bewegung · Organische Variation 0–2 Schritt 0.05 | | number | 0.15 | Bewegung · Elastischer Flip-Bounce 0–0.8 Schritt 0.05 | | number | 112 | Scheiben · Quadratische Zellgröße 24–120 Schritt 4 | | number | 1 | Scheiben · Lokale Formation-Skalierung 0.94–1 Schritt 0.001 | | number | 310 | Schrift · Maximale Größe 160–480 Schritt 5 | | color | "#212121" | Oberfläche · Hintergrund hinter den Kacheln | | number | 0.19 | Oberfläche · Schattenwurf-Stärke 0–0.65 Schritt 0.01 | | number | 4 | Oberfläche · Schattenwurf-Weichheit 0.5–4 Schritt 0.1 |

Laufzeitvertrag

Ein pausierte GSAP-Timeline registriert als window.__timelines["code-slice-hero"].
Synchronisiert neu bei hf-seek-CustomEvent; jeder Frame ist eine geschlossene Funktion der Zeit (seeded PRNG, keine rAF-Schleifen, kein Date.now).
Renderer: GSAP, Canvas 2D, Seeded PRNG.
Externe Laufzeitabhängigkeiten: keine (lokal bereitgestellt).
Lokale Schriftarten: assets/Geist-Bold.ttf.

Bearbeitungsregeln (aus dem Quellprojekt)

data-composition-variables als Attribut in einfachen Anführungszeichen mit einfachem " JSON halten. Niemals über das Design-Panel des Studios speichern.
Kein <canvas> in statisches Markup setzen; zur Laufzeit erstellen.
Jeden visuellen Zustand als Funktion von t halten; Seek-Sicherheit ist das, was den Block renderbar macht.