Bring beautiful animated scenes to your VS Code Explorer sidebar.
Transform your editor into a relaxing, living workspace with smooth animated scenes. 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—all without leaving VS Code.
Whether you're coding, taking a short break, or simply want a more enjoyable workspace, VS Code Scene adds subtle motion to your Explorer sidebar.
🎬 Preview
✈️ SkyPilot
🌟 Stars
🐠 Aquarium
✨ Features
🌟 Stars
A pure Canvas2D animated starfield featuring 200 twinkling stars that slowly drift upward, each with its own unique brightness pattern.
✈️ SkyPilot
A Pixi.js-powered 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.
🖱️ How to Use
- Open the Explorer view.
- Locate the Scene panel at the bottom of the Explorer.
- 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:
| Command | Description |
|---|---|
| VS Code Scene: Start | Opens the Explorer and displays the Scene panel |
| VS Code Scene: Stop | Closes the Explorer sidebar and hides the Scene |
| VS Code Scene: Select Scene | Opens a picker to switch the active scene (Stars, Sky Pilot, Aquarium) |
| (status-bar icon) | Click the 🎨 color-wheel in the bottom bar for the same scene picker |
⚙️ Settings
This extension contributes the following setting:
| Setting | Description | Default |
|---|---|---|
vscode-scene.screen |
Select the scene to display (stars, sky-pilot, or aquarium) |
sky-pilot |
vscode-scene.enabled |
Whether the Scene view is shown in the Explorer | true |
Change the active scene from Settings → Extensions → Scene. The animation updates instantly—no reload required.
⚡ Performance
Animations are rendered only while the Scene view is visible.
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.
✅ Requirements
No additional dependencies or configuration are required.
🎨 Icon
The extension icon combines the available scenes: a deep night sky with a glowing moon and stars alongside a tiny airplane flying across the horizon.
Credits
This extension uses assets from the following creators:
📄 License
This project is licensed under the MIT License.
🐛 Issues & Feedback
Found a bug or have an idea for a new scene?
Open an issue on GitHub: https://github.com/mhfarzin/vscode-scene/issues
Enjoy your scenes! ✨