This article shows you how to customize your VSCode set up to display animated sparkles while you are typing. There's a VSCode extension, Power Mode that adds animated flair while you're typing. It has a few different default animations but none of them quite sparkle.
Above is a GIF of animated sparkles in my VSCode. The editor's theme is Night Owl and the font is Dank Mono. You can learn more about my VSCode setup on my uses page.
If you're not using VSCode, check out these Power Mode extensions for various code editors. The implementation of each differ but some of them support customized animations.
Enable Power Mode Extension
In order to add animations to your VSCode first you need to install Power Mode
and enable it by updating your VSCode settings to include the following:
"powermode.enabled": true.
Depending on your operation system the VSCode settings file is located here:
- Windows - %APPDATA%\Code\User\settings.json
- macOS - $HOME/Library/Application Support/Code/User/settings.json
- Linux - $HOME/.config/Code/User/settings.json
Customize Power Mode
"powermode.enabled" turns on the extension's default animations when you're typing but if you want sparkles then some additional customization is required.
In particular, you need to configure "powermode.customExplosions" in settings and pass in your own animation to be used for the explosions. This setting supports base64 encoded gifs, absolute file path, or https image URLs.
"powermode.customExplosions": [
// absolute path to custom ✨ GIF on my computer
"/Users/monica/Dev/power-mode-sparkles/sparkles.gif"
],
If you are interested in other animation ideas aside from sparkles check out the vscode-power-mode/Help wanted: explosion gifs issue on GitHub. In fact, this issue is where I found the image for my sparkles ✨ thanks to federicca. You can download the Sparkle GIF I used for my configuration.
My Final Power Mode VSCode Configuration
My VSCode settings.json includes the following keys and values after configuring Power Mode:
// turn on powermode 🚨
"powermode.enabled": true,
"powermode.customExplosions": [
// absolute path to custom ✨ GIF on my computer
"/Users/monica/Dev/power-mode-sparkles/sparkles.gif"
],
// enableShake is true by default which causes the
// text/screen to shake, the following line disables that
"powermode.enableShake": false,
// tweaking settings to reduce amount of explosions
"powermode.maxExplosions": 1,
"powermode.explosionFrequency": 4,
//backgroundMode mask - animation matches the current syntax color
//backgroundMode image - displays animation with original colors from the image
"powermode.backgroundMode": "mask",
Optimizing Power Mode
Power Mode recommends tweaking some of the default settings to reduce the frequency of animations if the extension is causing your editor to slow down.
Sparkle GIF to Download
Right-click and save the below image to your computer if you're ready to start adding more sparkles to your development workflow.
Top comments (0)