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 🔐

And of course, we put in a lot of effort to make it easy for you, the developer!

📒 www.remotion.dev/docs/webcode...

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!

remotion/packages/example/src/Title/FitTextOnNLines.tsx at af09e07031bfecc1a1f222fc49f30c09f95a095f · remotion-dev/remotion 🎥 Make videos programmatically with React. Contribute to remotion-dev/remotion development by creating an account on GitHub.

Source code of example: github.com/remotion-dev...

<TikTokTextBox>: github.com/remotion-dev...
Credits: TechSquidTV & Josiah Winslow

fitTextOnNLines() API - available from v4.0.313: remotion.dev/docs/layout-...

Uses a binary search text measuring algorithm implemented by HiteshChoudhary0098!

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!

convertAudioData() | Remotion | Make videos programmatically Part of the @remotion/webcodecs package.

We also released an even lower-level API which directly resamples the WebCodecs `AudioData` objects: www.remotion.dev/docs/webcode...

Resample audio to 16kHz | Remotion | Make videos programmatically For using Whisper, Whisper.cpp, @remotion/install-whisper-cpp and Whisper.wasm, you need to provide a 16-bit, 16KHz, WAVE audio file.

How to use it:
www.remotion.dev/docs/webcode...

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...

Fixing a MediaRecorder video | Remotion | Make videos programmatically When recording a video with the MediaRecorder and getUserMedia() API, a WebM file gets created that may have some playback and compatibility issues.

If you are taking videos with MediaRecorder(), then you should re-mux them to fix these issues.

convertMedia() from Remotion allows you to do that, either in the browser, in Node.js or in Bun! www.remotion.dev/docs/webcode...

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!

Animated captions Get Pro components for Remotion and obtain licenses for companies.

New in the Remotion Store:

Some copy-pasteable presets for animating captions!