CinePrompt: Rendering Sinhala Story Reels Frame-Exact with Remotion
Templates as React components, 83 Sinhala font families, Gemini narration and captions that fit speech — building a Sinhala-first video studio.
Sinhala creators on YouTube Shorts and TikTok have a problem English creators don't: most video tools break Sinhala. Vowel signs like kombuwa and ispilla detach from their consonants, conjuncts fall apart, and the "nice" display fonts don't render Unicode at all. You end up typing captions in Photoshop and importing PNGs, scene by scene.
CinePrompt Studio (and its sibling, News Studio) is a premium Sinhala story studio: start from a blueprint, swap text, media, fonts and design, add Gemini narration, and render the finished video — frame-exact — with Remotion.
Why Remotion
Remotion renders video from React components. A scene is a component; time is a prop; CSS, flexbox and SVG are the layout engine. That gives me three things After Effects templates and Python MoviePy don't:
- Real typography. Text is laid out by Chrome's text shaper, which handles Sinhala correctly when the font is loaded properly.
- Templates as code. Ten premium templates live in
apps/web/src/factory/templates/premium-psychology/andpremium-health/— each with its own frame, title card, camera move, transitions, overlays, caption style and narrator. - Deterministic frames. Frame 437 always looks the same, so renders are reproducible and testable.
The fast flow
Templates only choose; everything else happens in Template Studio through four steps above the canvas:
- Script — copy the AI prompt into ChatGPT, Gemini or Claude, or generate with Gemini in-app, then paste the answer. Chat chatter, numbering and Markdown are cleaned up; Remake content turns pasted notes or an article into the template's structure.
- Photos — one click searches Wikimedia Commons (or Pexels, when connected) for every scene still showing a sample photo, three at a time, as a single undo step.
- Voice — Gemini text-to-speech preset to the template's narrator, or record each scene with the microphone. Recorded scenes use their actual audio length and the subtitles fit it.
- Export — render.
The ten premium reels are five psychology (Overthinking, Stop Procrastinating, Quiet Confidence, Phone Detox, 5-4-3-2-1 Calm) and five health (Better Sleep, Drink Water, 30-Minute Walk, Less Sugar, Screen Eyes). Each opens with a hook, gives three numbered actions and a safety line, and ends with a save/share/comment call to action.
Getting Sinhala right
A real font library. The bundled collection has 83 families in 101 files, and the picker previews every font with your actual Sinhala text. You can import more TTF/OTF files or a ZIP (up to 1,000 fonts / 200 MB); font definitions travel with the render props so Remotion's headless Chrome loads exactly what the editor showed.
Fonts load before frames. The classic bug is a render that starts before the web font is ready, so the first second is in a fallback face. Font loading is part of the composition's readiness, not a hope.
Captions that fit speech. Captions are timed to narration — Gemini audio or recorded voice — and the caption timeline shows the alignment.
Shorts & Quiz in bulk
#/shorts makes four kinds of Shorts in bulk — famous quotes, quizzes, philosophy (real teachings with a reflection question) and poems revealed line by line. Pick a topic and count, generate with Gemini or paste JSON from any chat (fences and trailing commas are cleaned up), choose a design per kind, preview each, and render the selected ones in a queue. Each item gets a matching photo from the bundled library instantly, with Find better images online and per-item Replace.
Editing that's always reversible
The inspector docks beside the canvas on desktop and becomes a drawer on phones. Every scene has Edit text (font, size, alignment, title visibility) and Media (replace, twelve photo effects, colour, crop, compare with original, apply look to all scenes). Undo/redo and saved copies make every action reversible. Microphone access is requested only when you click Record.
One image, carefully built
UI, Express API, Remotion renderer, Chrome Headless Shell and ffmpeg ship as one Docker image on node:22-bookworm-slim: workspace package.json files are copied before npm ci for layer caching, Remotion's browser is fetched and the project pre-bundled at build time, the container runs as the unprivileged node user with a /data volume, and a Node-fetch health check keeps the image free of curl. Rendering runs one video at a time on purpose. The Dockerfile is annotated in How I Ship 23 Projects.
Finished this one?
Progress is saved in this browser.
