OSS-AI Generated Videos with Remotion

Blogs

March 27, 2026

Tl;DR

From code to video with Remotion.

(Not just animations)

Intro

A video is just a function of images over time.

Some time ago I got to know about remotion:

But lately, I have been doing a come back to mechanisms.

Matplotlib impressed me last year, but being able to use ThreeJS to create even nicer augmented reality simulators is fantastic.

Also, for D&A we have D3js to bring cool data driven graphs alive

We also have blender for the renders…

But what if you just want a pure video?

Does it need to be that complex?

React can describe UI’s that change overtime.

We already saw how to create presentations and CV’s with React…

…even invoices with React!

So… WHY NOT using React to create videos?

The Remotion Project

Remotion is a framework for creating videos programmatically using React.

Because you know, video is one of th emany things that you can make as a code.

https://github.com/remotion-dev/remotion

🎥 Make videos programmatically with React

If we can use web tech to make presentations or CVs…

How come the same tech would not be able to make mp4 videos.

Wonder what has happened to get that spike in stars?

How to Setup Remotion Project

I have been wondering around RemotionJS for some posts already:

But so far, what it worked best for me to create animations was Matplotlib.

Which kind?

#git clone /DataInMotion
#uv run animate_sequential_compare_price_evolution_flex_custom.py MC.PA RMS.PA 2010-01-01 10 short

How about actually getting started with RemotionJS?

npm init video

There are Examples:

https://github.com/wcandillon/remotion-fireship
- https://www.youtube.com/watch?v=deg8bOoziaE&t=58s

RemotionJS x Claude Code

But Im not going to use pre-made examples.

Neither to care about reading the docs: https://www.remotion.dev/docs/ai/claude-code

Im going to use CC for this, as im paying the PRO sub right now.

Just that this old repo that I tried in Q42024…

git clone https://github.com/JAlcocerT/VideoEditingRemotion
cd remotion-cc

Is going to have a new friend.

Claude skills…its just about SKILL.md and the remotion team has put one together at claude-code-remotion

npx create-video@latest
npx skills add remotion-dev/skills
#npx skills list

The magic happens at .claude/skills/remotion-best-practices

The remotion App: will help you make edits via UI if you’d want to.

#npx create-video@latest .
npm i
npm run dev

Go to localhost:3000

When you are done with it…you render it

time npx remotion render GoldPrice gold-price.mp4 #just 20seconds

Going from this skeleton video, to something way more pro:

YFinance x RemotionJS

How about…

DataInMotion | Repo

#git clone https://github.com/JAlcocerT/DataInMotion.git
#cd DataInMotion && branch libreportfolio
uv run tests/plot_historical_gweiss.py mc.pa --start 2000-01-01 --brand "@LibrePortfolio" --warmup-days 400

After this one, you learn about compositions:

#npx remotion compositions
uv init
uv add yfinance
#python scripts/fetch_ticker.py --ticker BTC-USD --name btc --start 2015-01-01                                                                                                                                                        
uv run scripts/fetch_ticker.py --ticker BTC-USD --name btc --start 2015-01-01

python scripts/generate_ts_data.py --name btc                                                                                                                                                                                               
# → creates src/btcData.ts with BTC_ANNUAL, KEY_EVENTS, COMMENTARY      
# → then create src/BtcComposition.tsx (copy GoldComposition, swap imports + props)                                           
# → add <Series.Sequence> in MarketRecapComposition.tsx                
# Render only bitcoin (once added)
npx remotion render Bitcoin bitcoin.mp4

# Render the full sequential reel
npx remotion render MarketRecap market-recap.mp4

And then…you just bring whatever matplotlib logic you had for the magic to happen:

npx remotion render AdpGweiss adp_gweiss.mp4 
                                                                      
# Add another ticker (e.g. Coca-Cola)                     
#python3 scripts/compute_gweiss.py --ticker KO --name ko --start 1990-01-01

Oh, Yep, its happenning.

