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, post to X, o...
Aug 1, 2026
2
Remocn![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>)
You took the leap and published your first post!![Word Warrior](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><linearGradient id="gWord" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="%23b91c1c" /><stop offset="100%" stop-color="%23f87171" /></linearGradient><filter id="fWord"><feDropShadow dx="0" dy="2" stdDeviation="3" flood-opacity="0.3"/></filter></defs><circle cx="50" cy="50" r="45" fill="url(%23gWord)" filter="url(%23fWord)"/><circle cx="50" cy="50" r="38" fill="none" stroke="rgba(255,255,255,0.4)" stroke-width="2"/><path d="M25 60 L75 60 L70 75 L30 75 Z" fill="%23ffffff" opacity="0.9"/><path d="M50 20 L55 30 L55 70 L45 70 L45 30 Z" fill="%23ffffff" filter="url(%23fWord)"/><rect x="35" y="65" width="30" height="5" fill="%23b91c1c"/><rect x="45" y="70" width="10" height="15" fill="%237f1d1d"/></svg>)
Published an article with 2000+ words![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>)
Published an article on a weekend
You took the leap and published your first post!
Published an article with 2000+ words
Published an article on a weekend
@user
Production-ready animations, transitions, backgrounds, and scenes for Remotion
4Posts
0Followers
0Following
🔥 1Week Streak
📌 Pinned
Latest Posts
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 all bad if y...
Aug 1, 2026
1
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 others. Op...
Aug 1, 2026
0
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 screen li...
Aug 1, 2026
1