Sanduhr-Timer
Eine gläserne Sanduhr, die echte Sekunden zählt; drück darauf und sie dreht sich federnd um und beginnt neu.
Einstellungen
Code
<div class="uvq11-hg"><button type="button" class="hb" aria-label="Sanduhr umdrehen"><span class="fl"><svg viewBox="0 0 100 170" aria-hidden="true"><defs><clipPath id="uvq11-hg-c"><path d="M20 12H80C80 52 54 70 52 85C54 100 80 118 80 158H20C20 118 46 100 48 85C46 70 20 52 20 12Z"/></clipPath><linearGradient id="uvq11-hg-w" x1="0" x2="1"><stop offset="0" stop-color="#3a2014"/><stop offset=".45" stop-color="#9a6a45"/><stop offset="1" stop-color="#3a2014"/></linearGradient></defs><path class="po" d="M13 12V158M87 12V158"/><g clip-path="url(#uvq11-hg-c)"><path class="sd st" d="M10 34Q50 34 90 34V86H10Z"/><path class="sd sb" d=""/><path class="fa" d="M50 84V150"/></g><path class="gs" d="M20 12H80C80 52 54 70 52 85C54 100 80 118 80 158H20C20 118 46 100 48 85C46 70 20 52 20 12Z"/><path class="hl" d="M27 20C27 46 38 62 44 74M27 150C27 126 38 110 44 98"/><rect x="6" y="3" width="88" height="10" rx="3" fill="url(#uvq11-hg-w)"/><rect x="6" y="157" width="88" height="10" rx="3" fill="url(#uvq11-hg-w)"/></svg></span></button><div class="tx"><output class="tm">0:20</output><span>Umdrehen</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.
Mehr aus Liquid Glass
Alle ansehen: Liquid GlassWofür du ihn nutzen kannst
Ein Countdown in Form einer Sanduhr, in SVG gezeichnet mit Holzkappen, Säulen und einem Glaskörper mit weichen Glanzlichtern. Der Sand rinnt aus dem oberen Kolben, fällt als feiner Strahl und häuft sich unten, während daneben die Zeit abläuft. Ein Tipp aufs Glas dreht das ganze Stück mit leichtem Überschwingen um und startet neu.
Stell die Dauer in Sekunden über den eigenen Regler ein und wähle Sand- und Holzfarbe. Gut geeignet für Fokus-Timer, Kochschritte, Quizrunden oder jede Wartezeit, die ruhig und greifbar wirken soll.