winfy

A Winamp-style music visualizer that reacts to whatever your PC is playing — built with Spotify in mind.

Run it

Just double-click winfy.html. It's a single self-contained file — the app, Butterchurn and all 395 presets are inlined, nothing is fetched, no server and no terminal. Copy it anywhere and it still works. Chrome treats file:// as a secure context, so system-audio capture, WebGL and localStorage all behave normally.

The one thing it can't do is Spotify: OAuth redirect URIs can't point at a file:// path, so the CONNECT SPOTIFY button is dimmed there. For track titles, album art and transport control, run the dev server instead:

npm install
npm run dev

Open http://127.0.0.1:5173/ (use the 127.0.0.1 address, not localhost — Spotify's OAuth only allows loopback IPs over http).

Rebuilding winfy.html

winfy.html is generated from src/. After changing anything there:

npm run standalone

Use it

1. Play music in Spotify (app or web player).

2. Click CAPTURE AUDIO, pick Entire screen, and tick "Also share system audio". The bars start dancing to the real sound.

3. Click the visualization (or MODE) to cycle through the modes:

   Mode	Look
   SPECTRUM	Classic segmented bars with falling peak caps
   SCOPE	Green oscilloscope waveform
   FIRE	Solid bars with a red→yellow heat gradient
   MILKDROP	Real MilkDrop 2 via Butterchurn — 395 community presets in four packs (Classics / Extra / Extra 2 / MilkDrop 1). Pick one from the grouped dropdown that appears in this mode, or press P for a random one; the AUTO button toggles auto-rotation (off = preset locked). Choice is remembered.
   TUNNEL	AVS-style dot tunnel flying at you; bass sets the speed, beats spawn bright rings
   SUPERSCOPE	The waveform wrapped around counter-rotating ellipses with cycling hues
   FEEDBACK	Feedback zoom+rotate smear with radial spectrum spikes
   STARFIELD	Warp-speed starfield; bass is the throttle
   DOTPLANE	3D dot terrain extruded from the spectrum, scrolling to the horizon

Keys & gestures

• Double-click the visualization — fullscreen
• D — double-size window, F — fullscreen, P — next MilkDrop preset
• Space — Spotify play/pause

All modes use auto-gain (quiet tracks dance as hard as loud ones) and spectral-flux beat detection.

Why capture instead of reading Spotify's stream? Spotify's audio is DRM-protected and its audio-analysis API is deprecated for new apps, so the only way to get real FFT data is to listen to the system's audio output.

Connect Spotify (optional — shows track title + album art)

Requires the dev server; this doesn't work from winfy.html opened directly.

1. Go to https://developer.spotify.com/dashboard and log in (free account is fine).
2. Create app — any name/description. Set Redirect URI to exactly: http://127.0.0.1:5173/ Select Web API, save.
3. Copy the app's Client ID.
4. In winfy, click CONNECT SPOTIFY and paste the Client ID when prompted. It's stored in your browser's localStorage; auth uses PKCE, so no client secret is ever needed.

The marquee then shows the current artist/track and the album art appears next to it, refreshed every 5 seconds. The time LCD and progress bar track the song, and the transport buttons (prev / play-pause / next, plus click-to-seek on the progress bar) control your Spotify playback — note that playback control requires Spotify Premium and an active device.