Bild, das stufenweise schärfer lädt
Eine Landschaft erscheint erst in groben Pixeln, dann in feineren und zuletzt scharf, wie ein Foto bei langsamer Verbindung.
Einstellungen
Code
<div class="uvq10-pix" role="status"><span class="sr">Bild wird geladen</span><div class="im" aria-hidden="true"><svg class="px l0" viewBox="0 0 6 4" preserveAspectRatio="none" aria-hidden="true"><rect x="0" y="0" width="1.02" height="1.02" class="p0"/><rect x="1" y="0" width="1.02" height="1.02" class="p0"/><rect x="2" y="0" width="1.02" height="1.02" class="p0"/><rect x="3" y="0" width="1.02" height="1.02" class="p0"/><rect x="4" y="0" width="1.02" height="1.02" class="p1"/><rect x="5" y="0" width="1.02" height="1.02" class="p0"/><rect x="0" y="1" width="1.02" height="1.02" class="p2"/><rect x="1" y="1" width="1.02" height="1.02" class="p3"/><rect x="2" y="1" width="1.02" height="1.02" class="p4"/><rect x="3" y="1" width="1.02" height="1.02" class="p4"/><rect x="4" y="1" width="1.02" height="1.02" class="p5"/><rect x="5" y="1" width="1.02" height="1.02" class="p2"/><rect x="0" y="2" width="1.02" height="1.02" class="p6"/><rect x="1" y="2" width="1.02" height="1.02" class="p6"/><rect x="2" y="2" width="1.02" height="1.02" class="p6"/><rect x="3" y="2" width="1.02" height="1.02" class="p6"/><rect x="4" y="2" width="1.02" height="1.02" class="p6"/><rect x="5" y="2" width="1.02" height="1.02" class="p6"/><rect x="0" y="3" width="1.02" height="1.02" class="p7"/><rect x="1" y="3" width="1.02" height="1.02" class="p7"/><rect x="2" y="3" width="1.02" height="1.02" class="p7"/><rect x="3" y="3" width="1.02" height="1.02" class="p7"/><rect x="4" y="3" width="1.02" height="1.02" class="p7"/><rect x="5" y="3" width="1.02" height="1.02" class="p7"/></svg><svg class="px l1" viewBox="0 0 12 8" preserveAspectRatio="none" aria-hidden="true"><rect x="0" y="0" width="1.02" height="1.02" class="p0"/><rect x="1" y="0" width="1.02" height="1.02" class="p0"/><rect x="2" y="0" width="1.02" height="1.02" class="p0"/><rect x="3" y="0" width="1.02" height="1.02" class="p0"/><rect x="4" y="0" width="1.02" height="1.02" class="p0"/><rect x="5" y="0" width="1.02" height="1.02" class="p0"/><rect x="6" y="0" width="1.02" height="1.02" class="p0"/><rect x="7" y="0" width="1.02" height="1.02" class="p0"/><rect x="8" y="0" width="1.02" height="1.02" class="p0"/><rect x="9" y="0" width="1.02" height="1.02" class="p0"/><rect x="10" y="0" width="1.02" height="1.02" class="p0"/><rect x="11" y="0" width="1.02" height="1.02" class="p0"/><rect x="0" y="1" width="1.02" height="1.02" class="p8"/><rect x="1" y="1" width="1.02" height="1.02" class="p8"/><rect x="2" y="1" width="1.02" height="1.02" class="p8"/><rect x="3" y="1" width="1.02" height="1.02" class="p8"/><rect x="4" y="1" width="1.02" height="1.02" class="p8"/><rect x="5" y="1" width="1.02" height="1.02" class="p8"/><rect x="6" y="1" width="1.02" height="1.02" class="p8"/><rect x="7" y="1" width="1.02" height="1.02" class="p3"/><rect x="8" y="1" width="1.02" height="1.02" class="p5"/><rect x="9" y="1" width="1.02" height="1.02" class="p3"/><rect x="10" y="1" width="1.02" height="1.02" class="p8"/><rect x="11" y="1" width="1.02" height="1.02" class="p8"/><rect x="0" y="2" width="1.02" height="1.02" class="p3"/><rect x="1" y="2" width="1.02" height="1.02" class="p3"/><rect x="2" y="2" width="1.02" height="1.02" class="p3"/><rect x="3" y="2" width="1.02" height="1.02" class="p3"/><rect x="4" y="2" width="1.02" height="1.02" class="p3"/><rect x="5" y="2" width="1.02" height="1.02" class="p3"/><rect x="6" y="2" width="1.02" height="1.02" class="p3"/><rect x="7" y="2" width="1.02" height="1.02" class="p5"/><rect x="8" y="2" width="1.02" height="1.02" class="p9"/><rect x="9" y="2" width="1.02" height="1.02" class="p5"/><rect x="10" y="2" width="1.02" height="1.02" class="p3"/><rect x="11" y="2" width="1.02" height="1.02" class="p3"/><rect x="0" y="3" width="1.02" height="1.02" class="p10"/><rect x="1" y="3" width="1.02" height="1.02" class="p11"/><rect x="2" y="3" width="1.02" height="1.02" class="p4"/><rect x="3" y="3" width="1.02" height="1.02" class="p10"/><rect x="4" y="3" width="1.02" height="1.02" class="p4"/><rect x="5" y="3" width="1.02" height="1.02" class="p12"/><rect x="6" y="3" width="1.02" height="1.02" class="p12"/><rect x="7" y="3" width="1.02" height="1.02" class="p4"/><rect x="8" y="3" width="1.02" height="1.02" class="p5"/><rect x="9" y="3" width="1.02" height="1.02" class="p4"/><rect x="10" y="3" width="1.02" height="1.02" class="p13"/><rect x="11" y="3" width="1.02" height="1.02" class="p2"/><rect x="0" y="4" width="1.02" height="1.02" class="p14"/><rect x="1" y="4" width="1.02" height="1.02" class="p6"/><rect x="2" y="4" width="1.02" height="1.02" class="p6"/><rect x="3" y="4" width="1.02" height="1.02" class="p12"/><rect x="4" y="4" width="1.02" height="1.02" class="p6"/><rect x="5" y="4" width="1.02" height="1.02" class="p6"/><rect x="6" y="4" width="1.02" height="1.02" class="p6"/><rect x="7" y="4" width="1.02" height="1.02" class="p6"/><rect x="8" y="4" width="1.02" height="1.02" class="p6"/><rect x="9" y="4" width="1.02" height="1.02" class="p6"/><rect x="10" y="4" width="1.02" height="1.02" class="p6"/><rect x="11" y="4" width="1.02" height="1.02" class="p6"/><rect x="0" y="5" width="1.02" height="1.02" class="p6"/><rect x="1" y="5" width="1.02" height="1.02" class="p6"/><rect x="2" y="5" width="1.02" height="1.02" class="p15"/><rect x="3" y="5" width="1.02" height="1.02" class="p16"/><rect x="4" y="5" width="1.02" height="1.02" class="p6"/><rect x="5" y="5" width="1.02" height="1.02" class="p6"/><rect x="6" y="5" width="1.02" height="1.02" class="p6"/><rect x="7" y="5" width="1.02" height="1.02" class="p6"/><rect x="8" y="5" width="1.02" height="1.02" class="p16"/><rect x="9" y="5" width="1.02" height="1.02" class="p16"/><rect x="10" y="5" width="1.02" height="1.02" class="p6"/><rect x="11" y="5" width="1.02" height="1.02" class="p6"/><rect x="0" y="6" width="1.02" height="1.02" class="p7"/><rect x="1" y="6" width="1.02" height="1.02" class="p7"/><rect x="2" y="6" width="1.02" height="1.02" class="p7"/><rect x="3" y="6" width="1.02" height="1.02" class="p7"/><rect x="4" y="6" width="1.02" height="1.02" class="p7"/><rect x="5" y="6" width="1.02" height="1.02" class="p15"/><rect x="6" y="6" width="1.02" height="1.02" class="p7"/><rect x="7" y="6" width="1.02" height="1.02" class="p7"/><rect x="8" y="6" width="1.02" height="1.02" class="p7"/><rect x="9" y="6" width="1.02" height="1.02" class="p7"/><rect x="10" y="6" width="1.02" height="1.02" class="p7"/><rect x="11" y="6" width="1.02" height="1.02" class="p7"/><rect x="0" y="7" width="1.02" height="1.02" class="p7"/><rect x="1" y="7" width="1.02" height="1.02" class="p7"/><rect x="2" y="7" width="1.02" height="1.02" class="p7"/><rect x="3" y="7" width="1.02" height="1.02" class="p7"/><rect x="4" y="7" width="1.02" height="1.02" class="p7"/><rect x="5" y="7" width="1.02" height="1.02" class="p7"/><rect x="6" y="7" width="1.02" height="1.02" class="p7"/><rect x="7" y="7" width="1.02" height="1.02" class="p7"/><rect x="8" y="7" width="1.02" height="1.02" class="p7"/><rect x="9" y="7" width="1.02" height="1.02" class="p7"/><rect x="10" y="7" width="1.02" height="1.02" class="p7"/><rect x="11" y="7" width="1.02" height="1.02" class="p7"/></svg><svg class="vc" viewBox="0 0 300 200" preserveAspectRatio="none" aria-hidden="true"><defs><linearGradient id="uvq10-pix-sky" x1="0" y1="0" x2="0" y2="1"><stop offset="0" class="s0"/><stop offset=".6" class="s1"/></linearGradient></defs><rect width="300" height="200" fill="url(#uvq10-pix-sky)"/><circle cx="210" cy="60" r="30" class="sun"/><polygon points="0,200 0,120 48,84 90,110 150,72 204,104 252,88 300,100 300,200" class="far"/><polygon points="0,200 0,156 66,130 138,160 222,134 300,148 300,200" class="near"/></svg><i class="pg"></i></div></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 Loader
Alle ansehen: LoaderWofür du ihn nutzen kannst
Eine Abendlandschaft, beim Build mit sechs mal vier und zwölf mal acht Pixeln abgetastet, wobei jedes Pixel ein echter Mittelwert der beiden Blockfarben ist. Danach folgt eine scharfe Vektorversion, die sich scharf stellt. Ein dünner Balken unter dem Bild zeigt jede Stufe an. Passt zu Galerien, Reiseseiten und bildlastigen Feeds.
Die Hauptfarbe wärmt Sonne und Horizont, die zweite bestimmt Himmel und Berge, so folgt die ganze Szene deiner Palette. Nutze sie als Platzhalter, wo gleich ein Foto oder eine Karte lädt.