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. 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.
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.
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:
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
"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.
1"powermode.customExplosions": [2// absolute path to custom ✨ GIF on my computer3 "/Users/monica/Dev/power-mode-sparkles/sparkles.gif"4 ],
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.
settings.json includes the following keys and values after configuring Power Mode:
1// turn on powermode 🚨2"powermode.enabled": true,3 "powermode.customExplosions": [4// absolute path to custom ✨ GIF on my computer5 "/Users/monica/Dev/power-mode-sparkles/sparkles.gif"6 ],7 // enableShake is true by default which causes the8 // text/screen to shake, the following line disables that9 "powermode.enableShake": false,10 // tweaking settings to reduce amount of explosions11 "powermode.maxExplosions": 1,12 "powermode.explosionFrequency": 4,13 //backgroundMode mask - animation matches the current syntax color14 //backgroundMode image - displays animation with original colors from the image15 "powermode.backgroundMode": "mask",
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.
Right-click and save this image to your computer if you're ready to start adding more sparkles to your development workflow.
This article was published on September 04, 2020.