Mayajaal — Web of Magic 🕸️⚡

A themed VS Code experience for a Spider-Man fan and a Potterhead. मायाजाल means "the web of magic / illusion" in Sanskrit — a spider's web and a wizard's spell in one word.

Built by Kanak Prabhakar.

What's inside

• A colour theme — "Mayajaal (Web & Wand)" — a deep-night editor with Spidey-crimson keywords and Gryffindor-gold strings. Pick it from Preferences → Color Theme.
• Magical welcome panel — an animated spider-web with drifting golden magic-motes and a calligraphy title. Opens on first launch, or via Mayajaal: Open Magical Welcome.
• Cast a Spell — a status-bar 🕸️ button that drops a Potter/Spidey-flavoured bit of motivation. (Mayajaal: Cast a Spell)
• Calligraphy banner — insert a decorative comment banner into any file. (Mayajaal: Insert Calligraphy Banner)

Install (locally)

# option A — package and install the .vsix
npm i -g @vscode/vsce
vsce package
code --install-extension mayajaal-1.2.0.vsix

# option B — run it live
code .        # then press F5 to launch an Extension Development Host

Then open the Command Palette (Ctrl/Cmd+Shift+P) and type Mayajaal.

Commands

| Mayajaal: Set Wallpaper (any picture)… | put any picture behind the whole VS Code window | | Mayajaal: Wallpaper Strength… | how strongly the picture shows (5–50 %) | | Mayajaal: Remove Wallpaper | back to plain VS Code, file restored exactly | | Mayajaal: Window Transparency… | make the whole window see-through (Windows, Linux) |

Wallpaper — any picture behind VS Code

Run Mayajaal: Set Wallpaper, pick a picture, then click Reload Window. The picture sits over the whole window at low strength (15 % by default), and every click and keystroke goes straight through it.

VS Code has no official API for this, so Mayajaal — like every wallpaper extension — adds a small marked block to VS Code's own CSS file. Things to know:

• VS Code will then say it is "[Unsupported]" or that the installation "appears to be corrupt". That is only because one of its files changed. Choose Don't show again. Remove Wallpaper restores the file byte for byte.
• A VS Code update replaces that file, so the wallpaper disappears. Mayajaal notices on the next start and offers Re-apply Wallpaper.
• Linux .deb/.rpm installs keep VS Code in a folder owned by root. Mayajaal prepares the change and opens a terminal with one sudo cp … command. On Windows with a system-wide install, run VS Code once as administrator.
• The Snap version of VS Code is read-only and cannot have a wallpaper — use the .deb from code.visualstudio.com instead.

Window transparency

Run Mayajaal: Window Transparency and pick a level (100 % = normal). The whole VS Code window becomes see-through, so your desktop shows behind it. The level is remembered (mayajaal.transparency) and applied every time VS Code starts.

• Windows — works out of the box.
• Linux — works on X11 sessions; needs xprop (sudo apt install x11-utils). On Wayland, log in with "Ubuntu on Xorg" (gear icon on the login screen).
• macOS — not possible: macOS does not let one app change another window's transparency. The wallpaper works on macOS.

It never goes below 30 %, so the window can always be found and set back.

Built with

Pure VS Code extension API + a self-contained Canvas animation. No build step, no runtime dependencies.

License

MIT © 2026 Kanak Prabhakar — see LICENSE.

जादू — typing effects

Writing code should feel like something is happening. As you type, a small mark appears beside the cursor and a streak counter runs in the status bar. Keep going without stopping or deleting and you hit milestones:

The streak resets when you delete, or after two and a half seconds of not typing.

The idea comes from the "ridiculous coding" genre of extensions. None of that code is here — the effects, the milestones and the wording are written for Mayajaal, and they are Indian rather than generic.

Turning it off

All of it is optional. An editor that will not stop moving is a bad editor for most people most of the time.

Or run Mayajaal: जादू चालू/बंद करो from the command palette — clicking the status bar item does the same.

A note on sound

There is none. VS Code has no audio API, and the usual workaround is a hidden webview playing media, which keeps a process alive for as long as the editor is open. That is a poor trade for a sound effect, so Mayajaal does not do it.

Test

npm test

20 checks on the streak counter, the milestones and the status-bar text, 14 on the wallpaper (apply, re-apply, exact restore, read-only and Snap installs) and the transparency test, which changes a real window: notepad on Windows, an X11 window on Linux. They run on plain node — the logic is kept free of the editor API so it can be tested without one. CI runs them on Windows, Linux and macOS.