Adding image (and video!) filters to my product, and beating the competition
Adding image (and video!) filters to my product, and beating the competition
Issue #25
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,
I had a pretty nice week. I got a lot more functionality into the product, and I've been speaking to potential enterprise customers. Let me get right into it!.
Beating the competition
The focus this week was to try to get my tool on par with the competition, in my previous issue I listed features that other editors had that mine didn't, so I tried to add them in for mine.
Saturday I was coding non-stop until 1AM to get all these things in (basically the only time in the week I get to, plus Sunday), and I think I was pretty successful with it. Here's a comparison of the tasks in Notion between last week and now:
As you can tell, a bulk of new completed tasks, a couple new ones, and some recurring ones which I can't be bothered to complete because they're just annoying. I'll do a quick breakdown of some of the easy wins:
Brought back playback shortcut (space bar). Originally I had removed it as it was conflicting with the pan tool and when typing in inputs. Was an easy fix.
Added a speed dropdown in the playback area. I saw Kapwing and a couple other editors had this in, so I thought why not? Made a very basic design, I was able to get it to work by changing the global speed setting of AnimeJs when playing the video back. Works like a charm.
Fixed a bug when deleting local videos from the uploads section.
Made it so you can only drop objects into the canvas. If you're dragging anywhere else, the object shows in half opacity so you get some visual feedback that it's not going to add.
Added rotation steps while holding shift. Basically so it rotates by 15deg as opposed to freely, for more precision.
Added a shortcut to cut layers, basically holding command and clicking on a layer sets the end point, and command + shift sets the start point (might try to use better shortcuts, but not sure which really).
Fixed local video upload getting frozen.
Fixed the "drop zones". Basically when dropping an asset into the canvas, it was offset by a bit. I tried to make it more precise (but I might try to refine it even more).
Made it so if you add a video that is longer than the total project duration, the duration gets updated to match the video. Originally I had fixed duration but I saw all other tools had automatic duration based on the assets so I thought I would change it (but you can still set a fixed duration).
And now, onto the bulk of tasks for the week.
Filters, filters, and more filters
One of the main features the competition have that I wasn't offering in my tool are filters.
At first I was skeptical, I'm building a motion graphics editor, filters aren't *that* important (looking at tools like Jitter in my competition, they don't really offer anything in that regard).
But I feared I would be compared to tools like VEED, Kapwing, or Motionbox, all of which have some form of filters.
So I started looking into how I could do it with Fabric, and I thankfully stumbled upon this fantastic demo which lists all available options. I decided to implement most of these (I might add more of them in the future, I just focused on the main ones). I considered animating the filters (since it's 100% possible), but I thought it might be a bit overkill, especially in regards to performance, so for now they are static.
Anyway, here's my implementation. I wasn't sure whether to add a separate tab or a modal for the filters, I figured a modal would be much easier (and I wouldn't have to redesign the whole UI).
Basically you have some presets, settings for brightness, contrast, vibrance, saturation, hue, chroma key, noise, and blur. I compared it to other editors and mine seems to have the most options, so I'm pretty happy about that. The chroma key is especially nice to have as a way to remove backgrounds from pictures (super simple to remove white or green from green screen).
So it worked fine for images, I was like hm, couldn't I do this for videos as well?
I spent many hours on this, when I first tried it the video got stuck on the first frame, and I couldn't seek or play it. I only found one question on the topic in StackOverflow, where it said it was a matter of the textures getting added into the cache causing the freeze frame, you have to clear it every frame. I tried implementing the solution, but it wasn't working. I tried recreating it in CodePen, and I ran into the same issues as soon as I added the videos dynamically and when attempting to play or seek the videos at different points.
Anyway, it felt like a hard problem to solve, the video seemed to get converted into an image in order to apply the textures, causing the root DOM element created by Fabric.js to be modified entirely so I could not seek it. I spoke to some users to see how important this feature would be, and I was told it would be valuable especially in terms of green screening, so I decided to keep going.
Ultimately what worked was kind of crazy. Aside from doing what the question mentioned, on every video frame right before seeking I remove all the filters, store them temporarily somewhere, retrieve the old DOM element before the filters were applied and switch to it, then await the frame render, restore the filters, and boom, there you go!
...except not so easy. Aside from the freeze frame issue, I started experiencing issues where the whole canvas would stop working. I looked into it, and I realized it was caused by the autosave - apparently filters can't be saved into the JSON object, there's no support for it. Which is annoying. But obviously I wasn't going to let that stop me.
What I ended up doing then was on every autosave call, remove the filters from all objects, save the filters by type + individual properties (filters are context-dependent, so you can't just save them in an array) clear the cache and textures, remove the filters property from the toJSON method call (to prevent it from glitching out), and then reinstate it by iterating over the saved filters arrays and individually generating those filters from zero.
Pretty overcomplicated tbh, but hey, I made it work. Check this out!
As you can see all filters work for video, and the chroma key works pretty well too for removing the green screen which is amazing!
What's next?
While the editor is already pretty powerful, there's still some more features I'd like to add to beat the competition entirely. Here's some I'd like to tackle next week:
Subtitles. I actually tried working on this today, using the Web Speech API. I quickly realized the API does not support generating text from an audio file (probably so Google can sell their paid Cloud Speech-To-Text API), so I hit a dead end. I probably will have to use the paid API for some pro version of my tool (since it would be expensive to have it for free users). I did come up with a different alternative though, allowing users to upload their own SRT files for subtitles. I could interpret the file with the timestamps, and automatically add them into the video. I found a lot of online SRT generators so I could just lead users to those, and then put the resulting file in my tool for the subtitles. Then it would be a matter of having options to stylize the text and more fun things.
Animated text. I worked on an early version of this, where I broke the text into individual letters to animate them, but I found this on StackOverflow for putting Lottie files within Fabric.js, and I thought I could potentially use this instead. Basically I could create the text animations in After Effects, export with the Bodymovin plugin, and then allow the user to import them and change the text, colors, and potentially also the font (I'd have to look into what can be changed through Lottie). This would also be amazing for other sorts of Lottie animations, I could essentially use the whole library from LottieFiles and expose all properties to let the user customize them. Could be a gamechanger!
Audio layers. A lot of motion graphics editors do not have audio support, so I thought I could set mine apart from the others by having it in. Currently you can have background music, and the audio from videos works, but there is no way to create audio layers. It should not be hard to add, but I think I want to add a few more features there, such as being able to animate the volume for fading in/out, reversing, changing the speed... I created an audio manipulation library while building Sonuum so I could reuse it for this, it would be fairly simple.
I also have been in touch with several potential enterprise customers who I've been talking to for adding certain features. To be honest I still am not sure if I want to have a paid version of this (with all the complexity, making sure it doesn't break or anything), but I have to admit it is tempting as it is something I can do fairly easily (literally changing some lines of code to make it work in the cloud, and allowing companies to use a whitelabel version to embed into their products), plus I can charge quite a lot (easy to do for B2B). Some asset providers have contacted me too to partner together (so I would use their API to show images, videos, audio, icons...), which could be interesting.
Anyway, lots of things. I think the end is near, I'm pretty excited to launch this :)
See you next week,
Alyssa X