• Stars
    star
    150
  • Rank 247,323 (Top 5 %)
  • Language
    TypeScript
  • Created about 3 years ago
  • Updated 5 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A template for making podcast video clips with Remotion.

Remotion Audiogram Template

This template is for creating "audiograms". In other words, video clips from podcast episodes, or any other audio. It's a popular way of sharing audio snippets on social media.

Example video

Start changing things like this:

  • Adjust size and length in src/Video.tsx
  • Replacing audio, cover and subtitles in the src/assets folder
  • Tweak src/Composition.tsx

How do I render my video?

Run this:

npm run build

Or check out the Remotion docs. There are lots of ways to render.

Where to get a transcript (SRT file)?

There are a few places:

  • Your podcasting host might provide them for you.
  • Descript makes transcription really easy.
  • There are tons of other, paid solutions, like Otter.ai and Scriptme.io.
  • And open-source solutions available, like Subs AI

For the purposes of this repo, make sure to export subtitles that are segmented by word (rather than sentence).

Commands

Install Dependencies

npm install

Start Preview

npm start

Render video

npm run build

Upgrade Remotion

npm run upgrade

Docs

Get started with Remotion by reading the fundamentals page.

Help

We provide help on our Discord server.

Issues

Found an issue with Remotion? File an issue here.

License

Note that for some entities a company license is needed. Read the terms here.

More Repositories

1

remotion

πŸŽ₯ Make videos programmatically with React
TypeScript
20,552
star
2

github-unwrapped-2022

Your coding year in review #GitHubUnwrapped
TypeScript
1,316
star
3

trailer

The promo video for Remotion
TypeScript
1,033
star
4

github-unwrapped-2023

Your coding year in review
TypeScript
856
star
5

template-code-hike

Beautiful code snippet animations
TypeScript
161
star
6

template-tiktok

Generate TikTok-style captions with Whisper.cpp
TypeScript
71
star
7

template-three

βš›οΈ πŸŽ₯ 3️⃣ A minimal boilerplate for Remotion + React Three Fiber
TypeScript
69
star
8

template-next-app-dir

Next.js template for programmatic video apps
TypeScript
68
star
9

github-unwrapped-2021

The source code for #GitHubUnwrapped 2021
TypeScript
47
star
10

template-next-pages-dir

Next.js template for programmatic video apps
TypeScript
32
star
11

template-still

Create still images with Remotion
TypeScript
30
star
12

typewriter

A basic Typewriter effect.
TypeScript
29
star
13

template-helloworld

Starting point for a new Remotion project. Run `npm init video` to get this template!
TypeScript
29
star
14

brand

Logo and brand elements of Remotion, created in Remotion.
TypeScript
23
star
15

trailer-2-0

TypeScript
21
star
16

mapbox-example

Remotion Mapbox example
TypeScript
21
star
17

react-native-demo

TypeScript
20
star
18

template-skia

A Remotion starter template with React Native Skia included
TypeScript
17
star
19

template-remix

A Remotion SaaS template with Remix + Remotion Lambda
TypeScript
14
star
20

template-tailwind

Remotion starter template with Tailwind installed
TypeScript
14
star
21

apple-wow-tutorial

Recreate an Apple animation in Remotion!
TypeScript
14
star
22

gl-transitions

TypeScript
13
star
23

template-helloworld-javascript

Starting point for a new Remotion project in plain JS. The Hello World template, but in plain JavaScript. Recommended for people who detest TypeScript.
JavaScript
12
star
24

transitions-video

Promo video for @remotion/transitions
TypeScript
12
star
25

4-0-trailer

The intro for the Remotion 4.0 keynote and some overlays for it
TypeScript
11
star
26

motion-blur-example

Example of Motion Blur
TypeScript
10
star
27

anime-example

Example of using Anime.JS in Remotion
TypeScript
10
star
28

text-warping

Demo of the capabilities of the new warpPath() API!
TypeScript
10
star
29

morph-text

Morph Text in Remotion
TypeScript
9
star
30

d3-example

An example for D3.JS in Remotion
TypeScript
9
star
31

shorts-customizer

TypeScript
9
star
32

trailer-lambda

TypeScript
9
star
33

tone-js-example

A small song with Remotion + Tune.JS
TypeScript
7
star
34

3d-text

TypeScript
6
star
35

animated-emoji

Assets for the Remotion `<AnimatedEmoji>` component
TypeScript
6
star
36

three-particles

Remotion adaptation of https://github.com/winkerVSbecks/3d-particle-effects-demo as reqeusted in Discord
TypeScript
6
star
37

video-with-jump-cuts

Use a video and cut out portions of it without re-mounting the video inbetween.
TypeScript
6
star
38

template-overlay

A template for making overlays for use in traditional video editing programs
TypeScript
6
star
39

css-animation-play-state

Controlling CSS animations from Remotion
TypeScript
6
star
40

template-next-app-dir-tailwind

Official Remotion+NextJS+TailwindCSS template
TypeScript
6
star
41

chrome-build-instructions

Python
5
star
42

library-starter

Starter template for creating your own Remotion library
TypeScript
5
star
43

rust-ffmpeg-splitter

FFmpeg as a binary and with Rust bindings
C
4
star
44

remotion-three-gltf-example

Demo using useGLTF
TypeScript
4
star
45

timing-functions

Source code for the video about timing functions
TypeScript
4
star
46

lambda-binaries

Binaries for Remotion Lambda
Shell
3
star
47

the-dashboard

Our and @ForOneRed's office dashboard
TypeScript
3
star
48

spring-editor

TypeScript
3
star
49

p5-poc

P5.js proof of concept
TypeScript
2
star
50

glb-example

Animate a .glb model in React Three Fiber
TypeScript
2
star
51

lambda_go_sdk

Go library for invoking Remotion Lambda
Go
2
star
52

light-leak-example

TypeScript
2
star
53

video-buffering-example

Pause the video if content is buffering, and resume once it has finished loading
TypeScript
1
star
54

lambda-php-sdk

PHP library for invoking Remotion Lambda
PHP
1
star
55

dvd-logo

Extremely simple DVD Logo implementation
TypeScript
1
star