Skip to main content

Creating product videos in minutes with Typeframes

· 6 min read

Typeframes is a tool that helps you create stunning product intro videos for your SaaS product by converting text to video. It simplifies the process, allowing you to plug in your content, choose from a wide variety of effects, and export your video in the desired format.

Typeframes aimes to make video editing for product videos as easy as possible.

Hi Tibo, could you share a bit about your background and experience with us?

I have been involved in startups for quite some time. I participated in numerous projects that have significantly contributed to my learning and growth. Three years ago, I got into indie hacking again, aspiring to apply and enhance my accumulated experiences. I became active on X (formerly Twitter), taking on the “build in public” challenge. This involved creating a new product every week, resulting in the creation of ten products in just four months. But it was the eleventh creation, called Tweet Hunter, that gained immediate traction. Initially, it served as a source of inspiration for crafting tweets, but it has transformed into a comprehensive suite of products designed for X. Its success was undeniable, and it led to the development of Taplio, a sister product tailored for LinkedIn users. Tweet Hunter and Taplio eventually caught the attention of lempire, leading to their acquisition.

More recently, I took the initiative to acquire Typeframes myself, a platform I believe holds immense potential. I was surprised to find it was available for sale, and I am now dedicating my efforts to developing its capabilities further, aiming to establish Typeframes as the premier solution for product videos.

What insights led you to believe that Typeframes was a product in demand before you decided to acquire it?

Having created numerous product videos myself, I’m well aware of the challenges and the amount of time such videos need. When I stumbled upon Typeframes for the first time, I was amazed how it speeds up the video creation process. Since I’m involved in other products as well, Typeframes is the perfect tool for me because it is an addition to the stack of tools I use to go faster with shipping content to promote new products and features.

I basically applied the same principle as I did for Tweet Hunter and Taplio: If it's making my life easier, it’s probably going to do the same for others. In the end, I just made a bet, and I’m pleased it’s working out so far.

After the acquisition, Typeframes seemed to experience quite some growth. Can you share some insights into the adjustments you’ve made to the product?

I’m all about making small, incremental changes that really add up over time. One of the first things we did was roll out a free plan. Now, videos made with this plan have watermarks, but the cool part is that it’s gotten more people trying out and talking about Typeframes, which has really helped spread the word.

On top of that, I’ve been building the product in public. I’m constantly sharing updates and chatting with users. Sure, it might give some of our ideas away and lead to a few copycats here and there, but I firmly believe in the power of building in public. I think the benefits and the community it builds far outweigh any downsides.

How does Typeframes use Remotion in its infrastructure?

Remotion is pretty much the magic behind the curtain for us. I can't imagine Typeframes without it in our tech stack.

We use the Remotion Player to give our users a real-time preview of how their videos are shaping up. They can tweak and play around with the animations and see the changes on the fly. And when it comes to actually rendering the videos, that’s where Remotion Lambda comes in. It handles all the heavy lifting without us needing to manage any servers. This means we don’t have to worry about the scalability of our video rendering.

Remotion’s business model is also very encouraging to indie hackers. I’ve got only one person helping me, and we’re keeping things pretty simple. This means it’s not mandatory for us to purchase a Remotion license. However, it’s obvious for us to support Remotion by purchasing a license anyway because it’s providing such value to Typeframes.

You have a massive following on X and LinkedIn but barely one on GitHub. How do you split your time between marketing and coding?

It’s a sharp observation. Even though I’m an indie hacker and build my products in public, I don’t share my code by default. I assume I will never have a huge following on GitHub.

About a quarter of my time goes into marketing on platforms like X, LinkedIn, and Google, while the rest of the time, I’m dedicated to coding and developing the products.

To some degree, I even mix up those two. I try to develop for marketing. What this means is that when I code, I try to think about how to enable product-led growth. Take the free plan using the watermark I mentioned earlier. Another example would be programmatic SEO and building programmatic pages that may rank on Google. Those things fuel the marketing, and that’s how you grow if you ask me.

Can you give us a sneak peek into what’s in store for Typeframes?

