Minuteur sablier
Un sablier en verre qui compte de vraies secondes ; touchez-le et il se retourne avec un ressort pour recommencer.
Réglages
Code
<div class="uvq11-hg"><button type="button" class="hb" aria-label="Retourner le sablier"><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>Retournez-le</span></div></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Liquid Glass
Voir tout : Liquid GlassOù l’utiliser
Un compte à rebours en forme de sablier, dessiné en SVG avec des embouts et des colonnes en bois et un corps en verre aux reflets doux. Le sable quitte le bulbe du haut, tombe en filet fin et forme un tas en bas pendant que le temps défile à côté. Touchez le verre et la pièce entière se retourne avec un léger rebond avant de repartir.
Réglez la durée en secondes avec son curseur et choisissez les couleurs du sable et du bois. Il convient aux minuteurs de concentration, aux étapes de recette, aux manches de quiz et à toute attente qui doit rester calme.