From 9975e59aacb5088612f4a30ac08b5ca193d04e37 Mon Sep 17 00:00:00 2001
From: Zachery Aaron Shores-Chmielewski <zachanon@gmail.com>
Date: Sat, 7 Feb 2026 02:19:08 +0700
Subject: [PATCH] feat: music visualizer

---
 Cargo.lock                | 818 +++++++++++++++++++++++++++++++++++++-
 crates/server/Cargo.toml  |   2 +
 crates/server/bin/main.rs | 179 ++++++++-
 routes/music/index.html   | 697 ++++++++++++++++++++++++++++++++
 4 files changed, 1683 insertions(+), 13 deletions(-)
 create mode 100644 routes/music/index.html

diff --git a/Cargo.lock b/Cargo.lock
index 34dbcee..8623cf1 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -120,6 +120,12 @@ dependencies = [
  "tracing",
 ]
 
+[[package]]
+name = "base64"
+version = "0.22.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "72b3254f16251a8381aa12e40e3c4d2f0199f8c6508fbecb9d91f575e0fbb8c6"
+
 [[package]]
 name = "bitflags"
 version = "2.10.0"
@@ -156,12 +162,28 @@ version = "1.11.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b35204fbdc0b3f4446b89fc1ac2cf84a8a68971995d0bf2e925ec7cd960f9cb3"
 
+[[package]]
+name = "cc"
+version = "1.2.55"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "47b26a0954ae34af09b50f0de26458fa95369a0d478d8236d3f93082b219bd29"
+dependencies = [
+ "find-msvc-tools",
+ "shlex",
+]
+
 [[package]]
 name = "cfg-if"
 version = "1.0.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9330f8b2ff13f34540b44e946ef35111825727b38d33286ef986142615121801"
 
+[[package]]
+name = "cfg_aliases"
+version = "0.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "613afe47fcd5fac7ccf1db93babcb082c5994d996f20b8b159f2ad1658eb5724"
+
 [[package]]
 name = "chacha20"
 version = "0.9.1"
@@ -269,7 +291,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "78c8292055d1c1df0cce5d180393dc8cce0abec0a7102adb6c7b1eef6016d60a"
 dependencies = [
  "generic-array",
- "rand_core",
+ "rand_core 0.6.4",
  "typenum",
 ]
 
@@ -310,12 +332,29 @@ dependencies = [
  "subtle",
 ]
 
+[[package]]
+name = "displaydoc"
+version = "0.2.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "97369cbbc041bc366949bc74d34658d6cda5621039731c6310521892a3a20ae0"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
 [[package]]
 name = "fiat-crypto"
 version = "0.2.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "28dea519a9695b9977216879a3ebfddf92f1c08c05d984f8996aecd6ecdc811d"
 
+[[package]]
+name = "find-msvc-tools"
+version = "0.1.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5baebc0774151f905a1a2cc41989300b1e6fbb29aff0ceffa1064fdd3088d582"
+
 [[package]]
 name = "fnv"
 version = "1.0.7"
@@ -340,6 +379,21 @@ dependencies = [
  "web-sys",
 ]
 
+[[package]]
+name = "futures"
+version = "0.3.31"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "65bc07b1a8bc7c85c5f2e110c476c7389b4554ba72af57d8445ea63a576b0876"
+dependencies = [
+ "futures-channel",
+ "futures-core",
+ "futures-executor",
+ "futures-io",
+ "futures-sink",
+ "futures-task",
+ "futures-util",
+]
+
 [[package]]
 name = "futures-channel"
 version = "0.3.31"
@@ -347,6 +401,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "2dff15bf788c671c1934e366d07e30c1814a8ef514e1af724a602e8a2fbe1b10"
 dependencies = [
  "futures-core",
+ "futures-sink",
 ]
 
 [[package]]
@@ -355,6 +410,34 @@ version = "0.3.31"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "05f29059c0c2090612e8d742178b0580d2dc940c837851ad723096f87af6663e"
 
+[[package]]
+name = "futures-executor"
+version = "0.3.31"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1e28d1d997f585e54aebc3f97d39e72338912123a67330d723fdbb564d646c9f"
+dependencies = [
+ "futures-core",
+ "futures-task",
+ "futures-util",
+]
+
+[[package]]
+name = "futures-io"
+version = "0.3.31"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9e5c1b78ca4aae1ac06c48a526a655760685149f0d465d21f37abfe57ce075c6"
+
+[[package]]
+name = "futures-macro"
+version = "0.3.31"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "162ee34ebcb7c64a8abebc059ce0fee27c2262618d7b60ed8faf72fef13c3650"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
 [[package]]
 name = "futures-sink"
 version = "0.3.31"
@@ -373,10 +456,16 @@ version = "0.3.31"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9fa08315bb612088cc391249efdc3bc77536f16c91f6cf495e6fbe85b20a4a81"
 dependencies = [
+ "futures-channel",
  "futures-core",
+ "futures-io",
+ "futures-macro",
+ "futures-sink",
  "futures-task",
+ "memchr",
  "pin-project-lite",
  "pin-utils",
+ "slab",
 ]
 
 [[package]]
@@ -409,9 +498,11 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "899def5c37c4fd7b2664648c28120ecec138e4d395b459e5ca34f9cce2dd77fd"
 dependencies = [
  "cfg-if",
+ "js-sys",
  "libc",
  "r-efi",
  "wasip2",
+ "wasm-bindgen",
 ]
 
 [[package]]
@@ -491,6 +582,24 @@ dependencies = [
  "pin-utils",
  "smallvec",
  "tokio",
+ "want",
+]
+
+[[package]]
+name = "hyper-rustls"
+version = "0.27.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e3c93eb611681b207e1fe55d5a71ecf91572ec8a6705cdb6857f7d8d5242cf58"
+dependencies = [
+ "http",
+ "hyper",
+ "hyper-util",
+ "rustls",
+ "rustls-pki-types",
+ "tokio",
+ "tokio-rustls",
+ "tower-service",
+ "webpki-roots",
 ]
 
 [[package]]
@@ -499,14 +608,124 @@ version = "0.1.18"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "52e9a2a24dc5c6821e71a7030e1e14b7b632acac55c40e9d2e082c621261bb56"
 dependencies = [
+ "base64",
  "bytes",
+ "futures-channel",
  "futures-core",
+ "futures-util",
  "http",
  "http-body",
  "hyper",
+ "ipnet",
+ "libc",
+ "percent-encoding",
  "pin-project-lite",
+ "socket2",
  "tokio",
  "tower-service",
+ "tracing",
+]
+
+[[package]]
+name = "icu_collections"
+version = "2.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4c6b649701667bbe825c3b7e6388cb521c23d88644678e83c0c4d0a621a34b43"
+dependencies = [
+ "displaydoc",
+ "potential_utf",
+ "yoke",
+ "zerofrom",
+ "zerovec",
+]
+
+[[package]]
+name = "icu_locale_core"
+version = "2.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "edba7861004dd3714265b4db54a3c390e880ab658fec5f7db895fae2046b5bb6"
+dependencies = [
+ "displaydoc",
+ "litemap",
+ "tinystr",
+ "writeable",
+ "zerovec",
+]
+
+[[package]]
+name = "icu_normalizer"
+version = "2.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5f6c8828b67bf8908d82127b2054ea1b4427ff0230ee9141c54251934ab1b599"
+dependencies = [
+ "icu_collections",
+ "icu_normalizer_data",
+ "icu_properties",
+ "icu_provider",
+ "smallvec",
+ "zerovec",
+]
+
+[[package]]
+name = "icu_normalizer_data"
+version = "2.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7aedcccd01fc5fe81e6b489c15b247b8b0690feb23304303a9e560f37efc560a"
+
+[[package]]
+name = "icu_properties"
+version = "2.1.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "020bfc02fe870ec3a66d93e677ccca0562506e5872c650f893269e08615d74ec"
+dependencies = [
+ "icu_collections",
+ "icu_locale_core",
+ "icu_properties_data",
+ "icu_provider",
+ "zerotrie",
+ "zerovec",
+]
+
+[[package]]
+name = "icu_properties_data"
+version = "2.1.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "616c294cf8d725c6afcd8f55abc17c56464ef6211f9ed59cccffe534129c77af"
+
+[[package]]
+name = "icu_provider"
+version = "2.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "85962cf0ce02e1e0a629cc34e7ca3e373ce20dda4c4d7294bbd0bf1fdb59e614"
+dependencies = [
+ "displaydoc",
+ "icu_locale_core",
+ "writeable",
+ "yoke",
+ "zerofrom",
+ "zerotrie",
+ "zerovec",
+]
+
+[[package]]
+name = "idna"
+version = "1.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3b0875f23caa03898994f6ddc501886a45c7d3d62d04d2d90788d47be1b1e4de"
+dependencies = [
+ "idna_adapter",
+ "smallvec",
+ "utf8_iter",
+]
+
+[[package]]
+name = "idna_adapter"
+version = "1.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3acae9609540aa318d1bc588455225fb2085b9ed0c4f6bd0d9d5bcd86f1a0344"
+dependencies = [
+ "icu_normalizer",
+ "icu_properties",
 ]
 
 [[package]]