flowchart LR
    %% Styles
    classDef state fill:#E3F2FD,stroke:#1565C0,stroke-width:2px,color:#0D47A1;
    classDef start fill:#43A047,stroke:#1B5E20,stroke-width:2px,color:white;

    %% Nodes
    Start((Start)):::start --> More
    More(Doing MORE):::state
    Better(Doing BETTER):::state
    Newer(Doing NEWER):::state

    %% Internal Feedback Loops (The Grind)
    More -- "Scale Up" --> More
    Better -- "Refine" --> Better
    Newer -- "Test" --> Newer

    %% The Progression Journey
    More -- "Capacity Hit" --> Better
    Better -- "Optimized" --> Newer
    
    %% The Upward Spiral
    Newer -- "New Baseline" --> More

Also that.

My videos are not so horrible.

But I mean…

npx remotion render SoftwareDrawdown software-drawdown.mp4

how could you think that making this kind of ~~video as a ~~code so cheap had no deflationary consecuencies?

PS: price is not current earnings, but current + estimated discounted cash flows

Will the future hold so stable?

#npx remotion render DividendRace renders/dividend-race.mp4 
#make help
make render-dividend-race

The big insight: entry price matters as much as dividend growth

O and TROW were cheap in 2000 and bought many more shares, which amplified every subsequent dividend raise :)

F1 Data x RemotionJS

By any chance can this videos/shorts get more traction?

Py EDA F1 ↗

Like…2026 cars are clipping so hard.

A Summary of Animations

Post with animated F1, Real Estate, yfinance…

F1 Animated Data

Creating animations around F1 Data | Post

Why are my F1 shorts not getting the hate they deserve?

Lets have a look whats going on at Suzuka:

#git clone https://github.com/JAlcocerT/eda-f1
#cd eda-f1
uv run f1_q3_short.py #Interactive Q3 animation video (15s Short)

I could not resist to add a remotion folder to this project:

cd remotion-f1

Mechanisms x RemotionJS

Having the Python + CadQuery + Blender way is amazing.

But maybe…

3Design | Repo MBSD | Repo

is there a better way to just create videos about mechanisms?

git clone https://github.com/JAlcocerT/mbsd
cd mbsd/

Remotion has integration with https://www.remotion.dev/docs/videos/as-threejs-texture

Which I have been convering recently

And…

React Three Fiber ~ Three JS?

You can also add: https://www.remotion.dev/docs/captions/displaying

And add video sequences: https://www.remotion.dev/docs/videos/

Websites to…RemotionJS?

We said that remotionJS uses react.

Does that mean that if your website already uses React then Claude Code has a much easier job to undertand your branding?

This is resonating a lot for me to promote all those realestate., webaudit. etc etc etc services :)

You can make quick promo videos or showcase of the web/apps you ~~create~~ vibe code:

#git clone slider-crank

Conclusions

Now you have three options: all as a code.

Keep matplotlib with cool custom logic
Go the python - blender route
NEW: Use…remotion to create videos as a code!

Now clear yet on the how to?

You dont have to run to make your dream project.

flowchart LR
    %% --- Styles ---
    classDef free fill:#E8F5E9,stroke:#2E7D32,stroke-width:2px,color:#1B5E20;
    classDef low fill:#FFF9C4,stroke:#FBC02D,stroke-width:2px,color:#F57F17;
    classDef mid fill:#FFE0B2,stroke:#F57C00,stroke-width:2px,color:#E65100;
    classDef high fill:#FFCDD2,stroke:#C62828,stroke-width:2px,color:#B71C1C;

    %% --- Nodes ---
    L1("Free Content
(Blog/YT $0)"):::free
    L2("DIY
(Templates / Platform) $"):::low
    L3("Done With You
(Consulting) $$"):::mid
    L4("Done For You
(Services) $$$"):::high

    %% --- Connections ---
    L1 --> L2
    L2 --> L3
    L3 --> L4

You can get it done: