Quader-Karussell
Abgerundete, abgeschrägte Quader mit Karteninhalten fliegen als starre Gruppe von rechts herein, gleiten mit einer gestaffelten Rotation pro Quader, verlangsamen sich zu einer Helden-Pose und verlassen die Szene nach links. Der Abstand wird aus den Quaderabmessungen und der größten erreichbaren X-Halbausdehnung berechnet, sodass sich die Quader nie überlappen. Vierzig Variablen tragen das ursprüngliche DialKit-Schema: Geometrie, Materialien, Beleuchtung, Schatten, Hintergrund, Kamera und jede Segmentdauer und -interpolation. Karten stammen aus der eingebauten Liste oder einer JSON-Variable.
Kompositions-ID: cuboid-carousel. Dauer 6,666666666666667 s bei 30 fps, 1920×1080.
Dateien
cuboid-carousel.html(38 KB)assets/Three-LICENSE.txt(1 KB)assets/addons/environments/RoomEnvironment.js(5 KB)assets/addons/utils/BufferGeometryUtils.js(36 KB)assets/cuboid-motion.js(593 KB)assets/gsap-3.14.2.min.js(128 KB)assets/GSAP-NOTICE.txt(1 KB)assets/three.core.min.js(554 KB)assets/three.module.min.js(468 KB)
Installation
Installieren mit npx hyperframes add cuboid-carousel; standardmäßig landen die obigen Dateien unter compositions/cuboid-carousel/. Dann den Block von der Host-index.html einbinden:
<div
data-composition-id="cuboid-carousel"
data-composition-src="compositions/cuboid-carousel/cuboid-carousel.html"
data-start="0"
data-duration="6.666666666666667"
data-track-index="1"
data-width="1920"
data-height="1080"
></div>
Mit benutzerdefinierten Werten rendern, indem direkt auf die Kompositionsdatei gezielt wird:
npx --yes [email protected] render 'compositions/cuboid-carousel/cuboid-carousel.html' --variables '{"cardsJson":"","heroCard":4}'
Variablen
Zur Laufzeit über window.__hyperframes.getVariables() ausgelesen; auf dem Kompositionsstamm als data-composition-variables deklariert (einfach quotiertes Attribut, reines JSON).
| id | typ | standard | label / bereich |
|---|---|---|---|
cardsJson | string | "" | Inhalt · Karten-JSON (optional, siehe CARDS im Quelltext) |
heroCard | number | 4 | Inhalt · Heldenkarte (1-basiert) 1–12 Schritt 1 |
count | number | 8 | Inhalt · Anzahl der sich wiederholenden Karten 1–12 Schritt 1 |
gap | number | 0.01 | Layout · Zusätzlicher Abstand zwischen Quadern 0–1,5 Schritt 0,005 |
cuboidWidth | number | 1.7 | Quader · Breite 0,3–5 Schritt 0,01 |
cuboidHeight | number | 2.4 | Quader · Höhe 0,3–6 Schritt 0,01 |
cuboidDepth | number | 0.14 | Quader · Dicke (Tiefe) 0,02–2 Schritt 0,01 |
cornerRadius | number | 0.105 | Quader · Eckenradius 0–0,6 Schritt 0,005 |
bevelSize | number | 0.03 | Quader · Fasenbreite (Kantenabschrägung) 0–0,3 Schritt 0,001 |
bevelThickness | number | 0.04 | Quader · Fasendicke 0–0,3 Schritt 0,001 |
smoothness | number | 32 | Quader · Glätte (Segmente) 1–32 Schritt 1 |
bodyColor | color | "#242424" | Quader · Körperfarbe |
roughness | number | 0.6 | Quader · Rauheit 0–1 Schritt 0,01 |
metalness | number | 0.4 | Quader · Metallizität 0–1 Schritt 0,01 |
heroScale | number | 1 | Held · Isolierte Skalierung 1–1,6 Schritt 0,01 |
heroFillIntensity | number | 0.55 | Held · Gesichtslichtintensität 0–2 Schritt 0,05 |
heroExitX | number | 288 | Held · Ausgangsrotation X Grad -720–720 Schritt 1 |
heroExitY | number | -234 | Held · Ausgangsrotation Y Grad -720–720 Schritt 1 |
heroExitZ | number | 198 | Held · Ausgangsrotation Z Grad -720–720 Schritt 1 |
ambientIntensity | number | 0.35 | Beleuchtung · Umgebungslichtintensität 0–4 Schritt 0,01 |
ambientColor | color | "#ffffff" | Beleuchtung · Umgebungslichtfarbe |
topIntensity | number | 3.1 | Beleuchtung · Intensität der oberen Anordnung 0–12 Schritt 0,05 |
topColor | color | "#ffffff" | Beleuchtung · Farbe der oberen Anordnung |
bottomIntensity | number | 2.15 | Beleuchtung · Intensität der unteren Anordnung 0–12 Schritt 0,05 |
bottomColor | color | "#ffcaad" | Beleuchtung · Farbe der unteren Anordnung |
keyIntensity | number | 5 | Beleuchtung · Intensität der Hauptanordnung 0–12 Schritt 0,05 |
keyColor | color | "#ffe9d6" | Beleuchtung · Farbe der Hauptanordnung |
shadowRadius | number | 44.5 | Schatten · Weichheit bei Kartengröße 2048 0–50 Schritt 0,5 |
shadowMapSize | number | 2048 | Schatten · Kartengröße 512–4096 Schritt 256 |
backdrop | color | "#0b0d13" | Hintergrund · Farbe |
cameraFov | number | 11 | Kamera · Anfängliches Sichtfeld 10–90 Schritt 0,5 |
cameraX | number | -1.65 | Kamera · Anfängliches X -20–20 Schritt 0,05 |
cameraY | number | 8.5 | Kamera · Anfängliches Y -20–20 Schritt 0,05 |
cameraZ | number | -8.508708 | Kamera · Anfängliches Z (Entfernung) -20–50 Schritt 0,1 |
cameraSettleFrame | number | 70 | Kamera · Einrastbild (30 fps) 20–90 Schritt 1 |
handheldStrength | number | 1 | Kamera · Handgehaltene Stabilität 0–1 Schritt 0,05 |
cameraTargetFov | number | 34 | Kamera-Ziel · Sichtfeld 10–90 Schritt 0,5 |
cameraTargetX | number | -7.25 | Kamera-Ziel · X -20–20 Schritt 0,05 |
cameraTargetY | number | 1.15 | Kamera-Ziel · Y -20–20 Schritt 0,05 |
cameraTargetZ | number | 6.2 | Kamera-Ziel · Z 2–50 Schritt 0,1 |
Laufzeitvertrag
- Eine pausierte GSAP-Zeitleiste registriert als
window.__timelines["cuboid-carousel"]. - Neu-Synchronisation bei
hf-seekCustomEvent; jeder Frame ist eine geschlossene Funktion der Zeit (nur seed-basierter PRNG, keine rAF-Schleifen, kein Date.now). - Renderer: WebGL, GSAP, Canvas 2D, PMREM, Schattenkarten. Geschätzter Speicherverbrauch ca. 350 MB pro aktiver Instanz; nur eine gleichzeitig ausführen.
- Externe Laufzeitabhängigkeiten:
./assets/three.module.min.js,./assets/addons/. - Web-Schriftarten von Google Fonts: Inter.
Bearbeitungsregeln (aus dem Quellprojekt)
data-composition-variablesals einfach quotiertes Attribut mit einfachem"-JSON erhalten. Niemals über das Design-Panel von Studio speichern.<canvas>nicht in statisches Markup einfügen; zur Laufzeit erstellen.- Jeden visuellen Zustand als Funktion von
t(Zeit) beibehalten; Suchen-Sicherheit ist das, was den Block renderbar macht.