Theme Picker
Toggle theme: System Default (auto)
Toggle theme: Dawn (light)
Toggle theme: Vapor (light)
Toggle theme: Vintage (light)
Toggle theme: Quill (light)
Toggle theme: Dusk (dark)
Toggle theme: Cyberpunk (dark)
Toggle theme: Campfire (dark)
Toggle theme: Director (dark)


A VS Code extension to preview CSS timing functions

After years of using Notepad++, I landed on using Brackets, a code editor by Adobe. It was pretty simple but had some nice things like an easing curve editor. When the VS Code wave hit me, I was left missing such a feature, so I made my own extension to preview what CSS timing functions look like.

It is held together by duct tape but it works! All this despite being in TypeScript, which I do not use anywhere else. I like types, to an extent, but this is a step too far for me.

Do note that is only offers a preview of the animation and the resulting easing curve — no editing as of yet. One day, I'll dig into the core of VS Code and figure out how to replicate, within VisuBezier, the Brackets feature, or something like what you see on the excellent by Lea Verou. But until that time comes, this will have to do. And if you use VS Code, please give it a try, I'd love some feedback!

Get the extension