Titre Portail Fil de Fer
Des lettres fil de fer extrudées sont construites à partir de la police Geist incluse via un chargeur TTF et un offset de polygone, puis révélées à travers une explosion de portail dont le chaos est une variable. Un second temps fort échange les lettres en une phrase de remplacement avec un wrapping automatique des mots et une taille de police adaptative, décalé par une courbe d'easing réglable et un glitch de stabilisation, avec un brouillard de profondeur optionnel.
Identifiant de composition : wireframe-portal-title. Durée 8 s à 30 fps, 1920×1080.
Fichiers
wireframe-portal-title.html(63 Ko)assets/fonts/Geist-Bold.ttf(65 Ko)assets/fonts/Geist-Regular.ttf(65 Ko)assets/fonts/Geist-SemiBold.ttf(65 Ko)assets/fonts/Geist-OFL.txt(4 Ko)
Installation
Installez avec npx hyperframes add wireframe-portal-title ; par défaut, les fichiers ci-dessus se trouvent sous compositions/wireframe-portal-title/. Montez ensuite le bloc depuis le index.html hôte :
<div
data-composition-id="wireframe-portal-title"
data-composition-src="compositions/wireframe-portal-title/wireframe-portal-title.html"
data-start="0"
data-duration="8"
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/wireframe-portal-title/wireframe-portal-title.html' --variables '{"title":"PERCÉE","replacementPhrase":"C'est parti mon kiki !"}'
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 | default | label / plage |
|---|---|---|---|
title | chaine | "BREAKTHROUGH" | Titre max 18 caractères |
replacementPhrase | chaine | "Lets do this sir!" | Phrase de remplacement 3D (disposition automatique) |
phraseDuration | nombre | 1.85 | Durée de transition de la phrase (s) 0.65–2.9 pas 0.05 |
phraseEasing | nombre | 8 | Easing de transition (1 doux – 8 sec) 1–8 pas 0.25 |
settleGlitch | nombre | 0.2 | Force du glitch de stabilisation des lettres 0–4 pas 0.05 |
depthFog | booléen | true | Brouillard de profondeur (fondu précoce toujours actif) |
subtitle | chaine | "HYPERFRAMES PORTAL TITLE" | Sous-titre max 48 caractères |
accent | couleur | "#F5C518" | Accent |
burstChaos | nombre | 1 | Chaos d'explosion (0-2) 0–2 pas 0.01 |
Contrat d'exécution
- Une timeline GSAP mise en pause enregistrée sous
window.__timelines["wireframe-portal-title"]. - Se resynchronise sur le CustomEvent
hf-seek; chaque image est une fonction fermée du temps (PRNG ensemencé uniquement, pas de boucles rAF, pas de Date.now). - Moteur de rendu : three.js 0.181.2, GSAP 3.14.2, Canvas 2D, shaders GLSL, post-traitement, PRNG ensemencé, Clipper. Budget environ 350 Mo par instance en direct ; exécutez-en une à la fois.
- Dépendances d'exécution externes :
https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js,https://cdn.jsdelivr.net/npm/[email protected]/clipper.js,https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js,https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/. - Polices locales : assets/fonts/Geist-Regular.ttf, assets/fonts/Geist-SemiBold.ttf, assets/fonts/Geist-Bold.ttf.
Règles d'édition (du projet source)
- Gardez
data-composition-variablescomme un attribut entre guillemets simples avec du JSON"simple. Ne l'enregistrez jamais via le panneau Design de Studio. - Ne mettez pas
<canvas>dans le balisage statique ; créez-le à l'exécution. - Gardez chaque état visuel comme une fonction de t ; la sécurité de seek est ce qui rend le bloc rendable.