Glühwürmchen
Kleine Lichtpunkte schweben und blinken über dem Schimmer eines dunklen Waldes, ruhig und ein bisschen magisch.
Einstellungen
Code
<div class="pt-fireflies"><b></b><i style="left:0.0%;top:79.8%;--z:6.5;--t:11.1s;--dl:-2.6s"></i><i style="left:59.8%;top:99.0%;--z:4.0;--t:8.1s;--dl:-8.8s"></i><i style="left:5.4%;top:92.2%;--z:4.8;--t:11.8s;--dl:-1.7s"></i><i style="left:12.4%;top:23.0%;--z:3.6;--t:6.4s;--dl:-5.7s"></i><i style="left:76.7%;top:50.9%;--z:4.5;--t:10.3s;--dl:-10.8s"></i><i style="left:6.6%;top:94.2%;--z:5.9;--t:11.9s;--dl:-10.2s"></i><i style="left:11.7%;top:15.5%;--z:5.0;--t:14.0s;--dl:-6.4s"></i><i style="left:89.3%;top:39.3%;--z:6.5;--t:12.5s;--dl:-9.4s"></i><i style="left:18.8%;top:68.9%;--z:3.7;--t:12.6s;--dl:-9.5s"></i><i style="left:52.6%;top:37.5%;--z:5.3;--t:11.8s;--dl:-2.3s"></i><i style="left:9.6%;top:17.8%;--z:7.0;--t:12.2s;--dl:-7.6s"></i><i style="left:49.7%;top:33.4%;--z:6.4;--t:6.7s;--dl:-3.8s"></i><i style="left:99.8%;top:65.6%;--z:6.4;--t:11.6s;--dl:-10.1s"></i><i style="left:37.4%;top:65.1%;--z:6.6;--t:13.2s;--dl:-7.7s"></i><i style="left:51.5%;top:20.7%;--z:6.3;--t:7.5s;--dl:-1.7s"></i><i style="left:75.3%;top:79.6%;--z:3.2;--t:13.9s;--dl:-2.4s"></i><i style="left:38.4%;top:68.8%;--z:4.3;--t:9.7s;--dl:-3.3s"></i><i style="left:22.0%;top:54.2%;--z:3.9;--t:13.9s;--dl:-9.2s"></i><i style="left:89.7%;top:51.8%;--z:4.5;--t:12.2s;--dl:-5.8s"></i><i style="left:76.6%;top:70.6%;--z:5.7;--t:11.2s;--dl:-10.1s"></i><i style="left:28.3%;top:85.2%;--z:3.1;--t:12.0s;--dl:-3.2s"></i><i style="left:0.5%;top:87.3%;--z:5.8;--t:7.8s;--dl:-6.6s"></i><i style="left:6.3%;top:75.7%;--z:5.6;--t:11.6s;--dl:-1.7s"></i><i style="left:68.3%;top:45.2%;--z:4.9;--t:6.1s;--dl:-10.3s"></i><i style="left:91.1%;top:80.1%;--z:3.3;--t:11.6s;--dl:-7.9s"></i><i style="left:90.6%;top:74.1%;--z:3.2;--t:12.4s;--dl:-9.4s"></i><i style="left:62.7%;top:73.9%;--z:3.6;--t:8.5s;--dl:-1.4s"></i><i style="left:14.2%;top:57.0%;--z:3.4;--t:8.6s;--dl:-10.6s"></i><i style="left:39.2%;top:20.4%;--z:5.7;--t:6.9s;--dl:-9.1s"></i><i style="left:58.4%;top:98.1%;--z:6.5;--t:8.4s;--dl:-3.6s"></i><i style="left:74.5%;top:30.6%;--z:5.6;--t:7.6s;--dl:-9.9s"></i><i style="left:21.5%;top:71.2%;--z:5.7;--t:6.4s;--dl:-12.1s"></i><i style="left:20.5%;top:15.4%;--z:3.7;--t:8.1s;--dl:-8.3s"></i><i style="left:93.5%;top:96.3%;--z:6.9;--t:13.2s;--dl:-8.6s"></i><i style="left:75.5%;top:65.9%;--z:6.7;--t:9.2s;--dl:-6.9s"></i><i style="left:67.2%;top:41.7%;--z:6.3;--t:9.6s;--dl:-7.9s"></i><i style="left:34.0%;top:57.4%;--z:7.0;--t:10.5s;--dl:-9.6s"></i><i style="left:52.0%;top:38.1%;--z:3.3;--t:8.0s;--dl:-1.1s"></i><i style="left:89.7%;top:68.1%;--z:5.4;--t:7.4s;--dl:-12.2s"></i><i style="left:70.7%;top:98.2%;--z:4.2;--t:7.8s;--dl:-4.5s"></i><i style="left:46.9%;top:78.4%;--z:5.9;--t:6.3s;--dl:-12.3s"></i><i style="left:7.6%;top:39.3%;--z:6.2;--t:7.4s;--dl:-9.7s"></i><i style="left:11.1%;top:49.7%;--z:4.0;--t:8.6s;--dl:-3.6s"></i><i style="left:2.8%;top:84.3%;--z:6.3;--t:10.6s;--dl:-5.6s"></i><i style="left:60.7%;top:17.1%;--z:5.9;--t:9.0s;--dl:-13.7s"></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
Alle ansehen: HintergründeWofür du ihn nutzen kannst
Glühwürmchen sorgen für eine warme, leicht verträumte Stimmung. Probier sie auf der Einladungsseite einer Hochzeit im Freien, der Website eines Sommerfestivals, in einer Gutenacht-App für Kinder oder auf der Buchungsseite eines Glamping-Platzes. Jedes Licht hat seinen eigenen Rhythmus, deshalb fällt die Schleife nie auf. Ein ruhiger animierter Glühwürmchen-Hintergrund in HTML und CSS.
Warme Gelb- und Grüntöne auf sehr dunklem Grund wirken am natürlichsten, in Blau eher wie aus einem Fantasy-Film. Eine Serifenschrift in Creme oder gebrochenem Weiß passt gut darüber und kommt den Lichtern nicht in die Quere.