@@ -518,6 +737,22 @@ dependencies = [
  "generic-array",
 ]
 
+[[package]]
+name = "ipnet"
+version = "2.11.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "469fb0b9cefa57e3ef31275ee7cacb78f2fdca44e4765491884a2b119d4eb130"
+
+[[package]]
+name = "iri-string"
+version = "0.7.10"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c91338f0783edbd6195decb37bae672fd3b165faffb89bf7b9e6942f8b1a731a"
+dependencies = [
+ "memchr",
+ "serde",
+]
+
 [[package]]
 name = "is_terminal_polyfill"
 version = "1.70.2"
@@ -552,6 +787,12 @@ version = "0.2.177"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "2874a2af47a2325c2001a6e6fad9b16a53b802102b528163885171cf92b15976"
 
+[[package]]
+name = "litemap"
+version = "0.8.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6373607a59f0be73a39b6fe456b8192fcc3585f602af20751600e974dd455e77"
+
 [[package]]
 name = "lock_api"
 version = "0.4.14"
@@ -567,6 +808,12 @@ version = "0.4.28"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "34080505efa8e45a4b816c349525ebe327ceaa8559756f0356cba97ef3bf7432"
 
+[[package]]
+name = "lru-slab"
+version = "0.1.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "112b39cec0b298b6c1999fee3e31427f74f676e4cb9879ed1a121b43661a4154"
+
 [[package]]
 name = "matchit"
 version = "0.8.4"
@@ -689,6 +936,24 @@ dependencies = [
  "universal-hash",
 ]
 
+[[package]]
+name = "potential_utf"
+version = "0.1.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b73949432f5e2a09657003c25bca5e19a0e9c84f8058ca374f49e0ebe605af77"
+dependencies = [
+ "zerovec",
+]
+
+[[package]]
+name = "ppv-lite86"
+version = "0.2.21"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "85eae3c4ed2f50dcfe72643da4befc30deadb458a9b590d720cde2f2b1e97da9"
+dependencies = [
+ "zerocopy",
+]
+
 [[package]]
 name = "proc-macro2"
 version = "1.0.103"
@@ -698,6 +963,61 @@ dependencies = [
  "unicode-ident",
 ]
 
+[[package]]
+name = "quinn"
+version = "0.11.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b9e20a958963c291dc322d98411f541009df2ced7b5a4f2bd52337638cfccf20"
+dependencies = [
+ "bytes",
+ "cfg_aliases",
+ "pin-project-lite",
+ "quinn-proto",
+ "quinn-udp",
+ "rustc-hash",
+ "rustls",
+ "socket2",
+ "thiserror",
+ "tokio",
+ "tracing",
+ "web-time",
+]
+
+[[package]]
+name = "quinn-proto"
+version = "0.11.13"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f1906b49b0c3bc04b5fe5d86a77925ae6524a19b816ae38ce1e426255f1d8a31"
+dependencies = [
+ "bytes",
+ "getrandom 0.3.4",
+ "lru-slab",
+ "rand",
+ "ring",
+ "rustc-hash",
+ "rustls",
+ "rustls-pki-types",
+ "slab",
+ "thiserror",
+ "tinyvec",
+ "tracing",
+ "web-time",
+]
+
+[[package]]
+name = "quinn-udp"
+version = "0.5.14"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "addec6a0dcad8a8d96a771f815f0eaf55f9d1805756410b39f5fa81332574cbd"
+dependencies = [
+ "cfg_aliases",
+ "libc",
+ "once_cell",
+ "socket2",
+ "tracing",
+ "windows-sys 0.52.0",
+]
+
 [[package]]
 name = "quote"
 version = "1.0.42"
@@ -713,6 +1033,26 @@ version = "5.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "69cdb34c158ceb288df11e18b4bd39de994f6657d83847bdffdbd7f346754b0f"
 
+[[package]]
+name = "rand"
+version = "0.9.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6db2770f06117d490610c7488547d543617b21bfa07796d7a12f6f1bd53850d1"
+dependencies = [
+ "rand_chacha",
+ "rand_core 0.9.5",
+]
+
+[[package]]
+name = "rand_chacha"
+version = "0.9.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d3022b5f1df60f26e1ffddd6c66e8aa15de382ae63b3a0c1bfc0e4d3e3f325cb"
+dependencies = [
+ "ppv-lite86",
+ "rand_core 0.9.5",
+]
+
 [[package]]
 name = "rand_core"
 version = "0.6.4"
@@ -722,6 +1062,15 @@ dependencies = [
  "getrandom 0.2.16",
 ]
 
+[[package]]
+name = "rand_core"
+version = "0.9.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "76afc826de14238e6e8c374ddcc1fa19e374fd8dd986b0d2af0d02377261d83c"
+dependencies = [
+ "getrandom 0.3.4",
+]
+
 [[package]]
 name = "redox_syscall"
 version = "0.5.18"
@@ -731,6 +1080,67 @@ dependencies = [
  "bitflags",
 ]
 
+[[package]]
+name = "reqwest"
+version = "0.12.24"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9d0946410b9f7b082a427e4ef5c8ff541a88b357bc6c637c40db3a68ac70a36f"
+dependencies = [
+ "base64",
+ "bytes",
+ "futures-core",
+ "futures-util",
+ "http",
+ "http-body",
+ "http-body-util",
+ "hyper",
+ "hyper-rustls",
+ "hyper-util",
+ "js-sys",
+ "log",
+ "percent-encoding",
+ "pin-project-lite",
+ "quinn",
+ "rustls",
+ "rustls-pki-types",
+ "serde",
+ "serde_json",
+ "serde_urlencoded",
+ "sync_wrapper",
+ "tokio",
+ "tokio-rustls",
+ "tokio-util",
+ "tower",
+ "tower-http",
+ "tower-service",
+ "url",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "wasm-streams",
+ "web-sys",
+ "webpki-roots",
+]
+
+[[package]]
+name = "ring"
+version = "0.17.14"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a4689e6c2294d81e88dc6261c768b63bc4fcdb852be6d1352498b114f61383b7"
+dependencies = [
+ "cc",
+ "cfg-if",
+ "getrandom 0.2.16",
+ "libc",
+ "untrusted",
+ "windows-sys 0.52.0",
+]
+
+[[package]]
+name = "rustc-hash"
+version = "2.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "357703d41365b4b27c590e3ed91eabb1b663f07c4c084095e60cbed4362dff0d"
+
 [[package]]
 name = "rustc_version"
 version = "0.4.1"
@@ -740,6 +1150,41 @@ dependencies = [
  "semver",
 ]
 
+[[package]]
+name = "rustls"
+version = "0.23.36"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c665f33d38cea657d9614f766881e4d510e0eda4239891eea56b4cadcf01801b"
+dependencies = [
+ "once_cell",
+ "ring",
+ "rustls-pki-types",
+ "rustls-webpki",
+ "subtle",
+ "zeroize",
+]
+
+[[package]]
+name = "rustls-pki-types"
+version = "1.14.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "be040f8b0a225e40375822a563fa9524378b9d63112f53e19ffff34df5d33fdd"
+dependencies = [
+ "web-time",
+ "zeroize",
+]
+
+[[package]]
+name = "rustls-webpki"
+version = "0.103.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d7df23109aa6c1567d1c575b9952556388da57401e4ace1d15f79eedad0d8f53"
+dependencies = [
+ "ring",
+ "rustls-pki-types",
+ "untrusted",
+]
+
 [[package]]
 name = "rustversion"
 version = "1.0.22"
@@ -835,15 +1280,23 @@ name = "server"
 version = "0.1.0"
 dependencies = [
  "axum",
+ "futures",
  "getrandom 0.3.4",
  "lazy_static",
  "message-tools",
+ "reqwest",
  "serde",
  "serde_json",
  "tokio",
  "tower-http",
 ]
 
+[[package]]
+name = "shlex"
+version = "1.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0fda2ff0d084019ba4d7c6f371c95d8fd75ce3524c3cb8fb653a3023f6323e64"
+
 [[package]]
 name = "signal-hook-registry"
 version = "1.4.6"
@@ -853,6 +1306,12 @@ dependencies = [
  "libc",
 ]
 
+[[package]]
+name = "slab"
+version = "0.4.12"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0c790de23124f9ab44544d7ac05d60440adc586479ce501c1d6d7da3cd8c9cf5"
+
 [[package]]
 name = "smallvec"
 version = "1.15.1"
@@ -869,6 +1328,12 @@ dependencies = [
  "windows-sys 0.60.2",
 ]
 
+[[package]]
+name = "stable_deref_trait"
+version = "1.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6ce2be8dc25455e1f91df71bfa12ad37d7af1092ae736f3a6cd0e37bc7810596"
+
 [[package]]
 name = "strsim"
 version = "0.11.1"
@@ -897,6 +1362,65 @@ name = "sync_wrapper"
 version = "1.0.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "0bf256ce5efdfa370213c1dabab5935a12e49f2c58d15e9eac2870d3b4f27263"
