How to Make a Product Demo Video in React
This is a build log for a 30-second product demo video, written entirely in React and rendered to an .mp4 you can drop on a landing page, po...
Aug 1, 2026
![First Post](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><linearGradient id="gFirst" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="%238b5cf6" /><stop offset="100%" stop-color="%23ec4899" /></linearGradient><filter id="fFirst"><feDropShadow dx="0" dy="2" stdDeviation="3" flood-opacity="0.3"/></filter></defs><circle cx="50" cy="50" r="45" fill="url(%23gFirst)" filter="url(%23fFirst)"/><circle cx="50" cy="50" r="38" fill="none" stroke="rgba(255,255,255,0.4)" stroke-width="2"/><path d="M60 30 C 50 30, 40 40, 35 55 L 30 70 L 45 65 C 60 60, 70 50, 70 40 C 70 35, 65 30, 60 30 Z" fill="%23ffffff" opacity="0.9"/><path d="M35 55 L 45 65" stroke="%23ec4899" stroke-width="2"/><circle cx="65" cy="25" r="3" fill="%23fef08a"/><path d="M65 15 L65 20 M65 30 L65 35 M55 25 L60 25 M70 25 L75 25" stroke="%23fef08a" stroke-width="2" stroke-linecap="round"/></svg>)
![Weekend Warrior](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><linearGradient id="gWknd" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="%231d4ed8" /><stop offset="100%" stop-color="%2360a5fa" /></linearGradient><filter id="fWknd"><feDropShadow dx="0" dy="2" stdDeviation="3" flood-opacity="0.3"/></filter></defs><circle cx="50" cy="50" r="45" fill="url(%23gWknd)" filter="url(%23fWknd)"/><circle cx="50" cy="50" r="38" fill="none" stroke="rgba(255,255,255,0.4)" stroke-width="2"/><path d="M30 30 C 50 20, 50 20, 70 30 L 70 50 C 70 70, 50 80, 50 80 C 50 80, 30 70, 30 50 Z" fill="%23ffffff" opacity="0.9" filter="url(%23fWknd)"/><rect x="40" y="45" width="20" height="20" rx="2" fill="%231d4ed8"/><rect x="40" y="45" width="20" height="5" fill="%23bfdbfe"/><line x1="45" y1="42" x2="45" y2="48" stroke="%231e3a8a" stroke-width="2"/><line x1="55" y1="42" x2="55" y2="48" stroke="%231e3a8a" stroke-width="2"/></svg>)
9 min
Subscribe to Remocn's Newsletter
Get new articles and engineering posts delivered to your inbox.
Pinned Stories
All Stories
Introducing Remocn Components for videos in React
You shipped a product. Now you need a demo video — for the landing page, the launch post, the Product Hunt gallery. The usual options are al...
Aug 1, 2026
4 min
How to start with Remocn
You need two things: an AI coding agent and an empty folder. Get an agent. We recommend Claude Code — also works with ChatGPT, opencode and ...
Aug 1, 2026
3 min
Making a launch video for Claude Opus 5
Anthropic shipped Claude Opus 5 today. Nobody asked us for a video, so we made one anyway — fifty-five seconds, twelve beats, every claim on...
Aug 1, 2026
7 min