Canopy Part Title
Ein dichtes Blätterdach aus strukturierten Blättern streicht mit geringer Schärfentiefe über das Bild, teilt sich dann und gibt die erste Überschrift frei; eine zweite, in der Tiefe angehobene Gruppe trägt die zweite Überschrift an der Kamera vorbei. Einige Blätter bleiben auf dem Titel zurück und erzeugen eine leichte Brise. Schriftart, Schriftstärke, Schriftgröße, Buchstabenabstand, Blattanzahl, Streichgeschwindigkeit und der verbleibende Blätterwind sind variabel.
Kompositions-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 Sie direkt auf die Kompositionsdatei zielen:
npx --yes [email protected] render 'compositions/canopy-part-title/canopy-part-title.html' --variables '{"headline1":"Unterholz","headline2":"Langsam bewegen"}'
Variablen
Wird zur Laufzeit über window.__hyperframes.getVariables() ausgelesen; auf der Kompositionswurzel als data-composition-variables deklariert (Attribut in einfachen Anführungszeichen, reines JSON).
| id | typ | standard | bezeichnung / bereich |
|---|---|---|---|
headline1 | string | "Unterholz" | Überschrift 1 |
headline2 | string | "Langsam bewegen" | Überschrift 2 |
font | string | "Helvetica" | Überschrift-Schriftart |
fontWeight | number | 900 | Schriftstärke 100–900 Schritt 100 |
fontSize | number | 1 | Schriftgröße (1 = auto-fit) 0,3–2 Schritt 0,01 |
letterSpacing | number | 0,01 | Buchstabenabstand (em) -0,2–1 Schritt 0,01 |
background | color | "#020805" | Hintergrund |
leafCount | number | 170 | Blätter pro Welle 40–320 Schritt 1 |
stayCount | number | 5 | Zurückgelassene Blätter 0–20 Schritt 1 |
sweepSpeed | number | 1 | Streichgeschwindigkeit 0,3–3 Schritt 0,05 |
retainedBreeze | number | 1 | Verbleibender Blätterwind 0–2 Schritt 0,05 |
Laufzeitvertrag
- Eine pausierte GSAP-Timeline registriert als
window.__timelines["canopy-part-title"]. - Resynchronisiert beim
hf-seekCustomEvent; jedes Bild 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 etwa 350 MB pro Live-Instanz; jeweils nur eine 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. - Webfonts von Google Fonts: Gelasio.
Bearbeitungsregeln (aus dem Quellprojekt)
data-composition-variablesals Attribut in einfachen Anführungszeichen mit einfachem JSON (") belassen. Niemals über das Design-Panel von Studio speichern.<canvas>nicht in statisches Markup setzen; zur Laufzeit erstellen.- Jeden visuellen Zustand als Funktion von t beibehalten; Seek-Sicherheit macht den Block renderbar.