Carrousel de Cuboïdes
Des cuboïdes arrondis et biseautés portant du contenu sous forme de cartes volent depuis la droite en un seul groupe rigide, avancent avec un décalage de rotation par cuboïde, décélèrent jusqu'à une position d'accroche héro, puis sortent par la gauche. L'espacement est calculé à partir des dimensions des cuboïdes et du demi-plan X maximal atteignable, de sorte que les cuboïdes ne se chevauchent jamais. Quarante variables transportent le schéma original DialKit : géométrie, matériaux, lumières, ombres, arrière-plan, caméra et chaque durée et courbe d'accélération de segment. Les cartes proviennent de la liste intégrée ou d'une variable JSON.
Identifiant de composition : cuboid-carousel. Durée 6,666666666666667 s à 30 fps, 1920×1080.
Fichiers
cuboid-carousel.html(38 Ko)assets/Three-LICENSE.txt(1 Ko)assets/addons/environments/RoomEnvironment.js(5 Ko)assets/addons/utils/BufferGeometryUtils.js(36 Ko)assets/cuboid-motion.js(593 Ko)assets/gsap-3.14.2.min.js(128 Ko)assets/GSAP-NOTICE.txt(1 Ko)assets/three.core.min.js(554 Ko)assets/three.module.min.js(468 Ko)
Installation
Installer avec npx hyperframes add cuboid-carousel ; par défaut, les fichiers ci-dessus atterrissent sous compositions/cuboid-carousel/. Montez ensuite le bloc depuis le fichier index.html hôte :
<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>
Effectuez un rendu avec des valeurs personnalisées en ciblant directement le fichier de composition :
npx --yes [email protected] render 'compositions/cuboid-carousel/cuboid-carousel.html' --variables '{"cardsJson":"","heroCard":4}'
Variables
Lues à l'exécution via window.__hyperframes.getVariables() ; déclarées sur la racine de la composition avec data-composition-variables (attribut entre guillemets simples, JSON pur).
| id | type | défaut | libellé / plage |
|---|---|---|---|
cardsJson | string | "" | Contenu · JSON des cartes (optionnel, voir CARTES dans le code source) |
heroCard | number | 4 | Contenu · Carte héro (base 1) 1–12 pas 1 |
count | number | 8 | Contenu · Nombre de cartes répétées 1–12 pas 1 |
gap | number | 0.01 | Disposition · Écart supplémentaire entre cuboïdes 0–1.5 pas 0.005 |
cuboidWidth | number | 1.7 | Cuboïde · Largeur 0.3–5 pas 0.01 |
cuboidHeight | number | 2.4 | Cuboïde · Hauteur 0.3–6 pas 0.01 |
cuboidDepth | number | 0.14 | Cuboïde · Épaisseur (profondeur) 0.02–2 pas 0.01 |
cornerRadius | number | 0.105 | Cuboïde · Rayon des coins 0–0.6 pas 0.005 |
bevelSize | number | 0.03 | Cuboïde · Taille du biseau 0–0.3 pas 0.001 |
bevelThickness | number | 0.04 | Cuboïde · Épaisseur du biseau 0–0.3 pas 0.001 |
smoothness | number | 32 | Cuboïde · Lissage (segments) 1–32 pas 1 |
bodyColor | color | "#242424" | Cuboïde · Couleur du corps |
roughness | number | 0.6 | Cuboïde · Rugosité 0–1 pas 0.01 |
metalness | number | 0.4 | Cuboïde · Métallisation 0–1 pas 0.01 |
heroScale | number | 1 | Héro · Échelle isolée 1–1.6 pas 0.01 |
heroFillIntensity | number | 0.55 | Héro · Intensité de la lumière faciale 0–2 pas 0.05 |
heroExitX | number | 288 | Héro · Angle de rotation X de sortie en degrés -720–720 pas 1 |
heroExitY | number | -234 | Héro · Angle de rotation Y de sortie en degrés -720–720 pas 1 |
heroExitZ | number | 198 | Héro · Angle de rotation Z de sortie en degrés -720–720 pas 1 |
ambientIntensity | number | 0.35 | Lumières · Intensité ambiante 0–4 pas 0.01 |
ambientColor | color | "#ffffff" | Lumières · Couleur ambiante |
topIntensity | number | 3.1 | Lumières · Intensité du rig supérieur 0–12 pas 0.05 |
topColor | color | "#ffffff" | Lumières · Couleur du rig supérieur |
bottomIntensity | number | 2.15 | Lumières · Intensité du rig inférieur 0–12 pas 0.05 |
bottomColor | color | "#ffcaad" | Lumières · Couleur du rig inférieur |
keyIntensity | number | 5 | Lumières · Intensité du rig principal 0–12 pas 0.05 |
keyColor | color | "#ffe9d6" | Lumières · Couleur du rig principal |
shadowRadius | number | 44.5 | Ombres · Douceur à la taille de la carte d'ombre 2048 0–50 pas 0.5 |
shadowMapSize | number | 2048 | Ombres · Taille de la carte d'ombre 512–4096 pas 256 |
backdrop | color | "#0b0d13" | Arrière-plan · Couleur |
cameraFov | number | 11 | Caméra · Champ de vision initial 10–90 pas 0.5 |
cameraX | number | -1.65 | Caméra · X initial -20–20 pas 0.05 |
cameraY | number | 8.5 | Caméra · Y initial -20–20 pas 0.05 |
cameraZ | number | -8.508708 | Caméra · Z initial (distance) -20–50 pas 0.1 |
cameraSettleFrame | number | 70 | Caméra · Image de stabilisation (30 fps) 20–90 pas 1 |
handheldStrength | number | 1 | Caméra · Intensité du tremblement 0–1 pas 0.05 |
cameraTargetFov | number | 34 | Cible caméra · Champ de vision 10–90 pas 0.5 |
cameraTargetX | number | -7.25 | Cible caméra · X -20–20 pas 0.05 |
cameraTargetY | number | 1.15 | Cible caméra · Y -20–20 pas 0.05 |
cameraTargetZ | number | 6.2 | Cible caméra · Z 2–50 pas 0.1 |
Contrat d'exécution
- Une timeline GSAP en pause enregistrée sous
window.__timelines["cuboid-carousel"]. - Resynchronisation sur l'événement personnalisé
hf-seek; chaque image est une fonction fermée du temps (PRNG ensemencé uniquement, pas de boucles rAF, pas de Date.now). - Rendu : WebGL, GSAP, Canvas 2D, PMREM, cartes d'ombre. Budget d'environ 350 Mo par instance active ; exécutez-en une à la fois.
- Dépendances d'exécution externes :
./assets/three.module.min.js,./assets/addons/. - Polices Web de Google Fonts : Inter.
Règles d'édition (du projet source)
- Conservez
data-composition-variablescomme un attribut entre guillemets simples avec du JSON en". Ne l'enregistrez jamais via le panneau de conception de Studio. - Ne mettez pas de
<canvas>dans le balisage statique ; créez-le à l'exécution. - Conservez chaque état visuel en fonction de t ; la sécurité de recherche temporelle est ce qui rend le bloc rendable.