This React Library Makes Videos for You - CourtneyR.dev's 2nd Brain

This React Library Makes Videos for You ![rw-book-cover](https://img.youtube.com/vi/kUmzkLKZgBU/maxresdefault.jpg) 🔗 **Source:** [This React Library Makes Videos for You](https://www.youtube.com/watch?v=kUmzkLKZgBU) > [!note]+ Document Notes > tags: #remotion #video-generation #react #programmatic-video #ai-tools > author: Syntax > source: YouTube > reference: https://www.youtube.com/watch?v=kUmzkLKZgBU > date created: 2025-01-13 10:00 > > # 🏷️ Title: This React Library Makes Videos For You >  ## 🧰 Action Inbox - [H1] Try Remotion with Claude skills for quick video creation — npx skills command #ai-tools - [H2] Test HTML in canvas API for advanced video effects — Chrome Canary with experimental flag #web-apis - [H3] Explore video tech monetization models for open source projects — company licensing approach #open-source ## 🧭 Table of Contents - [[#📝 Summary]] - [[#📖 Main Content]] - [[#🗒️ Notes]] - [[#📚 References]] - [[#🗣️ Paraphrase]] - [[#📰 Newsletter]] - [[#✅ Action Items]] - [[#🧪 Hypotheses]] - [[#📊 Methodology]] - [[#❓ Questions]] - [[#🔮 Future Research]] - [[#💡 Implications]] - [[#🧠 Learning Styles Assessment]] - [[#📊 Accessibility Assessment]] - [[#🌍 DEIB Assessment]] - [[#✅ Logical Validity]] - [[#🛡️ DARVO Analysis]] - [[#🎯 Conclusion]] ### 🔗 References - [Remotion](https://remotion.dev) - [Media Bunny](https://media-bunny.dev) - [HTML in Canvas Chrome Experiment](https://developer.chrome.com/docs/web-platform/canvas-html) ## 📝 Summary - Johnny Burger discusses Remotion, a React library for programmatically creating videos that exploded in popularity with AI integration - The library grew from 125k to 800k daily installs after introducing Claude skills for AI-powered video generation - New Chrome experimental feature "HTML in Canvas" enables applying shader effects to DOM elements, opening new possibilities for web-based video creation - Remotion uses a sustainable monetization model requiring companies with 4+ people to pay while keeping it free for smaller teams - The technology renders videos by taking screenshots of each frame and stitching them together using headless Chrome ## 📖 Main Content Remotion allows developers to create videos using React, treating video as a website that changes over time. Originally requiring manual coding, the addition of AI skills through Claude has made it accessible to non-technical users who can now generate videos through prompts. The project has found sustainability through a licensing model that charges larger organizations while remaining free for smaller teams. This approach has enabled the team to grow to three people without alienating the open source community. A major technical advancement is Chrome's experimental "HTML in Canvas" API, which allows applying canvas-based effects like shaders and filters to regular HTML content. This bridges the gap between DOM layout capabilities and canvas rendering power, potentially revolutionizing web-based motion graphics. The video rendering process involves launching headless Chrome instances, seeking to specific frame timestamps, capturing screenshots, and encoding the results. This approach enables massive parallelization through AWS Lambda functions for faster rendering of longer videos. ## 🗒️ Notes #### ⏱️ [00:00](https://youtu.be/kUmzkLKZgBU?t=0) — [H1] Introduction to Remotion and AI explosion - Key idea: Remotion enables programmatic video creation with React - Evidence: "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" #### ⏱️ [02:30](https://youtu.be/kUmzkLKZgBU?t=150) — [H2] Sustainable monetization model - Key idea: Charges companies with 4+ people while keeping open source spirit - Evidence: "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" #### ⏱️ [05:45](https://youtu.be/kUmzkLKZgBU?t=345) — [H1] Explosive growth from AI integration - Key idea: NPM installs grew from 125k to 800k daily after Claude skills - Evidence: "It went from like 125,000 installs a day in like November, December up to almost 800,000 installs a day" #### ⏱️ [08:20](https://youtu.be/kUmzkLKZgBU?t=500) — [H2] User base evolution - Key idea: Audience shifted to non-technical users using AI prompts - Evidence: "The audience has changed towards u more non-technicable non-technical people" #### ⏱️ [12:15](https://youtu.be/kUmzkLKZgBU?t=735) — [H1] HTML in Canvas breakthrough - Key idea: Chrome's experimental API allows canvas effects on DOM elements - Evidence: "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" #### ⏱️ [16:30](https://youtu.be/kUmzkLKZgBU?t=990) — [H2] Technical implementation challenges - Key idea: Compiled custom Chrome for HTML in Canvas support - Evidence: "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" #### ⏱️ [20:45](https://youtu.be/kUmzkLKZgBU?t=1245) — [H3] Chrome compilation complexity - Key idea: Chrome compilation takes 4-5 hours on powerful EC2 instances - Evidence: "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" #### ⏱️ [24:10](https://youtu.be/kUmzkLKZgBU?t=1450) — [H2] Pure function rendering model - Key idea: Videos must be deterministic functions of time for parallelization - Evidence: "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" #### ⏱️ [27:30](https://youtu.be/kUmzkLKZgBU?t=1650) — [H3] Lambda scaling capabilities - Key idea: Can render hour-long videos with 200 parallel Lambda functions - Evidence: "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" #### ⏱️ [31:20](https://youtu.be/kUmzkLKZgBU?t=1880) — [H3] Video slop detection concerns - Key idea: Platforms detect Remotion-made content through metadata - Evidence: "Whenever a video is being made with remotion, we like using fmp like embed like metadata" #### ⏱️ [35:45](https://youtu.be/kUmzkLKZgBU?t=2145) — [H2] Media Bunny integration - Key idea: Low-level video processing library enables frame-accurate operations - Evidence: "WebCodex allows you to interface with video on a very low level. So this allows you to take encoded H.264 chunks" #### ⏱️ [42:15](https://youtu.be/kUmzkLKZgBU?t=2535) — [H2] Motion graphics workflow - Key idea: React props enable parameterizable motion graphics templates - Evidence: "We allow you to like interactively um edit and preview them like defi like using a sort schema kind of like create a form" #### ⏱️ [48:30](https://youtu.be/kUmzkLKZgBU?t=2910) — [H3] DMX lighting integration - Key idea: Web Serial API enables browser control of professional lighting - Evidence: "Through the web serial API we can program these lights um in the browser" ## 📚 References - [Remotion](https://remotion.dev) - [Remotion Brand Demo](https://remotion.dev/brand) - [Web Serial API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API) - [WebCodecs API](https://developer.mozilla.org/en-US/docs/Web/API/WebCodecs_API) ## 🗣️ Paraphrase - Remotion transforms video creation by treating videos as React websites that evolve over time, making programmatic video generation accessible to developers - The project achieved sustainability through a thoughtful licensing model that charges enterprise users while maintaining open source accessibility for smaller teams - Chrome's experimental HTML in Canvas API represents a paradigm shift by enabling canvas effects on DOM elements, bridging web layout capabilities with advanced graphics rendering ## 📰 Newsletter 🎬 **Remotion Revolutionizes Video Creation with AI and New Web APIs** The developer community is buzzing about Remotion, a React library that's transformed from a niche tool to a viral sensation. With AI integration through Claude skills, creating professional videos is now as simple as writing a prompt. **Key Benefits for Developers:** - **Familiar Tech Stack**: Use React, CSS, and JavaScript for video creation - **Massive Scalability**: Parallel rendering with AWS Lambda - **Future-Ready**: Early access to Chrome's HTML in Canvas API **Resources for Getting Started:** - [Remotion Documentation](https://remotion.dev) - Complete guides and examples - [Brand Demo](https://remotion.dev/brand) - Interactive template customization - [Learn WordPress](https://learn.wordpress.org/) - Video tutorials for WordPress integration The intersection of web technologies and video creation opens exciting possibilities for WordPress developers looking to automate visual content generation. ## ✅ Action Items #### DevRel - Developer advocacy: Create video tutorials showing Remotion integration with popular frameworks - Education: Develop workshop curriculum for AI-powered video creation - Developer experience: Document best practices for video rendering optimization - Developer marketing: Showcase enterprise use cases like OpenAI's CodeX announcement video - Community management: Monitor and address video slop concerns in developer forums #### OSPO - License Compliance: Review dual-licensing models for sustainable open source projects - Security Management: Assess risks of programmatic video generation in enterprise contexts - Software Inventory: Track dependencies for headless Chrome compilation and WebCodecs - Developer Support: Provide guidance on video processing technology choices - Strategic Alignment: Measure impact of AI tools on open source project adoption #### Community - Maintainers: Share monetization strategies that preserve open source values - Contributors: Create contribution pathways for video technology expertise - Sponsors: Support experimental web API development and testing - Ecosystem: Coordinate with browser vendors on HTML in Canvas standardization #### WordPress - Core: Explore integration opportunities for native video generation capabilities - Core Performance: Optimize media handling for programmatically generated content - Core AI: Investigate video generation as AI integration use case - Playground: Create video rendering demos and educational content - Community: Share video creation tools for meetup and WordCamp content - Marketing: Leverage programmatic video for campaign automation - Documentation: Create video tutorials using code-based generation - Photos: Consider video content in media library expansion - TV: Explore automated video production workflows - Meta: Assess infrastructure needs for video processing features ## 🧪 Hypotheses - AI-powered video generation will democratize motion graphics creation beyond technical users - HTML in Canvas API will become the standard for web-based video effects and motion graphics - Dual-licensing models will become more common for developer tool sustainability - WebCodecs API adoption will enable browser-native video processing applications ### 📊 Methodology - Study design: Compare video creation productivity between traditional editors and code-based tools - Data sources: NPM download trends, user surveys, and enterprise adoption metrics - Experiments: A/B test AI-assisted vs manual video coding workflows ### ❓ Questions - How will HTML in Canvas API limitations affect complex motion graphics workflows? - What security implications arise from programmatic video generation at scale? - How can platforms effectively detect and moderate AI-generated video content? ### 🔮 Future Research - Performance benchmarking of WebCodecs vs traditional video processing - User experience studies on AI-assisted video creation workflows - Economic impact analysis of automated video generation on creative industries ### 💡 Implications - Practice: Developers gain new capabilities for creating marketing and educational content - Policy: Platforms need updated guidelines for programmatically generated video content - Security: Metadata-based detection becomes important for content moderation - Education: New skills required for code-based motion graphics and video creation - Funding: Dual-licensing demonstrates viable path for open source sustainability ### 🧠 Learning Styles Assessment Reading level estimate: Grade 12 #### 👀 Visual learners - Present: Code examples, browser screenshots, animation demonstrations - Improve: Architecture diagrams showing rendering pipeline, visual timeline representations #### 🔊 Aural learners - Present: Podcast-style interview format with detailed explanations - Improve: Audio-only version with clear technical concept explanations #### 🗣️ Verbal learners - Present: Rich analogies (websites that change over time), technical definitions - Improve: Glossary of video processing terms, more real-world comparisons #### 🧩 Kinesthetic learners - Present: Step-by-step code examples, hands-on Lambda deployment - Improve: Interactive coding playground, downloadable sample projects #### 🧠 Logical learners - Present: Clear technical progression, performance metrics, system architecture - Improve: Decision flowcharts for video tool selection, performance comparison tables #### 🧑‍🤝‍🧑 Social learners - Present: Community examples, user testimonials, collaborative workflows - Improve: Discussion prompts about video generation ethics, peer review exercises #### 🧘‍♀️ Solitary learners - Present: Self-contained technical explanations, independent project ideas - Improve: Self-assessment checklist for video generation skills, personal portfolio projects #### 🌿 Naturalistic learners - Present: Technology evolution context, ecosystem relationships - Improve: Environmental impact analysis of video rendering, sustainability considerations ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Well-structured headings, descriptive link text - Improve: Alt text for technical diagrams, ARIA labels for video player controls #### Keyboard navigation - Present: Standard video controls, logical tab order - Improve: Skip links for video sections, keyboard shortcuts for playback #### Contrast and readability - Present: High contrast code examples, readable font sizes - Improve: Ensure code syntax highlighting maintains contrast ratios #### Text resizing and reflow - Present: Responsive layout at various zoom levels - Improve: Prevent horizontal scrolling on mobile devices #### Media and captions - Present: Full transcript available, clear audio quality - Improve: Time-stamped captions, downloadable transcript with speaker labels #### Forms and interactions - Present: Standard form controls for video parameters - Improve: Live validation feedback, accessible error messages ### 🌍 DEIB Assessment #### Cultural breadth - Present: Global technology perspective, international user examples - Improve: Multi-language video generation examples, cultural context for visual design #### Inclusive language - Present: Technical terms clearly defined, neutral pronouns used - Improve: Plain language alternatives for complex concepts, avoid cultural idioms #### Neurodiversity support - Present: Clear section structure, consistent formatting - Improve: Content warnings for rapidly changing visuals, adjustable playback speeds #### Representation - Present: Diverse technical backgrounds represented - Improve: Include perspectives from different creative industries, varied skill levels #### Psychological safety - Present: Respectful discussion of AI impact concerns - Improve: Clear guidelines for responsible video generation, ethical considerations ### ✅ Logical Validity #### Strong reasoning - Deductive strength: Technical capabilities logically lead to use case expansion - Inductive strength: Growth metrics support claims about AI adoption impact - Causal reasoning: Clear connection between AI integration and user base growth - Analogical strength: Website-to-video comparison effectively explains core concept #### Fallacies - Appeal to novelty: HTML in Canvas presented as automatically superior without full analysis - Hasty generalization: Platform detection of Remotion videos based on limited examples #### Tone of voice - Overall tone: Enthusiastic but technical, balancing excitement with practical concerns ### 🛡️ DARVO Analysis - Deny: No significant denial patterns observed - Attack: No attacks on critics or alternative approaches - Reverse victim/offender: No victim/offender reversal present - Emotional cues and rhetoric: Genuine enthusiasm for technical capabilities without manipulation ## 🎯 Conclusion Remotion represents a significant shift in video creation technology --- ## Full Transcript [00:00] Welcome to Syntax. Today we have Johnny [00:02] Burger on. He is the author of Remotion. [00:05] And we had Johnny on what I don't [00:07] probably probably three or four years [00:10] ago to talk about Remotion which is [00:13] programmatically creating videos with [00:15] code and so stoked to see I'm stoked to [00:19] have him on again because in Johnny's [00:22] been grinding on Remotion for for many [00:25] many years and in I don't know probably [00:27] about January or so this thing [00:31] absolutely blew up because there was a [00:34] release of a clawed skill that allowed [00:37] you to basically just instead of writing [00:40] the the the JavaScript and React code [00:42] behind it. Uh you could now simply just [00:45] prompt your way through it and it made [00:47] it a lot easier and it was probably one [00:49] of the most impressive things uh both to [00:51] us developers and it absolutely exploded [00:55] the brains of people who were not [00:56] developers seeing that you could just [00:58] type into a box and a video would come [01:01] out the other end. um which is is really [01:04] really cool. So we're excited to talk to [01:06] him about that as well as a new [01:08] Chromespec which is uh HTML in canvas [01:11] which as soon as I saw this drop I was [01:13] like this is going to be killer for [01:15] doing [01:16] >> um like basically making videos with [01:18] HTML CSS and JavaScript. So welcome [01:21] Johnny. Thanks a lot for coming on. [01:22] >> Hello. Thanks a lot for having me on for [01:25] the second time. That feels special. [01:28] >> Yeah, you're right. It's only only a [01:30] couple people have been on on more than [01:31] once. So, we're stoked to have you on. [01:34] So, do you want to give us a quick [01:35] rundown for the six people who've not [01:37] heard of Remotion, what it is and how it [01:40] works? [01:41] >> Sure. Remotion is a way to create videos [01:44] programmatically. [01:45] So, you use React to essentially code a [01:50] website, but then you kind of also have [01:52] this dimension of time and you change [01:54] the website over time and through that [01:56] you can uh render a video. And I've been [02:01] doing that since 2021. [02:04] Found a couple of people who like to use [02:06] it. And for a couple of years, we were [02:09] all coding the videos manually. And now [02:11] the latest craze is that the AI writes [02:14] the code. And um now it has become a lot [02:18] more easier. [02:20] >> Mhm. Yeah. Yeah. And it it seems like, [02:22] you know, the longevity of the project's [02:24] really great. It seems like you found a [02:27] way to monetize it without turning [02:29] people off. How did how did you uh come [02:32] up with was it Remotion Pro and the idea [02:35] of being able to actually sustain this [02:38] thing? [02:39] >> Yeah. So, um essentially the idea has [02:43] not changed since the very beginning [02:45] since 2021. [02:47] I was in the situation where I already [02:51] had a couple of open source projects [02:54] that I maintained like some indie hacker [02:57] projects and I was also working [02:58] part-time [03:00] and I really felt like taking on uh [03:04] ownership of another project could [03:06] stress me out and I kind of sense that [03:09] this one could become more popular and [03:11] then I felt like if if it becomes [03:13] successful and all I get out of it is [03:14] like issues and bug reports and stress [03:17] then I would not want that. And so I [03:20] kind of put a clause in the license [03:23] which requires like the bigger companies [03:26] um to pay for that and for everybody [03:29] else it's free and it's been going [03:32] great. We we've been able to sustain [03:35] ourselves from that. We are now a team [03:37] of three people. Yeah. uh a decision I [03:41] do not regret and that [03:43] >> I can also recommend to any other [03:45] maintainer that they think about it [03:46] before they launch their own. [03:48] >> I I think you did a good job of of doing [03:49] this without uh pissing people off. It [03:51] feels like so many monetization [03:54] strategies really either don't work or [03:56] make people angry and I think you found [03:58] a nice balance of something that works [04:00] and I I never hear anybody complaining [04:02] about the monetization of this library. [04:03] Mhm. [04:04] >> Yeah. I think I genuinely wanted to keep [04:06] like the open source spirit um but find [04:09] a way to make it sustainable and I [04:11] figured like drawing this boundary at [04:14] like four people if you are an [04:16] organization with four people from then [04:19] on you have to pay. I figured that makes [04:21] sense because then you are probably in [04:23] the situation where you are able to [04:25] afford a small um fee for that. [04:29] Especially this year has been exploding [04:31] and we can hire more people with like a [04:34] public GitHub repo. Yes. Like [04:36] incredible. I've not heard of any other [04:37] project been able to do that. [04:39] >> Yeah. [04:40] >> Um let's talk a bit more about the like [04:42] the cloud skills or the the AI skills in [04:45] order to to make that. So if you're [04:48] looking at like a npm trends, um it went [04:51] from like 125,000 installs a day in like [04:54] November, December up to almost 800,000 [04:57] installs a day, right? like it's grown [05:00] absolutely like crazy and I'm I'm [05:02] assuming most of that was was due to [05:04] like the skills release. Is that is that [05:06] fair to say? [05:07] >> Yeah. Uh I I would say so. So I guess [05:11] this pivotal moment was when we just [05:14] like like made a tweet where he said [05:16] that now you can like steal reotion [05:18] through uh agent skills. So there's like [05:21] this npx skills command line which is [05:24] kind of like a package manager for [05:25] skills and and that one blew up. Yeah. [05:29] >> And what kind of people are you seeing [05:32] um using this product now? Like the [05:34] people that are actually implementing it [05:36] in their business, right? Like I I think [05:38] everybody has like a little demo video [05:39] here and there, but I'm curious to see [05:41] like [05:42] >> what types of people or what types of [05:44] videos are people programmatically [05:46] building versus like going in like an [05:49] actual editor, right? Like cuz like I'm [05:51] thinking about this podcast and whatnot. [05:52] I probably don't want to edit this [05:54] podcast in in Remotion, but there's [05:56] there's pieces of it like maybe the [05:58] overlays and whatnot that would be a use [06:00] good use case for us. [06:02] >> Um yeah, I think the audience has [06:04] changed towards u more non-technicable [06:07] non-technical people. Um they are now [06:10] willing to to give it a try and just [06:13] giving Claude a very um broad [06:18] non-specific prompt about the video that [06:20] they would like to have. And I think [06:23] because there are just like so because [06:25] it's so accessible um many people are [06:28] now just doing that and doing um videos [06:31] like um small like product launch videos [06:33] or like explainer videos or like [06:36] graphics for for their YouTube videos. [06:39] There have also been like real [06:40] companies, big companies um building up [06:43] like design systems like reusable [06:46] graphics kind of like a motion design [06:48] system. [06:49] >> Yeah. uh with that like a couple of days [06:51] ago I saw that like OpenAI was tweeting [06:54] from the main account like an [06:57] announcement video for for Codeex. Um [07:01] that was maybe like the biggest wow for [07:04] moment for me [07:05] >> that so that was built in Remotion. [07:08] >> Yeah. Yeah. The guy was even open about [07:11] this. And and do you see a a a large [07:14] differentiator between the people who [07:15] are using this to build like apps verse [07:18] people who are using this to build [07:19] one-off video animations and things? [07:21] Because I I actually used Remotion to [07:23] build like a audio wavelength like a [07:26] what are they like a visualizer for just [07:29] audio content on YouTube. So you get [07:31] like the bars and the text and stuff on [07:33] there. And I found it to be awesome for [07:35] that specific use case. You could, you [07:37] know, design this thing. You could build [07:38] yourself a tool and have it export [07:40] video. But do you see most people using [07:42] it as a one-off make me a video kind of [07:44] deal [07:45] >> nowadays? Yes. So [07:47] >> to be honest, we've kind of like never [07:49] really found our niche and we've like [07:53] bounced around a bit. Um at first we [07:56] thought like templates, datadriven [07:58] videos, that's it. Then we kind of try [08:02] to position ourselves as like the [08:04] framework with which you can make a [08:07] video editor. So, not only can you code [08:10] a video, but you can code a video [08:11] editor. Um, having [08:13] >> Yeah, you have like a you have a whole [08:14] like video editor UI that you built, [08:16] right? And you can just buy that and [08:18] someone could if you want to go make [08:19] like your own like um what's Tik Tok's [08:22] editor called? [08:23] >> Cap cut. [08:24] >> Yeah. If you want to make your own cap [08:26] cut, you could just take this UI and [08:28] then take a lot of your underlying tech. [08:30] You could build a video editor, right? [08:31] >> Yeah, pretty much. Um, well, we figured [08:34] building this is kind of like insane and [08:36] it requires solving 1,000 problems. [08:39] >> Yeah. [08:39] >> And I would say a couple of them we like [08:43] componentized and put them into like [08:46] singular functions and yeah, that was [08:50] and and still is like a big idea of [08:52] remotion. I guess we're mostly into [08:55] video technology at all like [08:58] >> like video technology overall. This is [09:00] also like what what is most fun to me. [09:03] One prompt to video thing. I've not yet [09:06] found myself to be like super [09:08] comfortable uh in this segment, but it's [09:11] it's obviously huge. [09:13] >> That's when Claude Claude has these [09:15] amazing uh launch videos. Every time [09:17] they have like a product, they have [09:19] these Unreal animation videos that like [09:22] zoom in and out. And I was like I asked [09:24] on Twitter. I was like, "Who's building [09:25] these?" And like half of the comments [09:27] were like, "Oh, you just prompted [09:28] Remotion, bro." And and like not to [09:31] knock Remotion, but like it was it was [09:33] very good. It still needs like a a human [09:36] like like you said, like Remotion is is [09:37] a lot of like video tech and it has a [09:41] lot of like built-in animations and [09:42] examples and things like that, which is [09:44] why it makes good stuff. But I think you [09:46] still obviously need that human at at [09:48] the other end. Finally, I got a hold of [09:50] the person at Anthropic that made it and [09:52] they didn't want me to like share [09:54] anything, but they they did tell me like [09:56] their process was like partially [09:58] browser, right? A lot for getting a lot [10:00] of like the assets, but then they a lot [10:02] of that was like exported from the [10:04] browser into like After Effects um [10:07] assets, which I thought was kind of an [10:09] interesting workflow. But um like do you [10:12] think we will get to a spot or or maybe [10:14] maybe another question is like like what [10:17] is a good have you seen any good [10:19] workflows for people maybe partially [10:22] prompting partially editing or like what [10:24] does that even look like to build like a [10:26] really good video? [10:27] >> I think there's still a bit a big gap to [10:31] like a a super nice fast iterative [10:34] workflow. I mean I'm using After Effects [10:38] myself. I'm fascinated by the program [10:40] and I'm trying to [10:42] >> learn from it and like [10:44] >> going to be going to be honest I I want [10:46] to copy some of its ideas now like for [10:49] example they have like this this effect [10:52] system [10:54] >> this this effects system where you have [10:57] like um blur wiggle vignette you know [11:01] >> just like grab them from a panel and [11:03] drag them on top of a layer [11:05] >> and then you have this um controls which [11:09] you can adjust and you get instant [11:12] feedback. Um and and this does not make [11:14] sense to do aically because you have to [11:17] wait. I I think this could be the next [11:21] step and I'm actively working on this. [11:24] Um [11:25] >> cool [11:26] >> kind of like trying to figure out how [11:28] this can make sense because I do think [11:31] one other important aspect is that the [11:34] code should like remain the source of [11:36] truth. So if you like visually edits the [11:41] values in a UI how does this save back [11:44] to the code? What I've kind of figured [11:46] out so far is that, you know, like with [11:49] some black magic with JavaScript proxies [11:53] and source maps, we can kind of like [11:55] figure out where a React component is is [12:00] located in in the original code. And [12:02] then we can use some abstract syntax [12:05] tree processing to like write the props [12:08] back. But then if you like write values [12:11] back to the code, then that triggers [12:13] like a fast refresh and there's like [12:14] this 200 milliseconds latency. And what [12:16] happens [12:17] >> at the at the same time, it's not a nice [12:19] experience. So now I'm like trying to [12:21] bypass the the bundler if you write back [12:24] to the code, but then the agent [12:26] >> pain at the same time. [12:30] I'm I'm I'm thinking about this and um [12:33] you know once I figured it out [12:36] uh you know we we can also bring this [12:39] aspect to remotion. That's cool because [12:42] I agree because I was working on some [12:44] reotion the other day and my process was [12:47] >> sometimes I was jumping into the code, [12:50] sometimes I was prompting to have [12:52] changes and sometimes I was in like [12:55] Remotion Studio um selecting from the [12:59] drop down and then I ended up making my [13:00] own like crappy version of Remotion [13:03] Studio that sort of embedded like the it [13:06] embedded the Remotion player and then I [13:07] had all my like props as drop downs like [13:10] background ground and font and color, [13:13] all of those things you can you can [13:15] click and as you hover over it, it shows [13:17] you in real time. Then when you click [13:18] it, it updates the code. And I was like, [13:20] this is kind of a nightmare because [13:22] there's now three spots where you can [13:26] you want to interface with it, right? [13:27] Editing the code directly, via prompting [13:29] an agent or actually via the UI. And it [13:32] all sort of comes back to um the actual [13:35] the code uh the code where re the [13:38] remotion like timeline lives. So that's [13:41] really cool because I'm I'm really [13:42] excited to hear about that. Our editor [13:43] Randy who is like absolute vibe coder [13:47] Chad now that he's he's got like a [13:50] cursor subscription and he builds all [13:52] kinds of stuff. He's he's so good at it [13:54] and he's building all these Python [13:55] scripts um that like automate a lot of [13:58] the editing um and like import it into [14:01] Da Vinci and transcribe it and he's [14:02] building this whole app. And then like [14:04] one thing we're we're starting to think [14:06] about now is like we would love to have [14:09] like motion graphics and overlays and [14:11] and things like that programmatically [14:13] done. And in the past I've done it for [14:14] my videos with just like static PGs. And [14:18] I I built a whole web app that just [14:20] exported it as like a transparent PNG [14:23] because I was like this is way easier to [14:25] lay out in HTML and CSS and with a [14:29] little bit of JavaScript if you need it. [14:30] It's way easier to do that than to use [14:32] like Photoshop or Figma or or something [14:36] else. And that's why I love this like [14:38] the idea of doing it in video so much. [14:40] But one thing that came out couple [14:43] couple weeks ago was this um Chrome is [14:46] prototyping HTML in canvas, meaning that [14:49] you can now write parts or all of the [14:52] DOM into a canvas element. Meaning that [14:55] like you can but you can still interact [14:58] with it like it's like HTML. So your [15:00] your inputs still work, your drop downs [15:02] still work, you can still highlight [15:04] text, but because it's in a canvas [15:06] element, then you can apply shaders or [15:09] or any effects that you're used to in in [15:11] canvas, which is you want to talk a [15:14] little bit about that? I think that's [15:15] probably really exciting for you. [15:16] >> It's very exciting. Uh maybe I need to [15:20] contain the hype at at the beginning. [15:22] This is like an experimental technology [15:24] and for it to work you have to like [15:27] download Chrome Canary and enable a flag [15:31] in the settings. So you cannot like ship [15:35] this preview to as a website to a user. [15:39] Um but if if you are willing to put up [15:41] with it then you can use this to create [15:44] some really cool videos. And if we think [15:48] about is like any video editor or any [15:51] motion graphics editor, [15:53] what they do is [15:56] they essentially have like a canvas uh a [15:59] rasterized bit map and all of these um [16:03] effects are just being drawn onto the [16:05] bit map. And then if you have effects [16:07] transitions, [16:09] they just manipulate the the pixels in [16:14] many different creative ways and [16:20] that's not been possible in the on the [16:23] web so far. We we do have a canvas [16:26] element, but it is like separate from [16:29] the DOM world. So in in a DOM world you [16:33] can lay out items in in a grid in a in a [16:37] row um you know like with CSS with one [16:40] line of CSS apply all sorts of things [16:43] but you cannot apply like a progressive [16:46] blur or a vignette effect on top [16:49] >> of that content and this API makes that [16:53] possible and so it feels like day one [16:56] again because [16:58] >> that's number one constraints that we [17:00] had um is now gone and so [17:03] >> yeah we are rethinking a lot of things. [17:06] >> Yeah it's so exciting. Do you foresee [17:09] this being like paradigm shifting in in [17:12] your world because of the amount of [17:14] things you can just apply with canvas [17:17] now? Canvas unlocks so much, right? [17:20] >> Yeah, definitely. There are like a [17:22] couple I'm trying to like figure out the [17:24] exact mechanics of how does this HTML [17:26] and canvas like actually works and and [17:29] what are the limitations of it. Like for [17:31] example, one limitation that I have [17:33] found is that you you cannot like nest [17:36] it. In my prototyping, I I would have [17:39] found it like very useful if we could [17:41] like maybe like add a shine effect to [17:43] like one small element, but then add [17:46] like a blur or a vignette effect to like [17:50] the entire video. [17:51] >> Oh yeah. [17:52] >> And how HTML and canvas works is [17:56] in the DOM, you add child nodes to the [18:00] canvas. something that you would not do [18:03] before. [18:03] >> It's really weird. Like you open a [18:05] canvas tag and then put your HTML inside [18:07] of there. [18:07] >> Yeah, it feels illegal. [18:09] >> Yeah, [18:12] >> but but that's how it works. And then [18:13] you end up with like this tree and I was [18:16] like trying to figure out in the inner [18:18] canvas tag if we like apply the shader [18:20] the shader there, will it also uh does [18:24] the outer shader then compose with that? [18:27] And uh that does not seem to be the case [18:30] unfortunately. So um yeah, I'm I'm [18:33] thinking about like whether there's like [18:35] a workaround or whether I should like [18:38] open an issue in the spec and ask about [18:41] this. Um but yeah, for now it's just [18:43] like we'll throw an error. [18:44] >> And if you want to see all of the errors [18:46] in your application, you'll want to [18:48] check out Sentry at centry.io/sax. [18:53] You don't want a production application [18:54] out there that well you have no [18:56] visibility into in case something is [18:58] blowing up and you might not even know [19:00] it. So head on over to centry.io/sax. [19:03] Again, we've been using this tool for a [19:05] long time and it totally rules. All [19:07] right. [19:09] Do do you think there's any concern [19:10] about this API just not making it? [19:13] >> Um yeah, it could happen. I mean if we [19:17] need to be realistic and they could just [19:19] like scrap it. I think there's like this [19:21] whole process of like stage zero, stage [19:24] one, stage two that like any web [19:27] technology has to go through and um it's [19:30] not even at stage zero yet [19:32] >> and also like the API could change [19:33] entirely. I'm just not willing to let it [19:37] dampen my mood right now because you [19:40] know we we can pin the version if we [19:42] wanted to and we can I'm willing to um [19:45] adapt to whatever they [19:48] >> Yeah, it feels like one of the first [19:49] APIs that's been universally like this [19:52] is amazing, you know, like I haven't I [19:54] I've seen just a tremendous amount of [19:56] people being excited about this. So, you [19:59] would hope that that would influence [20:01] things. [20:02] >> I I agree. And a lot of the the people [20:04] that are working on it on Chrome have [20:05] said like, "Yeah, send us your [20:06] feedback." And like like now's the time [20:08] to it's amazing that so many people are [20:11] playing with it because they're going to [20:13] have such good feedback like the one you [20:15] can't nest them, you know, or like [20:16] another one is you can't put an frame [20:18] inside of it, which maybe makes sense [20:21] probably makes sense. There's probably a [20:22] lot of security issues there. [20:24] >> Uh but it is such a cool thing. I made [20:27] one where like I just love um like [20:30] grunge and blur on a lot of my text and [20:33] I I built some like 3D shaders that [20:36] would very efficiently add like blur and [20:39] grunge and grit and grain to your text [20:42] which is just it looks so cool and I I [20:44] can think of so many use cases for that [20:47] in my videos. Um, and maybe we should [20:49] say for for people who haven't used it [20:51] before, it doesn't necessarily have to [20:53] be in the browsers because it's it's not [20:57] like people are watching Remotion videos [21:00] in the browser. You you can, but right, [21:02] >> most people are are exporting them and [21:04] then the way that it works is that you [21:06] can [21:06] >> maybe you can tell me, but it just takes [21:08] it takes screenshots of or not [21:10] screenshot or screen captures of every [21:12] single frame and then stitches those [21:14] together. Is that how it works? [21:15] >> Um, yeah, pretty much. Um it it sounds [21:19] very simple and it is on on the surface [21:21] that we just like essentially launch [21:23] puppeteer um seek to [21:27] the right frame and and capture it and [21:30] encode it with fmp. [21:32] >> Mhm. [21:33] >> Yeah. I don't want to make it sound more [21:34] complicated um than it is to like get [21:38] this HTML and canvas thing working was [21:41] uh like very difficult though actually [21:44] because um we like wanted to compile a [21:49] version of Chrome [21:51] which was recent enough to have this [21:55] thing but also was like small enough so [21:57] that it can fit in an AWS Lambda [21:59] function and also that [22:01] >> um it has like the H.264 and H.265 [22:05] codecs enabled which by default like the [22:09] headless Chrome does not have. And this [22:11] is also very important for us to play [22:13] videos. And so for like all of the [22:16] operating systems we like compiled [22:19] Chrome like for five different platforms [22:22] and that's like a huge project. [22:24] >> Uh how long does it take to compile [22:26] Chrome? [22:28] >> Um [22:30] I would say like four to five hours. You [22:33] would like spin up like an EC2 instance [22:36] with 150 GB of RAM and hokey cores. [22:41] >> Yeah. Yeah. It's massive. And I used to [22:43] do this by hand and it would like take [22:47] me a week because [22:48] >> it would also fail. And now uh with the [22:52] agents I I can do like multiple compiles [22:56] >> um a day and parallelize them. It's [22:57] really really nice. [22:58] >> Oh, that's great. Yeah, that's one thing [23:00] I wanted to ask about as well is like [23:03] because of the way that that works is [23:06] that it takes like a screenshot of of [23:08] every frame. Um, your UI essentially [23:11] needs to be like a like a pure function, [23:13] meaning that you pass in a time code and [23:15] it will always render that exact same [23:17] frame at that exact same time. Um, and [23:20] because of that, when you want to use [23:23] animations and whatnot, does that all [23:25] need to be like the reotion way of doing [23:28] animations or can I just use regular CSS [23:31] animations as well? [23:32] >> You you can animate the CSS properties [23:35] in [23:37] in JavaScript, but you cannot have like [23:39] the the CSS native animations. These um [23:44] do not work and and they lead to [23:46] flickering. [23:47] Our model is essentially that using a [23:51] hook called use current frame you get [23:54] the current time and then it's like up [23:55] to you to like render the right image. [23:59] It's like a pure function. uh the time [24:02] is the argument and and your job is to [24:04] >> return an image and because like the CSS [24:09] animation is not [24:11] >> like tied to the time but well but well [24:14] actually you can make it but yeah it's a [24:16] bit tacky [24:18] um that does not work by default but um [24:22] it's unlocks some some really nice [24:25] things like you you can have like a huge [24:27] timeline and only need to [24:31] mount and render the content that you [24:33] really actually need at the moment. So [24:35] if you have 100 clips then you know you [24:37] know you don't have a bottleneck and you [24:40] can multi-threads the render because [24:42] like every frame is so deterministic [24:45] >> you can parallelize it as much as you [24:48] want. [24:49] >> Yeah. Like you could theoretically spin [24:51] up like let's say you had like a 100,000 [24:54] frames. Could you theoretically spin up [24:56] a 100,000 lambdas and render it all in [25:00] like one second? [25:01] >> Yeah, let me think about it. So [25:05] >> 100 [25:06] >> So 100,000 frames that's let's divide it [25:10] by uh 30. That's like 3,000 something [25:15] seconds. That's like an an hour long [25:18] video. And with like reotion lambda you [25:22] can I mean this is like a hard uh coded [25:25] limit by by us because we think too much [25:28] concurrency also doesn't make sense but [25:29] you can like spin up to 200 lambda [25:32] functions and actually split up this [25:34] >> hour of video into 200 parts and render [25:38] it pretty quickly. The longer the video [25:40] like the more x real time [25:44] >> it is because the parallelism outweighs [25:48] the the overhead. [25:49] >> Yeah. [25:50] >> So absolutely possible and our users [25:54] actually want to do that and the [25:55] problems are more with like the two [25:57] hours, 3 hours, four hours long videos [26:00] because then you run out of lambda [26:03] resources. [26:04] >> Oh yeah. And when you spin up a lambda, [26:06] does it like I I'm assuming there's some [26:09] overhead of like spinning it up and then [26:11] you're able to take you take multiple [26:13] screenshots in that one once it's warm. [26:16] Is that even a thing anymore? Do we [26:18] still say warm lambda? [26:19] >> Yeah, it does make a difference. Um I [26:22] would say you save one, two, three [26:25] seconds if a lambda is warm. Um if that [26:29] is the case, then we can also already [26:32] open the browser. Yeah, then you can [26:34] perfectly um parallelize it. In the end, [26:38] you kind of need to stitch together the [26:40] already encoded parts of a video and the [26:43] encoded audio together. Um make it [26:46] seamless so that there are no audio [26:48] artifacts. Um also like a delicate topic [26:53] that we spend a lot of time on. But [26:56] yeah, we have like some some metrics [26:58] from our users. I think like millions of [27:01] videos are rendered every month on on [27:04] these lambda functions. [27:05] >> And one thing I'm really curious about [27:07] is do you have any insight into like the [27:10] CD underworld of video slop? I like you [27:13] know like these like programmatically [27:15] made videos that YouTube is trying to [27:18] crack there. I think YouTube is calling [27:19] it loop content which is just videos [27:21] that can be programmatically made over [27:24] and over again. Do you have any insight [27:26] into that underworld? Have you talked to [27:28] anybody about that? [27:29] >> Huh? Yeah. [27:32] Interesting. I I don't have like super [27:36] secret info. [27:37] >> Okay. [27:38] >> But um you know like some some people [27:40] have been like whenever a video is being [27:43] made with remotion, we like using fmp [27:46] like embed like metadata like [27:49] >> Yeah. IFF probed a video the other day [27:51] and it says made by Remotion [27:54] >> and and some users complain that, you [27:57] know, they want to be able to remove [27:58] this because [28:00] um apparently platforms use this to [28:03] >> Oh, detect detect [28:08] >> Yeah. [28:08] >> I made a SLO video the other day um and [28:12] I removed it. I think I removed it but [28:15] or no I didn't. and Tik Tok just tanked [28:19] it immediately. And then it Instagram [28:22] did well, but I think that they were I'm [28:23] not sure if they detected the remotion [28:25] tag or they detected that it was like an [28:27] AI music kind of meme reading GitHub um [28:30] GitHub mean GitHub comments. It was [28:33] really funny by the way. You should [28:34] watch it. But uh I was curious what they [28:36] used to detect that. [28:38] >> I mean if if that is really true then I [28:40] I apologize to the world really um for [28:44] for all of this love. I was ne never [28:46] never part of the plan. Started this [28:49] when AI was not a thing and I'm I'm [28:52] trying to not uh amplify it or [28:56] >> compliment our users on it who are doing [28:58] this. [28:59] >> Oh no, that's it's not your fault, [29:00] right? Like you you build an awesome [29:02] tool and and people use it figure out [29:04] how to use it for bad as well. But I [29:06] think the platforms are doing a pretty [29:08] good job at at trying to figure out how [29:11] to detect this type of stuff. [29:13] >> I'm curious about Media Bunny. So, you [29:15] all moved over to Media Bunny in seems [29:18] like February of this year. Can I That's [29:21] a project that I've always had on my [29:22] radar, but I'm not quite sure where it [29:24] fits in in the ecosystem. Can you talk a [29:26] little bit about why you moved to Media [29:27] Bunny and like where it fits in here? [29:30] >> Yes, I I'd love to. So um traditionally [29:34] in in the browser if we are dealing with [29:37] video then we are just like interfacing [29:41] with the video tag or we want to extract [29:44] a frame from a video we mount a media [29:46] tag a video tag. We seek to the correct [29:49] time and then like capture a screenshot [29:52] but this is not frame accurate. There's [29:56] a limit. You cannot like mount too many [29:58] video tags. at some point like the [30:00] browser will just start um throttling [30:03] you and it's not efficient at all. And [30:07] there's another really interesting [30:09] technology that um is a bit more mature [30:12] than HTML and canvas that is now [30:14] available in all browsers in 2026 um [30:18] called web codeex and that allows you to [30:23] interface with video on a very low [30:28] level. So this allows you to take [30:32] encoded [30:33] H.264 chunks, H.265 265 chunks allows [30:37] you to decompress them and also to [30:40] encode them. Again, these H.264 [30:44] chunks, they are like embedded. This is [30:47] what you will find in an MP4 video. And [30:50] to read them out, you like actually need [30:52] to read the binary data of an MP4 and [30:58] extract and interpret these uh encoded [31:01] packets. And that is as it turns out a [31:04] really difficult task because MP4s have [31:08] so many different features. There are [31:11] many edge cases and that is just like [31:13] one container. There's also webm and [31:16] like six other containers if you include [31:19] the audio containers. I saw this [31:22] opportunity that we can work around [31:26] limitations of the video tag by just [31:29] fetching the MP4 via the the web fetch [31:33] API, reading the binary data, putting [31:36] this into web codex and then doing [31:37] things and then even doing things like [31:40] converting an MP4 to a web and have like [31:43] a different codec which was not possible [31:46] before. Um I mean it was possible with [31:49] like software only but this also uses [31:52] like the accelerated codecs and so sorry [31:55] only now I'm getting to media bunny when [31:58] I saw this then [32:00] >> I immediately realized that the guy [32:02] behind it was like uh much smarter at it [32:06] in in every aspect and now we talk often [32:09] and it's like [32:11] >> amazing [32:13] how brilliant he is. see like for every [32:16] topic always knows the right answer and [32:18] like immediately realized that you know [32:21] maybe I should give up on this rabbit [32:24] hole and you know just use this awesome [32:26] library instead. [32:27] >> Oh man, it takes a special kind of [32:29] person to want to have to like write a [32:32] codec. Man, I can't imagine the [32:35] >> the little bug rabbit holes you've gone [32:38] down in your days of of writing codecs [32:40] of just little I'm sure I'm sure you've [32:42] had like I've battled my fair share of [32:44] just frame drops of just using software [32:46] to record video and I can't imagine poor [32:50] people writing the codecs of finding all [32:52] these bugs. [32:53] >> Yeah, it's uh it's its own world. Like [32:56] last year I've also been to like [32:57] multimedia developer conference dem and [33:01] it's you know like every talk is just [33:04] like funny anecdotes rants about edge [33:08] cases and what can go wrong. Um really [33:11] funny. [33:12] >> Oh that's great. I once saw years ago I [33:15] saw a talk on how MP4s were encoded and [33:18] they basically said like you know [33:19] sometimes you're watching an MP4 and you [33:21] just get like a blocky green and they [33:24] this was way before this is probably 10 [33:26] years ago at Frontiers conference and [33:27] they explained how like the MP4 codec [33:30] works and and what happens when things [33:33] go wrong and they had built like an MP4 [33:36] I don't know decompiler or something in [33:38] the browser and I thought that was so [33:40] interesting to understand oh That's why [33:43] when you see green, it's it's glitching [33:46] out and it's because there's something [33:48] wrong with the the underlying data. [33:51] >> I want to ask about like motion graphics [33:53] workflow as well cuz like if if we were [33:56] to like build some sort of like like a [33:58] lower third um or or whatever like we're [34:01] this is one thing we're kind of looking [34:03] into right now is just the NFL has all [34:06] these things over top the scores when [34:08] the score changes the it will go up. All [34:10] of that stuff is just great in in the [34:13] browser, right? I it's I can think of so [34:15] many easier ways to handle it. Now we [34:18] have the um what's the retext? I did a [34:21] video on it. Why am I forgetting it? [34:23] >> Oh, the retext pretext. [34:26] >> Yeah. All the the new the new pre-text [34:28] APIs for sizing things and like the [34:30] browser is just such a good use case for [34:33] doing layout and and being able to do [34:35] animations and change text and whatever. [34:38] Um, and I'm curious, do you have you [34:40] heard of anybody and what their workflow [34:42] looks like for programmatically creating [34:45] these things? I know there's like Lahi [34:47] files. I know there's this new ograph [34:49] HTML spec. Have you looked into that [34:52] whole area of like how do we get these [34:54] motion graphics out of rendered in [34:57] Remotion and then somehow into the [34:59] editor but be able to update them? Yeah, [35:01] I guess the reotion way is that you [35:04] would like first figure out how to [35:08] build like this uh like a scaffold in [35:12] web technology using React CSS, make it [35:15] look like you want it to. Then you you [35:18] animate it. You [35:20] >> add key frames in reotion. [35:23] >> In the end, we we have a way to like [35:24] parameterize these motion graphics. Um [35:27] we simply use React props for that. [35:31] Yeah, [35:32] >> you you have a component, you give it [35:34] props, and uh I think you've also like [35:36] alluded to like these little drop downs [35:38] that we have in the studio. [35:40] >> Mhm. [35:40] >> So, we allow you to like interactively [35:43] um edit and preview them like defi like [35:46] using a sort schema kind of like create [35:48] a form where you can like try different [35:50] values and see how [35:52] >> so good it just makes so much sense in [35:53] my brain that way of doing it. And I [35:56] would say if you are good with this [35:58] workflow then that is the way to go. But [36:02] reality is and lot of users ask us this [36:05] is that they have an after effects [36:06] template and now they want to [36:07] parameterize it. This is where you have [36:10] to use lotty. Well it's it works well. [36:13] um use the regular Lotty React component [36:16] where we've kind of made our own [36:17] integration but it's like a very thin [36:19] layer on top of it and you parameterize [36:24] the the JSON essentially but that's also [36:28] one big limitation of the Lotty file [36:30] that it is just a JSON um which [36:35] describes the whole video. You do not [36:38] have the crazy cascading of CSS. You do [36:42] not have the crazy if else data fetching [36:46] >> stuff that you can do in React. [36:49] >> It's not code. It's just data which [36:52] defines [36:54] >> um a lot file. So you are limited in how [36:57] you can parameterize a Lotty file and [37:00] it's very pragmatic. You design [37:03] something in After Effects and then you [37:05] bring it over to Reotion with Lotty. [37:07] >> That's cool. And does Lahi have like [37:09] like so they wouldn't have the ability [37:11] to like say measure a name. You know, if [37:13] if my name West Boss is short, maybe you [37:15] want to increase the size of it until [37:18] the height of it gets to a certain [37:20] point. Whereas like somebody's German [37:22] last name is really long, you want to [37:24] like you maybe want to shorten it. Lahi [37:27] doesn't have that logic like that, does [37:29] it? I do think it gets pretty hairy if [37:32] you want to do that because as far as I [37:35] know the like a lotty animation has like [37:39] fixed dimensions. So if you clip outside [37:42] of it then you know you [37:45] >> you have to maybe with with code um also [37:49] detect like measure the text and also [37:51] decrease the font size which is also in [37:53] the JSON. [37:54] >> Yeah, [37:55] >> I I think that's how it works but I'm [37:57] not not a lot expert. Maybe maybe they [37:59] do have like an auto sizing feature. [38:01] This would be cool. Yeah, I think like [38:03] honestly I'm I'm talking to like Randy [38:06] our editor as well and like essentially [38:07] I think what what we want to end up with [38:09] is just like a like a website we can [38:11] visit and we have got all of our [38:12] components and you can just type in and [38:14] there's all logic in those you know if [38:15] there's if there's three people render [38:17] it this way and then you obviously just [38:20] click download it'll render it out [38:21] download it we can throw it into into Da [38:24] Vinci but like I think the dream would [38:25] be like um Da Vinci plugin or something [38:28] like that where you can type in the [38:31] different props and then click like [38:32] rerender or something and it would [38:34] replace that piece somewhere in there. [38:37] >> Yeah. Um so we do not have a plugin yet [38:39] but what you have just described before [38:42] um you can totally do it and we actually [38:44] have a demo if somebody wants to check [38:46] it out. [38:47] >> It's under reotion.dev/brand [38:50] and you will essentially end up on a [38:52] website where you can click through um [38:56] our logos like lower thirds that we use [38:59] >> in in our videos. Um you can even like [39:02] with this sort schema parameterize [39:06] um like the lower turrets that we have [39:08] and then not yet possible to render [39:11] directly on the website because this is [39:12] a static website but you can copy a CLI [39:18] command [39:19] and then you can render out that lower [39:21] third as a transparent progress video [39:24] and drag it into Dainci. So yes, we've [39:27] not yet closed the arc quite yet. You [39:32] have [39:33] >> to jump through one hoop maybe, but uh I [39:37] would say it's still pretty good [39:38] progress. [39:39] >> Cool. [39:40] >> Wow. Yeah, this is neat. Yeah. [39:42] >> Well, this has been amazing, Johnny. Now [39:45] is the part of the show where we're [39:46] going to be talking about sick picks and [39:48] shameless plugs. Sick picks for people [39:49] who don't know or things that generally [39:51] find interesting, exciting, or just [39:53] stuff that's making your life better. [39:54] Johnny, do you have a sick pick for us [39:56] today? [39:58] >> I do have one indeed and it is uh right [40:01] in my hand. Um it is the Endtech DMX USB [40:07] Pro. This is a [40:10] uh device that's not so cheap actually, [40:12] maybe like $100. [40:15] And what it allows you to do is it's an [40:17] interface that allows you to plug in [40:19] like um actual disco lights uh like this [40:24] one uh [40:27] into into your uh MacBook and then [40:31] interface with this disco lights through [40:33] the DMX protocol. Um this is like the [40:36] protocol that is actually being used for [40:40] like big concerts, big festival [40:42] productions. Um, it all runs over the [40:45] DMX protocol. I figured out uh with one [40:49] prompt. I was really surprised that it [40:51] worked that through the web serial API [40:54] we can program these lights um in the [40:57] browser [40:58] >> and then we can like we can wipe code [41:02] lights uh [41:05] >> and and it's like honestly so cool. So, [41:08] um I bought like couple of these lights. [41:11] Um made some uh vibe coded made [41:15] essentially a a vibe coded light show. [41:18] Um use freeotion to and 11 laps to like [41:22] make some karaoke videos, some lyrics, [41:26] >> composed still after effects. Um and [41:30] essentially used all of but really [41:32] really used like all of the AI tools. [41:35] >> Yeah. And um yeah, essentially um [41:39] created like a a vibe code DJ. [41:42] >> Do you have a fog machine too? [41:44] >> I do. Yeah. [41:47] >> But but this one is just like um like a [41:51] dumb fog machine. You just press a [41:52] button. [41:53] >> Okay. You need to make that smart. And [41:55] what about lasers? Have you hooked up AI [41:57] to highowered lasers yet? [41:59] >> I also um have a laser. like out of all [42:02] of the lights to be honest, this was [42:04] like the most disappointing one because [42:07] it's just like produced like um one [42:10] small dot. Um but yeah, uh this was kind [42:14] of like my rabbit hole at the beginning [42:16] of this year and then like for like for [42:18] my birthday party, I invited a couple of [42:20] friends and then like I performed the [42:22] the VIP code DJ said. [42:24] >> Yes. [42:26] W for our live shows with this. Oh yeah, [42:30] DMX. That's great. I was actually upset. [42:32] I have all these lights in my office and [42:35] they're Bluetooth and I hate it cuz [42:37] Bluetooth is the worst. And I was like, [42:39] "Oh, just hook them up to DMX." And [42:41] turns out my lights don't have a DMX [42:43] input. [42:44] >> So, I'm kind of bummed about that. I [42:46] should have got some that were DMX [42:48] compatible. Also, DMX, sick rapper. [42:52] >> Indeed. [42:53] >> Rest in peace, DMX. Yes, rest in peace. [42:56] Uh, [42:57] >> cool. Uh, shameless plugs. What would [42:59] you like to plug to our audience? Where [43:01] can we find you online? All that good [43:02] stuff. [43:03] >> H, absolutely nothing. I'm I think I'm [43:06] uh uh good with exposure recently. [43:12] I at the moment I just want my piece. [43:16] >> Yeah, people stop finding you. I'm sure [43:18] you get all kinds of Yahoos in your [43:20] inbox now that this thing is gone. It [43:22] just exploded. All right. Well, thank [43:24] you so much for tuning in. We appreciate [43:26] you coming on and uh definitely audience [43:28] check out Remotion. Build it. I'd love [43:29] to see what you build. Thanks again.  📄 **Full text:** ![[Full Document Contents/Articles/This React Library Makes Videos for You.md|This React Library Makes Videos for You by YouTube]] ## Highlights - 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 ([View Highlight](https://read.readwise.io/read/01ks07hbjr63g4pk7e0a6641nt)) - Tags: 👻 ai highlighted - 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 ([View Highlight](https://read.readwise.io/read/01ks07hbkpcs63pkyth8yterpb)) - Tags: 👻 ai highlighted - 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 ([View Highlight](https://read.readwise.io/read/01ks07hbmj0fgeqwn07cctm5w1)) - Tags: 👻 ai highlighted - 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. ([View Highlight](https://read.readwise.io/read/01ks07hbnkx24a7gyskn4vhk82)) - Tags: 👻 ai highlighted - 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. >> Yeah. >> 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 ([View Highlight](https://read.readwise.io/read/01ks07hbp7svjr3em1v3qzn725)) - Tags: 👻 ai highlighted