Carrousel de Cuboïdes
Des cuboïdes arrondis et biseautés, portant des cartes de contenu, volent depuis la droite en un groupe rigide, défilent avec une rotation décalée par cuboïde, décélèrent pour une mise en valeur héroïque, puis sortent par la gauche. L'espacement est calculé à partir des dimensions des cuboïdes et de la plus grande demi-extension X atteignable, garantissant qu'ils ne se chevauchent jamais. Quarante variables reprennent le schéma DialKit original : géométrie, matériaux, lumières, ombres, arrière-plan, caméra et chaque durée et courbe d'animation. Les cartes proviennent d'une liste intégrée ou d'une variable JSON.
Identifiant de composition : cuboid-carousel. Durée 6,666666666666667 s à 30 ips, 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
Installez avec la commande npx hyperframes add cuboid-carousel ; par défaut, les fichiers ci-dessus se placent 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>
Rendez 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 via data-composition-variables (attribut entre guillemets simples, JSON simple).
| id | type | default | label / plage |
|---|---|---|---|
cardsJson | string | "" | Contenu · JSON des cartes (optionnel, voir CARTES dans la source) |
heroCard | number | 4 | Contenu · Carte héroïque (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 · Espace 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 de coin 0–0,6 pas 0,005 |
bevelSize | number | 0,03 | Cuboïde · Taille du biseau (chanfrein) 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étallisé 0–1 pas 0,01 |
heroScale | number | 1 | Héroïque · Échelle isolée 1–1,6 pas 0,01 |
heroFillIntensity | number | 0,55 | Héroïque · Intensité de la lumière faciale 0–2 pas 0,05 |
heroExitX | number | 288 | Héroïque · Rotation X de sortie en degrés -720–720 pas 1 |
heroExitY | number | -234 | Héroïque · Rotation Y de sortie en degrés -720–720 pas 1 |
heroExitZ | number | 198 | Héroïque · 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 montage supérieur 0–12 pas 0,05 |
topColor | color | "#ffffff" | Lumières · Couleur du montage supérieur |
bottomIntensity | number | 2,15 | Lumières · Intensité du montage inférieur 0–12 pas 0,05 |
bottomColor | color | "#ffcaad" | Lumières · Couleur du montage inférieur |
keyIntensity | number | 5 | Lumières · Intensité du montage clé 0–12 pas 0,05 |
keyColor | color | "#ffe9d6" | Lumières · Couleur du montage clé |
shadowRadius | number | 44,5 | Ombres · Douceur à la taille de la carte 2048 0–50 pas 0,5 |
shadowMapSize | number | 2048 | Ombres · Taille de la carte 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 · Position X initiale -20–20 pas 0,05 |
cameraY | number | 8,5 | Caméra · Position Y initiale -20–20 pas 0,05 |
cameraZ | number | -8,508708 | Caméra · Position Z (distance) initiale -20–50 pas 0,1 |
cameraSettleFrame | number | 70 | Caméra · Image de stabilisation (30 ips) 20–90 pas 1 |
handheldStrength | number | 1 | Caméra · Force du maintien à main levée 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 · Position X -20–20 pas 0,05 |
cameraTargetY | number | 1,15 | Cible caméra · Position Y -20–20 pas 0,05 |
cameraTargetZ | number | 6,2 | Cible caméra · Position Z 2–50 pas 0,1 |
Contrat d'exécution
- Une timeline GSAP en pause, enregistrée sous
window.__timelines["cuboid-carousel"]. - Se resynchronise sur l'événement CustomEvent
hf-seek; chaque image est une fonction en temps fermé (PRNG ensemencé uniquement, pas de boucles rAF, pas de Date.now). - Rendu : WebGL, GSAP, Canvas 2D, PMREM, cartes d'ombres. Budget approximatif 350 Mo par instance active ; exécutez une instance à 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)
- Gardez
data-composition-variablesen tant qu'attribut entre guillemets simples avec du JSON en". Ne l'enregistrez jamais via le panneau de conception de Studio. - Ne placez pas
<canvas>dans le balisage statique ; créez-le à l'exécution. - Gardez chaque état visuel fonction de t ; la sécurité de recherche est ce qui rend le bloc rendable.