VS Code Scene ✨

Want to make your VS Code feel more lively and relaxing? VS Code Scene adds beautiful animated scenes directly to your Explorer sidebar — a fun, aesthetic touch that turns a plain editor into a cozy, ambient workspace.

Watch twinkling stars drift across a peaceful night sky, enjoy colorful airplanes gliding through soft clouds, or relax with cute cartoon fish swimming in a bubbling aquarium — a lightweight animated background for coding, all without leaving VS Code.

Whether you're coding, taking a short break, or simply want to personalize your VS Code environment, Scene adds subtle motion to your Explorer sidebar.

📦 Installation

Open VS Code → Extensions (Ctrl+Shift+X) → search VS Code Scene → Install

Or run:

ext install mh-farzin.vscode-scene

🎬 Preview

✈️ SkyPilot

🐠 Aquarium

🌟 Stars

✨ Features

✈️ SkyPilot

A pure Canvas2D sky scene featuring procedurally generated drifting clouds and colorful airplanes (Blue, Green, Red, and Yellow) flying smoothly across the screen with spinning propellers.

🐠 Aquarium

A pure Canvas2D fish tank featuring 6 cartoon fish (one of each sprite type) swimming around with animated wagging tails, bubbles blown from each fish's mouth, a tiled background, and gentle shimmering caustics.

🌟 Stars

A pure Canvas2D animated starfield featuring 115 twinkling stars (90 tiny background stars + 25 vivid five-pointed stars) that slowly drift upward, each with its own unique brightness pattern.

🖱️ How to Use

1. Open the Explorer view.
2. Locate the Scene panel at the bottom of the Explorer.
3. Enjoy the animation—it starts automatically.

You can also use the Command Palette (Ctrl+Shift+P), or click the color-wheel icon in the bottom status bar:

⚙️ Settings

This extension contributes the following settings:

Change the active scene from Settings → Extensions → Scene. The animation updates instantly—no reload required.

⚡ Performance

All scenes are pure Canvas2D — no external rendering library. The webview bundle is tiny (~25 KB gzipped), animations pause when the view is hidden, and memory usage stays low.

Use the VS Code Scene: Stop command when you do not need the animation, especially on systems with limited resources.

🔒 Privacy

VS Code Scene does not collect personal data, track users, or send data to external services.

The webview runs under a strict Content-Security-Policy with per-view nonces, so only the extension's own scripts and styles can execute.

✅ Requirements

No additional dependencies or configuration are required.

🎨 Icon

The extension icon represents the available scenes — a peaceful night sky with stars and a small airplane, capturing the calm atmosphere of the animations.

Credits

This extension uses assets from the following creators:

• Game Assets & UI Elements: Created by Kenney
• Graphics & Icons: Designed by Freepik

📄 License

This project is licensed under the MIT License.

🔗 Links

• Marketplace: mh-farzin.vscode-scene
• Repository: https://github.com/mhfarzin/vscode-scene
• Issues & Feedback: https://github.com/mhfarzin/vscode-scene/issues

If you enjoy the extension, a ⭐ on GitHub or a review on the Marketplace would mean a lot!

Enjoy your scenes! ✨