+dependencies = [
+ "futures-core",
+]
+
+[[package]]
+name = "synstructure"
+version = "0.13.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "728a70f3dbaf5bab7f0c4b1ac8d7ae5ea60a4b5549c8a5914361c99147a709d2"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
+[[package]]
+name = "thiserror"
+version = "2.0.18"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4288b5bcbc7920c07a1149a35cf9590a2aa808e0bc1eafaade0b80947865fbc4"
+dependencies = [
+ "thiserror-impl",
+]
+
+[[package]]
+name = "thiserror-impl"
+version = "2.0.18"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ebc4ee7f67670e9b64d05fa4253e753e016c6c95ff35b89b7941d6b856dec1d5"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
+[[package]]
+name = "tinystr"
+version = "0.8.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "42d3e9c45c09de15d06dd8acf5f4e0e399e85927b7f00711024eb7ae10fa4869"
+dependencies = [
+ "displaydoc",
+ "zerovec",
+]
+
+[[package]]
+name = "tinyvec"
+version = "1.10.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bfa5fdc3bce6191a1dbc8c02d5c8bffcf557bafa17c124c5264a458f1b0613fa"
+dependencies = [
+ "tinyvec_macros",
+]
+
+[[package]]
+name = "tinyvec_macros"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1f3ccbac311fea05f86f61904b462b55fb3df8837a366dfc601a0161d0532f20"
 
 [[package]]
 name = "tokio"
@@ -926,6 +1450,16 @@ dependencies = [
  "syn",
 ]
 
+[[package]]
+name = "tokio-rustls"
+version = "0.26.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1729aa945f29d91ba541258c8df89027d5792d85a8841fb65e8bf0f4ede4ef61"
+dependencies = [
+ "rustls",
+ "tokio",
+]
+
 [[package]]
 name = "tokio-util"
 version = "0.7.17"
@@ -970,12 +1504,14 @@ dependencies = [
  "http-body-util",
  "http-range-header",
  "httpdate",
+ "iri-string",
  "mime",
  "mime_guess",
  "percent-encoding",
  "pin-project-lite",
  "tokio",
  "tokio-util",
+ "tower",
  "tower-layer",
  "tower-service",
  "tracing",
@@ -1013,6 +1549,12 @@ dependencies = [
  "once_cell",
 ]
 
+[[package]]
+name = "try-lock"
+version = "0.2.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e421abadd41a4225275504ea4d6566923418b7f05506fbc9c0fe86ba7396114b"
+
 [[package]]
 name = "typenum"
 version = "1.19.0"
@@ -1041,6 +1583,30 @@ dependencies = [
  "subtle",
 ]
 
+[[package]]
+name = "untrusted"
+version = "0.9.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8ecb6da28b8a351d773b68d5825ac39017e680750f980f3a1a85cd8dd28a47c1"
+
+[[package]]
+name = "url"
+version = "2.5.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ff67a8a4397373c3ef660812acab3268222035010ab8680ec4215f38ba3d0eed"
+dependencies = [
+ "form_urlencoded",
+ "idna",
+ "percent-encoding",
+ "serde",
+]
+
+[[package]]
+name = "utf8_iter"
+version = "1.0.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b6c140620e7ffbb22c2dee59cafe6084a59b5ffc27a8859a5f0d494b5d52b6be"
+
 [[package]]
 name = "utf8parse"
 version = "0.2.2"
@@ -1053,6 +1619,15 @@ version = "0.9.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "0b928f33d975fc6ad9f86c8f283853ad26bdd5b10b7f1542aa2fa15e2289105a"
 
+[[package]]
+name = "want"
+version = "0.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bfa7760aed19e106de2c7c0b581b509f2f25d3dacaf737cb82ac61bc6d760b0e"
+dependencies = [
+ "try-lock",
+]
+
 [[package]]
 name = "wasi"
 version = "0.11.1+wasi-snapshot-preview1"
@@ -1081,6 +1656,19 @@ dependencies = [
  "wasm-bindgen-shared",
 ]
 
+[[package]]
+name = "wasm-bindgen-futures"
+version = "0.4.55"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "551f88106c6d5e7ccc7cd9a16f312dd3b5d36ea8b4954304657d5dfba115d4a0"
+dependencies = [
+ "cfg-if",
+ "js-sys",
+ "once_cell",
+ "wasm-bindgen",
+ "web-sys",
+]
+
 [[package]]
 name = "wasm-bindgen-macro"
 version = "0.2.105"
@@ -1113,6 +1701,19 @@ dependencies = [
  "unicode-ident",
 ]
 
+[[package]]
+name = "wasm-streams"
+version = "0.4.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "15053d8d85c7eccdbefef60f06769760a563c7f0a9d6902a13d35c7800b0ad65"
+dependencies = [
+ "futures-util",
+ "js-sys",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "web-sys",
+]
+
 [[package]]
 name = "web-sys"
 version = "0.3.82"
@@ -1123,19 +1724,47 @@ dependencies = [
  "wasm-bindgen",
 ]
 
+[[package]]
+name = "web-time"
+version = "1.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5a6580f308b1fad9207618087a65c04e7a10bc77e02c8e84e9b00dd4b12fa0bb"
+dependencies = [
+ "js-sys",
+ "wasm-bindgen",
+]
+
+[[package]]
+name = "webpki-roots"
+version = "1.0.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "22cfaf3c063993ff62e73cb4311efde4db1efb31ab78a3e5c457939ad5cc0bed"
+dependencies = [
+ "rustls-pki-types",
+]
+
 [[package]]
 name = "windows-link"
 version = "0.2.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f0805222e57f7521d6a62e36fa9163bc891acd422f971defe97d64e70d0a4fe5"
 
+[[package]]
+name = "windows-sys"
+version = "0.52.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "282be5f36a8ce781fad8c8ae18fa3f9beff57ec1b52cb3de0789201425d9a33d"
+dependencies = [
+ "windows-targets 0.52.6",
+]
+
 [[package]]
 name = "windows-sys"
 version = "0.60.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f2f500e4d28234f72040990ec9d39e3a6b950f9f22d3dba18416c35882612bcb"
 dependencies = [
- "windows-targets",
+ "windows-targets 0.53.5",
 ]
 
 [[package]]
@@ -1147,6 +1776,22 @@ dependencies = [
  "windows-link",
 ]
 
+[[package]]
+name = "windows-targets"
+version = "0.52.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9b724f72796e036ab90c1021d4780d4d3d648aca59e491e6b98e725b84e99973"
+dependencies = [
+ "windows_aarch64_gnullvm 0.52.6",
+ "windows_aarch64_msvc 0.52.6",
+ "windows_i686_gnu 0.52.6",
+ "windows_i686_gnullvm 0.52.6",
+ "windows_i686_msvc 0.52.6",
+ "windows_x86_64_gnu 0.52.6",
+ "windows_x86_64_gnullvm 0.52.6",
+ "windows_x86_64_msvc 0.52.6",
+]
+
 [[package]]
 name = "windows-targets"
 version = "0.53.5"
@@ -1154,58 +1799,106 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "4945f9f551b88e0d65f3db0bc25c33b8acea4d9e41163edf90dcd0b19f9069f3"
 dependencies = [
  "windows-link",
- "windows_aarch64_gnullvm",
- "windows_aarch64_msvc",
- "windows_i686_gnu",
- "windows_i686_gnullvm",
- "windows_i686_msvc",
- "windows_x86_64_gnu",
- "windows_x86_64_gnullvm",
- "windows_x86_64_msvc",
+ "windows_aarch64_gnullvm 0.53.1",
+ "windows_aarch64_msvc 0.53.1",
+ "windows_i686_gnu 0.53.1",
+ "windows_i686_gnullvm 0.53.1",
+ "windows_i686_msvc 0.53.1",
+ "windows_x86_64_gnu 0.53.1",
+ "windows_x86_64_gnullvm 0.53.1",
+ "windows_x86_64_msvc 0.53.1",
 ]
 
+[[package]]
+name = "windows_aarch64_gnullvm"
+version = "0.52.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "32a4622180e7a0ec044bb555404c800bc9fd9ec262ec147edd5989ccd0c02cd3"
+
 [[package]]
 name = "windows_aarch64_gnullvm"
 version = "0.53.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a9d8416fa8b42f5c947f8482c43e7d89e73a173cead56d044f6a56104a6d1b53"
 
+[[package]]
+name = "windows_aarch64_msvc"
+version = "0.52.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "09ec2a7bb152e2252b53fa7803150007879548bc709c039df7627cabbd05d469"
+
 [[package]]
 name = "windows_aarch64_msvc"
 version = "0.53.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b9d782e804c2f632e395708e99a94275910eb9100b2114651e04744e9b125006"
 
+[[package]]
+name = "windows_i686_gnu"
+version = "0.52.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8e9b5ad5ab802e97eb8e295ac6720e509ee4c243f69d781394014ebfe8bbfa0b"
+
 [[package]]
 name = "windows_i686_gnu"
 version = "0.53.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "960e6da069d81e09becb0ca57a65220ddff016ff2d6af6a223cf372a506593a3"
 
+[[package]]
+name = "windows_i686_gnullvm"
+version = "0.52.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0eee52d38c090b3caa76c563b86c3a4bd71ef1a819287c19d586d7334ae8ed66"
+
 [[package]]
 name = "windows_i686_gnullvm"
 version = "0.53.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "fa7359d10048f68ab8b09fa71c3daccfb0e9b559aed648a8f95469c27057180c"
 
+[[package]]
+name = "windows_i686_msvc"
+version = "0.52.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "240948bc05c5e7c6dabba28bf89d89ffce3e303022809e73deaefe4f6ec56c66"
+
 [[package]]
 name = "windows_i686_msvc"
 version = "0.53.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "1e7ac75179f18232fe9c285163565a57ef8d3c89254a30685b57d83a38d326c2"
 
+[[package]]
+name = "windows_x86_64_gnu"
+version = "0.52.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "147a5c80aabfbf0c7d901cb5895d1de30ef2907eb21fbbab29ca94c5b08b1a78"
+
 [[package]]
 name = "windows_x86_64_gnu"
 version = "0.53.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9c3842cdd74a865a8066ab39c8a7a473c0778a3f29370b5fd6b4b9aa7df4a499"
 
+[[package]]
+name = "windows_x86_64_gnullvm"
+version = "0.52.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "24d5b23dc417412679681396f2b49f3de8c1473deb516bd34410872eff51ed0d"
+
 [[package]]
 name = "windows_x86_64_gnullvm"
 version = "0.53.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "0ffa179e2d07eee8ad8f57493436566c7cc30ac536a3379fdf008f47f6bb7ae1"
 
+[[package]]
+name = "windows_x86_64_msvc"
+version = "0.52.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "589f6da84c646204747d1270a2a5661ea66ed1cced2631d546fdfb155959f9ec"
+
 [[package]]
 name = "windows_x86_64_msvc"
 version = "0.53.1"
@@ -1218,6 +1911,12 @@ version = "0.46.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f17a85883d4e6d00e8a97c586de764dabcc06133f7f1d55dce5cdc070ad7fe59"
 
+[[package]]
+name = "writeable"
+version = "0.6.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9edde0db4769d2dc68579893f2306b26c6ecfbe0ef499b013d731b7b9247e0b9"
+
 [[package]]
 name = "x25519-dalek"
 version = "2.0.1"
@@ -1225,11 +1924,75 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "c7e468321c81fb07fa7f4c636c3972b9100f0346e5b6a9f2bd0603a52f7ed277"
 dependencies = [
  "curve25519-dalek",
- "rand_core",
+ "rand_core 0.6.4",
  "serde",
  "zeroize",
 ]
 
+[[package]]
+name = "yoke"
+version = "0.8.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "72d6e5c6afb84d73944e5cedb052c4680d5657337201555f9f2a16b7406d4954"
+dependencies = [
+ "stable_deref_trait",
+ "yoke-derive",
+ "zerofrom",
+]
+
+[[package]]
+name = "yoke-derive"
+version = "0.8.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b659052874eb698efe5b9e8cf382204678a0086ebf46982b79d6ca3182927e5d"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+ "synstructure",
+]
+
+[[package]]
+name = "zerocopy"
+version = "0.8.39"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "db6d35d663eadb6c932438e763b262fe1a70987f9ae936e60158176d710cae4a"
+dependencies = [
+ "zerocopy-derive",
+]
+
+[[package]]
+name = "zerocopy-derive"
+version = "0.8.39"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4122cd3169e94605190e77839c9a40d40ed048d305bfdc146e7df40ab0f3e517"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
+[[package]]
+name = "zerofrom"
+version = "0.1.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "50cc42e0333e05660c3587f3bf9d0478688e15d870fab3346451ce7f8c9fbea5"
+dependencies = [
+ "zerofrom-derive",
+]
+
+[[package]]
+name = "zerofrom-derive"
+version = "0.1.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d71e5d6e06ab090c67b5e44993ec16b72dcbaabc526db883a360057678b48502"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+ "synstructure",
+]
+
 [[package]]
 name = "zeroize"
 version = "1.8.2"
