Temporizador de reloj de arena
Un reloj de arena de vidrio que cuenta los segundos de verdad; púlsalo y gira con un muelle para empezar otra vez.
Ajustes
Código
<div class="uvq11-hg"><button type="button" class="hb" aria-label="Dar la vuelta al reloj de arena"><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>Dale la vuelta</span></div></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Liquid Glass
Ver todos: Liquid GlassDónde usarlo
Una cuenta atrás con forma de reloj de arena, dibujada en SVG con tapas y columnas de madera y un cuerpo de vidrio con brillos suaves. La arena baja del bulbo superior, cae en un hilo fino y forma un montón abajo mientras el tiempo descuenta a su lado. Toca el cristal y la pieza entera da la vuelta con rebote antes de empezar de nuevo.
Ajusta la duración en segundos con su deslizador y elige los colores de la arena y la madera. Funciona bien en temporizadores de concentración, pasos de recetas, rondas de preguntas o cualquier espera que deba sentirse tranquila.