Vibeset

Texto que cae

Antes de caer, las palabras son texto normal de un párrafo. Al soltarlas se mide dónde está cada una y se pasa a posición absoluta en ese mismo sitio y en el mismo fotograma: no hay salto, y como siguen en el DOM en su orden, un lector lee la frase entera esté donde esté cada palabra. La física está escrita aquí, sin librería: cajas alineadas con los ejes que caen con la gravedad, se mantienen dentro de la caja y resuelven los choques de dos en dos por el eje en que se solapan menos, repartiendo velocidades con el rebote y repitiéndolo varias veces por paso, que es lo que evita que una pila se hunda. El paso es fijo y el tiempo real se gasta en trozos de ese tamaño; cuando todo está casi quieto, el bucle para. Se puede coger una palabra y tirarla, y se suelta con un botón además de con el clic.

Y el original de React Bits: Falling Text

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

Cuándo sí

Para un momento de juego en una portada creativa: una frase que se desmorona cuando pasa algo. No para texto que haya que leer.

Ojo con

Llama mucho la atención y se lee mal. Pon el texto real en otro sitio de la página y deja esto como adorno. Trae la física de matter-js (MIT, 0,9 MB instalado).

Accesibilidad

Menciona el movimiento reducido pero no lleva ni un atributo aria: un lector de pantalla recibe letras o palabras sueltas.