@@ -1249,3 +2012,36 @@ dependencies = [
  "quote",
  "syn",
 ]
+
+[[package]]
+name = "zerotrie"
+version = "0.2.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2a59c17a5562d507e4b54960e8569ebee33bee890c70aa3fe7b97e85a9fd7851"
+dependencies = [
+ "displaydoc",
+ "yoke",
+ "zerofrom",
+]
+
+[[package]]
+name = "zerovec"
+version = "0.11.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6c28719294829477f525be0186d13efa9a3c602f7ec202ca9e353d310fb9a002"
+dependencies = [
+ "yoke",
+ "zerofrom",
+ "zerovec-derive",
+]
+
+[[package]]
+name = "zerovec-derive"
+version = "0.11.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "eadce39539ca5cb3985590102671f2567e659fca9666581ad3411d59207951f3"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
diff --git a/crates/server/Cargo.toml b/crates/server/Cargo.toml
index 5972592..453e03c 100644
--- a/crates/server/Cargo.toml
+++ b/crates/server/Cargo.toml
@@ -17,3 +17,5 @@ message-tools = { path = "../message-tools" }
 getrandom = "0.3.4"
 lazy_static = "1.5.0"
 serde = { version = "1.0.228", features = ["derive"] }
+reqwest = { version = "0.12", default-features = false, features = ["stream", "rustls-tls"] }
+futures = "0.3"
diff --git a/crates/server/bin/main.rs b/crates/server/bin/main.rs
index f4bf5a3..6c20b08 100644
--- a/crates/server/bin/main.rs
+++ b/crates/server/bin/main.rs
@@ -1,17 +1,23 @@
 use axum::{
     Json, Router,
-    http::StatusCode,
+    body::Body,
+    extract::{Path as AxumPath, Query, State},
+    http::{HeaderMap, StatusCode},
     response::Html,
     routing::{get, post},
 };
+use futures::TryStreamExt;
 use message_tools::BoxedMessage;
-use serde::Serialize;
+use serde::{Deserialize, Serialize};
 use std::{
+    collections::HashMap,
     fs::OpenOptions,
     io::{BufRead, Read},
     path::{Path, PathBuf},
+    sync::Arc,
 };
 use tokio::io::AsyncWriteExt;
+use tokio::sync::RwLock;
 use tower_http::services::ServeDir;
 
 const PUBKEY_PATH: &str = "./pubkeys/public_keys.json";
