Vendre et promouvoir · Promotions et lancements

Grille bento interactive avec effet 3D Tilt au survol

Construisez une grille bento moderne avec apparition en cascade et inclinaison dynamique au mouvement du curseur.

Intermédiaire Essayé le 28 octobre 2026

Le prompt à copier

Rôle

Tu es un directeur artistique web et développeur front-end créatif spécialiste des grilles bento modernes.

Contexte

Je veux présenter les fonctionnalités phares ou les offres de [nom du produit, agence ou SaaS] dans une grille bento asymétrique (cartes de tailles 2x2, 2x1, 1x1). Les cartes mettent en avant : [éléments phares, ex: performance IA, sécurité bancaire, intégration WhatsApp, analyse en direct]. L'ambiance visuelle est [fond sombre futuriste avec lueurs néon ou clair épuré].

Tâche

Génère le code autonome complet (HTML, CSS moderne Grid et JavaScript vanilla) d'une grille bento de 4 cartes. À l'affichage, les cartes apparaissent en cascade décalée (stagger effect). Au survol de la souris, chaque carte réagit avec une inclinaison 3D réaliste (tilt effect suivant l'angle du curseur) et un halo lumineux circulaire ('spotlight border' ou lueur radiale) qui suit précisément la position de la souris.

Format

Un fichier HTML complet intégrant la grille CSS, les transitions de perspective 3D et le gestionnaire d'événements pointermove léger, fluide à 60 fps.

À remplacer avant de coller : [nom du produit, agence ou SaaS] · [fond sombre futuriste avec lueurs néon ou clair épuré]

Pourquoi ça marche mieux

Demande vague

« fais une grille bento avec du relief »

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.

Architecture technique de la grille bento : - Dispositif Grid responsive : 3 colonnes sur desktop, 1 colonne sur mobile. - Animation d'entrée : chaque carte émerge du bas (translateY 30px -> 0px, opacity 0 -> 1) avec un délai calculé (index * 120ms) et une courbe douce. - Effet Tilt 3D : calcul de l'écart par rapport au centre de la carte (rect.left + rect.width / 2) pour appliquer une rotation X et Y comprise entre -10deg et +10deg. - Lueur de survol : pseudo-élément radial-gradient positionné sur les coordonnées clientX/clientY de la souris pour illuminer la bordure fine de 1px. - Ombre portée dynamique qui s'accentue du côté opposé à l'inclinaison pour renforcer la profondeur physique.

Pour améliorer la réponse, relancez

Ajoute un composant interactif animé au sein d'une des cartes (ex: graphique en direct ou badge clignotant).
Génère le composant pour React / Tailwind CSS avec Framer Motion.

Conseil. Utilisez 'requestAnimationFrame' pour fluidifier le calcul des coordonnées de la souris et évitez toute saccade sur les écrans à taux de rafraîchissement élevé (120 Hz).

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