Vibeset

Texto en órbita

Un sello giratorio o una cinta ondulada con el lema de la marca. El texto va sobre un trazo de SVG y se mueve por él en bucle. La parte difícil es que no se note dónde acaba y empieza, y se resuelve midiendo, no suponiendo: se mide una copia del texto y se repite hasta llenar el trazo, así que otra tipografía o una frase más larga rehacen las cuentas solas. En el círculo, el texto se estira hasta la circunferencia y gira el grupo entero, porque un texto sobre un trazo cerrado no da la vuelta por sí mismo. En la onda se mueve el comienzo del texto de 0 a una copia y se vuelve a 0, el mismo truco de la cinta de logos doblado sobre una curva (la curvatura, de 0 a 20, decide cuánto sube y baja: a 0 es una cinta recta). Lo mueve un solo requestAnimationFrame con el tiempo real entre fotogramas, y es una imagen con su aria-label para que un lector la lea entera una vez.

Y el original de React Bits: Text Loop

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

Cuándo sí

Para un sello giratorio o una cinta con el lema de la marca. Corto: una frase, no un párrafo.

Ojo con

Depende de GSAP, que no es MIT sino la licencia «Standard no charge» de GreenSock: gratis, pero con condiciones que MIT no tiene. Léela antes de meterla en un producto de pago.

Accesibilidad

Siete señales aria y movimiento reducido. Comprueba qué lee un lector de pantalla cuando el texto recorre una curva.