Glastitel aus Scherben
Voronoi-geschnittene Glasscheiben fliegen aus der Tiefe heran, rotieren und landen als gekachelte Silhouette der Überschrift, um dann wieder an der Kamera vorbeizufliegen. Jedes Stück ist ein Sutherland–Hodgman-Schnitt eines verrauschten Kleckses gegen seine Voronoi-Zelle, sodass die Teile den Buchstaben stets vollständig abdecken. Glas- und Matcap-Oberflächen erhalten pro Fragment Nebel; der Z-Flug ist von der Easing-Kurve entkoppelt, sodass die Scherben die Tiefe sichtbar durchqueren. Eine Kachelzahl von 1 ergibt eine einzelne Scheibe.
Kompositions-ID: glass-shard-title. Dauer 12,16 s bei 30 fps, 1920×1080.
Dateien
glass-shard-title.html(16 KB)assets/ferndale_studio_01_1k.hdr(1,6 MB)assets/fonts/Geist-Bold.ttf(65 KB)assets/fonts/Geist-Regular.ttf(65 KB)assets/fonts/Geist-SemiBold.ttf(65 KB)assets/fonts/Geist-OFL.txt(4 KB)assets/fonts/cormorant-garamond.woff2(37 KB)assets/fonts/CormorantGaramond-OFL.txt(4 KB)assets/glass-main.js(549 KB)assets/Three-LICENSE.txt(1 KB)assets/matcap-1.png(wird bei der Installation vom CDN abgerufen)
Installation
Mit npx hyperframes add glass-shard-title installieren; die oben genannten Dateien landen standardmäßig unter compositions/glass-shard-title/. Anschließend wird der Block in der host-index.html eingebunden:
<div
data-composition-id="glass-shard-title"
data-composition-src="compositions/glass-shard-title/glass-shard-title.html"
data-start="0"
data-duration="12.16"
data-track-index="1"
data-width="1920"
data-height="1080"
></div>
Zum Rendern mit benutzerdefinierten Werten wird die Kompositionsdatei direkt angesprochen:
npx --yes [email protected] render 'compositions/glass-shard-title/glass-shard-title.html' --variables '{"headline":"Designed in glass","tileCount":8}'
Variablen
Zur Laufzeit über window.__hyperframes.getVariables() auslesbar; auf dem Kompositions-Root als data-composition-variables deklariert (einfache Anführungszeichen, reines JSON).
| id | typ | standard | bezeichnung / bereich |
|---|---|---|---|
headline | string | "Designed in glass" | Überschrift, max. 40 Zeichen |
tileCount | number | 8 | Kacheln 1–400 Schritt 1 |
roundness | number | 0.4 | Rundung (0-1) 0–1 Schritt 0.01 |
bevel | number | 0.35 | Fase (0-1) 0–1 Schritt 0.01 |
meshSmooth | number | 0.6 | Oberflächenglätte (0-1) 0–1 Schritt 0.01 |
flyInTime | number | 2.3 | Einflugzeit (s) 0,2–6 Schritt 0,05 |
flyOutTime | number | 2.4 | Ausflugzeit (s) 0,2–6 Schritt 0,05 |
stagger | number | 0.27 | Staffelung (0-1) 0–1 Schritt 0,01 |
flyInRotation | number | 5 | Einflugrotation (0-60) 0–60 Schritt 0,1 |
flyOutRotation | number | 6 | Ausflugrotation (0-6) 0–6 Schritt 0,1 |
chaos | number | 0.25 | Kontur-Chaos (0-1) 0–1 Schritt 0,01 |
padding | number | 1 | Randabstand (0-1) 0–1 Schritt 0,01 |
sizeVariance | number | 0.35 | Größenvarianz (0-1) 0–1 Schritt 0,01 |
gap | number | 0.03 | Kachelabstand 0–0,3 Schritt 0,002 |
easePow | number | 10 | Einflug-Positions-Easing (1-10) 1–10 Schritt 0,1 |
sideDist | number | 3 | Seitlicher Flugabstand 0–60 Schritt 0,5 |
zDist | number | -42 | Z-Einflug (negativ) -400–0 Schritt 2 |
zOut | number | 14 | Z-Ausflug (+ = hinter Kamera) -400–60 Schritt 2 |
fog | number | 36 | Nebelentfernung (0 = aus) 0–400 Schritt 2 |
Laufzeitvertrag
- Eine pausierte GSAP-Timeline registriert als
window.__timelines["glass-shard-title"]. - Neu-Synchronisation über das
hf-seek-CustomEvent; jeder Frame ist eine geschlossene Funktion der Zeit (nur seeded PRNG, keine rAF-Schleifen, kein Date.now). - Renderer: three.js 0.181.2 (gebündelt), GSAP 3.14.2, Canvas 2D, GLSL-Shader, HDR-Umgebung, Matcap, Seeded PRNG, d3-delaunay, Schattenkarten. Budget ca. 350 MB pro Live-Instanz; nur eine gleichzeitig ausführen.
- Externe Laufzeitabhängigkeiten:
https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js,https://cdn.jsdelivr.net/npm/[email protected]/dist/d3-delaunay.min.js. - Lokale Schriftarten: assets/fonts/Geist-Regular.ttf, assets/fonts/Geist-SemiBold.ttf, assets/fonts/Geist-Bold.ttf.
- Der gebündelte Code ist in die Komposition eingebettet (assets/glass-main.js); nach Bearbeitung der .mjs-Quelle mit esbuild neu bündeln und wieder einbetten.
Bearbeitungsregeln (aus dem Quellprojekt)
data-composition-variablesals Attribut mit einfachen Anführungszeichen und plain"-JSON belassen. Niemals über das Studio-Design-Panel speichern.- Kein
<canvas>im statischen Markup; zur Laufzeit erzeugen. - Jeden visuellen Zustand als Funktion von t belassen; Seek-Sicherheit ist das, was den Block renderbar macht.