Introducing remotion.dev/crop! The easiest way to crop a video of all time. fast ∙ free ∙ local ∙ ad-free ∙ offline ∙ open source

Today is the day! Full WebCodecs support is now available in all major browsers, unlocking true multimedia processing in the frontend! And the best way to harness the power: Mediabunny 🐰

What’s next for Remotion? 2 huge features: • A more efficient <Video /> tag for speed gains • In-browser rendering! Limited features but good enough for many videos. This will be my main focus going forward! Goal: This year 🔐

Our next WebCodecs API: extractFrames()! With this primitive, you can efficiently extract thumbnails for displaying a preview in your editor. No <video> tag involved! Filmstrips now show in the Remotion Studio and in the Pro <Timeline> component!

Captions just like on TikTok 🚀 • New fitTextOnNLines() API in next version of Remotion • <TikTokTextBox> component with auto-rounded corners – source in comments!

Remotion Media Parser is finished! 🥳✅ Next step: Produce a big proud announcement video and run it on all channels. In the meanwhile start using it today, IYKYK!

You can now extract a 16kHz WAVE file from any video using @⁠remotion/webcodecs and on remotion.dev/convert! This is useful because this is the input format that Whisper expects. This is the first step towards a nice API for transcribing in the browser!

New Remotion template for musicians 🎵 • `bun create video --music-visualization` • Drop in your music • Customize components and CSS if you like • `bunx remotion render` Enjoy your music visualizer!

I'm now 30! Lucky to still have my energy and joy :)

You've been wondering what @wcandillon.bsky.app has been up to...

This is the structure of a .webm file. To create one, we need to put information in the beginning of the file that we only know at the end of the process. That is why videos with MediaRecorder() show no duration and why they are slow to seek when playing them back.

New API for running parseMedia() on Web Workers! Keeps the main unblocked even for large files to reduce lag. All the communication between main thread and worker is automatically handled, and it works exactly like parseMedia(). Bliss!

WebCodecs has no limits 🔫 🕶️ Just converted the full "Terminator" movie with Arnold Schwarzenegger from a sketchy .m3u8 URL to .mp4 4K, 107 minutes, 10GB file size, completely client side, it works!

Feels good to have finally done all the work to support all major video and audio formats! Only one step away from stable release: Seeking support! Let's get it 👊

@⁠remotion/media-parser now supports parsing .m3u8 files! (HLS)

Excited that @TellaHQ is boosting the development of @⁠remotion/media-parser with $10.000! They want to elevate their editor experience with WebCodecs and the Media Parser project is just what they need. We gain a great partner to battletest our parser against 💪

Remotion Docs now feature an "Ask AI" button! Use it to find the right command or API, or ask it to write you a Remotion component!

We now have a Remotion Starter that uses React Router 7! 🤩 I predict this is going to become a popular way to build apps! www.remotion.dev/templates/re...

New in Remotion: You can now programmatically set a default output name, for example to include the current date Suggested by @FernandoTheRojo!

New Remotion API: visualizeAudioWaveform()! Allows for making great looking voice visualizations – very parametrizable as well!

I don't know exactly what drama is going on here But half a million MRR with a Remotion app is wild if true!

Love that @LyonJS uses Remotion to make their conference graphics!

What I am working on currently 🤤

2024 was Remotion's first profitable year! Thank you for your trust and we'll be here for you for a long time!

New in the Remotion Store: Some copy-pasteable presets for animating captions!

Only the latest and greatest! All Remotion templates use React 19, native ESLint 9 and now also Tailwind 4.0!

Shoutout to Adobe for filing the best bug reports 😂 A minimal MP3 with custom album cover to demonstrate that we have a bug 🫠

Learn how to build a video editor with React in 30 seconds!

In January, about 28% of the conversions failed on remotion.dev/convert Making a new video converter is super hard, and I need some help making it as correct as possible. If a conversion fails, you can now let me know at https://remotion.dev/report and I will let you know when it's fixed!

