Radar
Ein rotierender Strahl über einem kreisförmigen Raster, der Punkte beim Überstreichen aufleuchten lässt.
Einstellungen
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 für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Hintergründe
Wofür du ihn nutzen kannst
Das Radar passt zu allem, was mit Suchen, Orten oder Scannen zu tun hat: dem Ladebildschirm einer Jobsuche-App, dem Hero einer Sicherheitsfirma, einer Sendungsverfolgung oder der Landingpage eines standortbasierten Spiels. Die Punkte glühen auf, wenn der Strahl sie erreicht, und verblassen dann langsam. Ein animierter Radar-Hintergrund in reinem CSS.
Setz deine Kernbotschaft in die Ringe, nicht auf den unruhigsten Teil des Strahls. Klassisches Grün wirkt militärisch oder retro, in deiner Markenfarbe sieht es sofort viel mehr nach Produkt aus.