Luz de ciudadAurora Sur
Synchronisierter Songtext
Wie Songtexte in einer Musik-App: Die aktuelle Zeile füllt sich im Takt mit Licht, die anderen bleiben unscharf und lassen sich anspringen.
Einstellungen
Code
<div class="uvq14-lyr"><div class="hd"><span class="art" aria-hidden="true"><i></i><i></i><i></i></span><p><b>Stadtlicht</b><span>Aurora Sur</span></p><button type="button" class="pl" aria-pressed="true" aria-label="Abspielen"><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>Unter den Lichtern der Stadt</span></button></li><li><button type="button"><span>Die Straßen singen wieder</span></button></li><li><button type="button"><span>Dein Name auf dem Glas</span></button></li><li><button type="button"><span>Und der Zug, der nie zurückkommt</span></button></li><li><button type="button"><span>Wir tanzen allein bis zur Sonne</span></button></li></ol></div></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Text & Scroll
Alle ansehen: Text & ScrollWofür du ihn nutzen kannst
Musik-Apps haben Songtexte zu einem Leseerlebnis gemacht: Die aktive Zeile leuchtet und füllt sich von links nach rechts, der Rest wartet unscharf. Diese Karte baut das mit einem Background-Clip auf dem Text, Unschärfe auf den inaktiven Zeilen und einer Liste nach, die von selbst nach oben gleitet. Sie passt zu Künstlerseiten, Podcasts mit Transkript und Karaoke-Aktionen.
Schreib deine eigenen Zeilen in die Liste und die erste ins Textfeld. Haupt- und Zweitfarbe färben das Leuchten im Hintergrund. Jede Zeile ist ein Button, man springt also per Klick, Tastatur oder Tipp und pausiert mit dem runden Button.