Quader-Karussell
Abgerundete, abgeschrägte Quader mit Karteninhalten fliegen als starre Gruppe von rechts herein, gleiten mit einer per-Quader-Rotationsstaffelung, verlangsamen sich zu einer Heldenposition und verlassen die Szene nach links. Der Abstand wird aus den Quaderabmessungen und der größten erreichbaren X-Halbausdehnung abgeleitet, sodass sich Quader niemals überlappen können. Vierzig Variablen tragen das ursprüngliche DialKit-Schema: Geometrie, Materialien, Lichter, Schatten, Hintergrund, Kamera und jede Segmentdauer und jedes Easing. Karten stammen aus der integrierten 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/. Anschließend den Block aus 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 die Kompositionsdatei direkt angesprochen 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 (Attribut in einfachen Anführungszeichen, reines JSON).
| id | typ | standard | label / bereich |
|---|---|---|---|
cardsJson | string | "" | Inhalt · Karten JSON (optional, siehe CARDS im Quellcode) |
heroCard | number | 4 | Inhalt · Heldenkarte (1-basiert) 1–12 Schritt 1 |
count | number | 8 | Inhalt · Anzahl der wiederholten 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 · Tiefe 0,02–2 Schritt 0,01 |
cornerRadius | number | 0.105 | Quader · Eckradius 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 · Flächenlichtintensität 0–2 Schritt 0,05 |
heroExitX | number | 288 | Held · Austritts-X-Rotationsgrad -720–720 Schritt 1 |
heroExitY | number | -234 | Held · Austritts-Y-Rotationsgrad -720–720 Schritt 1 |
heroExitZ | number | 198 | Held · Austritts-Z-Rotationsgrad -720–720 Schritt 1 |
ambientIntensity | number | 0.35 | Lichter · Umgebungslichtintensität 0–4 Schritt 0,01 |
ambientColor | color | "#ffffff" | Lichter · Umgebungslichtfarbe |
topIntensity | number | 3.1 | Lichter · Obere Lichtintensität 0–12 Schritt 0,05 |
topColor | color | "#ffffff" | Lichter · Obere Lichtfarbe |
bottomIntensity | number | 2.15 | Lichter · Untere Lichtintensität 0–12 Schritt 0,05 |
bottomColor | color | "#ffcaad" | Lichter · Untere Lichtfarbe |
keyIntensity | number | 5 | Lichter · Hauptlichtintensität 0–12 Schritt 0,05 |
keyColor | color | "#ffe9d6" | Lichter · Hauptlichtfarbe |
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 · Beruhigungsframe (30 fps) 20–90 Schritt 1 |
handheldStrength | number | 1 | Kamera · Handkamera-Stärke 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-Timeline registriert als
window.__timelines["cuboid-carousel"]. - Neu-Synchronisation bei
hf-seekCustomEvent; jeder Frame ist eine geschlossene Funktion der Zeit (nur gesäter PRNG, keine rAF-Schleifen, kein Date.now). - Renderer: WebGL, GSAP, Canvas 2D, PMREM, Schattenkarten. Budget ca. 350 MB pro Live-Instanz; immer nur eine Instanz gleichzeitig ausführen.
- Externe Laufzeitabhängigkeiten:
./assets/three.module.min.js,./assets/addons/. - Webschriftarten von Google Fonts: Inter.
Bearbeitungsregeln (aus dem Quellprojekt)
data-composition-variablesals Attribut in einfachen Anführungszeichen mit normalem"JSON belassen. Niemals über das Studio-Design-Panel speichern.- Kein
<canvas>in statisches Markup setzen; zur Laufzeit erstellen. - Jeden visuellen Zustand als Funktion von t belassen; Suchsicherheit ist das, was den Block renderbar macht.