Texto con destello
El destello no es un elemento: es el fondo del texto. Las letras se pintan transparentes, detrás va un degradado y background-clip: text lo recorta con su forma, así que moverlo es mover una posición de fondo y lo hace el navegador sin un solo fotograma de JavaScript. Tres cosas que se pierden al copiarlo de memoria: el degradado se repite, porque con no-repeat el texto desaparece en cuanto la banda se aparta; la banda sale entera del texto antes de volver, calculado con su ancho y su ángulo; y con colores forzados se vuelve al color del sistema, porque sin fondo un texto transparente es un texto invisible.
- CSS, sin dependencias, se pausa fuera de pantalla
Y el original de React Bits: Shiny Text
Esta pieza está escrita desde cero en Vibeset: no se ha copiado ni portado nada de React Bits. Hace algo parecido a su Shiny Text, y esto es lo que vimos del suyo por si prefieres usar el original.
Cuándo sí
Para un solo titular o una llamada a la acción que quieras destacar. Es barata: sin dependencias y con 12,7 KB.
Ojo con
Un brillo en bucle en cada titular cansa y le quita sentido: uno por pantalla. Y comprueba que el color de base, sin brillo, ya cumple el contraste.
Accesibilidad
Respeta el movimiento reducido del sistema.
- Shiny Text
pnpm dlx shadcn@latest add @react-bits/ShinyText-TS-TW