Getting beta testers for my motion graphics editor, and looking at my competition
Getting beta testers for my motion graphics editor, and looking at my competition
Issue #24
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,
The heat has been killing me this week, so I wasn't able to get done as much as I wanted to. I still have a few things to share though, so tag along! Also, stupid Revue glitched on me so I had to rewrite most of it annoyingly (even though it was pretty good). I hate this.
Some more progress!
Here's the progress between last week and this one, not bad huh?
Some of the things I did (sorry I won't go through all of them, I am incredibly tired and annoyed that Revue made me rewrite this, I'll just mention a few):
Fixed lots of bugs with keyframe sync, making the panel toggle properly, dragging layers horizontally...
Made sure assets are properly deleted by getting rid of all instances on the canvas, and removing them from the database.
Made it so when you add a layer, it gets added at the current timestamp. Apparently pretty important to have.
Added shortcuts for layering to make it easier to move things in the tree, and a shortcut for zooming. I'd like to have a panel somewhere with a list of shortcuts, would be handy.
Fixed another quite obvious issue with the clock icon on layers showing when it shouldn't. Basically non-animated layers would show as animated ones when loading an existing project, which kind of broke everything.
Added a bunch of easing options for keyframes, and presets for the canvas.
I added a toast to show when a video / image is loading. It had no visual feedback before, so users might have felt it was broken when attempting to add media into the canvas. I have some of these already, they're pretty simple but I like them. I might add more for actions like copying / pasting, like Figma does.
I also added a popup for upload, so users can add assets by URL as well as uploading. This makes the JSON file less heavy, which makes the editor perform better. I also added drag and drop functionality with multi-file support.
The tweet
I had to rewrite this from zero, but essentially long story short I made a tweet that lots of people seemed to like, I got many DMs, here if you missed it:
The video is really dumb but oh well, it's life. I was dying with the heat and lots of other annoying things going on through the week so I quickly put something together. Initially I thought it'd be like, "product vs maker" sort of thing where I show the product on one side and me on the other but then I got lazy and I just showcased some of the features randomly lol.
I had some really good feedback and ideas coming from there, which was great. Lots of people wanted a Figma integration, which would be nice but tricky to add due to poor SVG support in Fabric.js.
Companies also asked about having a whitelabel version to integrate into their products, as an embed. I thought that was a pretty cool idea (please bear with me I am dying and just want to get this issue out before I go to sleep lol).
Looking at the competition
Oh I had a really cool section here where I mentioned how I was trying to focus on the competition a lot to make sure the product is successful, because that's important. But hey it was gone as well. Way to go Revue.
Anyway, let me see if I remember a bit...
Ok so I listed a few of the products I think are the closest to what I'm offering:
Kapwing
Kapwing has a very similar target audience to the one I want for my tool, so I am using it a lot as a reference. The product doesn't have motion graphics capabilities, but it's still pretty good and has some features mine doesn't have, such as:
Subtitles. Platforms like Youtube have those built in, but it's still nice to be able to have subtitles added into the video directly. Now, they most likely create those through the server (like anyone would), but this would cost me money (which makes no sense for a free tool). I spent some time researching, and I found the Web Speech API which not only lets you do speech recognition in the client, but also speech synthesis, which might be cool to add as an extra feature. I will see if I can make it work.
Playback speed setting. They have a dropdown to change the playback speed to be faster or slower. I think this would be pretty simple to add, and useful as well, so I'll try to integrate it into the controls.
Image filters. They have a lot of different effects and filters for images. I think I should have at the very least a very basic way to change between filters like sepia, black and white, etc. Could also have this for videos.
Reverse and change video speed. Unsure if I could make this work, I feel like I am pretty limited client-side, but I would still like to look into it.
Templates. I'd like to have at least a couple different "starter projects" people can use, just to make the editor feel more complete. I would have to think of some examples of templates people might want to use. For instance to generate a Product Hunt thumbnail GIF, it would also be very simple to modify with the image replacing function if the user wanted to use their own logo.
Jitter
This is basically the only other motion graphics editor I could find that has a similar target audience to mine (not meant for experts). To be fair it is kind of more oriented to UI designers (it's highly marketed as a tool to animate screens in Figma), so it's not really overlapping my audience, but still close. Jitter looks pretty simple on the surface (and I do think in a lot of ways my product is better), but it does have a decent offering:
Integration with Figma. It makes it super simple to import assets from any project, so it's been able to get a lot of users through that. I'd like to try my best to see if I can make it work, but I might be limited by Fabric.js, like I mentioned before.
Also templates, but different. So Jitter has all these templates for things like lower thirds, fun patterns, subscribing notifications, etc. While the way they're used in the product is as templates (like Kapwing), it gave me the idea to have a section of my product for "animated elements", which you can drag in to any project. So for example if you're making a Youtube video, you could drag in an animation to remind your viewers to like your video or subscribe. I think that would be a nice differentiator and be pretty useful.
Motionbox
I've heard a lot of people using this, but also having issues with it. It might be a good opportunity for me to try to position myself to get some of its customers. Over these past weeks I've focused pretty heavily on copying some of its feature set, but there are still a few things I'd have to look at:
Animated text. You might have noticed this in the task list I showed in the beginning of the email. While my tool lets you animate text, it does not provide presets or ways to animate characters individually, for more fancy animations. I am not sure how much would be possible with FabricJs, but I really want to get this in, as I think it would be a highly requested feature.
Slicing functionality. Kind of a simple one, but Motionbox lets you use a tool to cut up videos and images easily. Currently with my tool you can only do so by dragging the handles all the way, which is really annoying. I could either add a tool, or a shortcut (or both).
Review and commenting. As a client-side only tool, I can't have any sort of multiplayer of commenting into my tool. That said, I have been considering releasing a paid cloud version (people have been requesting this a lot), so in this hypothetical version of the product I could implement some simple review. Although no real-time multiplayer, that would be super hard to do for a motion graphics tool.
VEED
Probably one of the most popular web-based video editors at the moment. While it has no motion graphics offering, and it's quite similar to Motionbox and Kapwing in terms of features, it has something that stood out to me:
Drawing tool. Now, I didn't add a drawing tool to my editor because you can't really animate drawings. That said, I think it could still be useful to have some way to annotate the video, and maybe have them as vectors that you can show and hide and move around. Might be tricky, but I'd still like to explore this to make it more on par.
All of these tools also have a pretty decent renderer, which is something I have been struggling with client-side. I currently have something that is good enough, but as I mentioned in my previous issue I was looking into setting up a server-side (paid) renderer for completely frame accurate renderings and of the highest quality. I was in the process of building one myself using a combination of Puppeteer and FFMPEG, but I actually found this GitHub repo which does exactly what I wanted to do, so I might just use this.
Anyway, lots to do and look into. I don't want to go too crazy with this, but I think it's important that I don't flop the launch, since I have a good opportunity to make a successful product.
Hope you found this email interesting (despite having to rewrite it, ugh). As a reminder if you missed this in the previous issue, you can actually try the tool over here. Feel free to share any feedback with me, I'd really appreciate it!
See you next week,
Alyssa X