@@ -24,6 +30,8 @@ lazy_static::lazy_static! {
 type Error = Box<dyn std::error::Error>;
 type Result<T> = std::result::Result<T, Error>;
 
+type UrlCache = Arc<RwLock<HashMap<String, String>>>;
+
 fn load_public_keys(path: impl AsRef<Path>) -> std::io::Result<Vec<Vec<u8>>> {
     // Open the file
     let f = OpenOptions::new().read(true).write(false).open(path)?;
@@ -57,8 +65,174 @@ fn load_public_keys(path: impl AsRef<Path>) -> std::io::Result<Vec<Vec<u8>>> {
     Ok(public_keys)
 }
 
+#[derive(Deserialize)]
+struct ResolveQuery {
+    url: String,
+}
+
+#[derive(Serialize)]
+struct ResolveResponse {
+    #[serde(skip_serializing_if = "Option::is_none")]
+    id: Option<String>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    title: Option<String>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    thumbnail: Option<String>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    duration: Option<f64>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    stream: Option<String>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    error: Option<String>,
+}
+
+async fn resolve_handler(
+    State(cache): State<UrlCache>,
+    Query(params): Query<ResolveQuery>,
+) -> Json<ResolveResponse> {
+    let output = tokio::process::Command::new("yt-dlp")
+        .args([
+            "-j",
+            "-f", "best[ext=mp4][protocol=https]/best[ext=mp4][protocol=http]/best[protocol=https]/best[protocol=http]/best",
+            "--no-playlist",
+            &params.url,
+        ])
+        .output()
+        .await;
+
+    let output = match output {
+        Ok(o) => o,
+        Err(e) => {
+            return Json(ResolveResponse {
+                id: None,
+                title: None,
+                thumbnail: None,
+                duration: None,
+                stream: None,
+                error: Some(format!("Failed to run yt-dlp: {e}")),
+            });
+        }
+    };
+
+    if !output.status.success() {
+        let stderr = String::from_utf8_lossy(&output.stderr);
+        return Json(ResolveResponse {
+            id: None,
+            title: None,
+            thumbnail: None,
+            duration: None,
+            stream: None,
+            error: Some(format!("yt-dlp failed: {stderr}")),
+        });
+    }
+
+    let info: serde_json::Value = match serde_json::from_slice(&output.stdout) {
+        Ok(v) => v,
+        Err(e) => {
+            return Json(ResolveResponse {
+                id: None,
+                title: None,
+                thumbnail: None,
+                duration: None,
+                stream: None,
+                error: Some(format!("Failed to parse yt-dlp output: {e}")),
+            });
+        }
+    };
+
+    let video_id = info["id"].as_str().unwrap_or("unknown").to_string();
+    let title = info["title"].as_str().map(|s| s.to_string());
+    let thumbnail = info["thumbnail"].as_str().map(|s| s.to_string());
+    let duration = info["duration"].as_f64();
+    let stream_url = info["url"].as_str().unwrap_or("").to_string();
+
+    if stream_url.is_empty() {
+        return Json(ResolveResponse {
+            id: None,
+            title: None,
+            thumbnail: None,
+            duration: None,
+            stream: None,
+            error: Some("No stream URL found".to_string()),
+        });
+    }
+
+    cache.write().await.insert(video_id.clone(), stream_url);
+
+    Json(ResolveResponse {
+        id: Some(video_id.clone()),
+        title,
+        thumbnail,
+        duration,
+        stream: Some(format!("/music/api/stream/{video_id}")),
+        error: None,
+    })
+}
+
+async fn stream_handler(
+    State(cache): State<UrlCache>,
+    AxumPath(id): AxumPath<String>,
+    headers: HeaderMap,
+) -> axum::response::Response<Body> {
+    let stream_url = {
+        let map = cache.read().await;
+        map.get(&id).cloned()
+    };
+
+    let stream_url = match stream_url {
+        Some(u) => u,
+        None => {
+            return axum::response::Response::builder()
+                .status(StatusCode::NOT_FOUND)
+                .body(Body::from("Stream not found"))
+                .unwrap();
+        }
+    };
+
+    let client = reqwest::Client::new();
+    let mut req = client.get(&stream_url);
+
+    if let Some(range) = headers.get("range") {
+        req = req.header("Range", range);
+    }
+
+    let upstream = match req.send().await {
+        Ok(r) => r,
+        Err(e) => {
+            return axum::response::Response::builder()
+                .status(StatusCode::BAD_GATEWAY)
+                .body(Body::from(format!("Upstream error: {e}")))
+                .unwrap();
+        }
+    };
+
+    let status = upstream.status();
+    let mut response = axum::response::Response::builder().status(status.as_u16());
+
+    for key in ["content-type", "content-length", "content-range", "accept-ranges"] {
+        if let Some(val) = upstream.headers().get(key) {
+            response = response.header(key, val);
+        }
+    }
+
+    let stream = upstream
+        .bytes_stream()
+        .map_err(|e| std::io::Error::new(std::io::ErrorKind::Other, e));
+    let body = Body::from_stream(stream);
+
+    response.body(body).unwrap()
+}
+
 #[tokio::main]
 async fn main() -> Result<()> {
+    let url_cache: UrlCache = Arc::new(RwLock::new(HashMap::new()));
+
+    let music_routes = Router::new()
+        .route("/", get(serve_path("./routes/music/index.html")?))
+        .route("/api/resolve", get(resolve_handler))
+        .route("/api/stream/{id}", get(stream_handler))
+        .with_state(url_cache);
+
     // build our application with a single route
     let app = Router::new()
         .route("/", get(serve_path("./routes/root/index.html")?))
@@ -67,6 +241,7 @@ async fn main() -> Result<()> {
         .route("/contact", get(serve_path("./routes/contact/index.html")?))
         .route("/contact/message", get(serve_path("./routes/contact/message/index.html")?))
         .route("/api/publish", post(publish_message))
+        .nest("/music", music_routes)
         .nest_service("/routes", ServeDir::new("./routes"));
 
     let addr = "0.0.0.0:3000";
diff --git a/routes/music/index.html b/routes/music/index.html
new file mode 100644
index 0000000..a1b96ca
--- /dev/null
+++ b/routes/music/index.html
@@ -0,0 +1,697 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>YouTube Music Visualizer</title>
+<style>
+*{margin:0;padding:0;box-sizing:border-box}
+body{background:#0a0a0f;color:#e0e0e0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;height:100vh;overflow:hidden}
+#app{display:flex;flex-direction:column;height:100vh;padding:16px}
+
+.top-bar{display:flex;gap:10px;align-items:center;z-index:10;flex-shrink:0}
+.url-input{
+  flex:1;padding:11px 16px;
+  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
+  border-radius:8px;color:#fff;font-size:14px;outline:none;transition:border-color .2s;
+}
+.url-input:focus{border-color:rgba(138,43,226,.6)}
+.url-input::placeholder{color:rgba(255,255,255,.3)}
+
+.btn{
+  padding:11px 20px;border:none;border-radius:8px;
+  color:#fff;font-size:13px;font-weight:600;cursor:pointer;
+  transition:opacity .2s,transform .1s;white-space:nowrap;
+}
+.btn:hover{opacity:.88}
+.btn:active{transform:scale(.97)}
+.btn:disabled{opacity:.35;cursor:not-allowed}
+.btn-primary{background:linear-gradient(135deg,#8a2be2,#4a00e0)}
+
+.content{flex:1;position:relative;min-height:0;margin-top:12px;border-radius:12px;overflow:hidden}
+canvas{position:absolute;top:0;left:0;width:100%;height:100%}
+
+.splash{
+  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
+  text-align:center;z-index:2;pointer-events:none;
+}
+.splash h1{
+  font-size:2.4em;font-weight:700;
+  background:linear-gradient(135deg,#8a2be2,#e040fb);
+  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
+  margin-bottom:6px;
+}
+.splash p{color:rgba(255,255,255,.35);font-size:1em;line-height:1.6}
+
+#player-wrap{
+  position:absolute;bottom:16px;right:16px;
+  width:320px;height:180px;
+  border-radius:10px;overflow:hidden;
+  box-shadow:0 8px 32px rgba(0,0,0,.7);
+  border:1px solid rgba(255,255,255,.08);
+  z-index:5;display:none;transition:opacity .3s;background:#000;
+}
+#player-wrap video{width:100%;height:100%;display:block}
+#player-wrap.dragging{opacity:.7}
+.drag-handle{
+  position:absolute;top:0;left:0;right:0;height:24px;cursor:grab;z-index:6;
+  background:linear-gradient(180deg,rgba(0,0,0,.5),transparent);
+}
+.drag-handle:active{cursor:grabbing}
+.resize-handle{position:absolute;bottom:0;left:0;width:16px;height:16px;cursor:nesw-resize;z-index:6}
+.resize-handle::after{
+  content:'';position:absolute;bottom:3px;left:3px;
+  width:8px;height:8px;border-left:2px solid rgba(255,255,255,.3);border-bottom:2px solid rgba(255,255,255,.3);
+}
+.title-bar{
+  position:absolute;bottom:0;left:0;right:0;
+  padding:4px 8px;background:rgba(0,0,0,.6);
+  font-size:11px;color:rgba(255,255,255,.6);
+  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:6;
+}
+
+.viz-modes{
+  position:absolute;bottom:16px;left:16px;
+  display:flex;flex-wrap:wrap;gap:5px;z-index:10;max-width:calc(100% - 360px);
+}
+.vbtn{
+  padding:6px 11px;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.12);
+  border-radius:6px;color:rgba(255,255,255,.45);font-size:11px;
+  cursor:pointer;transition:all .2s;backdrop-filter:blur(4px);
+}
+.vbtn:hover{color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.25)}
+.vbtn.active{background:rgba(138,43,226,.3);border-color:rgba(138,43,226,.5);color:#fff}
+
+.status-pill{
+  position:absolute;top:12px;left:12px;padding:5px 12px;
+  background:rgba(0,0,0,.55);border-radius:20px;font-size:11px;
+  color:rgba(255,255,255,.4);z-index:10;display:none;
+}
+.status-pill.live{color:#4caf50}
+.status-pill.live::before{
+  content:'';display:inline-block;width:6px;height:6px;
+  background:#4caf50;border-radius:50%;margin-right:6px;animation:blink 1.5s infinite;
+}
+.status-pill.loading{color:#ff9800}
+.status-pill.loading::before{
+  content:'';display:inline-block;width:6px;height:6px;
+  background:#ff9800;border-radius:50%;margin-right:6px;animation:blink .6s infinite;
+}
+.status-pill.error{color:#f44336}
+@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
+</style>
+</head>
+<body>
+<div id="app">
+  <div class="top-bar">
+    <input class="url-input" id="url-input" type="text"
+      placeholder="Paste a YouTube URL and press Enter..." />
+    <button class="btn btn-primary" id="load-btn">Load</button>
+  </div>
+  <div class="content" id="content">
+    <canvas id="cv"></canvas>
+    <div class="splash" id="splash">
+      <h1>Music Visualizer</h1>
+      <p>Paste a YouTube URL above and press Enter.</p>
+    </div>
+    <div class="status-pill" id="status"></div>
+    <div id="player-wrap">
+      <div class="drag-handle" id="drag-handle"></div>
+      <div class="resize-handle" id="resize-handle"></div>
+      <video id="vid" controls crossorigin="anonymous"></video>
+      <div class="title-bar" id="title-bar"></div>
+    </div>
+    <div class="viz-modes" id="viz-modes" style="display:none">
+      <button class="vbtn active" data-m="bars">Bars</button>
+      <button class="vbtn" data-m="circle">Circle</button>
+      <button class="vbtn" data-m="wave">Wave</button>
+      <button class="vbtn" data-m="particles">Particles</button>
+      <button class="vbtn" data-m="fractal">Fractal</button>
+      <button class="vbtn" data-m="horizon">Horizon</button>
+      <button class="vbtn" data-m="starburst">Supernova</button>
+    </div>
+  </div>
+</div>
+
+<script>
+const $ = id => document.getElementById(id);
+const TAU = Math.PI * 2;
+
+/* ── Canvas ──────────────────────────────────────── */
+const cv = $('cv'), c = cv.getContext('2d');
+let W, H;
+function resize() {
+  const dpr = devicePixelRatio || 1;
+  W = cv.clientWidth; H = cv.clientHeight;
+  cv.width = W * dpr; cv.height = H * dpr;
+  c.setTransform(dpr, 0, 0, dpr, 0, 0);
+}
+resize();
+window.addEventListener('resize', resize);
+
+/* ── Status helper ───────────────────────────────── */
+function setStatus(cls, text) {
+  const s = $('status');
+  s.style.display = text ? 'block' : 'none';
+  s.className = 'status-pill' + (cls ? ' ' + cls : '');
+  s.textContent = text || '';
+}
+
+/* ── Audio analysis ──────────────────────────────── */
+let actx, analyser, freq, time, bufLen;
+let vizMode = 'bars', animId, running = false;
+let particles = [];
+const vid = $('vid');
+
+function connectAudio() {
+  if (actx) return;
+  actx = new AudioContext();
+  const src = actx.createMediaElementSource(vid);
+  analyser = actx.createAnalyser();
+  analyser.fftSize = 2048;
+  analyser.smoothingTimeConstant = 0.82;
+  src.connect(analyser);
+  analyser.connect(actx.destination);
+  bufLen = analyser.frequencyBinCount;
+  freq = new Uint8Array(bufLen);
+  time = new Uint8Array(bufLen);
+}
+
+function startViz() {
+  if (running) return;
+  connectAudio();
+  if (actx.state === 'suspended') actx.resume();
+  running = true;
+  particles = [];
+  $('viz-modes').style.display = 'flex';
+  setStatus('live', 'Visualizing');
+  resize();
+  draw();
+}
+
+function stopViz() {
+  running = false;
+  if (animId) cancelAnimationFrame(animId);
+  $('viz-modes').style.display = 'none';
+  setStatus('', '');
+  c.clearRect(0, 0, W, H);
+}
+
+/* ── Load video via backend ──────────────────────── */
+async function loadVideo(youtubeUrl) {
+  setStatus('loading', 'Resolving stream...');
+  $('load-btn').disabled = true;
+  try {
+    const resp = await fetch('/music/api/resolve?url=' + encodeURIComponent(youtubeUrl));
+    const data = await resp.json();
+    if (data.error) throw new Error(data.error);
+    $('splash').style.display = 'none';
+    $('player-wrap').style.display = 'block';
+    $('title-bar').textContent = data.title || '';
+    vid.src = data.stream;
+    vid.load();
+    vid.play().catch(() => {});
+    vid.addEventListener('playing', function once() {
+      vid.removeEventListener('playing', once);
+      startViz();
+    });
+    setStatus('live', 'Playing');
+  } catch (e) {
+    setStatus('error', 'Error: ' + e.message.slice(0, 120));
+    console.error(e);
+  } finally {
+    $('load-btn').disabled = false;
+  }
+}
+
+/* ── UI events ───────────────────────────────────── */
+$('load-btn').addEventListener('click', () => {
+  const url = $('url-input').value.trim();
+  if (!url) return;
+  loadVideo(url);
+});
+$('url-input').addEventListener('keydown', e => {
+  if (e.key === 'Enter') $('load-btn').click();
+});
+
+document.querySelectorAll('.vbtn').forEach(b => {
+  b.addEventListener('click', () => {
+    document.querySelectorAll('.vbtn').forEach(x => x.classList.remove('active'));
+    b.classList.add('active');
+    vizMode = b.dataset.m;
+    if (vizMode === 'particles') particles = [];
+    if (vizMode === 'starburst') { shockwaves.length = 0; novaParticles.length = 0; }
+    c.fillStyle = 'rgba(10,10,15,1)';
+    c.fillRect(0, 0, W, H);
+  });
+});
+
+/* ── Drag / resize player ────────────────────────── */
+(function() {
+  const pw = $('player-wrap'), dh = $('drag-handle'), rh = $('resize-handle');
+  let dragging = false, resizing = false, ox, oy, ow, oh;
+  dh.addEventListener('mousedown', e => {
+    dragging = true; pw.classList.add('dragging');
+    ox = e.clientX - pw.offsetLeft; oy = e.clientY - pw.offsetTop; e.preventDefault();
+  });
+  rh.addEventListener('mousedown', e => {
+    resizing = true; ox = e.clientX; oy = e.clientY;
+    ow = pw.offsetWidth; oh = pw.offsetHeight; e.preventDefault();
+  });
+  window.addEventListener('mousemove', e => {
+    if (dragging) {
+      pw.style.left = (e.clientX - ox) + 'px'; pw.style.top = (e.clientY - oy) + 'px';
+      pw.style.right = 'auto'; pw.style.bottom = 'auto';
+    }
+    if (resizing) {
+      pw.style.width = Math.max(200, ow - (e.clientX - ox)) + 'px';
+      pw.style.height = Math.max(120, oh + (e.clientY - oy)) + 'px';
+    }
+  });
+  window.addEventListener('mouseup', () => { dragging = false; resizing = false; pw.classList.remove('dragging'); });
+})();
+
+/* ── Helpers ──────────────────────────────────────── */
+function avg(lo, hi) {
+  const s = Math.floor(lo * bufLen), e = Math.floor(hi * bufLen);
+  let sum = 0; for (let i = s; i < e; i++) sum += freq[i];
+  return sum / (e - s || 1) / 255;
+}
+let T = 0; // global time in seconds
+
+/* ── Fade amounts per mode ───────────────────────── */
+const FADE = {
+  bars:.18, circle:.18, wave:.18, particles:.12,
+  fractal:.28, horizon:.06, starburst:.08,
+};
+
+/* ── Draw loop ───────────────────────────────────── */
+function draw() {
+  if (!running) return;
+  animId = requestAnimationFrame(draw);
+  analyser.getByteFrequencyData(freq);
+  analyser.getByteTimeDomainData(time);
+  T = performance.now() / 1000;
+
+  const fade = FADE[vizMode] ?? .18;
+  c.fillStyle = `rgba(10,10,15,${fade})`;
+  c.fillRect(0, 0, W, H);
+
+  switch (vizMode) {
+    case 'bars':      drawBars(); break;
+    case 'circle':    drawCircle(); break;
+    case 'wave':      drawWave(); break;
+    case 'particles': drawParticles(); break;
+    case 'fractal':   drawFractal(); break;
+    case 'horizon':   drawHorizon(); break;
+    case 'starburst': drawStarburst(); break;
+  }
+}
+
+/* ═══════════════════════════════════════════════════
+   CLASSIC MODES
+   ═══════════════════════════════════════════════════ */
+
+/* ── Bars ─────────────────────────────────────────── */
+function drawBars() {
+  const n = 80, bw = W / n - 2, step = Math.floor(bufLen / n);
+  for (let i = 0; i < n; i++) {
+    let s = 0;
+    for (let j = 0; j < step; j++) s += freq[i * step + j];
+    const v = s / step / 255, bh = v * H * .88, hue = 260 + v * 70, x = i * (bw + 2);
+    const g = c.createLinearGradient(x, H, x, H - bh);
+    g.addColorStop(0, `hsla(${hue},80%,60%,.92)`);
+    g.addColorStop(1, `hsla(${hue+30},70%,35%,.25)`);
+    c.fillStyle = g; c.fillRect(x, H - bh, bw, bh);
+    c.shadowColor = `hsla(${hue},80%,60%,.5)`; c.shadowBlur = 12;
+    c.fillRect(x, H - bh, bw, 2); c.shadowBlur = 0;
+  }
+  c.save(); c.globalAlpha = .08; c.scale(1, -1); c.translate(0, -H * 2);
+  for (let i = 0; i < n; i++) {
+    let s = 0; for (let j = 0; j < step; j++) s += freq[i * step + j];
+    const v = s / step / 255, bh = v * H * .88, x = i * (bw + 2);
+    c.fillStyle = `hsla(${260+v*70},80%,60%,.5)`; c.fillRect(x, H - bh, bw, bh);
+  }
+  c.restore();
+}
+
+/* ── Circle ───────────────────────────────────────── */
+function drawCircle() {
+  const cx = W/2, cy = H/2, R = Math.min(W,H)*.18, n = 180, step = Math.floor(bufLen/n);
+  for (let i = 0; i < n; i++) {
+    let s = 0; for (let j = 0; j < step; j++) s += freq[i*step+j];
+    const v = s/step/255, a = (i/n)*TAU - Math.PI/2;
+    const r2 = R + v*Math.min(W,H)*.32, hue = 260+(i/n)*100;
+    c.beginPath();
+    c.moveTo(cx+Math.cos(a)*R, cy+Math.sin(a)*R);
+    c.lineTo(cx+Math.cos(a)*r2, cy+Math.sin(a)*r2);
+    c.strokeStyle = `hsla(${hue},80%,60%,${.25+v*.75})`; c.lineWidth = 1.5; c.stroke();
+  }
+  c.beginPath(); c.arc(cx,cy,R,0,TAU);
+  c.strokeStyle = 'rgba(138,43,226,.15)'; c.lineWidth = 1; c.stroke();
+  const bass = avg(0,.08);
+  const rg = c.createRadialGradient(cx,cy,0,cx,cy,R*(1+bass));
+  rg.addColorStop(0, `hsla(280,80%,60%,${bass*.35})`); rg.addColorStop(1, 'transparent');
+  c.fillStyle = rg; c.fillRect(0,0,W,H);
+}
+
+/* ── Wave ─────────────────────────────────────────── */
+function drawWave() {
+  const mid = H/2;
+  c.beginPath(); c.moveTo(0, mid);
+  for (let i = 0; i < bufLen; i++) c.lineTo((i/bufLen)*W, mid - (freq[i]/255)*mid*.85);
+  c.lineTo(W, mid);
+  const fg = c.createLinearGradient(0,0,0,H);
+  fg.addColorStop(0, 'hsla(280,80%,55%,.30)'); fg.addColorStop(.5, 'hsla(260,80%,40%,.03)');
+  c.fillStyle = fg; c.fill();
+  c.beginPath();
+  for (let i = 0; i < bufLen; i++) { const x=(i/bufLen)*W, y=(time[i]/128)*mid; i===0?c.moveTo(x,y):c.lineTo(x,y); }
+  c.strokeStyle = 'hsla(280,90%,70%,.85)'; c.lineWidth = 2; c.stroke();
+  c.beginPath();
+  for (let i = 0; i < bufLen; i++) { const x=(i/bufLen)*W, y=H-(time[i]/128)*mid; i===0?c.moveTo(x,y):c.lineTo(x,y); }
+  c.strokeStyle = 'hsla(300,90%,65%,.25)'; c.lineWidth = 1; c.stroke();
+}
+
+/* ── Particles ────────────────────────────────────── */
+function initParticles() {
+  particles = [];
+  for (let i = 0; i < 250; i++) particles.push({
+    x:Math.random()*W, y:Math.random()*H,
+    vx:(Math.random()-.5)*1.5, vy:(Math.random()-.5)*1.5,
+    s:Math.random()*2.5+.8, hue:Math.random()*80+250,
+  });
+}
+function drawParticles() {
+  if (!particles.length) initParticles();
+  const bass=avg(0,.05), mid2=avg(.05,.2), treb=avg(.2,.5), energy=(bass*2+mid2+treb)/4;
+  for (const p of particles) {
+    p.vx+=(Math.random()-.5)*bass*4; p.vy+=(Math.random()-.5)*bass*4;
+    p.vx*=.95; p.vy*=.95; p.x+=p.vx; p.y+=p.vy;
+    if(p.x<0)p.x+=W;if(p.x>W)p.x-=W;if(p.y<0)p.y+=H;if(p.y>H)p.y-=H;
+    const sz=p.s*(1+energy*3.5);
+    c.beginPath(); c.arc(p.x,p.y,sz,0,TAU);
+    c.fillStyle=`hsla(${p.hue+bass*50},80%,60%,${.25+energy*.7})`; c.fill();
+  }
+  if (energy > .2) {
+    const maxD=70+energy*80, maxD2=maxD*maxD;
+    for (let i=0;i<particles.length;i++) { const a=particles[i];
+      for (let j=i+1;j<particles.length;j++) { const b=particles[j];
+        const dx=a.x-b.x,dy=a.y-b.y,d2=dx*dx+dy*dy;
+        if(d2<maxD2){c.beginPath();c.moveTo(a.x,a.y);c.lineTo(b.x,b.y);
+          c.strokeStyle=`hsla(280,60%,60%,${(1-Math.sqrt(d2)/maxD)*.12})`;c.lineWidth=.5;c.stroke();}
+    }}
+  }
+}
+
+/* ═══════════════════════════════════════════════════
+   NEW MODES
+   ═══════════════════════════════════════════════════ */
+
+/* ── Fractal Tree ─────────────────────────────────── */
+function drawFractal() {
+  const bass = avg(0,.06), mid = avg(.06,.2), treb = avg(.2,.5);
+  const energy = (bass + mid + treb) / 3;
+  const maxDepth = 7 + Math.floor(energy * 5);  // 7-12 deep with energy
+  const baseLen = H * 0.24 * (.5 + bass * .8);
+
+  c.save();
+  c.globalCompositeOperation = 'lighter';
+
+  function branch(x, y, len, ang, depth) {
+    if (depth >= maxDepth || len < 2) return;
+    const ex = x + Math.cos(ang) * len;
+    const ey = y + Math.sin(ang) * len;
+    const ratio = depth / maxDepth;
+    const hue = 270 + ratio * 90 + Math.sin(T * 2 + depth) * 15;
+    const lum = 40 + energy * 30;
+    const alpha = (1 - ratio * .5) * (.25 + energy * .75);
+
+    c.beginPath(); c.moveTo(x, y); c.lineTo(ex, ey);
+    c.strokeStyle = `hsla(${hue},85%,${lum}%,${alpha})`;
+    c.lineWidth = Math.max(.4, (maxDepth - depth) * .9);
+    c.shadowColor = `hsla(${hue},90%,55%,${alpha * .7})`;
+    c.shadowBlur = 5 + energy * 12;
+    c.stroke();
+
+    // per-depth freq lookup for variation
+    const fi = Math.floor(ratio * bufLen * .3);
+    const fv = (freq[fi] || 0) / 255;
+    const spread = .35 + mid * .55 + fv * .25;
+    const sway = Math.sin(T * 1.3 + depth * .6) * .12 * (1 + bass * 2);
+    const shrink = .6 + treb * .12;
+
+    branch(ex, ey, len * shrink, ang - spread + sway, depth + 1);
+    branch(ex, ey, len * shrink, ang + spread + sway, depth + 1);
+
+    // bright tips
+    if (depth >= maxDepth - 2) {
+      c.beginPath(); c.arc(ex, ey, 1 + fv * 3, 0, TAU);
+      c.fillStyle = `hsla(${hue + 40},90%,70%,${fv * .8})`;
+      c.fill();
+    }
+  }
+
+  // two mirrored trees
+  branch(W / 2, H, baseLen, -Math.PI / 2, 0);
+
+  c.shadowBlur = 0;
+  c.restore();
+
+  // ground glow
+  const gg = c.createRadialGradient(W/2, H, 0, W/2, H, W * .4);
+  gg.addColorStop(0, `hsla(280,80%,40%,${.06 + bass * .1})`);
+  gg.addColorStop(1, 'transparent');
+  c.fillStyle = gg; c.fillRect(0, 0, W, H);
+}
+
+/* ── Horizon (Tunnel + Terrain combined, soft color washes) ── */
+function drawHorizon() {
+  const bass = avg(0,.06), mid = avg(.06,.2), treb = avg(.2,.5);
+  const energy = (bass + mid + treb) / 3;
+  const hz = H * .40;                // horizon line
+  const cx = W / 2;
+
+  c.save();
+  c.globalCompositeOperation = 'lighter';
+
+  /* ─── sky: soft aurora wash ─── */
+  const skyG = c.createLinearGradient(0, 0, 0, hz);
+  skyG.addColorStop(0, `hsla(260,50%,6%,.6)`);
+  skyG.addColorStop(1, `hsla(300,60%,18%,${.12 + energy * .18})`);
+  c.fillStyle = skyG; c.fillRect(0, 0, W, hz);
+
+  /* ─── sun ─── */
+  const sunR = 55 + bass * 30;
+  const sunY = hz - sunR * .4;
+  // soft filled disc
+  const sd = c.createRadialGradient(cx, sunY, 0, cx, sunY, sunR);
+  sd.addColorStop(0, `hsla(330,90%,70%,${.55 + treb * .3})`);
+  sd.addColorStop(.6, `hsla(310,85%,55%,${.25 + treb * .15})`);
+  sd.addColorStop(1, 'hsla(290,80%,40%,0)');
+  c.fillStyle = sd; c.fillRect(cx - sunR, sunY - sunR, sunR * 2, sunR * 2);
+  // wide halo
+  const halo = c.createRadialGradient(cx, sunY, sunR * .3, cx, sunY, sunR * 4);
+  halo.addColorStop(0, `hsla(310,80%,55%,${.06 + bass * .1})`);
+  halo.addColorStop(1, 'transparent');
+  c.fillStyle = halo; c.fillRect(0, 0, W, H);
+
+  /* ─── tunnel rings expanding from horizon ─── */
+  const rings = 22;
+  const maxR = Math.hypot(W, H) * .6;
+  for (let i = rings; i >= 0; i--) {
+    const phase = ((T * (.15 + bass * .35) + i / rings) % 1);
+    const radius = phase * maxR;
+    const fi = Math.floor((i / rings) * bufLen * .35);
+    const fv = (freq[fi] || 0) / 255;
+    const hue = 270 + i * 8 + T * 35;
+    const life = (1 - phase);
+    const alpha = life * (.04 + fv * .25);
+    const rot = T * (.12 + mid * .3) + i * .09;
+
+    c.beginPath();
+    // draw as ellipses squashed vertically to hug the terrain
+    for (let s = 0; s <= 64; s++) {
+      const a = (s / 64) * TAU + rot;
+      const rx = radius * (1 + fv * .12);
+      const ry = radius * .45 * (1 + fv * .12);    // squashed
+      const x = cx + Math.cos(a) * rx;
+      const y = hz + Math.sin(a) * ry - radius * .15; // center drifts up as it expands
+      s === 0 ? c.moveTo(x, y) : c.lineTo(x, y);
+    }
+    c.closePath();
+    c.strokeStyle = `hsla(${hue},75%,55%,${alpha})`;
+    c.lineWidth = 4 + fv * 14 + life * 6;
+    c.shadowColor = `hsla(${hue},85%,50%,${alpha * .8})`;
+    c.shadowBlur = 25 + fv * 35;
+    c.stroke();
+  }
+
+  /* ─── terrain: wide soft color bands ─── */
+  const numBands = 24;
+  const segs = 64;
+  const groundH = H - hz;
+
+  for (let i = 0; i < numBands; i++) {
+    const t = i / numBands;                          // 0=near, 1=far
+    const persp = Math.pow(t, 2.0);
+    const y = H - groundH * (1 - persp);
+    const nextPersp = Math.pow((i + 1) / numBands, 2.0);
+    const nextY = H - groundH * (1 - nextPersp);
+    const bandH = Math.abs(nextY - y);
+    const amplitude = (1 - persp) * 80 * (.35 + bass * 1.3);
+    const alpha = (1 - t * .6) * (.12 + mid * .35);
+
+    c.beginPath();
+    // top edge (audio-displaced)
+    for (let s = 0; s <= segs; s++) {
+      const sx = (s / segs) * W;
+      const fi2 = Math.min(Math.floor((s / segs) * bufLen * .35) + i * 3, bufLen - 1);
+      const fv = (freq[fi2] || 0) / 255;
+      const py = y - fv * amplitude;
+      s === 0 ? c.moveTo(sx, py) : c.lineTo(sx, py);
+    }
+    // bottom edge (close the band)
+    for (let s = segs; s >= 0; s--) {
+      const sx = (s / segs) * W;
+      const fi2 = Math.min(Math.floor((s / segs) * bufLen * .35) + (i + 1) * 3, bufLen - 1);
+      const fv = (freq[fi2] || 0) / 255;
+      const py = nextY - fv * (1 - nextPersp) * 80 * (.35 + bass * 1.3);
+      c.lineTo(sx, py);
+    }
+    c.closePath();
+
+    // gradient fill — near=cyan, far=magenta
+    const hue = 190 + t * 110;
+    const bandG = c.createLinearGradient(0, y - amplitude, 0, y + bandH);
+    bandG.addColorStop(0, `hsla(${hue},80%,55%,${alpha * 1.2})`);
+    bandG.addColorStop(1, `hsla(${hue + 15},70%,40%,${alpha * .3})`);
+    c.fillStyle = bandG;
+    c.shadowColor = `hsla(${hue},85%,50%,${alpha * .6})`;
+    c.shadowBlur = 18 + (1 - t) * 20;
+    c.fill();
+  }
+
+  /* ─── vertical perspective lines (soft) ─── */
+  const vLines = 16;
+  for (let i = 0; i <= vLines; i++) {
+    const xn = i / vLines;
+    const topX = cx + (xn - .5) * W * .12;
+    const botX = xn * W * 1.4 - W * .2;
+    const fi3 = Math.min(Math.floor(xn * bufLen * .3), bufLen - 1);
+    const fv = (freq[fi3] || 0) / 255;
+
+    c.beginPath();
+    c.moveTo(topX, hz); c.lineTo(botX, H);
+    c.strokeStyle = `hsla(${220 + fv * 60},60%,50%,${.03 + fv * .08})`;
+    c.lineWidth = 2 + fv * 5;
+    c.shadowColor = `hsla(${220 + fv * 60},70%,45%,${.04 + fv * .08})`;
+    c.shadowBlur = 15 + fv * 15;
+    c.stroke();
+  }
+
+  /* ─── horizon glow ─── */
+  c.beginPath(); c.moveTo(0, hz); c.lineTo(W, hz);
+  c.strokeStyle = `hsla(300,75%,60%,${.1 + energy * .2})`;
+  c.lineWidth = 3 + energy * 4;
+  c.shadowColor = `hsla(300,80%,55%,.35)`;
+  c.shadowBlur = 30 + energy * 20;
+  c.stroke();
+
+  c.shadowBlur = 0;
+  c.restore();
+}
+
+/* ── Supernova / Starburst ────────────────────────── */
+let shockwaves = [];   // {r, maxR, hue, birth}
+let novaParticles = []; // {x,y,vx,vy,life,hue,s}
+let prevBass = 0;
+
+function drawStarburst() {
+  const bass = avg(0,.06), mid = avg(.06,.2), treb = avg(.2,.5);
+  const energy = (bass + mid + treb) / 3;
+  const cx = W / 2, cy = H / 2;
+
+  c.save();
+  c.globalCompositeOperation = 'lighter';
+
+  // detect bass hit → spawn shockwave + particles
+  if (bass > .45 && bass - prevBass > .08) {
+    shockwaves.push({ r: 10, maxR: Math.min(W,H) * (.3 + bass * .4), hue: 260 + Math.random() * 80, birth: T });
+    for (let i = 0; i < 30; i++) {
+      const a = Math.random() * TAU;
+      const spd = 2 + Math.random() * 6 * bass;
+      novaParticles.push({
+        x: cx, y: cy,
+        vx: Math.cos(a) * spd, vy: Math.sin(a) * spd,
+        life: 1, hue: 250 + Math.random() * 80, s: 1 + Math.random() * 3,
+      });
+    }
+  }
+  prevBass = bass;
+
+  // radiating beams
+  const beams = 90;
+  const step = Math.floor(bufLen / beams);
+  for (let i = 0; i < beams; i++) {
+    let s = 0;
+    for (let j = 0; j < step; j++) s += freq[i * step + j];
+    const v = s / step / 255;
+    const a = (i / beams) * TAU + T * .15;
+    const len = v * Math.min(W, H) * .45;
+    const hue = 260 + (i / beams) * 100 + T * 20;
+
+    c.beginPath();
+    c.moveTo(cx, cy);
+    c.lineTo(cx + Math.cos(a) * len, cy + Math.sin(a) * len);
+    c.strokeStyle = `hsla(${hue},85%,60%,${.08 + v * .5})`;
+    c.lineWidth = .5 + v * 2.5;
+    c.shadowColor = `hsla(${hue},90%,55%,${v * .5})`;
+    c.shadowBlur = 4 + v * 10;
+    c.stroke();
+  }
+
+  // shockwave rings
+  for (let i = shockwaves.length - 1; i >= 0; i--) {
+    const sw = shockwaves[i];
+    sw.r += (3 + energy * 8);
+    const life = 1 - sw.r / sw.maxR;
+    if (life <= 0) { shockwaves.splice(i, 1); continue; }
+    c.beginPath(); c.arc(cx, cy, sw.r, 0, TAU);
+    c.strokeStyle = `hsla(${sw.hue},90%,65%,${life * .7})`;
+    c.lineWidth = 2 + life * 4;
+    c.shadowColor = `hsla(${sw.hue},90%,60%,${life * .5})`;
+    c.shadowBlur = 10 + life * 20;
+    c.stroke();
+  }
+
+  // flying particles
+  for (let i = novaParticles.length - 1; i >= 0; i--) {
+    const p = novaParticles[i];
+    p.x += p.vx; p.y += p.vy;
+    p.vx *= .98; p.vy *= .98;
+    p.life -= .012;
+    if (p.life <= 0) { novaParticles.splice(i, 1); continue; }
+    const sz = p.s * p.life;
+    c.beginPath(); c.arc(p.x, p.y, sz, 0, TAU);
+    c.fillStyle = `hsla(${p.hue},85%,65%,${p.life * .8})`;
+    c.shadowColor = `hsla(${p.hue},90%,55%,${p.life * .4})`;
+    c.shadowBlur = 6;
+    c.fill();
+  }
+
+  // core glow
+  const coreSize = 15 + energy * 50;
+  const cg = c.createRadialGradient(cx, cy, 0, cx, cy, coreSize);
+  cg.addColorStop(0, `hsla(280,90%,90%,${.3 + energy * .5})`);
+  cg.addColorStop(.3, `hsla(280,80%,60%,${.15 + energy * .25})`);
+  cg.addColorStop(1, 'transparent');
+  c.fillStyle = cg; c.fillRect(cx - coreSize, cy - coreSize, coreSize * 2, coreSize * 2);
+
+  c.shadowBlur = 0;
+  c.restore();
+}
+
+
+</script>
+</body>
+</html>