ASCII Jellyfish Background
Bioluminescent ASCII jellyfish drifting behind VS Code, seen through frosted-glass panels.
Features
- Animated ASCII jellyfish behind the whole window. Bells pulse and squish, tentacles trail and whip, particles drift down, and there's bloom and film grain.
- Frosted glass over the editor, side bars, panel, title bar and status bar, with separate blur and tint for each.
- Doesn't get in the way. The animation runs in a Web Worker on an
OffscreenCanvas, so typing never waits on it. It's capped at 30 fps by default and pauses when VS Code isn't focused.
- Live settings. Colors, count, size, speed, blur and tint apply within a second, with no reload.
- Cursor interaction. Move the mouse and the jellyfish get pushed aside.
- Follows your theme. The glass tint uses your color theme's editor background unless you pick one. Menus, Quick Open, hovers, dialogs and modal editors such as Settings stay solid and readable.
Getting started
- Install the extension.
- Click Enable on the prompt, or run ASCII Jellyfish: Enable Background from the Command Palette.
- Reload the window.
To turn it off, run ASCII Jellyfish: Disable Background. It's removed right away, with no reload needed.
| Command |
What it does |
ASCII Jellyfish: Enable Background |
Installs the background into VS Code (see below) |
ASCII Jellyfish: Disable Background |
Removes it and restores VS Code's files exactly |
ASCII Jellyfish: Open Settings |
Shows all settings |
Settings
| Setting |
Default |
|
asciiJellyfish.jellyfish.count |
6 |
Number of jellyfish |
asciiJellyfish.jellyfish.size |
9 |
Bell radius in cells |
asciiJellyfish.jellyfish.speed |
1 |
Animation speed |
asciiJellyfish.jellyfish.cellSize |
15 |
Cell size in px at 1080p (smaller is more detailed) |
asciiJellyfish.jellyfish.primaryColor / secondaryColor |
teal / lavender |
Jellyfish colors |
asciiJellyfish.jellyfish.cursorInteraction |
true |
The cursor pushes jellyfish around |
asciiJellyfish.background.color |
#07090e |
Water color |
asciiJellyfish.background.bloom / grain |
35 / 35 |
Glow and film grain |
asciiJellyfish.glass.tint |
theme |
Glass color, e.g. #14161c |
asciiJellyfish.glass.editorBlur / editorOpacity |
4 / 35 |
Glass over the editor (0 blur is clear glass) |
asciiJellyfish.glass.sideBarBlur / sideBarOpacity |
12 / 45 |
Glass over the side bars |
asciiJellyfish.glass.overrideThemeColors |
true |
See-through terminal and minimap (see below) |
asciiJellyfish.performance.fps |
30 |
Frame rate cap (0 = display refresh rate) |
asciiJellyfish.performance.pauseWhenUnfocused |
true |
Pause while VS Code isn't focused |
There are more settings for the panel and title/status bar glass, saturation, brightness, sparkles, grid, particles and vignette.
How it works
VS Code has no API for backgrounds, so, like other background and vibrancy extensions, this one edits VS Code's own files when you enable it:
- It copies a small runtime (
boot.js, render.js, a font and config.json) into resources/app/out/vs/code/electron-browser/workbench/ascii-jellyfish/.
- It adds one
<script> tag to workbench.html, and adds the asciiJellyfish Trusted Types policy name to its Content Security Policy so the renderer can start its worker.
- It updates that file's checksum in
product.json so VS Code doesn't report a corrupt install.
Disable, and uninstalling the extension, put both files back byte for byte. Settings changes go to config.json, which the page reads every second or so.
Good to know
- "Your Code installation appears to be corrupt" can show once, right after enabling, until VS Code fully restarts. It's harmless. Choose "Don't show again" if you like.
- VS Code updates replace
workbench.html. On the next start the extension applies the background again and offers a reload.
- Terminal and minimap draw their own backgrounds into a canvas. With
asciiJellyfish.glass.overrideThemeColors on, the extension sets terminal.background and minimap.background to transparent in your workbench.colorCustomizations. It skips keys you've already set, and Disable removes only what it added.
- Webviews such as Markdown preview and extension panels like chat views draw their own opaque backgrounds, and can't be made see-through from outside.
- Don't combine this with other extensions that patch
workbench.html for transparency (Vibrancy, Background, Custom CSS and JS Loader).
- Permissions. The extension must be able to write to VS Code's install folder. The Windows user installer and most macOS installs work as they are. For system-wide installs, run VS Code as administrator once (Windows) or make the folder writable (Linux). Snap and Flatpak installs are read-only and aren't supported.
- Uninstalling restores
workbench.html automatically. Run Disable first if you also want the terminal and minimap color overrides removed.
- Tested on VS Code 1.143 on Windows with the new floating-panel layout.
Credits
- Inspired by the ASCII jellyfish background in the kurage app by MarceloDesignX.
- Uses Geist Mono (SIL Open Font License 1.1, see
runtime/GEIST-OFL.txt).
License
MIT
| |
