Feliz invierno
HTML + CSSLiquid Glass

Schneekugel aus Glas

Schüttel die Kugel per Tipp oder Ziehen: Der Schnee fliegt mit echter Physik und legt sich langsam aufs Häuschen.

Einstellungen

16px
1x

Code

<div class="uvq11-snow"><i class="lp" aria-hidden="true"></i><button type="button" class="gb" aria-label="Schneekugel schütteln"><span class="in"><span class="iv"></span><svg class="sc" viewBox="0 0 100 100" aria-hidden="true"><path d="M0 72Q25 63 50 69T100 71V100H0Z" fill="#f4f8ff"/><path class="tr" d="M17 70L24 49L31 70ZM20 58L24 44L28 58Z"/><path class="tr" d="M71 72L77 53L83 72Z"/><rect x="41" y="56" width="18" height="14" fill="#b4533c"/><path d="M38 57L50 45L62 57Z" fill="#f4f8ff"/><rect x="46" y="60" width="5" height="5" fill="#ffd27a"/><rect x="54" y="62" width="3" height="8" fill="#5b2a1c"/></svg><span class="fk"><i style="transform:translate(-60px,-27px)"></i><i style="transform:translate(-28px,-29px)"></i><i style="transform:translate(12px,-4px)"></i><i style="transform:translate(-43px,-60px)"></i><i style="transform:translate(-55px,9px)"></i><i style="transform:translate(-42px,-13px)"></i><i style="transform:translate(-1px,-54px)"></i><i style="transform:translate(-41px,-10px)"></i><i style="transform:translate(-58px,-61px)"></i><i style="transform:translate(-42px,-45px)"></i><i style="transform:translate(-30px,-58px)"></i><i style="transform:translate(32px,8px)"></i><i style="transform:translate(5px,-11px)"></i><i style="transform:translate(-27px,24px)"></i><i style="transform:translate(-30px,-54px)"></i><i style="transform:translate(28px,-37px)"></i><i style="transform:translate(34px,-50px)"></i><i style="transform:translate(-35px,26px)"></i><i style="transform:translate(48px,-39px)"></i><i style="transform:translate(57px,-54px)"></i><i style="transform:translate(29px,22px)"></i><i style="transform:translate(-40px,-40px)"></i><i style="transform:translate(55px,-43px)"></i><i style="transform:translate(47px,-4px)"></i><i style="transform:translate(38px,-35px)"></i><i style="transform:translate(-24px,-24px)"></i><i style="transform:translate(26px,11px)"></i><i style="transform:translate(-51px,-18px)"></i><i style="transform:translate(-5px,-1px)"></i><i style="transform:translate(27px,-47px)"></i><i style="transform:translate(26px,-17px)"></i><i style="transform:translate(6px,23px)"></i><i style="transform:translate(55px,-20px)"></i><i style="transform:translate(36px,-39px)"></i><i style="transform:translate(41px,-43px)"></i><i style="transform:translate(0px,-49px)"></i><i style="transform:translate(40px,4px)"></i><i style="transform:translate(11px,-28px)"></i><i style="transform:translate(39px,-49px)"></i><i style="transform:translate(-26px,-35px)"></i><i style="transform:translate(-2px,-29px)"></i><i style="transform:translate(-54px,-57px)"></i></span></span><span class="gs"></span></button><div class="bs"><span>Schönen Winter</span></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.

Markdown-Version mit dem ganzen Code, für KI-Assistenten

Mehr aus Liquid Glass

Alle ansehen: Liquid Glass

Wofür du ihn nutzen kannst

Eine Schneekugel mit Häuschen und Tannen in einer Glaskugel auf einem Holzsockel mit Messingschild. Das Glas hat ein weiches Glanzlicht oben, die Spiegelung eines Fensters, einen dunkleren Rand, und innen erscheint der Raum dahinter kopfüber, wie es eine wassergefüllte Kugel tatsächlich zeigt. Jede Flocke hat eigene Geschwindigkeit, Reibung und Landestelle.

Schreib deine eigene Botschaft aufs Schild und wähle Wasser- und Sockelfarbe. Zieh über die Kugel, um den Schnee in diese Richtung zu wirbeln, oder drück sie per Tastatur für ein kräftiges Schütteln. Schön für Feiertagskampagnen und Grußseiten.