Predictive Grid Morph
48 cases HTML en grille de 8 × 6 qui, dans un rayon de 120 px autour de la souris, s'écartent d'elle jusqu'à 15 px, grossissent jusqu'à × 1,3 et s'éclairent, puis reviennent en 0,4 s quand elle s'éloigne : une loupe en relief qui suit le pointeur sur la grille. CSS Grid et 1,8 Ko de JavaScript, sans canvas ; couleur seule si l'utilisateur réduit les animations. La grille réagit à la position de la souris, elle ne prédit pas sa trajectoire.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Liquid comprend 31 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La racine .fx-0417-root (300 px de haut au moins, fond #0a0a0f) contient .ai-grid-morph, une grille CSS de 8 colonnes et 6 rangées en 1fr, 4 px d'écart, 16 px de marge intérieure. Le script y crée les 48 cases .ai-grid-cell : fond indigo à 30 %, coins de 4 px. Sur un cadre de 640 × 300 px, une case mesure environ 72 × 41 px. Les cases étant de vrais éléments HTML, vous pouvez y écrire du texte, y mettre une image ou un motif, comme le font les exemples.
À chaque mousemove sur la grille, le script mesure la distance entre la souris et le centre de chaque case. Sous 120 px, il calcule une force de 1 (case sous la souris) à 0 (case à 120 px), puis écrit en style en ligne : un décalage dans la direction opposée à la souris (force × 15 px), un agrandissement (1 + force × 0,3) et un fond plus opaque (30 % + force × 50 %). Au-delà de 120 px, ou quand la souris quitte la grille (mouseleave), le style en ligne est retiré. Le retour, comme chaque changement, passe par la transition CSS de la case : transform .4s cubic-bezier(.23, 1, .32, 1), rapide au départ et qui se pose en douceur, et background .3s.
Le résultat se lit comme une loupe en relief : les cases proches se soulèvent et s'écartent pour dégager celle qui est visée. Le script ne garde aucune mémoire des positions précédentes : la forme de la déformation ne dépend que de l'endroit où se trouve la souris à l'instant. Aucune boucle d'animation ne tourne : rien ne se calcule tant que la souris ne bouge pas sur la grille (mesuré : 0 % de pixels changés au repos).
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, le script n'écrit plus ni décalage ni agrandissement, seulement la couleur, et la règle:hoverperd son zoom. Mesuré dans Chromium 151, Firefox 153 et WebKit 26 : aucune case ne bouge, celles sous la souris s'éclairent (12,5 % des pixels changent, contre 14,5 % avec le mouvement). - Clavier : les cases sont des
divsans rôle ni focus ; la grille ne réagit qu'à la souris. Si chaque case est une action (choisir un godet, un pad, un carreau), utilisez desbuttonet reproduisez l'éclairage au focus :.ai-grid-cell:focus-visible { background: rgba(99, 102, 241, .8) }. - Toucher : sans survol, un tap envoie un seul
mousemoveau point touché ; mesuré dans Chromium et WebKit en mode tactile, 21 à 22 cases restent transformées autour du point jusqu'au tap suivant, faute demouseleave. Prévoyez une sélection claire au tap si la grille sert à choisir. - Lecteurs d'écran : les 48 cases vides ne disent rien. Mettez le contenu de chaque case en texte, comme les initiales des légumes ou les noms d'instruments des exemples.
Compatibilité navigateur
CSS Grid, transitions et 1,8 Ko de JavaScript, aucune dépendance, aucun canvas. Mesuré dans Chromium 151, Firefox 153 et WebKit 26 : même rayon, mêmes écarts, même retour à la sortie de la souris, couleur seule sous mouvement réduit. Le script interroge la position des 48 cases (getBoundingClientRect) à chaque mouvement de souris : sans effet sensible à 48 cases, à surveiller au-delà de quelques centaines.
Sans JavaScript, aucune case n'est créée : la racine reste un cadre sombre vide. Si la grille porte du contenu, écrivez les cases dans le HTML et retirez la boucle qui les crée ; le script les trouvera par leur classe.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0417-root">
<div class="ai-grid-morph">
<!-- 48 × <div class="ai-grid-cell"></div> créées par le script -->
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Taille de la grille (JS — i < 48 ; CSS — repeat(8, 1fr) / repeat(6, 1fr)) |
8 × 6 = 48 cases | Pour 12 × 8, mettez 96 dans la boucle et repeat(12, 1fr) / repeat(8, 1fr) dans la grille. Le nombre de cases doit égaler colonnes × rangées. |
Rayon d'action (JS — const maxDist = 120) |
120 px | 80 px pour une loupe serrée qui ne touche que les voisines directes, 200 px pour une vague large. |
Écart (JS — force * 15, deux fois) |
jusqu'à 15 px | 0 : les cases grossissent sur place sans s'écarter ; 25 : un effet de souffle. |
Agrandissement (JS — force * 0.3) |
jusqu'à × 1,3 | 0,1 pour un relief discret, 0,5 pour une loupe franche. Pensez à l'écart : sans lui, les cases agrandies se chevauchent. |
Couleur (JS — rgba(99, 102, 241, …) ; CSS — .ai-grid-cell) |
indigo, de 30 à 80 % d'opacité | Changez les trois premiers nombres dans le script et dans les deux règles CSS. Pour une couleur par case, lisez-la sur la case (cell.dataset.rgb), comme dans les deux premiers exemples. |
Fluidité (CSS — transition: transform .4s cubic-bezier(.23, 1, .32, 1)) |
0,4 s, départ vif et arrivée douce | 0,2 s colle au geste, 0,8 s laisse une traîne derrière la souris. |
FAQ
mx + (mx - prevX) * 4 au lieu de mx (et de même pour my) ; la loupe se place alors devant la souris dans le sens du mouvement.pointermove à la place de mousemove, ajoutez touch-action: none sur la grille et pointerleave pour le retour ; la page ne défilera plus quand le doigt glisse sur la grille.
