Hero en Tranche de Code
Une surface de tuiles carrées complètes porte un titre homogène. Un curseur imaginaire parcourt la surface ; les tuiles proches répondent à son champ de profondeur gaussien par une élévation et une inclinaison, et seules les cellules croisant la silhouette d'un titre se retournent pour révéler le titre arrière. L'ensemble de la grille est un seul appel WebGL 2 instancié avec une paire de textures avant/arrière partagée, plus un passage d'ombres projetées par lot. La copie, la taille du texte et la taille des cellules carrées sont indépendantes, de sorte que les tuiles ne s'étirent jamais. La direction de balayage, la force de l'easing, le rayon du curseur, le falloff, la profondeur, le rebond et l'ombre sont tous des variables.
Identifiant de composition : code-slice-hero. Durée 8 s à 30 ips, 1920×1080.
Fichiers
code-slice-hero.html(24 Ko)assets/Geist-Bold.ttf(65 Ko)assets/Geist-OFL.txt(4 Ko)assets/gsap-3.14.2.min.js(128 Ko)assets/GSAP-NOTICE.txt(1 Ko)shadows.js(10 Ko)surface.js(8 Ko)
Installation
Installer avec npx hyperframes add code-slice-hero ; par défaut, les fichiers ci-dessus se placent sous compositions/code-slice-hero/. Monter ensuite le bloc depuis l'index.html hôte :
<div
data-composition-id="code-slice-hero"
data-composition-src="compositions/code-slice-hero/code-slice-hero.html"
data-start="0"
data-duration="8"
data-track-index="1"
data-width="1920"
data-height="1080"
></div>
Rendre avec des valeurs personnalisées en ciblant directement le fichier de composition :
npx --yes [email protected] render 'compositions/code-slice-hero/code-slice-hero.html' --variables '{"headline":"FAITES-LE","reverseHeadline":"COMPTE."}'
Variables
Lues à l'exécution via window.__hyperframes.getVariables() ; déclarées sur la racine de la composition comme attribut data-composition-variables (attribut entre guillemets simples, JSON simple).
| id | type | défaut | étiquette / plage |
| ------------------- | ------ | ----------------- | ----------------------------------------------------- | -------------- |
| headline | chaîne | "FAITES-LE" | Copie · Titre avant max 32 caractères |
| reverseHeadline | chaîne | "COMPTE." | Copie · Titre arrière max 32 caractères |
| direction | enum | "left-to-right" | Mouvement · Direction de balayage (gauche-à-droite | droite-à-gauche) |
| sweepDuration | nombre | 4.2 | Mouvement · Durée du balayage 2.6–4.5 pas 0.05 |
| sweepEaseStrength | nombre | 3 | Mouvement · Force de l'easing de balayage 0–3 pas 0.05|
| flipDuration | nombre | 0.75 | Mouvement · Retournement de chaque tuile 0.65–1.65 pas 0.05 |
| cursorRadius | nombre | 210 | Curseur · Rayon d'influence 160–480 pas 10 |
| cursorFalloff | nombre | 1.4 | Curseur · Atténuation d'influence 0.4–3.5 pas 0.05 |
| cursorDepth | nombre | 80 | Curseur · Profondeur (+ vers la caméra) -320–320 pas 10 |
| tiltStrength | nombre | 55 | Curseur · Force de tirage / inclinaison 0–55 pas 1 |
| noiseStrength | nombre | 2 | Mouvement · Variation organique 0–2 pas 0.05 |
| flipBounce | nombre | 0.15 | Mouvement · Rebond élastique du retournement 0–0.8 pas 0.05 |
| cellSize | nombre | 112 | Tranches · Taille de cellule carrée 24–120 pas 4 |
| formationScale | nombre | 1 | Tranches · Échelle de formation locale 0.94–1 pas 0.001 |
| fontSize | nombre | 310 | Typographie · Taille maximale 160–480 pas 5 |
| behindColor | couleur| "#212121" | Surface · Fond derrière les tuiles |
| shadowStrength | nombre | 0.19 | Surface · Force d'ombre portée 0–0.65 pas 0.01 |
| shadowSoftness | nombre | 4 | Surface · Douceur d'ombre portée 0.5–4 pas 0.1 |
Contrat d'exécution
- Une timeline GSAP en pause enregistrée comme
window.__timelines["code-slice-hero"]. - Se resynchronise 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 : GSAP, Canvas 2D, PRNG ensemencé.
- Dépendances d'exécution externes : aucune (servies localement).
- Polices locales : assets/Geist-Bold.ttf.
Règles d'édition (issues du projet source)
- Conserver
data-composition-variablescomme attribut entre guillemets simples avec JSON"simple. Ne jamais l'enregistrer via le panneau de conception de Studio. - Ne pas placer
<canvas>dans le balisage statique ; le créer à l'exécution. - Conserver chaque état visuel comme une fonction de t ; la sécurité de recherche est ce qui rend le bloc rendable.