A browser extension that adds beautiful animated backgrounds to YouTube Music using Kawarp - creating fluid, warped visuals from album artwork. Built with Plasmo, React, and TypeScript.

• Fluid Animated Backgrounds: Album artwork transforms into smooth, warped visuals using Kawarp
• Animated Album Art: Displays animated album artwork (video loops) when available
• Audio Reactive: Beat detection syncs effects with music for a pulsing, dynamic experience
• Real-time Configuration: Adjust settings and see changes instantly via the popup
• Persistent Settings: Configuration saved automatically across sessions
• Multi-page Support: Works on player pages, homepage, and search results
• Cross-browser: Supports Chrome, Firefox, Edge, Brave, Arc, and other Chromium browsers

Use the download links above to install from Chrome Web Store or Firefox Add-ons.

1. Clone the repository

   git clone https://github.com/better-lyrics/shaders
   cd shaders

2. Install dependencies

   bun install

3. Build the extension

   bun run build

4. Load in your browser

   • Chrome/Edge/Brave/Arc: Open chrome://extensions/, enable "Developer mode", click "Load unpacked", select build/chrome-mv3-prod
   • Firefox: Open about:debugging#/runtime/this-firefox, click "Load Temporary Add-on", select any file in build/firefox-mv2-prod

For development with hot reload:

bun run dev          # Chrome
bun run dev:firefox  # Firefox
bun run dev:edge     # Edge

1. Go to YouTube Music
2. Play any song
3. Click the extension icon in your browser toolbar to open settings

All settings are accessible from the extension popup with real-time preview.

These settings appear when Audio Responsive is enabled:

Settings can be exported to JSON and imported on other devices or browsers.

bun run build    # Build for all browsers (Chrome, Firefox, Edge)
bun run package  # Package for distribution

Build outputs:

• Chrome: build/chrome-mv3-prod
• Firefox: build/firefox-mv2-prod
• Edge: build/edge-mv3-prod

• Ensure you're on music.youtube.com (not youtube.com)
• Check that the extension is enabled in settings
• Try refreshing the page
• Navigate to a player page (start playing a song)

• Check that "Audio Responsive" is enabled in settings
• Adjust "Beat Threshold" if detection is too sensitive or not sensitive enough

• Disable "Show on Browse Pages" to limit effects to player page only
• The effect automatically pauses when the tab is not visible

• Not all songs have animated artwork available
• Ensure "Animated Album Art" is enabled in settings
• The feature queries artwork.boidu.dev for availability

• Plasmo - Browser extension framework
• Kawarp - Fluid warped background effect
• React 18 + TypeScript
• Web Audio API for beat detection

GPL-3.0 License. See LICENSE for details.

Built with Kawarp, Plasmo, and artwork.boidu.dev.