Toutes les ressources premium et membres pour 8,99 €/mois, en abonnement sans engagement. Voir les offres

PalateKit

Se connecter
Menu

Demander une ressource

Décrivez en une phrase la ressource qui vous manque. Nous vous écrirons quand elle sera publiée.

0 / 280

Une page, une vidéo ou une image en ligne.

Débloquer PalateKit

Tout débloquer

Offre

Le paiement vaut acceptation de nos conditions générales de vente.

Paiement sécurisé par Stripe. Reçus et factures envoyés par e-mail.

Content de vous revoir

Connectez-vous pour installer, télécharger ou sauvegarder cette ressource. Un compte gratuit suffit pour les ressources gratuites.

Sélection PalateKit

Titre qui se retourne tuile par tuile v1.0.0

Utilisez cette ressource pour révéler un second titre par un effet de tuiles qui se retournent

Nouveau

  • 523 téléchargements
  • 189 mentions J'aime
  • 197 sauvegardes

4,49 €

Accès à vie à cette ressource, avec ses mises à jour.

Installer avec la CLI

Dans un terminal, depuis le dossier voulu :

npx --yes palatekit@latest install tile-flip-headline-reveal

Première fois : connectez la CLI avec

npx --yes palatekit@latest login

L'agent règle les deux titres, le sens du balayage, la taille des tuiles, la profondeur et les ombres. Seules les tuiles qui touchent les lettres se retournent, avec un léger rebond. Vous obtenez une séquence de 8 secondes, idéale pour une accroche de lancement ou de slogan.

Choisie surtout par

Mise à jour le 2 novembre 2026

Caractéristiques

Fonctionne dans
Guides d'installation
Génère avec
HyperFrames
Utilise
  • HyperFrames (npx hyperframes)
  • Node.js
Licence
Apache-2.0

Ressources similaires

Tout voir

Ce que vous obtenez

  • LISEZMOI.md : mode d'emploi du bloc, traduit en français
  • code-slice-hero.html, surface.js et shadows.js : la scène WebGL et ses 18 variables
  • assets/ : police Geist Bold, GSAP et leurs notices de licence
  • SKILL.md : tableau des variables et règles d'édition

Pour qui

  • Annoncer un slogan en deux temps (« MAKE IT » puis « MATTER. »)
  • Ouvrir une vidéo de lancement de produit ou de site
  • Créer un générique graphique pour une marque

Pas pour qui

  • Des titres de plus de 32 caractères
  • Un rendu sur une machine sans WebGL 2

Étiquettes

  • titre
  • tuiles
  • webgl
  • révélation

À propos

Vous dites

« Crée une accroche où le titre "AVANT" se retourne en "APRÈS" par tuiles, balayage de gauche à droite, fond gris très sombre. »

Grille de tuiles carrées sombres qui se retournent pour passer d'un titre à un autre.

Bloc publié par HeyGen (HyperFrames) sous licence Apache-2.0, traduit par PalateKit.

Voir plus

Prérequis

À préparer
Le titre de face et le titre de dos (32 caractères au plus chacun) et Une couleur de fond (facultatif)
Dépendances
HyperFrames (npx hyperframes) et Node.js

Comment l'utiliser

  1. Installez le bloc avec la commande npx hyperframes add code-slice-hero.
  2. Demandez à l'agent de choisir les variables : headline, reverseHeadline, direction, cellSize, behindColor.
  3. Lancez le rendu avec la commande de SKILL.md et vos variables au format JSON.

Aperçu du contenu

Fichiers

  • assets/Geist-Bold.ttf65 Ko
  • assets/Geist-OFL.txt4,3 Ko
  • assets/gsap-3.14.2.min.js128,2 Ko
  • assets/GSAP-NOTICE.txt0,1 Ko
  • code-slice-hero.html23,9 Ko
  • LICENSE10,5 Ko
  • LISEZMOI.md1,3 Ko
  • NOTICE-PALATEKIT.md0,5 Ko
  • registry-item.json1,9 Ko
  • shadows.js9,7 Ko
  • SKILL.md4,7 Ko
  • surface.js7,6 Ko

Origine et licence

Modifié par PalateKit

Auteur
HeyGen (HyperFrames)
Source
github.com/heygen-com/hyperframes/tree/2c3d1e07fe63d4a2d67d63a3e29d4ad73e291d8e/registry/blocks/code-slice-hero
Licence
Apache-2.0

Notice

Version modifiée de « Code Slice Hero » (HeyGen (HyperFrames), Apache-2.0) : traduction française et fiche par PalateKit.

Avis des utilisateurs

–

Aucune note pour l'instant

Chargement des avis…

Supprimer votre avis ?

Votre note et votre commentaire seront retirés de la fiche.

Questions fréquentes

Faut-il une connexion internet ?

Non. La police Geist, GSAP et les scripts sont livrés dans le dossier.

Quelles licences s'appliquent aux fichiers inclus ?

Le bloc est sous Apache-2.0, la police Geist sous licence OFL et GSAP sous sa licence Standard (voir assets/).