LiveWall

⬇︎ Install · 🐛 Report an issue · MIT

Animated video wallpapers behind your code.

Unlike CSS-background approaches, the wallpaper is a real <video> element promoted to its own compositor layer. Decoding runs off the main thread and editor repaints never rerasterize it, so typing latency is unaffected.

Features

• Video and animated images — .mp4, .webm, .mov, .gif, .webp, .apng. Still images work too.
• Built-in search — browse Wallhaven, Pixabay and Pexels from inside the editor and apply with one click.
• Your own folder — point LiveWall at a directory, drop files in, they appear automatically.
• Shuffle and rotation — use the whole folder as a playlist and change wallpaper on a timer.
• Readability first — a scrim layer guarantees a contrast floor no matter how bright the video gets.
• Battery aware — pauses when the window loses focus or is hidden, and honours the OS reduced-motion setting.
• Live settings — opacity, scrim, speed and the wallpaper itself change as you change them. No reload.
• Status bar toggle — one click turns the wallpaper on or off.

Getting started

Install from the Visual Studio Marketplace, or search for LiveWall in the Extensions view.

1. Run LiveWall: Choose wallpaper… from the Command Palette (Ctrl+Shift+P / Cmd+Shift+P).
2. Search, or pick a local file.
3. Reload the window when prompted.

That reload is a one-off. From then on the ✨ in the status bar toggles the wallpaper, and every setting takes effect as you change it.

Image search works immediately with no account. Video search needs a free API key — see below.

Settings

Every one of these applies live — the wallpaper reads its configuration from a small file the extension rewrites, so dragging the opacity slider changes the opacity, not your window session. All settings are application-scoped: a workspace cannot change what LiveWall shows.

livewall.scrim is the readability dial. Opacity fades the wallpaper toward whatever is behind it, which shifts with your theme; the scrim is a fixed sheet, so bright frames can never blow out your text.

Video search keys

Image search (Wallhaven) needs nothing. Video search uses your own free key, stored in your settings and sent only to the provider:

• Pixabay — pixabay.com/api/docs, instant, 100 req/min, no monthly cap
• Pexels — pexels.com/api, 200 req/h, 20 000 req/month

Search results are cached on disk for 24 hours, so repeated searches cost no requests at all.

Performance

Keeping this cheap comes down to the source file:

• h264 .mp4, 1080p or less — hardware decoded on every platform
• Short loops — frame count drives memory more than resolution does
• Pre-bake any blur or darkening into the file rather than applying filters at runtime

A fullscreen animated .gif or .webp is the most expensive option, because the browser repaints the whole layer on the main thread. Video on its own layer is far cheaper.

.mp4, .gif, .webp, .png and .jpg load straight from wherever they live. VS Code's internal file protocol refuses to serve any other extension from an arbitrary folder, so .webm, .mov, .m4v, .ogv, .apng and .avif are linked into a directory it does serve. That is automatic and costs nothing, but .mp4 avoids the indirection entirely.

Convert a clip with ffmpeg:

ffmpeg -i in.mp4 -t 6 -vf "fps=24,scale=1600:-2:flags=lanczos,format=yuv420p" \
  -c:v libx264 -crf 26 -an out.mp4

What it changes

VS Code has no API for putting anything behind the editor, so LiveWall modifies one file inside your VS Code installation and injects a small script into the workbench.

Alongside it, a livewall/ folder next to workbench.html holds the configuration the injected script reads. That folder is the reason settings apply without a reload, and it is deleted when you remove the wallpaper. A .bak copy of the untouched workbench.html is kept beside it while the patch is in place, in case you ever need to restore it by hand.

Run LiveWall: Remove wallpaper and restore VS Code before you uninstall

VS Code does not run extension code on uninstall, so removing LiveWall from the Extensions view leaves the modified file in place and the wallpaper still showing, with nothing left to undo it.

Run the command first and the file goes back exactly as it was. If you have already uninstalled, reinstall LiveWall, run the command, then uninstall again.

Worth knowing before you install:

• A "Your Code installation appears to be corrupt" warning appears once after installing. Modifying the application bundle changes its checksum. Dismiss it with Don't Show Again.
• VS Code updates wipe the patch. LiveWall detects the version change on next launch and re-applies automatically.
• Do not run alongside other workbench-patching extensions such as shalldie.background or custom-ui-style. They edit the same file and will fight over it. If one of them left a patch behind, LiveWall does not touch it — removing LiveWall reverts only its own changes, so a wallpaper from another extension will still be there afterwards.
• Webview panels stay opaque. Panels like Copilot Chat run in separate renderer processes; no stylesheet in the workbench document can reach inside them.

Troubleshooting

Open Help → Toggle Developer Tools and check:

window.__livewall.state

window.__livewall.lastError and .playRejected hold the last media failure; .lastStateError holds the last failure to read the configuration file.

Privacy

LiveWall has no telemetry and no backend. API keys stay in your settings and are sent only to the provider you searched. Downloads go directly from the source CDN to your machine.

Credits

Wallpapers come from Wallhaven, Pixabay and Pexels. Each remains the property of its author, credited in the gallery.

Support

If LiveWall makes your editor nicer to look at:

License

MIT