Carte en orbite
Une carte de fonctionnalité centrée avec une découpe circulaire encadrant une sphère de points. La carte entre depuis la droite (0,25–1,80 s), maintient une position avec un léger balancement et un défilement en profondeur, effectue un tour complet autour du centre de la sphère (smoothstep entre 4.97 et 5.97 s), et sort par la gauche (7.35–8.55 s). Le chemin de la caméra et les courbes F de la carte sont exportés depuis le rig Blender approuvé à 30 fps et interpolés ; la sphère conserve sa propre translation et une rotation constante. Le titre, la description, la couleur d'accentuation et l'angle d'orbite sont des variables ; les valeurs 180° et 720° fonctionnent sans toucher aux clés d'animation.
Identifiant de composition : orbit-card. Durée 10 s à 30 fps, 1920×1080.
Fichiers
orbit-card.html(3 Ko)assets/Archivo-LICENSE.txt(4 Ko)assets/Three-LICENSE.txt(1 Ko)assets/archivo-regular.ttf(108 Ko)assets/archivo-semibold.ttf(109 Ko)assets/gsap-3.14.2.min.js(128 Ko)assets/GSAP-NOTICE.txt(1 Ko)assets/orbit-motion.js(59 Ko)assets/orbit-scene.js(8 Ko)assets/three.core.min.js(554 Ko)assets/three.module.min.js(468 Ko)
Installation
Installez avec npx hyperframes add orbit-card ; par défaut, les fichiers ci-dessus se placent dans compositions/orbit-card/. Montez ensuite le bloc depuis le index.html hôte :
<div
data-composition-id="orbit-card"
data-composition-src="compositions/orbit-card/orbit-card.html"
data-start="0"
data-duration="10"
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/orbit-card/orbit-card.html' --variables '{"feature1Title":"Toujours synchronisé","feature1Desc":"Les changements atteignent chaque écran au moment où ils se produisent."}'
Variables
Lues à l'exécution via window.__hyperframes.getVariables() ; déclarées sur la racine de la composition comme data-composition-variables (attribut entre guillemets simples, JSON simple).
| id | type | default | label / plage |
|---|---|---|---|
feature1Title | string | "Toujours synchronisé" | Titre de la carte max 28 caractères |
feature1Desc | string | "Les changements atteignent chaque écran au moment où ils se produisent." | Description de la carte max 110 caractères |
feature1Accent | color | "#4cc9ff" | Accentuation de la carte |
cardOrbitDegrees | number | 360 | Degrés d'orbite de la carte -36000–36000 pas 1 |
Contrat d'exécution
- Une seule timeline GSAP en pause enregistrée comme
window.__timelines["orbit-card"]. - Se resynchronise sur l'événement CustomEvent
hf-seek; chaque image est une fonction fermée du temps (PRNG basée sur une graine uniquement, pas de boucles rAF, pas de Date.now). - Moteur de rendu : GSAP.
- Dépendances d'exécution externes : aucune (servies localement).
- Polices locales : assets/archivo-regular.ttf, assets/archivo-semibold.ttf.
Règles d'édition (du projet source)
- Conservez
data-composition-variablescomme un attribut entre guillemets simples avec du JSON simple". Ne l'enregistrez jamais via le panneau de conception de Studio. - Ne mettez pas
<canvas>dans le balisage statique ; créez-le à l'exécution. - Conservez chaque état visuel comme une fonction de t ; la sécurité de la recherche est ce qui rend le bloc rendable.