Canopy Part Title
Ein dichtes Blätterdach aus strukturierten Blättern streicht mit geringer Tiefenschärfe über das Bild, teilt sich dann und gibt die erste Überschrift frei. Ein zweiter, höhenversetzter Schub trägt die zweite Überschrift an der Kamera vorbei. Einige Blätter bleiben auf dem Text zurück und sorgen für eine sanfte Brise. Schriftart, -stärke, -größe, Zeichenabstand, Blattanzahl, Streifgeschwindigkeit und der verbleibende Blätterwind sind variabel.
Composition id: canopy-part-title. Dauer 12 s bei 30 fps, 1920×1080.
Dateien
canopy-part-title.html(57 KB)assets/leaf-surface-color.webp(64 KB)assets/leaf-surface-normal.webp(136 KB)
Installation
Installieren mit npx hyperframes add canopy-part-title; standardmäßig landen die obigen Dateien unter compositions/canopy-part-title/. Anschließend den Block aus der Host-index.html einbinden:
<div
data-composition-id="canopy-part-title"
data-composition-src="compositions/canopy-part-title/canopy-part-title.html"
data-start="0"
data-duration="12"
data-track-index="1"
data-width="1920"
data-height="1080"
></div>
Mit benutzerdefinierten Werten rendern, indem die Kompositionsdatei direkt adressiert wird:
npx --yes [email protected] render 'compositions/canopy-part-title/canopy-part-title.html' --variables '{"headline1":"Unterholz","headline2":"Bewege dich langsam"}'
Variablen
Zur Laufzeit über window.__hyperframes.getVariables() auslesbar; am Kompositionswurzelelement als data-composition-variables deklariert (einfach angegebenes Attribut, reines JSON).
| id | type | default | Bezeichnung / Bereich |
|---|---|---|---|
headline1 | string | "Understory" | Überschrift 1 |
headline2 | string | "Move slowly" | Überschrift 2 |
font | string | "Helvetica" | Schriftart der Überschrift |
fontWeight | number | 900 | Schriftstärke 100–900 Schritt 100 |
fontSize | number | 1 | Schriftgröße (1 = automatisch anpassen) 0.3–2 Schritt 0.01 |
letterSpacing | number | 0.01 | Zeichenabstand (em) -0.2–1 Schritt 0.01 |
background | color | "#020805" | Hintergrund |
leafCount | number | 170 | Blätter pro Streifenzug 40–320 Schritt 1 |
stayCount | number | 5 | Zurückgelassene Blätter 0–20 Schritt 1 |
sweepSpeed | number | 1 | Streifgeschwindigkeit 0.3–3 Schritt 0.05 |
retainedBreeze | number | 1 | Verbleibender Blätterwind 0–2 Schritt 0.05 |
Laufzeitvertrag
- Eine pausierte GSAP-Zeitleiste registriert als
window.__timelines["canopy-part-title"]. - Neusynchronisation bei dem CustomEvent
hf-seek; jeder Frame ist eine geschlossene Funktion der Zeit (nur gesäter PRNG, keine rAF-Schleifen, kein Date.now). - Renderer: three.js 0.170.0, GSAP 3.14.2, Canvas 2D, Post-Processing, Gesäter PRNG, Schattenkarten. Budget ca. 350 MB pro aktiver Instanz; immer 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]/build/three.module.js,https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/postprocessing/EffectComposer.js,https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/postprocessing/RenderPass.js,https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/postprocessing/BokehPass.js. - Web-Schriftarten von Google Fonts: Gelasio.
Bearbeitungsregeln (aus dem Quellprojekt)
data-composition-variablesals einfach angegebenes Attribut mit einfachem"JSON behalten. Nie über das Studio-Design-Panel speichern.<canvas>nicht in statisches Markup setzen; zur Laufzeit erstellen.- Jeden visuellen Zustand als Funktion von t behalten; Suchsicherheit ist das, was den Block renderbar macht.