Lluvia ligera · Sensación 17°
HTML + CSSCards
Card del tiempo animada
Un pequeño widget del tiempo con nubes que flotan y lluvia que cae, más la previsión de las próximas horas.
Ajustes
16px
1x
Código
<article class="uv-cweather"><div class="sky"><i></i><i></i><b style="--i:0"></b><b style="--i:1"></b><b style="--i:2"></b><b style="--i:3"></b><b style="--i:4"></b><b style="--i:5"></b><b style="--i:6"></b></div><header><span>Madrid</span><small>Ahora</small></header><strong>18°</strong><p>Lluvia ligera · Sensación 17°</p><footer><span>18:00 <b>17°</b></span><span>19:00 <b>16°</b></span><span>20:00 <b>15°</b></span></footer></article>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 Cards
Dónde usarlo
Suma mucho allí donde el tiempo cambia los planes: la ficha de destino de una agencia de viajes, la web de reservas de una casa rural, una escuela de surf o una finca de bodas al aire libre. Este widget del tiempo animado muestra temperatura, estado del cielo y previsión por horas, con nubes y lluvia moviéndose al fondo.
La escena siempre muestra lluvia, así que si la usas de verdad conéctala a una API del tiempo y prepara versiones de sol o nublado. Si es solo decorativa, baja la velocidad: a tope puede robarle protagonismo a tu titular.