Keyframes.app

After launching "v2" ~2 years ago and it getting fairly popular, Keyframes hasn't seen much more than a few bug fixes. I just haven't had time.

But I have had some time recently, and a new version is finally in progress. Huge UI improvements, new apps, new features on existing apps, and a whole lot more.

And most importantly, the code is a lot better quality this time! That means I hopefully won't hate it a month after finishing it and then be too frustrated to touch it for a few years. I spent a ton of time making sure this version would be easy to maintain and add features to.

I'll share some more updates and previews soon!

Today I posted a short video preview of a small feature I added to Keyframes - it uses your device's orientation sensors to adjust the CSS box shadow. A cool little effect. As of right now it's at over 3,000 upvotes and is #1 on /r/web_design, which is pretty cool.

And now I'm also launching on Product Hunt! If you'd like to discuss Keyframes or leave me some ides, join here: https://www.producthunt.com/posts/keyframes-app-2

In April I decided to redo some old side projects, and Keyframes was the first. I really liked the idea, but V1's code was messy and would have been hard to edit. So I started fresh.

Today version 2 is ready. I've been meaning to learn Vue, so I started there. I began replicating all the features from version 1, then started the improvements. In addition to new properties and more options on the animation tool, I had a list of new features to add to make the site better. Here's what's new from V1 (almost everything, honestly):

New tools:

• New box-shadow tool to create multi-layered box-shadows.
• Character tool to search for text characters and get their HTML or CSS content codes.
• Color tool to convert between hex/rgb, pick colors, and make palettes.

New UX Features:

• User preferences: dark mode, disable tooltips or animations, initial app to load.
• Fully responsive - works on any device (v1 was disabled on small screens)
• Progressive Web App
• Save animations & color palettes to open later
• No database, prefs and data are stored in local storage
• Manage, view, and clear local storage
• Preset animations
• No cookies & minimal tracking
• Touch & Swipe support
• Keyboard shortcuts

UI Improvements:

• Smooth animations
• No framework, all custom CSS
• Dark theme

Now I plan to gather feedback and suggestions for more apps, and hopefully build a large suite of web development tools.

In 2018 I had the idea to make a video-editor style website, but for CSS @keyframe animations. I bought the domain keyframes.app, and built an MVP using jQuery. It worked, but the code was messy and hard to maintain, so I just left it alone for people to use.

If you want to see Version 1 and compare it to v2, you can see it at https://mitchs.co/keyframes1/