Vibeset

Panel de fichas

Una ficha de panel mecánico son dos mitades fijas (la de arriba enseña la letra que llega, la de abajo la que se va) y dos aletas que giran: la de arriba cae hasta quedar de canto y la de abajo termina de bajar con la letra nueva. Cuatro capas y dos animaciones de CSS por ficha. Alrededor hay que resolver tres cosas: cada ficha recorre el abecedario como un panel de verdad, pero de la A a la Z son veinticinco giros y el recorrido se recorta a los últimos; las fichas arrancan escalonadas, que todas a la vez parece un parpadeo; y la palabra final está siempre en el DOM como texto, con las fichas ocultas, para que un lector oiga una palabra y no veinte letras por segundo. Como cambia sola, se puede parar con un botón.

Y el original de React Bits: Split Flap Text

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

Cuándo sí

Para una cifra, una ciudad o un estado que cambia, en una web con aire de viajes, de datos o retro. Una palabra corta cada vez.

Ojo con

Comprueba qué lee un lector de pantalla mientras las fichas giran y deja el texto final accesible en el HTML.

Accesibilidad

Cuida mucho el movimiento reducido: nueve referencias en el código, más que ninguna de las que analizamos aquí. Lleva una sola etiqueta aria.