Luz de ciudadAurora Sur
Letra de canción sincronizada
Como en una app de música: la línea actual se llena de luz al ritmo y las demás quedan borrosas hasta tocarlas.
Ajustes
Código
<div class="uvq14-lyr"><div class="hd"><span class="art" aria-hidden="true"><i></i><i></i><i></i></span><p><b>Luz de ciudad</b><span>Aurora Sur</span></p><button type="button" class="pl" aria-pressed="true" aria-label="Reproducir"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6v12M15 6v12"/></svg><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 5.5v13l10.5-6.5z" fill="currentColor"/></svg></button></div><div class="vw"><ol><li><button type="button" aria-current="true"><span>Bajo la luz de la ciudad</span></button></li><li><button type="button"><span>Las calles cantan otra vez</span></button></li><li><button type="button"><span>Tu nombre escrito en el cristal</span></button></li><li><button type="button"><span>Y el tren que nunca va a volver</span></button></li><li><button type="button"><span>Bailamos solos hasta el sol</span></button></li></ol></div></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Texto y scroll
Ver todos: Texto y scrollDónde usarlo
Las apps de música convirtieron la letra en una experiencia de lectura: la línea activa brilla y se rellena de izquierda a derecha mientras el resto espera desenfocado. Esta tarjeta lo recrea con un recorte del fondo sobre el texto, un desenfoque en las líneas inactivas y una lista que sube sola. Encaja en páginas de artistas, podcasts con transcripción y promociones tipo karaoke.
Escribe tus propias líneas en la lista y la primera en el campo de texto. Los colores principal y secundario pintan el resplandor del fondo. Cada línea es un botón, así que se puede saltar con un clic, el teclado o un toque, y pausar con el botón redondo.