Vibeset

Cinta de logos

Es movimiento que nadie ha pedido y que no para solo, así que lo importante no es que ruede sino que se pueda parar, que no gaste lo que nadie mira y que no se vea el empalme. El bucle es CSS puro: la pista se desplaza justo lo que mide una copia de la lista y vuelve a empezar; el JavaScript solo mide cuánto mide una copia y cuántas llenan la caja. El hueco entre elementos va también al final de cada copia, o el bucle da un tirón. Solo la primera copia existe para un lector y para el tabulador: el resto es aria-hidden e inert. Y se detiene con un botón, al pasar el ratón, al enfocar con teclado y al salir de pantalla: lo que se mueve solo más de cinco segundos exige un control para pausarlo.

Y el original de React Bits: Logo Loop

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

Cuándo sí

Para una franja de «hecho con» o «lo usan», si es verdad. Está bien cuidada en accesibilidad.

Ojo con

Pesa 43 KB de fuente, mucho para una cinta: si solo necesitas un marquee recto, basta una versión de CSS de veinte líneas. Cada logo necesita su texto alternativo.

Accesibilidad

Bien cuidada: nueve señales aria, tres etiquetas, soporte de teclado, un ariaLabel propio y movimiento reducido. Se detiene fuera de pantalla.