Blog
Guides to building product demo videos in React with Remotion — one technique per post, each with the component that does it.
How to make a demo video for an API or developer tool
An API has no screen to record. Show the request and the result instead — a terminal, the call, the output, one number — built in React with Remotion so it stays sharp and editable.
App Store and Google Play preview videos, made in code
Build App Store app previews and Google Play preview videos in React with Remotion — Apple's exact specs, what Apple allows on screen, what Google Play requires, and one composition that renders both.
What we learned shipping llms.txt for a component registry
Coding agents install components from a registry by guessing names. Ours guessed wrong 208 times in thirty days. What we changed in llms.txt, the .md URLs and the registry 404 so agents stop inventing components.
Product tour and onboarding videos in React
Make product tour and onboarding videos in React with Remotion — one short captioned clip per feature, a screen recording with a camera and a cursor, and every variant rendered from props.
A 3D card carousel in Remotion
Build a 3D card carousel in Remotion — a ring of cards in CSS perspective, turned by a flick that decelerates instead of a timer — and when to use a tilted card rail instead.
AI chat and prompt animations in Remotion
How to animate an AI product in Remotion — a prompt typed and sent, an answer streaming in, a highlight on the line that matters, an agent working through steps. A streaming-text effect from scratch, then six ready-made components.
How to animate a team chat in Remotion
Animate a Slack- or Discord-style chat in Remotion — messages that land on set frames, typing dots that hold a line, and a transcript that scrolls once per arrival — then a drop-in component that does it.
How to animate a number counting up in Remotion
Animate a number counting up in Remotion — interpolate and round, format with Intl.NumberFormat, stop the width jitter with tabular numbers, and count huge ranges on a log scale — plus drop-in follower and count scenes.
Glitch effect in Remotion
Build a glitch effect in Remotion from scratch — an RGB split with blended colour layers, horizontal slice displacement with clip-path, deterministic jitter with random(), and bursts on the frames you choose.
The Ken Burns effect in Remotion
Make a Ken Burns slow zoom and pan on a photo or screenshot in Remotion — the one rule that stops the image edge showing, why to pan with transform-origin, and why to judge it from a render, not the Player.
Kinetic typography in Remotion
Kinetic typography in Remotion — why it is built from cuts rather than tweens, how to set hierarchy and rhythm on a frame clock, a punchy word-scale cut in code, and ready-made components.
Logo animations and stings in Remotion
Build a logo animation in Remotion — what makes a sting land (length, a sound on the hit, an end on a hold), a from-scratch mark-and-wordmark reveal, and six ready-made logo stings.
MCP servers for Remotion, explained
Remotion's own documentation MCP is deprecated in favour of a skill. What an MCP server still adds to a Remotion project, and how to set up snapcn's — search, real props, video plans and rendered frames inside Claude Code, Cursor or Codex.
Typewriter effect in Remotion
Build a typewriter effect in Remotion — text revealed from the frame number with slice(), a caret that holds solid while typing and blinks when idle, and an eased typing rate that reads as a person rather than a machine.
Remotion vs Framer Motion
Framer Motion, now called Motion, animates your app's UI in real time. Remotion renders React to a video file, frame by frame. They solve different problems, and Motion's animations do not render inside Remotion. Here is why, and how to use both.
Remotion vs Motion Canvas
Remotion renders React components frame by frame; Motion Canvas animates a canvas with TypeScript generators. How they differ in authoring, rendering and licensing, and which one fits a product video.
How to make a SaaS demo video without After Effects
No motion designer, no After Effects. Write the script, split it into beats, pick a prebuilt scene per beat, set its props and render — in React, or in the browser with no install.
Why AI writes bad Remotion code, and how to fix it
Claude Code, Cursor and Codex write Remotion that compiles and still looks wrong — flicker, runaway values, bouncing type, stacked crossfades. The seven mistakes, why an agent makes each one, and the fix.
The best Remotion component libraries in 2026
Every Remotion component library worth knowing in 2026 — Remotion Elements, remocn, RemotionUI, snapcn and React Video Editor — what each is for, how it installs and what it costs.
How to make a changelog video in React
Turn every release into a changelog video with Remotion — one React composition, the release notes passed in as props, rendered from the CLI or CI with a single command.
Making videos with Claude Code and Remotion
Claude Code can write a whole Remotion video from a brief. Give it Remotion's agent skills, a component library to compose instead of improvised motion, and a prompt with real copy — here is the setup and what agents still get wrong.
How to make a GitHub README demo GIF with Remotion
Render a crisp, looping demo GIF for your GitHub README with Remotion — the exact CLI flags, how to stay under GitHub's 10MB limit, and when an MP4 is the better choice.
How to make videos with React, programmatically
Remotion turns React components into MP4s. How it works, a minimal composition, rendering one template with many sets of props from the CLI or Node, and when code is the right way to make a video.
How to make a product demo video in React
Build a product demo video in React with Remotion — the five-beat structure that works, a screen recording with a camera and a cursor, and a rendered MP4, all in code.
How to make a Product Hunt launch video in code
Build your Product Hunt launch video in React with Remotion — a 30–60 second structure that works, a 16:9 master plus a square cut for X and LinkedIn, and which component carries each beat.
Animated backgrounds in Remotion
Build animated backgrounds in Remotion — a drifting gradient, a moving grid and floating particles — that loop seamlessly and render deterministically, then put your scene on top.
Animated cursor and click effects in Remotion
Animate a mouse cursor that moves between waypoints and clicks in Remotion — interpolating x and y from the frame, an eased path, a click ring — then a drop-in cursor that walks over any UI or screen recording.
How to add an iPhone mockup to a Remotion video
Put a screenshot or screen recording inside an iPhone or MacBook frame in Remotion — a from-scratch CSS device around OffthreadVideo, then drop-in components with a dynamic island, a 3D tilt and a camera move.
Terminal and code-typing animation in Remotion
Animate a terminal typing a command and printing output in Remotion — typing from the frame number with slice(), a blinking caret, output that arrives in bursts — then a finished terminal component.
How to animate text in Remotion
Animate text in Remotion with useCurrentFrame(), interpolate() and spring() — a word-by-word reveal from scratch, the three bugs that make scaled type look cheap, and ready-made components.
TikTok-style captions in Remotion
Burn TikTok-style, word-by-word captions into a Remotion video — the @remotion/captions building blocks, a from-scratch page renderer, and drop-in components that take your Whisper or SRT transcript as-is.
Remotion vs After Effects for launch videos
Remotion makes videos from React code; After Effects is a timeline you drag. For a developer's launch or demo video, here is when each one wins, and why most developers should not open After Effects.
How to install Remotion components with the shadcn CLI
The shadcn CLI installs Remotion components as source into your video project. Remotion is not a framework shadcn recognises, so it takes three small config steps first — here they are, and the errors you hit without them.
snapcn vs remocn: which Remotion component library?
snapcn and remocn both install Remotion components with the shadcn CLI. remocn is wider; snapcn is built around product demo shots. A fair side-by-side, with numbers.
Why your Remotion scene transitions look broken
A fade() between two Remotion scenes leaves both of them on screen at full opacity. Here is why, and the one-line fix.