It’s always tricky to answer this one. I can tell what’s coming up in the next few weeks or months, but beyond that, it’s really going to depend on how the users react to the new changes we’re rolling out.

We've got some exciting developments ahead for Typeframes, and one of the highlights is definitely our upcoming animation library. Picture it as something similar to Canva's image templates, but we're bringing it to life for videos. We look forward to seeing how our users will use Typeframes’ animation library.

Editor's note: You can follow Tibo (Thibault Louis-Lucas) on X and LinkedIn, where he shares his indie hacker journey and Typeframes’ development.

Generating conference assets with Remotion

· 4 min read

Shortvid.io is an open-source project that exposes a set of Remotion customizable compositions for event communication assets.


Shortvid.io logo

Antoine Caron and Mickael Alves have developed an event communication tool called Shortvid.

Hi! Tell us about Shortvid.io. How did this project start, and why?

Shortvid was initiated by Mickael Alves and Antoine Caron. The project began as a solution to create announcement videos for our LyonJS meetup events. Since we had prior experience contributing to Remotion, Shortvid's foundation, leveraging our knowledge of this technology made sense.

The primary goal was to simplify and streamline the process of video creation, making it accessible and user-friendly. By offering it for free and providing ready-made templates, we aimed to empower individuals and organizations looking to promote their events, such as meetups, conferences, and associations.

And somehow, it became bigger than what you thought at first?

Shortvid's growth has indeed exceeded our initial expectations. What began as a solution to address a specific need for creating event announcement videos for LyonJS meetups evolved into a versatile, community-driven platform.

The positive reception and enthusiastic support from associations and event organizers further emphasized Shortvid's value. Our project resonated with those seeking efficient video creation solutions for their events, and its adoption continued to soar.

Collaborations with prominent French conferences, such as Touraine Tech and Devfest Nantes, played a pivotal role in elevating Shortvid's status. These partnerships expanded its user base and led to the development of new templates to meet the diverse needs of event organizers.

What is Devfest Nantes conference?

Devfest Nantes is a renowned annual developer conference held in Nantes, France organized by GDG Nantes team. It serves as a platform for technology enthusiasts, developers, and industry professionals to come together, exchange knowledge, and explore the latest trends in software development and technology.

The conference typically features a wide range of technical talks, workshops, and sessions covering various aspects of software development, including web and mobile development, cloud computing, artificial intelligence, and more.

With Shortvid, we contributed to the conference's success by creating and distributing videos that played a crucial role in promoting the event and enhancing the overall experience for attendees.

Pictures of Devfest Nantes

How did the GDG Nantes team use Shortvid.io?

By leveraging Shortvid's free templates and customizable options, the GDG Nantes team was able to tailor video content to suit their specific needs. They could quickly generate videos that showcased event details, speaker information, and key highlights.

They even used the generated videos for the TV screens all over the place in the Cité des Congrès to indicate to attendees the upcoming sessions and where the conference rooms were located.

Picture of GDG Nantes team

What are the next steps for Shortvid.io?

Shortvid is dedicated to enhancing its offering by continually adding more templates. This expansion will give users even more options to create compelling videos for their events. We aim to collaborate with tech events that share our vision and could benefit from our services. The platform will continue to support and empower these events through its user-friendly approach. The project is open source and is always open to contributions and suggestions for improvement !

Mickael is actively working on integrating the Zod scheme, which will further enhance the capabilities of Shortvid, allowing users to create even more dynamic and captivating videos.

Antoine is working on deploying the Remotion playground directly under the Shortvid.io website. This integration will offer users a seamless experience for video creation.

Shortvid's partnership with Devfest Nantes is set to grow in the coming year, promising exciting collaborations and opportunities for both the project and the conference.

Last but not least, we will try to motivate Jonny to pass by France to share with us about Remotion 🥳

Personalized marathon finisher videos with Remotion

· 3 min read

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.

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!

How MakeStories uses Remotion to render Web Stories

· 3 min read
note

This is the first article in our new series: Success Stories. We interview companies and creators that we find inspiring and which have successfully implemented Remotion in their stack. Let us know what you think!

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.

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.

Screenshot of MakeStories' export feature

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!