This React Library Makes Videos For You
Chapters12
Interview with Johnny Burger about Remotion, its ability to programmatically create videos using React, and exciting developments like AI-assisted code generation and HTML-in-canvas (Chromespec) that enable HTML/CSS/JS in video contexts.
Remotion creator Johnny Burger reveals how to generate videos with code, new HTML-in-canvas capabilities, and sustainable open-source monetization in one chat.
Summary
Syntax’s Johnny Burger sits down with Remotion creator Johnny Burger (yes, the same name shows up twice!) to explore how Remotion lets you render videos programmatically with React. They discuss the recent rise in popularity fueled by AI-assisted coding and the Claude prompts craze that helped videos pop quickly. The conversation then pivots to Chrome’s experimental HTML-in-canvas work, a game-changer for building videos with HTML, CSS, and JavaScript alongside powerful canvas effects. Johnny explains Remotion’s licensing strategy, balancing open-source spirit with a sustainable model via Remotion Pro for larger teams. They also compare workflows between prompt-driven code, traditional editors, and emerging motion-graphics tooling, including Lottie, LaHi, and the challenge of keeping code as the single source of truth. The chat winds through practical render architectures, including how Remotion bundles Chrome for headless rendering (Lambda-scale parallelism and warm-start considerations). Finally, they touch on the ecosystem around media workflows, AI-assisted design, and the practical realities of exporting polished videos for platforms like YouTube and TikTok.
Key Takeaways
- Remotion lets you treat video creation as code, using React components and a time dimension to render videos frame-by-frame.
- The AI-popularized skills feature dramatically boosted Remotion’s installs, with npm trends jumping from ~125k to ~800k installs per day.
- Chrome’s experimental HTML-in-canvas enables DOM-like interactivity inside canvas, opening new visuals but requiring Chrome Canary for experiments.
- Remotion’s monetization (Remotion Pro) supports a four-person open-source foundation, aiming to sustain the project while remaining free for individuals.
- The workflow trade-off between prompt-driven code, pure React components, and editor-based UIs is evolving toward a seamless toolchain that keeps code as the source of truth.
- Remotion renders videos by launching headless Chrome, navigating frames, capturing frames, and encoding them—scaling up with Lambda parallelism (e.g., up to ~200 Lambdas at once).
- Lottie and After Effects pipelines remain relevant; Remotion supports parameterized JSON via Lotty and a React-based studio UI for quick previews and exports.
Who Is This For?
Essential viewing for React developers and video designers who want to automate video creation, and for teams exploring sustainable open-source models around tooling like Remotion.
Notable Quotes
"Remotion is a way to create videos programmatically. So, you use React to essentially code a website, but then you kind of also have this dimension of time and you change the website over time and through that you can render a video."
—Johnny explains the core idea of Remotion as code-driven video rendering.
"Essentially the idea has not changed since the very beginning since 2021. I was in the situation where I already had a couple of open source projects... if it becomes successful and all I get out of it is like issues and bug reports and stress then I would not want that."
—Discussion of sustainable open-source monetization and licensing choice.
"Chrome is prototyping HTML in canvas, meaning you can now write parts or all of the DOM into a canvas element."
—Highlighting a breakthrough feature that could reshape motion graphics workflows.
"The longer the video, the more real-time it is because the parallelism outweighs the overhead."
—Describes how Remotion scales with Lambda-based rendering.
"If you want to make your own CapCut-like editor, you could take Remotion’s UI and tech and build that into a video editor."
—Johnny envisions how Remotion could underpin a browser-based video editor.
Questions This Video Answers
- How does Remotion convert React components into video frames?
- What is Chrome's HTML in Canvas and how can it be used for video production?
- Can I render Remotion videos using AWS Lambda or other serverless options?
- What are the best workflows to combine AI-assisted prompting with code-based video creation?
- How do Lottie, After Effects, and Remotion fit into a unified motion graphics workflow?
RemotionRemotion ProChrome HTML in CanvasAI-assisted video creationLottieAfter EffectsLambda renderingVideo rendering workflowsMedia BunnyWeb Codecs
Full Transcript
Welcome to Syntax. Today we have Johnny Burger on. He is the author of Remotion. And we had Johnny on what I don't probably probably three or four years ago to talk about Remotion which is programmatically creating videos with code and so stoked to see I'm stoked to have him on again because in Johnny's been grinding on Remotion for for many many years and in I don't know probably about January or so this thing absolutely blew up because there was a release of a clawed skill that allowed you to basically just instead of writing the the the JavaScript and React code behind it.
Uh you could now simply just prompt your way through it and it made it a lot easier and it was probably one of the most impressive things uh both to us developers and it absolutely exploded the brains of people who were not developers seeing that you could just type into a box and a video would come out the other end. um which is is really really cool. So we're excited to talk to him about that as well as a new Chromespec which is uh HTML in canvas which as soon as I saw this drop I was like this is going to be killer for doing um like basically making videos with HTML CSS and JavaScript.
So welcome Johnny. Thanks a lot for coming on. Hello. Thanks a lot for having me on for the second time. That feels special. Yeah, you're right. It's only only a couple people have been on on more than once. So, we're stoked to have you on. So, do you want to give us a quick rundown for the six people who've not heard of Remotion, what it is and how it works? Sure. Remotion is a way to create videos programmatically. So, you use React to essentially code a website, but then you kind of also have this dimension of time and you change the website over time and through that you can uh render a video.
And I've been doing that since 2021. Found a couple of people who like to use it. And for a couple of years, we were all coding the videos manually. And now the latest craze is that the AI writes the code. And um now it has become a lot more easier. Mhm. Yeah. Yeah. And it it seems like, you know, the longevity of the project's really great. It seems like you found a way to monetize it without turning people off. How did how did you uh come up with was it Remotion Pro and the idea of being able to actually sustain this thing?
Yeah. So, um essentially the idea has not changed since the very beginning since 2021. I was in the situation where I already had a couple of open source projects that I maintained like some indie hacker projects and I was also working part-time and I really felt like taking on uh ownership of another project could stress me out and I kind of sense that this one could become more popular and then I felt like if if it becomes successful and all I get out of it is like issues and bug reports and stress then I would not want that.
And so I kind of put a clause in the license which requires like the bigger companies um to pay for that and for everybody else it's free and it's been going great. We we've been able to sustain ourselves from that. We are now a team of three people. Yeah. uh a decision I do not regret and that I can also recommend to any other maintainer that they think about it before they launch their own. I I think you did a good job of of doing this without uh pissing people off. It feels like so many monetization strategies really either don't work or make people angry and I think you found a nice balance of something that works and I I never hear anybody complaining about the monetization of this library.
Mhm. Yeah. I think I genuinely wanted to keep like the open source spirit um but find a way to make it sustainable and I figured like drawing this boundary at like four people if you are an organization with four people from then on you have to pay. I figured that makes sense because then you are probably in the situation where you are able to afford a small um fee for that. Especially this year has been exploding and we can hire more people with like a public GitHub repo. Yes. Like incredible. I've not heard of any other project been able to do that.
Yeah. Um let's talk a bit more about the like the cloud skills or the the AI skills in order to to make that. So if you're looking at like a npm trends, um it went from like 125,000 installs a day in like November, December up to almost 800,000 installs a day, right? like it's grown absolutely like crazy and I'm I'm assuming most of that was was due to like the skills release. Is that is that fair to say? Yeah. Uh I I would say so. So I guess this pivotal moment was when we just like like made a tweet where he said that now you can like steal reotion through uh agent skills.
So there's like this npx skills command line which is kind of like a package manager for skills and and that one blew up. Yeah. And what kind of people are you seeing um using this product now? Like the people that are actually implementing it in their business, right? Like I I think everybody has like a little demo video here and there, but I'm curious to see like what types of people or what types of videos are people programmatically building versus like going in like an actual editor, right? Like cuz like I'm thinking about this podcast and whatnot.
I probably don't want to edit this podcast in in Remotion, but there's there's pieces of it like maybe the overlays and whatnot that would be a use good use case for us. Um yeah, I think the audience has changed towards u more non-technicable non-technical people. Um they are now willing to to give it a try and just giving Claude a very um broad non-specific prompt about the video that they would like to have. And I think because there are just like so because it's so accessible um many people are now just doing that and doing um videos like um small like product launch videos or like explainer videos or like graphics for for their YouTube videos.
There have also been like real companies, big companies um building up like design systems like reusable graphics kind of like a motion design system. Yeah. uh with that like a couple of days ago I saw that like OpenAI was tweeting from the main account like an announcement video for for Codeex. Um that was maybe like the biggest wow for moment for me that so that was built in Remotion. Yeah. Yeah. The guy was even open about this. And and do you see a a a large differentiator between the people who are using this to build like apps verse people who are using this to build one-off video animations and things?
Because I I actually used Remotion to build like a audio wavelength like a what are they like a visualizer for just audio content on YouTube. So you get like the bars and the text and stuff on there. And I found it to be awesome for that specific use case. You could, you know, design this thing. You could build yourself a tool and have it export video. But do you see most people using it as a one-off make me a video kind of deal nowadays? Yes. So to be honest, we've kind of like never really found our niche and we've like bounced around a bit.
Um at first we thought like templates, datadriven videos, that's it. Then we kind of try to position ourselves as like the framework with which you can make a video editor. So, not only can you code a video, but you can code a video editor. Um, having Yeah, you have like a you have a whole like video editor UI that you built, right? And you can just buy that and someone could if you want to go make like your own like um what's Tik Tok's editor called? Cap cut. Yeah. If you want to make your own cap cut, you could just take this UI and then take a lot of your underlying tech.
You could build a video editor, right? Yeah, pretty much. Um, well, we figured building this is kind of like insane and it requires solving 1,000 problems. And I would say a couple of them we like componentized and put them into like singular functions and yeah, that was and and still is like a big idea of remotion. I guess we're mostly into video technology at all like like video technology overall. This is also like what what is most fun to me. One prompt to video thing. I've not yet found myself to be like super comfortable uh in this segment, but it's it's obviously huge.
That's when Claude Claude has these amazing uh launch videos. Every time they have like a product, they have these Unreal animation videos that like zoom in and out. And I was like I asked on Twitter. I was like, "Who's building these?" And like half of the comments were like, "Oh, you just prompted Remotion, bro." And and like not to knock Remotion, but like it was it was very good. It still needs like a a human like like you said, like Remotion is is a lot of like video tech and it has a lot of like built-in animations and examples and things like that, which is why it makes good stuff.
But I think you still obviously need that human at at the other end. Finally, I got a hold of the person at Anthropic that made it and they didn't want me to like share anything, but they they did tell me like their process was like partially browser, right? A lot for getting a lot of like the assets, but then they a lot of that was like exported from the browser into like After Effects um assets, which I thought was kind of an interesting workflow. But um like do you think we will get to a spot or or maybe maybe another question is like like what is a good have you seen any good workflows for people maybe partially prompting partially editing or like what does that even look like to build like a really good video?
I think there's still a bit a big gap to like a a super nice fast iterative workflow. I mean I'm using After Effects myself. I'm fascinated by the program and I'm trying to learn from it and like going to be going to be honest I I want to copy some of its ideas now like for example they have like this this effect system this this effects system where you have like um blur wiggle vignette you know just like grab them from a panel and drag them on top of a layer and then you have this um controls which you can adjust and you get instant feedback.
Um and and this does not make sense to do aically because you have to wait. I I think this could be the next step and I'm actively working on this. Um cool kind of like trying to figure out how this can make sense because I do think one other important aspect is that the code should like remain the source of truth. So if you like visually edits the values in a UI how does this save back to the code? What I've kind of figured out so far is that, you know, like with some black magic with JavaScript proxies and source maps, we can kind of like figure out where a React component is is located in in the original code.
And then we can use some abstract syntax tree processing to like write the props back. But then if you like write values back to the code, then that triggers like a fast refresh and there's like this 200 milliseconds latency. And what happens at the at the same time, it's not a nice experience. So now I'm like trying to bypass the the bundler if you write back to the code, but then the agent pain at the same time. I'm I'm I'm thinking about this and um you know once I figured it out uh you know we we can also bring this aspect to remotion.
That's cool because I agree because I was working on some reotion the other day and my process was sometimes I was jumping into the code, sometimes I was prompting to have changes and sometimes I was in like Remotion Studio um selecting from the drop down and then I ended up making my own like crappy version of Remotion Studio that sort of embedded like the it embedded the Remotion player and then I had all my like props as drop downs like background ground and font and color, all of those things you can you can click and as you hover over it, it shows you in real time.
Then when you click it, it updates the code. And I was like, this is kind of a nightmare because there's now three spots where you can you want to interface with it, right? Editing the code directly, via prompting an agent or actually via the UI. And it all sort of comes back to um the actual the code uh the code where re the remotion like timeline lives. So that's really cool because I'm I'm really excited to hear about that. Our editor Randy who is like absolute vibe coder Chad now that he's he's got like a cursor subscription and he builds all kinds of stuff.
He's he's so good at it and he's building all these Python scripts um that like automate a lot of the editing um and like import it into Da Vinci and transcribe it and he's building this whole app. And then like one thing we're we're starting to think about now is like we would love to have like motion graphics and overlays and and things like that programmatically done. And in the past I've done it for my videos with just like static PGs. And I I built a whole web app that just exported it as like a transparent PNG because I was like this is way easier to lay out in HTML and CSS and with a little bit of JavaScript if you need it.
It's way easier to do that than to use like Photoshop or Figma or or something else. And that's why I love this like the idea of doing it in video so much. But one thing that came out couple couple weeks ago was this um Chrome is prototyping HTML in canvas, meaning that you can now write parts or all of the DOM into a canvas element. Meaning that like you can but you can still interact with it like it's like HTML. So your your inputs still work, your drop downs still work, you can still highlight text, but because it's in a canvas element, then you can apply shaders or or any effects that you're used to in in canvas, which is you want to talk a little bit about that?
I think that's probably really exciting for you. It's very exciting. Uh maybe I need to contain the hype at at the beginning. This is like an experimental technology and for it to work you have to like download Chrome Canary and enable a flag in the settings. So you cannot like ship this preview to as a website to a user. Um but if if you are willing to put up with it then you can use this to create some really cool videos. And if we think about is like any video editor or any motion graphics editor, what they do is they essentially have like a canvas uh a rasterized bit map and all of these um effects are just being drawn onto the bit map.
And then if you have effects transitions, they just manipulate the the pixels in many different creative ways and that's not been possible in the on the web so far. We we do have a canvas element, but it is like separate from the DOM world. So in in a DOM world you can lay out items in in a grid in a in a row um you know like with CSS with one line of CSS apply all sorts of things but you cannot apply like a progressive blur or a vignette effect on top of that content and this API makes that possible and so it feels like day one again because that's number one constraints that we had um is now gone and so yeah we are rethinking a lot of things.
Yeah it's so exciting. Do you foresee this being like paradigm shifting in in your world because of the amount of things you can just apply with canvas now? Canvas unlocks so much, right? Yeah, definitely. There are like a couple I'm trying to like figure out the exact mechanics of how does this HTML and canvas like actually works and and what are the limitations of it. Like for example, one limitation that I have found is that you you cannot like nest it. In my prototyping, I I would have found it like very useful if we could like maybe like add a shine effect to like one small element, but then add like a blur or a vignette effect to like the entire video.
Oh yeah. And how HTML and canvas works is in the DOM, you add child nodes to the canvas. something that you would not do before. It's really weird. Like you open a canvas tag and then put your HTML inside of there. Yeah, it feels illegal. Yeah, but but that's how it works. And then you end up with like this tree and I was like trying to figure out in the inner canvas tag if we like apply the shader the shader there, will it also uh does the outer shader then compose with that? And uh that does not seem to be the case unfortunately.
So um yeah, I'm I'm thinking about like whether there's like a workaround or whether I should like open an issue in the spec and ask about this. Um but yeah, for now it's just like we'll throw an error. And if you want to see all of the errors in your application, you'll want to check out Sentry at centry.io/sax. You don't want a production application out there that well you have no visibility into in case something is blowing up and you might not even know it. So head on over to centry.io/sax. Again, we've been using this tool for a long time and it totally rules.
All right. Do do you think there's any concern about this API just not making it? Um yeah, it could happen. I mean if we need to be realistic and they could just like scrap it. I think there's like this whole process of like stage zero, stage one, stage two that like any web technology has to go through and um it's not even at stage zero yet and also like the API could change entirely. I'm just not willing to let it dampen my mood right now because you know we we can pin the version if we wanted to and we can I'm willing to um adapt to whatever they Yeah, it feels like one of the first APIs that's been universally like this is amazing, you know, like I haven't I I've seen just a tremendous amount of people being excited about this.
So, you would hope that that would influence things. I I agree. And a lot of the the people that are working on it on Chrome have said like, "Yeah, send us your feedback." And like like now's the time to it's amazing that so many people are playing with it because they're going to have such good feedback like the one you can't nest them, you know, or like another one is you can't put an frame inside of it, which maybe makes sense probably makes sense. There's probably a lot of security issues there. Uh but it is such a cool thing.
I made one where like I just love um like grunge and blur on a lot of my text and I I built some like 3D shaders that would very efficiently add like blur and grunge and grit and grain to your text which is just it looks so cool and I I can think of so many use cases for that in my videos. Um, and maybe we should say for for people who haven't used it before, it doesn't necessarily have to be in the browsers because it's it's not like people are watching Remotion videos in the browser.
You you can, but right, most people are are exporting them and then the way that it works is that you can maybe you can tell me, but it just takes it takes screenshots of or not screenshot or screen captures of every single frame and then stitches those together. Is that how it works? Um, yeah, pretty much. Um it it sounds very simple and it is on on the surface that we just like essentially launch puppeteer um seek to the right frame and and capture it and encode it with fmp. Yeah. I don't want to make it sound more complicated um than it is to like get this HTML and canvas thing working was uh like very difficult though actually because um we like wanted to compile a version of Chrome which was recent enough to have this thing but also was like small enough so that it can fit in an AWS Lambda function and also that um it has like the H.264 and H.265 codecs enabled which by default like the headless Chrome does not have.
And this is also very important for us to play videos. And so for like all of the operating systems we like compiled Chrome like for five different platforms and that's like a huge project. Uh how long does it take to compile Chrome? I would say like four to five hours. You would like spin up like an EC2 instance with 150 GB of RAM and hokey cores. Yeah. Yeah. It's massive. And I used to do this by hand and it would like take me a week because it would also fail. And now uh with the agents I I can do like multiple compiles um a day and parallelize them.
It's really really nice. Oh, that's great. Yeah, that's one thing I wanted to ask about as well is like because of the way that that works is that it takes like a screenshot of of every frame. Um, your UI essentially needs to be like a like a pure function, meaning that you pass in a time code and it will always render that exact same frame at that exact same time. Um, and because of that, when you want to use animations and whatnot, does that all need to be like the reotion way of doing animations or can I just use regular CSS animations as well?
You you can animate the CSS properties in in JavaScript, but you cannot have like the the CSS native animations. These um do not work and and they lead to flickering. Our model is essentially that using a hook called use current frame you get the current time and then it's like up to you to like render the right image. It's like a pure function. uh the time is the argument and and your job is to return an image and because like the CSS animation is not like tied to the time but well but well actually you can make it but yeah it's a bit tacky um that does not work by default but um it's unlocks some some really nice things like you you can have like a huge timeline and only need to mount and render the content that you really actually need at the moment.
So if you have 100 clips then you know you know you don't have a bottleneck and you can multi-threads the render because like every frame is so deterministic you can parallelize it as much as you want. Yeah. Like you could theoretically spin up like let's say you had like a 100,000 frames. Could you theoretically spin up a 100,000 lambdas and render it all in like one second? Yeah, let me think about it. So 100 So 100,000 frames that's let's divide it by uh 30. That's like 3,000 something seconds. That's like an an hour long video.
And with like reotion lambda you can I mean this is like a hard uh coded limit by by us because we think too much concurrency also doesn't make sense but you can like spin up to 200 lambda functions and actually split up this hour of video into 200 parts and render it pretty quickly. The longer the video like the more x real time it is because the parallelism outweighs the the overhead. So absolutely possible and our users actually want to do that and the problems are more with like the two hours, 3 hours, four hours long videos because then you run out of lambda resources.
Oh yeah. And when you spin up a lambda, does it like I I'm assuming there's some overhead of like spinning it up and then you're able to take you take multiple screenshots in that one once it's warm. Is that even a thing anymore? Do we still say warm lambda? Yeah, it does make a difference. Um I would say you save one, two, three seconds if a lambda is warm. Um if that is the case, then we can also already open the browser. Yeah, then you can perfectly um parallelize it. In the end, you kind of need to stitch together the already encoded parts of a video and the encoded audio together.
Um make it seamless so that there are no audio artifacts. Um also like a delicate topic that we spend a lot of time on. But yeah, we have like some some metrics from our users. I think like millions of videos are rendered every month on on these lambda functions. And one thing I'm really curious about is do you have any insight into like the CD underworld of video slop? I like you know like these like programmatically made videos that YouTube is trying to crack there. I think YouTube is calling it loop content which is just videos that can be programmatically made over and over again.
Do you have any insight into that underworld? Have you talked to anybody about that? Huh? Yeah. Interesting. I I don't have like super secret info. Okay. But um you know like some some people have been like whenever a video is being made with remotion, we like using fmp like embed like metadata like Yeah. IFF probed a video the other day and it says made by Remotion and and some users complain that, you know, they want to be able to remove this because um apparently platforms use this to Oh, detect detect I made a SLO video the other day um and I removed it.
I think I removed it but or no I didn't. and Tik Tok just tanked it immediately. And then it Instagram did well, but I think that they were I'm not sure if they detected the remotion tag or they detected that it was like an AI music kind of meme reading GitHub um GitHub mean GitHub comments. It was really funny by the way. You should watch it. But uh I was curious what they used to detect that. I mean if if that is really true then I I apologize to the world really um for for all of this love.
I was ne never never part of the plan. Started this when AI was not a thing and I'm I'm trying to not uh amplify it or compliment our users on it who are doing this. Oh no, that's it's not your fault, right? Like you you build an awesome tool and and people use it figure out how to use it for bad as well. But I think the platforms are doing a pretty good job at at trying to figure out how to detect this type of stuff. I'm curious about Media Bunny. So, you all moved over to Media Bunny in seems like February of this year.
Can I That's a project that I've always had on my radar, but I'm not quite sure where it fits in in the ecosystem. Can you talk a little bit about why you moved to Media Bunny and like where it fits in here? Yes, I I'd love to. So um traditionally in in the browser if we are dealing with video then we are just like interfacing with the video tag or we want to extract a frame from a video we mount a media tag a video tag. We seek to the correct time and then like capture a screenshot but this is not frame accurate.
There's a limit. You cannot like mount too many video tags. at some point like the browser will just start um throttling you and it's not efficient at all. And there's another really interesting technology that um is a bit more mature than HTML and canvas that is now available in all browsers in 2026 um called web codeex and that allows you to interface with video on a very low level. So this allows you to take encoded H.264 chunks, H.265 265 chunks allows you to decompress them and also to encode them. Again, these H.264 chunks, they are like embedded.
This is what you will find in an MP4 video. And to read them out, you like actually need to read the binary data of an MP4 and extract and interpret these uh encoded packets. And that is as it turns out a really difficult task because MP4s have so many different features. There are many edge cases and that is just like one container. There's also webm and like six other containers if you include the audio containers. I saw this opportunity that we can work around limitations of the video tag by just fetching the MP4 via the the web fetch API, reading the binary data, putting this into web codex and then doing things and then even doing things like converting an MP4 to a web and have like a different codec which was not possible before.
Um I mean it was possible with like software only but this also uses like the accelerated codecs and so sorry only now I'm getting to media bunny when I saw this then I immediately realized that the guy behind it was like uh much smarter at it in in every aspect and now we talk often and it's like amazing how brilliant he is. see like for every topic always knows the right answer and like immediately realized that you know maybe I should give up on this rabbit hole and you know just use this awesome library instead.
Oh man, it takes a special kind of person to want to have to like write a codec. Man, I can't imagine the the little bug rabbit holes you've gone down in your days of of writing codecs of just little I'm sure I'm sure you've had like I've battled my fair share of just frame drops of just using software to record video and I can't imagine poor people writing the codecs of finding all these bugs. Yeah, it's uh it's its own world. Like last year I've also been to like multimedia developer conference dem and it's you know like every talk is just like funny anecdotes rants about edge cases and what can go wrong.
Um really funny. Oh that's great. I once saw years ago I saw a talk on how MP4s were encoded and they basically said like you know sometimes you're watching an MP4 and you just get like a blocky green and they this was way before this is probably 10 years ago at Frontiers conference and they explained how like the MP4 codec works and and what happens when things go wrong and they had built like an MP4 I don't know decompiler or something in the browser and I thought that was so interesting to understand oh That's why when you see green, it's it's glitching out and it's because there's something wrong with the the underlying data.
I want to ask about like motion graphics workflow as well cuz like if if we were to like build some sort of like like a lower third um or or whatever like we're this is one thing we're kind of looking into right now is just the NFL has all these things over top the scores when the score changes the it will go up. All of that stuff is just great in in the browser, right? I it's I can think of so many easier ways to handle it. Now we have the um what's the retext? I did a video on it.
Why am I forgetting it? Oh, the retext pretext. Yeah. All the the new the new pre-text APIs for sizing things and like the browser is just such a good use case for doing layout and and being able to do animations and change text and whatever. Um, and I'm curious, do you have you heard of anybody and what their workflow looks like for programmatically creating these things? I know there's like Lahi files. I know there's this new ograph HTML spec. Have you looked into that whole area of like how do we get these motion graphics out of rendered in Remotion and then somehow into the editor but be able to update them?
Yeah, I guess the reotion way is that you would like first figure out how to build like this uh like a scaffold in web technology using React CSS, make it look like you want it to. Then you you animate it. You add key frames in reotion. In the end, we we have a way to like parameterize these motion graphics. Um we simply use React props for that. you you have a component, you give it props, and uh I think you've also like alluded to like these little drop downs that we have in the studio. So, we allow you to like interactively um edit and preview them like defi like using a sort schema kind of like create a form where you can like try different values and see how so good it just makes so much sense in my brain that way of doing it.
And I would say if you are good with this workflow then that is the way to go. But reality is and lot of users ask us this is that they have an after effects template and now they want to parameterize it. This is where you have to use lotty. Well it's it works well. um use the regular Lotty React component where we've kind of made our own integration but it's like a very thin layer on top of it and you parameterize the the JSON essentially but that's also one big limitation of the Lotty file that it is just a JSON um which describes the whole video.
You do not have the crazy cascading of CSS. You do not have the crazy if else data fetching stuff that you can do in React. It's not code. It's just data which defines um a lot file. So you are limited in how you can parameterize a Lotty file and it's very pragmatic. You design something in After Effects and then you bring it over to Reotion with Lotty. That's cool. And does Lahi have like like so they wouldn't have the ability to like say measure a name. You know, if if my name West Boss is short, maybe you want to increase the size of it until the height of it gets to a certain point.
Whereas like somebody's German last name is really long, you want to like you maybe want to shorten it. Lahi doesn't have that logic like that, does it? I do think it gets pretty hairy if you want to do that because as far as I know the like a lotty animation has like fixed dimensions. So if you clip outside of it then you know you you have to maybe with with code um also detect like measure the text and also decrease the font size which is also in the JSON. I I think that's how it works but I'm not not a lot expert.
Maybe maybe they do have like an auto sizing feature. This would be cool. Yeah, I think like honestly I'm I'm talking to like Randy our editor as well and like essentially I think what what we want to end up with is just like a like a website we can visit and we have got all of our components and you can just type in and there's all logic in those you know if there's if there's three people render it this way and then you obviously just click download it'll render it out download it we can throw it into into Da Vinci but like I think the dream would be like um Da Vinci plugin or something like that where you can type in the different props and then click like rerender or something and it would replace that piece somewhere in there.
Yeah. Um so we do not have a plugin yet but what you have just described before um you can totally do it and we actually have a demo if somebody wants to check it out. It's under reotion.dev/brand and you will essentially end up on a website where you can click through um our logos like lower thirds that we use in in our videos. Um you can even like with this sort schema parameterize um like the lower turrets that we have and then not yet possible to render directly on the website because this is a static website but you can copy a CLI command and then you can render out that lower third as a transparent progress video and drag it into Dainci.
So yes, we've not yet closed the arc quite yet. You have to jump through one hoop maybe, but uh I would say it's still pretty good progress. Cool. Wow. Yeah, this is neat. Yeah. Well, this has been amazing, Johnny. Now is the part of the show where we're going to be talking about sick picks and shameless plugs. Sick picks for people who don't know or things that generally find interesting, exciting, or just stuff that's making your life better. Johnny, do you have a sick pick for us today? I do have one indeed and it is uh right in my hand.
Um it is the Endtech DMX USB Pro. This is a uh device that's not so cheap actually, maybe like $100. And what it allows you to do is it's an interface that allows you to plug in like um actual disco lights uh like this one uh into into your uh MacBook and then interface with this disco lights through the DMX protocol. Um this is like the protocol that is actually being used for like big concerts, big festival productions. Um, it all runs over the DMX protocol. I figured out uh with one prompt. I was really surprised that it worked that through the web serial API we can program these lights um in the browser and then we can like we can wipe code lights uh and and it's like honestly so cool.
So, um I bought like couple of these lights. Um made some uh vibe coded made essentially a a vibe coded light show. Um use freeotion to and 11 laps to like make some karaoke videos, some lyrics, composed still after effects. Um and essentially used all of but really really used like all of the AI tools. Yeah. And um yeah, essentially um created like a a vibe code DJ. Do you have a fog machine too? I do. Yeah. But but this one is just like um like a dumb fog machine. You just press a button. Okay.
You need to make that smart. And what about lasers? Have you hooked up AI to highowered lasers yet? I also um have a laser. like out of all of the lights to be honest, this was like the most disappointing one because it's just like produced like um one small dot. Um but yeah, uh this was kind of like my rabbit hole at the beginning of this year and then like for like for my birthday party, I invited a couple of friends and then like I performed the the VIP code DJ said. Yes. W for our live shows with this.
Oh yeah, DMX. That's great. I was actually upset. I have all these lights in my office and they're Bluetooth and I hate it cuz Bluetooth is the worst. And I was like, "Oh, just hook them up to DMX." And turns out my lights don't have a DMX input. So, I'm kind of bummed about that. I should have got some that were DMX compatible. Also, DMX, sick rapper. Indeed. Rest in peace, DMX. Yes, rest in peace. Uh, cool. Uh, shameless plugs. What would you like to plug to our audience? Where can we find you online? All that good stuff.
H, absolutely nothing. I'm I think I'm uh uh good with exposure recently. I at the moment I just want my piece. Yeah, people stop finding you. I'm sure you get all kinds of Yahoos in your inbox now that this thing is gone. It just exploded. All right. Well, thank you so much for tuning in. We appreciate you coming on and uh definitely audience check out Remotion. Build it. I'd love to see what you build. Thanks again.
More from Syntax
Get daily recaps from
Syntax
AI-powered summaries delivered to your inbox. Save hours every week while staying fully informed.









