Remotion Presentation in Hebrew RTL
A single-file HTML presentation in Hebrew about Remotion and Claude Code, featuring a custom design system and animations.
Problem
I wanted to explain to a Hebrew-speaking audience how to use Remotion and Claude Code to create video programmatically. Traditional presentation tools (PowerPoint/Keynote) do not support interactive animations, and full RTL web-based solutions are rare.
Approach
I built a single-file HTML presentation combining a fully RTL Hebrew slideshow, my own design system (green
Tech
About the Project
The project started as preparation for a talk on Remotion, but evolved into a serious exercise in building a design system for Hebrew websites. The idea was for each slide to be an instance of a specific visual pattern — and that is precisely what made it possible to port everything cleanly into this blog.
What’s Inside
- 10 slides with varied layouts (title, problem, solution, cards, pipeline, terminal, and more)
- A shared animated background (grid + radial glow)
- Fluid typography using
clamp()with no media queries - PowerPoint export via python-pptx
- A mobile-optimized
embed.htmlversion (without the heavy video clip)
Learnings
- A consistent design system (tokens and repeating patterns) saves enormous time even in a one-off project
- RTL in flexbox is relatively straightforward when you stick to logical properties (inset-inline, margin-inline)
- Using a MutationObserver on the active slide class is a clean pattern for visibility-triggered animations
- Exporting to PowerPoint via python-pptx is possible but requires separately documenting colors and typography
Outcomes
- The presentation was published on GitHub Pages and viewed by hundreds of people
- It serves as the foundation for the design system of this new website
- All tokens were migrated as CSS variables and are fully reusable