Vibeset

Malla elástica

El texto se dibuja una vez en un lienzo auxiliar y se pega, trozo a trozo, sobre una malla de puntos. Cada punto está atado a su sitio por un muelle y a sus vecinos por otro más suave; al agarrar el texto, los puntos cercanos siguen al puntero, y al soltar vuelven con un vaivén que se contagia de unos a otros. Se deforma sin WebGL: la malla es una cuadrícula de triángulos y cada uno se pinta con una transformación afín (tres puntos del texto y los tres donde han ido a parar determinan un único giro, escala y cizalla). Los triángulos se ensanchan un poco al recortar, o los vecinos dejarían una rendija. La física usa Verlet con paso fijo y el bucle para cuando todo está quieto. Es un juguete: el contenedor es una imagen con el texto como nombre y el texto de verdad debe estar también fuera del lienzo.

Y el original de React Bits: Elastic Mesh

Esta pieza está escrita desde cero en Vibeset: no se ha copiado ni portado nada de React Bits. Hace algo parecido a su Elastic Mesh, y esto es lo que vimos del suyo por si prefieres usar el original.

Cuándo sí

Para un juguete de portada en una web creativa: el logo que se estira. Es un adorno, no un modo de enseñar contenido.

Ojo con

Con 50 KB de fuente es de los que más pesan entre los que analizamos aquí: mucho para un juguete. Cárgalo de forma perezosa y solo si el juguete es el punto.

Accesibilidad

Respeta el movimiento reducido del sistema y trae tres señales aria. Se detiene fuera de pantalla.