Finishing my motion graphics editor, an API to generate animations, and more
Finishing my motion graphics editor, an API to generate animations, and more
Issue #23
Hey! I'm Alyssa X, a serial entrepreneur building 12+ products by myself. This email is part of my maker journey, which you're subscribed to. Feel free to forward it to others if you find it interesting! You can support me through GitHub Sponsors, I'd really appreciate it! ❤️
Hey all,
How are you all doing? I had a bit of a chaotic week, but I was able to get a lot done (again!). You might also notice some changes with this email. Let me get right into it!
Almost there!
Last week I mentioned being the most productive I had been in a while. Well, I think this week might have even beaten that one somehow. Here's the tasks I had on the left, and the ones I did on the right. Note that I removed all the completed ones I already had, so all the ticked ones are the ones I did over this weekend (and the yellow ones are new ones I added in).
I got to a point with the product where it's essentially finished, but I kind of want to add more to it to make it even better.
Let me break down the tasks, starting with the simple ones:
I decided not to add a freeform input for setting the current duration. I noticed Kapwing didn't have that in, so I felt it wasn't a big necessity. Might revisit this one later but it's a bit of a pain to do with the timecodes.
Better design for keyframe easing. I just removed the buttons on the popup leaving a dropdown only to switch the easing. So much more intuitive now!
I fixed an issue when clicking to add assets as opposed to dragging them. Now they automatically get added to the center of the canvas.
Disabled media controls. Annoyingly I couldn't get the controls on Mac / Chrome to work with the editor to play/pause, and skip forward and backward. It was conflicting with some background assets so I disabled it altogether.
Removed audio tab from uploads panel. I've considered allowing users to add audio as a layer to position manually, but it would be a bit of a headache. For now I am keeping it to having background audio + video audio only.
Designed an empty state for the uploads tab. Literally just some text that tells the user that their files will show up there once they have some. That simple.
Fixed the time icon when autosaving. I changed the behavior of this a few issues ago, and I hadn't fully updated everything. Now it should work as expected.
I made the toolbar scrollable. Self-explanatory.
Added a shadow when scrolling in the left panel. Small touch but I think it's pretty cool :P
Added a chunky handle when resizing the timeline. Well, not very chunky, just some more visual feedback so the user knows they can do that.
Made an empty state for the timeline. Not 100% sure about this one, but I figured, why not. Here's how it looks like:
Made a fun little seekbar on hover (you can see on the first GIF). Unfortunately I couldn't make it preview the video while hovering since there was some delay (and it was annoying).
That was quite a lot. Now onto the bigger ones!
I made a new design for the text panel. At first I didn't know what to go for. I thought maybe making a few "text templates" with cool combinations would be nice, but I realized it would take me forever. So instead I just listed a few fonts, organized by type, and allowed the user to quickly search through the entire Google Fonts library (you can also change the font from the properties on the right).
Dealt with the background audio. So originally I had the project set up with AWS, and after I switched to IndexedDB I had to redo everything. I hadn't touched the audio portion yet, so it's something I had to work on this week. Thankfully it wasn't too complicated, I was able to save the audio files locally, and I figured out a simple design for the panel. Since Pixabay does not provide an API endpoint to search for audio, I just added a few I liked in there. You can preview them, or click to toggle them. You can also upload your own audio.
I added infinite scroll for the search results. I thought this would take some time to get right, but the APIs I am using make it super simple to request more items by simply increasing the value of the pagination. I set an event handler to detect when the user reaches the bottom of the panel, set a timeout to prevent too many requests, and that was it. I could tweak the number of items I get on every request, but I think it's fine for now.
Added a new download option. Looking into the state of the tool at the moment, it sort of feels like a mix of Canva and Kapwing. Both of those tools have image download, so I decided I could sort of compete with them if I did as well. At the moment it downloads whichever frame you're currently seeking, but I could add more options (or downloading a set of frames, maybe), and different formats and image quality. Super easy to toggle as you can tell (although I might also tweak this design, not sure haha):
Now for the final one, maybe best I talk about it in its own section.
Generating videos from the server
So I know this might sound stupid, considering I spent a long time switching everything from AWS and Firebase, but I've been looking into doing some server-side rendering for the canvas.
Let me preface, at first the extent of this task was to see if I could find a way to get frame-accurate rendering of the canvas in the client, which I tried with a ton of different libraries, to no avail. There's the requestFrame method which is available for most browsers (except Firefox), but I tried it a million times and it wouldn't work.
I went on StackOverflow, and I found this question, which was exactly what I was looking for. Despite having 2 answers, both appearing to be correct, neither worked for me, so I essentially gave up. I managed to optimize my current solution to be good enough, plus I might let users tweak the framerate to have more control over the recording.
Despite that, I wasn't completely happy. Obviously the video rendering for a motion graphics editor is a pretty big deal, and if it isn't top notch it might drive users away, rightfully so. So I started thinking more about it.
What if I developed a version of the editor that could run on a server, so users could set it up to render videos in high quality with completely accurate frames?
I actually already had an early prototype in NodeJs that could do some rudimentary rendering, but I quickly realized it wouldn't work with all the features I had added.
Instead of that, I decided to use Puppeteer to run a headless Chrome instance, so it could run the editor in the background, and then get the frames from there to save locally and stitch together with FFMPEG. I tested it like so:
Create an animation in the editor.
Export the project as JSON.
Use the JSON as input through Puppeteer to load the animation.
Convert the canvas into an image (first frame of the animation), and return to a Node function (using exposeFunction, super convenient!).
Download the image into a folder.
And it worked like a charm! Obviously I'd still need to download each of the frames, and run FFMPEG to generate the videos, but it's a nice start.
This also opens a lot of possibilities, since you could not only render videos in high quality, but also programmatically create them. There's already some products like BannerBear (making $500K/year!) which deal with creating images and videos through an API, but none that I know of that can create animations like that.
Imagine being able to create custom animated graphics for social media (with your own text, images, videos, audio, keyframes...), or for companies to generate video content within their apps. So cool!
Not only that, but it also opened the possibility of monetizing that, based on access. I could still provide the actual editor for users completely free and open source, but be able to make money from businesses (which is usually less of a hassle and at higher amounts). Anyway, things to consider I guess.
Final things
I think that's about all I wanted to mention about my product. I do have a few other things to bring up, one of which I forgot to mention in my previous issue.
So first of all, last week I actually ended up open sourcing my Later menu bar app, by popular request. You can grab it for free on GitHub, following the instructions there (which should be pretty simple, but feel free to reach out if you have any issues!). I also left instructions on how to open the app in Xcode, if anyone wants to improve the app, make their own version, or just learn how I did it. It's all there.
Second, I did an AMA on Product Hunt earlier this week. I know I mentioned this in my last issue but I figured you might want to see some of my answers :)
Finally, the thing that's different about this issue. I decided to move away from ConvertKit, as I kept hitting 1000 subscribers, and to go beyond that I would have had to pay $490/year or $49/month, which I thought was quite a lot for a free newsletter. I spent Friday moving all the subscribers over to Revue (which has no subscriber limit), waiting to be approved, and then trying to match the design as the one I had. I thought it would be easy, but I had a couple of problems.
I tried to bring all my past issues over here so they could still be viewed by anyone, but sadly in order to do so I would have to send them to all of you first, which would be pretty spammy, so I'll probably just link them somewhere or something for record-keeping (although if you've noticed I tend to put links to previous issues throughout my emails, so you can probably jump through them that way :P).
Second, for some weird reason, right after I moved the subscribers over, Revue experienced an outage which made it go offline for 2 days. It wasn't a huge deal, except for my profile looked like this:
Which was also one of the main reasons I wanted to use Revue. They add a fancy little card on your profile to make it easier for people to subscribe to your newsletter. But anyway, they managed to fix it, so I'm able to send this issue finally :) This is how it looks like on my profile right now, I'm not 100% sure if I will keep it like this, but it's nice. One issue with it is that the image on the card is linked to my profile picture, so I can either have it be the same one as the Twitter one (a bit duplicative), or I can do something different that stands out, which then shows up on all my issues (as you can see on the top of this email). Kind of annoying, hoping they add an option for that, but oh well.
Anyway, that's all I've got (it's already way too long anyway). I had some chaos this week too flying back and forth between London and Barcelona, and the heatwave going on is not helping at all. I also caved in and bought some Airpods Pro a few days ago, since the earbuds I had broke. I was a bit skeptical at first but the noise cancellation and audio quality is pretty impressive, and the microphone is so much better for meetings. Totally worth it, just wish they had a bit more battery in them, I like to listen to music all day while working :P
I'll let you know what I'll do next week with my project, what direction I ultimately choose, but it's pretty much done like I said!
As a matter of fact, if you've managed to read this long, I'll give you a little treat. You can try the motion graphics editor over here. Obviously WIP (ignore the name, that's for future me to decide), and not responsive yet, but would love to hear your thoughts :)
See you next week,
Alyssa X