npx shadcn@latest add https://tirup.in/components/r/song-bubble.json
import { SongBubble, toggleSongBubble } from "@/components/song-bubble"
export function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html>
<body>
{children}
{/* Mount once: it survives client-side navigation, so the song keeps
playing while visitors move between pages */}
<SongBubble />
</body>
</html>
)
}
// Anything in your app can open it — a footer dot, a nav button, an easter egg
export function HeroDot() {
return (
<button
type="button"
onClick={toggleSongBubble}
aria-label="Open the song bubble"
>
♪
</button>
)
}
The player lives in your root layout so navigation can't kill it. Read more in the install guide.