Upgraded Remotion templates to ESLint 9 + Flat Config! Deleting 170 packages from node_modules 🤯

remotion.dev/convert now allows pausing conversions! And pausing + resuming is also implemented for convertMedia(), parseMedia() and downloadAndParseMedia().

Often, a video gets downloaded to then be analyzed. Introducing the new downloadAndParseMedia() API, which can do both in parallel!

You can make text animations smoother in Remotion with some CSS hacks Interesting find, goes straight into the docs! https://remotion.dev/docs/troubleshooting/subpixel-rendering

I totally forgot that PNGs can also be animated Remotion's <AnimatedImage> component supports that too! https://www.remotion.dev/docs/animatedimage

Now you can get the sample rate or number of audio channels with @⁠remotion/media-parser! Works with .mp4, .mov, .webm, .mkv, .avi, .ts, .mp3, .aac, .wav, .flac There is also a callback API, that allows you to get fields as soon as they are available, without having to wait for the full query.

The progress has been insane recently! We now understand all of these formats. In gray, the ones I plan to add! And after we speak the language of multimedia, we'll add more use cases besides conversion. At this rate of progress, the game will be completely different at the end of 2025!

H.265 is supported now on https://remotion.dev/convert and in convertMedia()!

@remotion/media-parser now reads .aac, .flac and .wav files! Yes, that's THREE new parsers I wrote last weekend. All the usual features: Streaming, reading only as many bytes as needed for your query, compatible with WebCodecs, ID3 extraction, GUI available on remotion.dev/convert!

We hired Igor Samokhovets for accelerating Remotion's pursuit to make building a video editor easier! As the founder of a quality Remotion product (https://banger.show), he knows exactly how to proceed. First mission: Bring a copy-pasteable <Timeline> component to market!

Remotion <AbsoluteFill> with Tailwind class names now works as expected Since `style` overrides `className`, this led to weird behavior, confusing everyone including myself

Sent https://remotion.dev/resize to a designer friend who needed to downsize a video and it worked very impressively!¹ WebCodecs slowly winning, one user at a time.

@⁠remotion/media-parser now supports parsing MP3 files! → Memory-efficient streaming → `AudioDecoder` compatible → ID3 Tags → Cover images! → Convert to .wav with @⁠remotion/webcodecs → On remotion.dev/convert: Cool progress animation 😎

To evolve the Remotion design language, I'm prototyping a button using my own 3D SVG engine. The content can be an arbitrary DOM node!

Venu de Suisse pour nous parler, nous sommes très fier d'accueillir @jonny.io pour qu'il nous explique en anglais "Comment construire un éditeur de vidéo en React ?" Il se trouve que cette vidéo a été générée grâce aux nombreux outils qu'il partage !

remotion.dev/convert now shows filename, conversion progress and thumbnail in the tab!

Remotion now supports animated WebP and AVIF images through the new <AnimatedImage> API! Also GIF, but we supported that before 😊 Only downside: It uses the `ImageDecoder` Web API, so unfortunately it only works on Chrome and Firefox for now.

We made a shortcut for setting up Webhooks for Remotion Lambda in Next.js! Inspired by @polar_sh

2024 😊 Turned Remotion breakeven Said no to half a million on Shark Tank Visited 10 countries 🇬🇷🇺🇸🇮🇳🇱🇰🇮🇹🇻🇦🇫🇷🇩🇪🇦🇹🇩🇰 Ran 1000km Interviewed a billionaire Worked as a bartender Built the fastest video converter on the web Lost 4kg Deeper friendships and many new friends 🫂

This is the state of @remotion/webcodecs at the end of 2024! In pole position to change the game in 2025 🥊

Video resizing using WebCodecs! You can now downscale a video to a lower resolution in the browser, in multiple formats, offline, local, fast. Demo: remotion.dev/resize Docs: remotion.dev/docs/webcodecs/resize-a-video Thanks for following my WebCodecs shenanigans this year! 🎄