Arrastra y lanza

HTML + CSSLiquid Glass

Canica de cristal con inercia

Una canica sobre una alfombrilla de corte: arrástrala y suéltala para lanzarla; dentro se ve la cuadrícula del revés.

Ajustes

16px
1x

Código

<div class="uvq11-mar"><div class="mat" aria-hidden="true"><b style="left:5%">1</b><b style="left:10%">2</b><b style="left:15%">3</b><b style="left:20%">4</b><b style="left:25%">5</b><b style="left:30%">6</b><b style="left:35%">7</b><b style="left:40%">8</b><b style="left:45%">9</b><b style="left:50%">10</b><b style="left:55%">11</b><b style="left:60%">12</b><b style="left:65%">13</b><b style="left:70%">14</b><b style="left:75%">15</b><b style="left:80%">16</b><b style="left:85%">17</b><b style="left:90%">18</b><b style="left:95%">19</b></div><p class="hn">Arrastra y lanza</p><i class="sh" aria-hidden="true"></i><button type="button" class="mb" aria-label="Canica de cristal: arrástrala o empújala con las flechas"><span class="rf"><span class="cp"></span></span><span class="sw"></span><span class="gs"></span></button></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.

Versión Markdown con todo el código, para asistentes de IA

Más en Liquid Glass

Ver todos: Liquid Glass

Dónde usarlo

Una canica de vidrio que rueda sobre una alfombrilla de corte verde con cuadrícula, arco de transportador y regla. Dentro de la bola la alfombrilla se ve invertida y aumentada, como refracta una esfera real lo que tiene detrás, y una cinta roja de ojo de gato gira al rodar. La sombra lleva un punto de luz donde el vidrio concentra los rayos.

Lánzala con un gesto rápido, toca la alfombrilla para empujarla hacia ese punto o muévela con las flechas. Rebota en los bordes y se frena con el rozamiento. Sirve como portada con juego, juguete para un 404 o demo de física.