import {MuxVideo} from '../src/components/MuxVideo';

YARX is a young and dynamic company, specializing in the development of mobile and web apps. They also provide services for cloud computing and websites.

<MuxVideo muxId="hQodJfIe701qG8AAiaLttVl8SVxo9W012fXHJPIsdVFIg" style={{ width: '100%' }} controls muted autoPlay poster="/img/yarx-image.png"/>

A personalized video created by YARX. It shows Mark Kangogo, the winner of the Jungfrau Marathon with an astonishing performance.

We are talking to founder Raphael Bollinger about how they are using Remotion to allow its clients create personalized videos of people attending sport events.

Hi Raphael! Tell us about YARX. What are you doing?

YARX is a startup founded by Andreas and me. We provide software solutions, mainly web applications, to our clients. We have special strengths in the media business. It all started with a project during our time at the university. One of our projects is for a film & photography agency that creates personalized videos for each attendee of events like ski competitions or marathons like the famous Jungfrau Marathon.

You create personalized videos for hundreds of people attending an event. It seems like a good use case for programmatic videos. What did you use before you came across Remotion?

We started to do this with FFmpeg. This was a good starting point, we were able to create the personalized clips and add some audio to them, but after a while, our client had more wishes regarding the animations of these videos. With FFmpeg, we were very limited in creating beautiful animations as a video overlay. And this was when we started looking for a tool that matches our requirements. I’m sure during that time I saw a video of Jonny Burger on Twitter where he explained what Remotion is capable of. It seemed to be a solution to the challenge we were facing, and this convinced us to give it a try.

How does YARX use Remotion in its infrastructure?

We use Remotion in an unconventional way. Because our backend is built on C#, we had to make a special implementation of Remotion within our existing architecture. When we want to render personalized videos, we start many virtual machines in the background. On these machines we have a C# program running, which calls Remotion as a render engine. This enables us to render videos at a very high speed. Once the videos are rendered, they get pushed to our backend.

After having Remotion implemented in your stack and already used for client projects. What is your conclusion? What works well and are there any challenges?

There are no complaints. We didn’t compare it with other solutions, but as far as we are concerned everything works well and as supposed. One could say there is a steep learning curve involved especially when working together with a group of people. But this could also be caused by our unconventional approach I mentioned earlier.

---

Were you successful using Remotion? Let us know your story at hi@remotion.dev!

import {MuxVideo} from '../src/components/MuxVideo';

MakeStories is in the business of Web Stories - a format by Google to bring stories to the web. Appearing directly in Google Search, they are an opportunity for publishers to increase their audience massively.

<MuxVideo muxId="eB9pPF17zyOrmEas4kwsa3OvTeQV3cDlLQ5U01CHrfcg" style={{ width: '100%' }} controls poster="/img/makestories.png"/>

MakeStories founder Pratik Ghela explains how they built a Remotion rendering service to export Web Stories to MP4s.

These stories are powered using web technology, meaning they are built using HTML and CSS. One of the most popular tools for publishers to quickly create Web Stories is MakeStories.io. We are talking to founder Pratik Ghela about how they are using Remotion to allow publishers to export their videos as real MP4 videos.

Hi Pratik! Pitch us MakeStories really quick.

MakeStories is a web based tool where you can create stories for websites. For context: Google has a product called Web Stories. These stories are on the web and not the same stories as you know from social media where you just can take pictures and upload them to your storyline. These Web Stories need to be written in HTML and CSS which is the tough part. What we did is we built a tool called MakeStories which has a drag, drop & click approach. What you can do essentially is using our simplified approach to create animations. By using MakeStories to create your own web stories you get the necessary HTML and CSS code of your story. This is used to put your story for example on Google Discover or on your own website.

How are you using Remotion for MakeStories?

We started to build a Web Story builder for social media. For that reason we were looking for a rendering engine and that was when we came across Remotion. Now a Web Story created on MakeStories is compatible with any platform - Google as well as social media.

MakeStories customers get two options to export their stories - either in AMP format to publish on Google or as MP4 to post to social media.

Why did you decide to implement the feature in Remotion?

A big challenge we had before was the rendering time. We used to work with another service but it was not a scalable solution. Even though a story has up to ten slides, the rendering process is smooth and done within one minute, which is a huge improvement for us.

Considering this is a better product than we used before, everything was perfect for us. With Remotion we were able to minimize the rendering time which was a big challenge for us prior to the implementation.

Were there any difficulties when integrating Remotion?

The integration of Remotion was straightforward. The documentation on the website was good and gave us guidance throughout the whole process. Another good thing for us was that Remotion uses TypeScript since we already used it before we were already familiar with it. This made many things easier for us. And even some minor quality issues we had before are gone now. Editors note: MakeStories consulted with Remotion on how to optimize render time and quality for their stories.

---

Were you successful using Remotion? Let us know your story at hi@remotion.dev!