Luz de ciudadAurora Sur
Paroles de chanson synchronisées
Comme dans une appli musicale : la ligne en cours se remplit de lumière en rythme, les autres restent floues.
Réglages
Code
<div class="uvq14-lyr"><div class="hd"><span class="art" aria-hidden="true"><i></i><i></i><i></i></span><p><b>Lumière de ville</b><span>Aurora Sur</span></p><button type="button" class="pl" aria-pressed="true" aria-label="Lire"><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>Sous la lumière de la ville</span></button></li><li><button type="button"><span>Les rues chantent encore</span></button></li><li><button type="button"><span>Ton nom écrit sur la vitre</span></button></li><li><button type="button"><span>Et le train qui ne reviendra pas</span></button></li><li><button type="button"><span>On danse seuls jusqu'au soleil</span></button></li></ol></div></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Texte et défilement
Voir tout : Texte et défilementOù l’utiliser
Les applis musicales ont fait des paroles une vraie expérience de lecture : la ligne active brille et se remplit de gauche à droite pendant que les autres attendent dans le flou. Cette carte la reproduit avec un découpage du fond sur le texte, un flou sur les lignes inactives et une liste qui remonte toute seule. Elle convient aux pages d'artistes, aux podcasts transcrits et aux opérations façon karaoké.
Écris tes propres lignes dans la liste et la première dans le champ de texte. Les couleurs principale et secondaire teintent la lueur du fond. Chaque ligne est un bouton : on saute au clic, au clavier ou au toucher, et on met en pause avec le bouton rond.