Verse Player

Install

Or by hand, in a Next.js project with shadcn set up. It writes components/pastetaste/verse-player.tsx.

Install the pastetaste component "Verse Player" (verse-player) into this Next.js project and use it.

What it is: Now-playing card built around the words: each lyric line inks in word by word, then rolls up for the next. A lyrics drawer seeks to any line; play carries a progress ring; save and follow toggle in place.

Before you place it, ask me (one short message, in my language; "skip" = sensible default): which page and section it goes in, my brand colour (hex), the text, labels or images it should show, and whether I want my logo or my own copy in the demo content. Then:

Steps:
1. If the project has no components.json, run: npx shadcn@latest init -y -d. Then run: npx shadcn@latest add https://pastetaste.com/r/verse-player.json
   (it writes components/pastetaste/verse-player.tsx; install any npm packages it reports: motion@^12.23.0).
2. Import it: import { VersePlayer } from "@/components/pastetaste/verse-player" (check the file for the exact named export).
3. Put it where it fits on the page I name, keep the rest of the page untouched, and pass props for my colours instead of editing the installed file.
4. It does not depend on Tailwind; colours come from CSS variables (--pt-*) or props.
5. It supports prefers-reduced-motion with a still state; do not remove it.

Props (all optional unless the type has no default):
- tracks: VerseTrack[] = two sample tracks — Each track: title, artist, duration in seconds, optional cover URL, audio src, timed lines ({ at, text }), about text, and initial saved / following state.
- index / defaultIndex / onIndexChange: number / number / (i: number) => void = — / 0 / — — Current track, controlled or not. Changing it pushes the cover in the direction of travel.
- playing / defaultPlaying / onPlayingChange: boolean / boolean / (p: boolean) => void = — / false / — — Play state, controlled or not. Without a src the card runs as a silent timer.
- startAt: number = 0 — Seconds into the first track when the card appears.
- lyricsOpen / defaultLyricsOpen / onLyricsOpenChange: boolean / boolean / (o: boolean) => void = — / false / — — The lyrics drawer opened by the note button; every line in it seeks there.
- follow / onFollowChange: boolean / (artist: string, following: boolean) => void = true / — — Show the follow pill; it toggles per artist.
- onSaveChange: (track: VerseTrack, saved: boolean) => void = — — Called when the corner check saves or removes a track.
- tone: 'light' | 'dark' = 'light' — Card surface preset; override any colour with the --pt-player-* tokens.
- accent / accentInk: string / string = '#e4572e' / '#fff' — Progress ring, saved check, follow pill and the current line's time stamp, and the ink on top of it.
- labels: Partial<VersePlayerLabels> = English — Every visible and accessible string, including the 'Now playing' announcement.
- parseLrc (export): (lrc: string) => VerseLine[] = — — Turns .lrc text into timed lines for a track.

Live preview: https://pastetaste.com/c/verse-player
Then run the dev server, check it in the browser at desktop and mobile width, and tell me the page URL.

Props 11