shadcn.io is not affiliated with official shadcn/ui
Lyrics Viewer Music Block for Svelte
A synced lyrics panel with a text size group, an auto-scroll switch and a play toggle that steps a line every two seconds; pressing a line seeks to its stamp, and a position slider sits at the foot.
Installation
Overview
Show the words as the song moves, with this lyrics viewer for Svelte with Ark UI. It holds one song of Lineglow, a lyrics app, in a hairline frame with a plus mark on each corner: a toolbar with a Toggle Group for the text size (S, M, L), an Auto-scroll Switch and a play Toggle; a lyric region of twelve original lines in a verse, a chorus and a second verse, each a button with its time stamp; and a Slider for the position at the foot. The current line is the last one whose stamp is at or before the position, shown in full strength with a mark at its start, and pressing any line seeks to its stamp. Play steps to the next line every two seconds, with a visible Pause, and Auto-scroll keeps the current line in the middle of the region. Under reduced motion Play is replaced by a Next line Button. It's built from Toggle Group, Switch, Toggle, Slider, Button and Guides, with a CSS entrance only. For music, karaoke and language-learning apps.
FAQ
How do I load my own lyrics?
Edit LINES: each line has the second it begins (at), the part it belongs to and its text, and SONG holds the title, artist and length. The stamps must rise; the current line, the neighbours' weight, the stamps on screen and the seek targets all come from them. The lyrics here were written for the block, so replace them with text you have the rights to show. If your lyrics come as an LRC file, parse its stamps into this shape.
What is moving by itself?
One bounded interval, and only after you press Play: it moves to the next line every two seconds, at most twelve times, and stops at the last line, on Pause, or when you leave the page. Nothing else ticks; the slider and the time follow the line. Under a reduced-motion preference there is no interval at all, and a Next line button moves one line at a time instead.
Does anything play, and what stays local?
No. The status line says it: no audio plays in this demo. The position, the text size and the Auto-scroll choice live in the page. To make it real, drive position from your audio element's time updates instead of the interval, and call its currentTime setter from the seek handler.
How do I use it from the keyboard?
Tab runs the toolbar, then each lyric line, then the slider. Enter or Space on a line seeks to it, and the slider moves with the arrow keys and jumps with Home and End. The text sizes are a group of toggle buttons that always keep one on, the switch and the play toggle are named, and a polite status line says where you jumped. The current line is marked with aria-current.
How does Auto-scroll work?
It sets the scroll position of the lyric region itself so the current line sits in the middle, and never calls scroll-into-view, so the page around it stays where it is. Turn it off to read ahead without being pulled back. The region keeps one height at every text size, so changing the size never moves the toolbar or the slider.