szeproka/hyperframes-registry

Une surface titrée en tuiles retourne cellule par cellule sous un champ de profondeur balayant pour révéler le titre arrière. Bloc HyperFrames, 1920×1080, 8s, 18 variables.

Qu'est-ce que hyperframes-registry ?

Cette compétence implémente un effet visuel avancé pour les blocs HyperFrames, où une surface composée de tuiles carrées affiche un titre principal. Un curseur imaginaire traverse la surface et, grâce à un champ gaussien de profondeur, soulève et incline les tuiles à proximité. Seules les cellules qui intersectent la silhouette du titre se retournent pour révéler un titre secondaire au verso. L'ensemble du rendu est réalisé via un unique dessin WebGL 2 instancié, utilisant une paire de textures avant/arrière partagée et un passage d'ombres projetées en lot. Chaque paramètre – taille des tuiles, police, durée de balayage, force d'assouplissement, rayon du curseur, profondeur, rebond, ombres – est exposé comme variable modifiable. Le bloc est conçu pour être seek-safe : chaque image est une fonction fermée du temps, sans boucle rAF, et se resynchronise via l'événement `hf-seek`. La compétence s'installe avec `npx hyperframes add code-slice-hero` et est compatible avec les environnements HyperFrames. La durée est de 8 secondes à 30 ips en résolution 1920×1080.

Compatible avec~Claude Code~Codex CLI✓Cursor

npx skills add https://github.com/szeproka/hyperframes-registry/tree/HEAD/registry/blocks/code-slice-hero

Documentation

Code Slice Hero

Une surface pleine de tuiles carrées porte un titre continu. Un curseur imaginaire traverse la surface ; les tuiles proches répondent à son champ gaussien de profondeur en se soulevant et en s'inclinant, et seules les cellules qui intersectent la silhouette de l'un ou l'autre titre se retournent pour révéler le titre arrière. La grille entière est un unique dessin WebGL 2 instancié avec une paire de textures avant/arrière partagée, plus un passage d'ombres projetées en lots. La copie, la taille de la police et la taille des cellules carrées sont indépendantes, donc les tuiles ne s'étirent jamais. La direction du balayage, la force d'assouplissement, le rayon du curseur, la chute, 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

Installez avec npx hyperframes add code-slice-hero ; par défaut les fichiers ci-dessus atterrissent sous compositions/code-slice-hero/. Montez ensuite le bloc depuis le 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>

Rendez 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":"MAKE IT","reverseHeadline":"MATTER."}'

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	défaut	libellé / plage
`headline`	string	`"MAKE IT"`	Copie · Titre avant max 32 caractères
`reverseHeadline`	string	`"MATTER."`	Copie · Titre arrière max 32 caractères
`direction`	enum	`"left-to-right"`	Mouvement · Direction du balayage (left-to-right
`sweepDuration`	number	`4.2`	Mouvement · Durée du balayage 2.6–4.5 pas 0.05
`sweepEaseStrength`	number	`3`	Mouvement · Force d'assouplissement 0–3 pas 0.05
`flipDuration`	number	`0.75`	Mouvement · Retournement de chaque tuile 0.65–1.65 pas 0.05
`cursorRadius`	number	`210`	Curseur · Rayon d'influence 160–480 pas 10
`cursorFalloff`	number	`1.4`	Curseur · Chute d'influence 0.4–3.5 pas 0.05
`cursorDepth`	number	`80`	Curseur · Profondeur (+ vers la caméra) -320–320 pas 10
`tiltStrength`	number	`55`	Curseur · Force de traction/inclinaison 0–55 pas 1
`noiseStrength`	number	`2`	Mouvement · Variation organique 0–2 pas 0.05
`flipBounce`	number	`0.15`	Mouvement · Rebond élastique du retournement 0–0.8 pas 0.05
`cellSize`	number	`112`	Tranches · Taille de cellule carrée 24–120 pas 4
`formationScale`	number	`1`	Tranches · Échelle locale de formation 0.94–1 pas 0.001
`fontSize`	number	`310`	Typographie · Taille maximale 160–480 pas 5
`behindColor`	couleur	`"#212121"`	Surface · Fond derrière la tuile
`shadowStrength`	number	`0.19`	Surface · Force de l'ombre portée 0–0.65 pas 0.01
`shadowSoftness`	number	`4`	Surface · Douceur de l'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 (du projet source)

Conservez data-composition-variables comme un attribut entre guillemets simples avec du JSON en ". 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 recherche est ce qui rend le bloc rendable.