Radar
Un balayage rotatif sur une grille circulaire qui allume les points à son passage.
Réglages
Code
<div class="pt-radar"><b></b><i></i><i style="left:calc(50% + 0.0cqmin);top:calc(50% + -16.4cqmin);--a:0.000"></i><i style="left:calc(50% + -5.8cqmin);top:calc(50% + 15.1cqmin);--a:0.558"></i><i style="left:calc(50% + 9.0cqmin);top:calc(50% + 3.1cqmin);--a:0.302"></i><i style="left:calc(50% + -10.5cqmin);top:calc(50% + 17.2cqmin);--a:0.587"></i><i style="left:calc(50% + 17.4cqmin);top:calc(50% + 14.6cqmin);--a:0.361"></i><i style="left:calc(50% + 15.6cqmin);top:calc(50% + -23.8cqmin);--a:0.093"></i><i style="left:calc(50% + -38.7cqmin);top:calc(50% + 11.8cqmin);--a:0.703"></i><i style="left:calc(50% + -4.7cqmin);top:calc(50% + -11.9cqmin);--a:0.940"></i><i style="left:calc(50% + -12.1cqmin);top:calc(50% + -19.9cqmin);--a:0.913"></i><i style="left:calc(50% + 17.0cqmin);top:calc(50% + -27.5cqmin);--a:0.088"></i><i style="left:calc(50% + -8.5cqmin);top:calc(50% + -34.8cqmin);--a:0.962"></i><i style="left:calc(50% + 8.8cqmin);top:calc(50% + 11.2cqmin);--a:0.394"></i><i style="left:calc(50% + -10.6cqmin);top:calc(50% + 42.0cqmin);--a:0.539"></i><i style="left:calc(50% + 15.3cqmin);top:calc(50% + -39.9cqmin);--a:0.058"></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
Le radar colle à tout ce qui touche à la recherche, au suivi ou à l’analyse : l’écran d’attente d’une appli d’emploi, le hero d’une société de sécurité, le suivi d’une livraison ou la landing page d’un jeu de géolocalisation. Les points s’allument quand le faisceau les atteint, puis s’éteignent doucement. Un fond radar animé en CSS pur.
Placez votre message principal dans les anneaux plutôt que sur la partie la plus chargée du balayage. Le vert classique fait militaire ou rétro ; passé à la couleur de votre marque, il prend tout de suite un air de produit.