Motion design et vidéo · Typographie cinétique et showreels

Bandeau défilant infini Marquee à inertie physique (Master Prompt Ticker)

Le prompt d'ingénierie complet pour concevoir un bandeau défilant infini sans accroc avec accélération GPU pure, dégradés d'extrémités et inertie au survol.

Débutant Essayé le 28 octobre 2026

Master Prompt d’ingénierie Motion Design

Prompt Master Motion Design (Architecture complète)

Prêt à copier dans Claude 3.7 Sonnet, Cursor ou votre environnement de code

<inputs>Paramètres d’entrée requis

Demande-moi d'abord : la liste des éléments à faire défiler (mots manifestes séparés par des puces, logos de partenaires ou citations clés) [contenu du bandeau], la palette de couleurs (fond sombre ou clair, texte contrasté, bordures fines de 1px), l'angle d'inclinaison souhaité (-2° pour effet ruban dynamique ou 0° droit), et la vitesse de défilement (défaut 20 secondes par cycle).

</inputs>

<direction>Direction artistique & Règles visuelles

Bandeau défilant infini (Marquee) de classe internationale pour sites d'agences et portfolios d'élite (Awwwards, Studio Freight). Le ruban tourne avec une fluidité absolue à 60fps sans aucun micro-saut visuel lors de la réinitialisation de la boucle. Deux masques de dégradé progressifs aux extrémités gauche et droite estompent le texte pour éviter toute coupure nette sur les bords de l'écran. Au survol du curseur, le bandeau ne s'arrête pas brutalement comme un interrupteur : il décélère avec inertie physique vers une vitesse ralentie, puis réaccélère doucement lorsque le curseur quitte la zone. Strictement banni : utilisation de la balise obsolète <marquee>, saccades de frame dues à des calculs de mise en page CPU, et sauts visibles lors du bouclage.

</direction>

<structure>Chronologie & Grille rythmique (BPM)

Fonctionnement cinématique continu : - Défilement continu : deux conteneurs frères rigoureusement identiques alignés côte à côte, animés en parallèle par @keyframes translate3d(0, 0, 0) vers translate3d(-100%, 0, 0). - Vitesse nominale : 1 cycle complet de 100% franchi en 22 secondes (lecture confortable). - Gestion de l'inertie au survol : transition vers un coefficient de vitesse réduit (vitesse x0.25) avec une courbe d'amortissement doux (ease-out de 600ms). - Masquage linéaire : mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent) appliqué sur le wrapper conteneur.

</structure>

<build>Spécifications techniques & Pipeline de code

1. Un fichier HTML/CSS pur optimisé GPU. Déplacement géré exclusivement par transform: translate3d() pour éviter tout redessin (repaint) du DOM. 2. Structure Flexbox robuste garantissant un espacement régulier des éléments quel que soit le nombre d'items. 3. Rendu 60fps Playwright pour intégration vidéo ou composant web interactif.

</build>

<gotchas>Pièges techniques & Erreurs à éviter

Assurez-vous que la largeur combinée des éléments du premier conteneur soit au moins égale ou supérieure à la largeur de la fenêtre du navigateur : si le texte est trop court, dupliquez les items 3 ou 4 fois dans chaque bloc pour éviter un trou vide pendant la boucle.

</gotchas>

<start>Consigne d’amorçage & Démarrage

Demande-moi d'abord mes mots ou logos (<inputs>), puis calibre la vitesse et l'angle avant de livrer le code.

</start>

À remplacer avant de coller : [contenu du bandeau]

Pourquoi ça marche mieux

Demande vague

« mets une bande de texte qui défile comme à la télé »

L’IA doit deviner : réponse générale, ou questions en retour.

Avec R.C.T.F.

Rôle, contexte, tâche et format sont précisés : la réponse est utilisable presque telle quelle.

Exemple de résultat

Réponse obtenue avec Claude, Cursor, le 28 octobre 2026. Votre résultat sera différent : l’IA ne répond jamais deux fois pareil.

Structure technique du bandeau infini : - Deux conteneurs flexibles identiques alignés côte à côte à l'intérieur d'un wrapper à 'overflow: hidden'. - Animation CSS @keyframes : déplacement de 0% à -100% de la largeur du bloc. - Durée du cycle complet : 22 secondes (vitesse de lecture agréable). - Au survol (:hover) : 'animation-play-state: paused' ou transition vers une vitesse ralentie (45 secondes) avec fondu d'accélération. - Masque de fondu progressif aux extrémités gauche et droite grâce à un dégradé 'mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent)' pour éviter que le texte ne se coupe sèchement sur les bords de l'écran.

Pour améliorer la réponse, relancez

Crée une version à double bandeau croisé (l'un allant vers la gauche, l'autre vers la droite).
Remplace le texte par des logos de partenaires monochromes avec inversion de couleur au survol.

Conseil. N'utilisez jamais la vieille balise HTML obsolète <marquee> : utilisez toujours une structure flexbox CSS animée par transform, qui s'exécute directement sur la carte graphique sans surcharger le processeur.

Essayé avec

Apprendre à écrire vos propres prompts

La formation gratuite « L’IA pour entrepreneurs » vous apprend la méthode R.C.T.F. en vidéo, avec des exercices et un quiz.

Suivre la formation gratuite