Wall of Sound

A full-viewport background of square images (album covers, posters, any square art) in columns that drift very slowly in alternating directions, behind whatever front the page already has. When the site has no front of its own, the default treatment is a centered frosted panel holding the content, which is what the demo uses.

The usual source is the user's saved albums on Spotify, collected in Step 0. Any square-image source works the same way.

When to use this

Common asks: "create my personal wall of sound," "make a wall out of my saved albums," "put my Spotify covers behind my site," "make a drifting poster wall," "an image grid that slowly moves in the background." Not for hero carousels, foreground galleries, or anywhere the images are the content rather than the atmosphere.

Step 0: collect the covers

If the user already has a list of images (shape and count guidance in reference/data-format.md), skip ahead. Otherwise collect their saved albums; this needs browser tooling, and without it, ask the user for an albums.json instead.

1. Open open.spotify.com yourself, go to Your Library, and switch to the Albums view. Involve the user only if Spotify shows a logged-out page.
2. Collect each album's artist, title, and cover URL as you scroll: the list is virtualized and rows unmount once they leave the view. Scroll with real wheel or trackpad events; setting scrollTop moves the bar without rendering any rows, and the scroll appears to complete while you silently miss most of the library. Use overlapping increments, dedupe on the 24-character image id, and stop when the scroll stops advancing.
3. Each cover URL yields both size variants without a second request; the rule is in reference/data-format.md.
4. Write albums.json in the documented shape, next to the page that will fetch it. Spotify shows no album count, so derive the expected total from the library grid's aria-rowcount and aria-colcount (minus the empty slots in the last row) and compare; a shortfall means the scroll dropped rows.