HTML + CSSArrière-plans
Grille de points en onde
Une grille de points qui s’allument tour à tour quand l’onde partie du centre les atteint.
Réglages
1x
1x
1
Code
<div class="pt-dots"><i style="--r:12.3"></i><i style="--r:11.5"></i><i style="--r:10.7"></i><i style="--r:9.9"></i><i style="--r:9.2"></i><i style="--r:8.5"></i><i style="--r:7.9"></i><i style="--r:7.4"></i><i style="--r:7.0"></i><i style="--r:6.7"></i><i style="--r:6.5"></i><i style="--r:6.5"></i><i style="--r:6.7"></i><i style="--r:7.0"></i><i style="--r:7.4"></i><i style="--r:7.9"></i><i style="--r:8.5"></i><i style="--r:9.2"></i><i style="--r:9.9"></i><i style="--r:10.7"></i><i style="--r:11.5"></i><i style="--r:12.3"></i><i style="--r:11.9"></i><i style="--r:11.0"></i><i style="--r:10.1"></i><i style="--r:9.3"></i><i style="--r:8.5"></i><i style="--r:7.8"></i><i style="--r:7.1"></i><i style="--r:6.5"></i><i style="--r:6.0"></i><i style="--r:5.7"></i><i style="--r:5.5"></i><i style="--r:5.5"></i><i style="--r:5.7"></i><i style="--r:6.0"></i><i style="--r:6.5"></i><i style="--r:7.1"></i><i style="--r:7.8"></i><i style="--r:8.5"></i><i style="--r:9.3"></i><i style="--r:10.1"></i><i style="--r:11.0"></i><i style="--r:11.9"></i><i style="--r:11.4"></i><i style="--r:10.5"></i><i style="--r:9.6"></i><i style="--r:8.7"></i><i style="--r:7.9"></i><i style="--r:7.1"></i><i style="--r:6.4"></i><i style="--r:5.7"></i><i style="--r:5.1"></i><i style="--r:4.7"></i><i style="--r:4.5"></i><i style="--r:4.5"></i><i style="--r:4.7"></i><i style="--r:5.1"></i><i style="--r:5.7"></i><i style="--r:6.4"></i><i style="--r:7.1"></i><i style="--r:7.9"></i><i style="--r:8.7"></i><i style="--r:9.6"></i><i style="--r:10.5"></i><i style="--r:11.4"></i><i style="--r:11.1"></i><i style="--r:10.1"></i><i style="--r:9.2"></i><i style="--r:8.3"></i><i style="--r:7.4"></i><i style="--r:6.5"></i><i style="--r:5.7"></i><i style="--r:4.9"></i><i style="--r:4.3"></i><i style="--r:3.8"></i><i style="--r:3.5"></i><i style="--r:3.5"></i><i style="--r:3.8"></i><i style="--r:4.3"></i><i style="--r:4.9"></i><i style="--r:5.7"></i><i style="--r:6.5"></i><i style="--r:7.4"></i><i style="--r:8.3"></i><i style="--r:9.2"></i><i style="--r:10.1"></i><i style="--r:11.1"></i><i style="--r:10.8"></i><i style="--r:9.8"></i><i style="--r:8.9"></i><i style="--r:7.9"></i><i style="--r:7.0"></i><i style="--r:6.0"></i><i style="--r:5.1"></i><i style="--r:4.3"></i><i style="--r:3.5"></i><i style="--r:2.9"></i><i style="--r:2.5"></i><i style="--r:2.5"></i><i style="--r:2.9"></i><i style="--r:3.5"></i><i style="--r:4.3"></i><i style="--r:5.1"></i><i style="--r:6.0"></i><i style="--r:7.0"></i><i style="--r:7.9"></i><i style="--r:8.9"></i><i style="--r:9.8"></i><i style="--r:10.8"></i><i style="--r:10.6"></i><i style="--r:9.6"></i><i style="--r:8.6"></i><i style="--r:7.6"></i><i style="--r:6.7"></i><i style="--r:5.7"></i><i style="--r:4.7"></i><i style="--r:3.8"></i><i style="--r:2.9"></i><i style="--r:2.1"></i><i style="--r:1.6"></i><i style="--r:1.6"></i><i style="--r:2.1"></i><i style="--r:2.9"></i><i style="--r:3.8"></i><i style="--r:4.7"></i><i style="--r:5.7"></i><i style="--r:6.7"></i><i style="--r:7.6"></i><i style="--r:8.6"></i><i style="--r:9.6"></i><i style="--r:10.6"></i><i style="--r:10.5"></i><i style="--r:9.5"></i><i style="--r:8.5"></i><i style="--r:7.5"></i><i style="--r:6.5"></i><i style="--r:5.5"></i><i style="--r:4.5"></i><i style="--r:3.5"></i><i style="--r:2.5"></i><i style="--r:1.6"></i><i style="--r:0.7"></i><i style="--r:0.7"></i><i style="--r:1.6"></i><i style="--r:2.5"></i><i style="--r:3.5"></i><i style="--r:4.5"></i><i style="--r:5.5"></i><i style="--r:6.5"></i><i style="--r:7.5"></i><i style="--r:8.5"></i><i style="--r:9.5"></i><i style="--r:10.5"></i><i style="--r:10.5"></i><i style="--r:9.5"></i><i style="--r:8.5"></i><i style="--r:7.5"></i><i style="--r:6.5"></i><i style="--r:5.5"></i><i style="--r:4.5"></i><i style="--r:3.5"></i><i style="--r:2.5"></i><i style="--r:1.6"></i><i style="--r:0.7"></i><i style="--r:0.7"></i><i style="--r:1.6"></i><i style="--r:2.5"></i><i style="--r:3.5"></i><i style="--r:4.5"></i><i style="--r:5.5"></i><i style="--r:6.5"></i><i style="--r:7.5"></i><i style="--r:8.5"></i><i style="--r:9.5"></i><i style="--r:10.5"></i><i style="--r:10.6"></i><i style="--r:9.6"></i><i style="--r:8.6"></i><i style="--r:7.6"></i><i style="--r:6.7"></i><i style="--r:5.7"></i><i style="--r:4.7"></i><i style="--r:3.8"></i><i style="--r:2.9"></i><i style="--r:2.1"></i><i style="--r:1.6"></i><i style="--r:1.6"></i><i style="--r:2.1"></i><i style="--r:2.9"></i><i style="--r:3.8"></i><i style="--r:4.7"></i><i style="--r:5.7"></i><i style="--r:6.7"></i><i style="--r:7.6"></i><i style="--r:8.6"></i><i style="--r:9.6"></i><i style="--r:10.6"></i><i style="--r:10.8"></i><i style="--r:9.8"></i><i style="--r:8.9"></i><i style="--r:7.9"></i><i style="--r:7.0"></i><i style="--r:6.0"></i><i style="--r:5.1"></i><i style="--r:4.3"></i><i style="--r:3.5"></i><i style="--r:2.9"></i><i style="--r:2.5"></i><i style="--r:2.5"></i><i style="--r:2.9"></i><i style="--r:3.5"></i><i style="--r:4.3"></i><i style="--r:5.1"></i><i style="--r:6.0"></i><i style="--r:7.0"></i><i style="--r:7.9"></i><i style="--r:8.9"></i><i style="--r:9.8"></i><i style="--r:10.8"></i><i style="--r:11.1"></i><i style="--r:10.1"></i><i style="--r:9.2"></i><i style="--r:8.3"></i><i style="--r:7.4"></i><i style="--r:6.5"></i><i style="--r:5.7"></i><i style="--r:4.9"></i><i style="--r:4.3"></i><i style="--r:3.8"></i><i style="--r:3.5"></i><i style="--r:3.5"></i><i style="--r:3.8"></i><i style="--r:4.3"></i><i style="--r:4.9"></i><i style="--r:5.7"></i><i style="--r:6.5"></i><i style="--r:7.4"></i><i style="--r:8.3"></i><i style="--r:9.2"></i><i style="--r:10.1"></i><i style="--r:11.1"></i><i style="--r:11.4"></i><i style="--r:10.5"></i><i style="--r:9.6"></i><i style="--r:8.7"></i><i style="--r:7.9"></i><i style="--r:7.1"></i><i style="--r:6.4"></i><i style="--r:5.7"></i><i style="--r:5.1"></i><i style="--r:4.7"></i><i style="--r:4.5"></i><i style="--r:4.5"></i><i style="--r:4.7"></i><i style="--r:5.1"></i><i style="--r:5.7"></i><i style="--r:6.4"></i><i style="--r:7.1"></i><i style="--r:7.9"></i><i style="--r:8.7"></i><i style="--r:9.6"></i><i style="--r:10.5"></i><i style="--r:11.4"></i><i style="--r:11.9"></i><i style="--r:11.0"></i><i style="--r:10.1"></i><i style="--r:9.3"></i><i style="--r:8.5"></i><i style="--r:7.8"></i><i style="--r:7.1"></i><i style="--r:6.5"></i><i style="--r:6.0"></i><i style="--r:5.7"></i><i style="--r:5.5"></i><i style="--r:5.5"></i><i style="--r:5.7"></i><i style="--r:6.0"></i><i style="--r:6.5"></i><i style="--r:7.1"></i><i style="--r:7.8"></i><i style="--r:8.5"></i><i style="--r:9.3"></i><i style="--r:10.1"></i><i style="--r:11.0"></i><i style="--r:11.9"></i><i style="--r:12.3"></i><i style="--r:11.5"></i><i style="--r:10.7"></i><i style="--r:9.9"></i><i style="--r:9.2"></i><i style="--r:8.5"></i><i style="--r:7.9"></i><i style="--r:7.4"></i><i style="--r:7.0"></i><i style="--r:6.7"></i><i style="--r:6.5"></i><i style="--r:6.5"></i><i style="--r:6.7"></i><i style="--r:7.0"></i><i style="--r:7.4"></i><i style="--r:7.9"></i><i style="--r:8.5"></i><i style="--r:9.2"></i><i style="--r:9.9"></i><i style="--r:10.7"></i><i style="--r:11.5"></i><i style="--r:12.3"></i></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Arrière-plans
Où l’utiliser
Une grille de points animée a un côté technique mais sympathique. Elle convient bien au hero d’un outil pour développeurs, à la landing page d’un logiciel d’analyse ou à une page « bientôt disponible » avant un lancement. L’onde part toujours du centre et attire le regard à cet endroit. Un fond à motif de points animé, en CSS uniquement.
Placez votre logo ou votre titre au centre et laissez l’onde faire office de cadre. Si l’ensemble paraît trop chargé sur un grand écran, réduisez d’abord la densité ou l’opacité, avant de toucher aux couleurs.