Animate any UI from a screenshot, ZERO after effects
Build animated UI mockups from a single screenshot using Claude Code and Remotion. No After Effects, no keyframes, no manual code. Full walkthrough from setup to polished 3D parallax animation.
TIMESTAMPS
0:00 The After Effects problem
0:40 What we're covering
1:33 Setup: Node.js, Remotion, and Claude Code
2:51 Installing Remotion
3:15 Installing the Remotion skills library
3:47 Creating the animation brief
4:54 First animation result
5:37 Fixing icons with real SVGs
6:59 Adding 3D parallax and polish
8:35 Taking it further with control panels
8:55 uiui.video: pre-built animated UI templates
KEY POINTS
Set up a Remotion + Claude Code environment from scratch
Write an effective animation brief (visual target + timeline of events)
Extract SVG icons from any website using browser inspector
Iterate with Claude Code to dial in animation timing and effects
Replace 2+ hours of After Effects work with ~30 minutes of conversation
TOOLS & SOFTWARE
Claude Code -- AI coding agent that writes the animation code
https://claude.com/download
Remotion -- React-based programmatic video and motion graphics
https://remotion.dev
Remotion Skills -- AI context library for better animation output
https://www.remotion.dev/docs/ai/skills
Node.js -- Required runtime
https://nodejs.org
uiui.video -- Pre-built animated UI templates (free screen record, paid HD/ProRes)
https://uiui.video
RESOURCES
Animation brief template (visual target + timeline prompt)
https://gist.github.com/JMS-DVNPRT/d7....
---
Hit subscribe for more.
MY PRODUCTS
uiui.video -- Pre-built animated UI templates for Remotion
https://uiui.video
Gumroad Store -- Templates, presets, and resources
https://jmsvideo.gumroad.com/
ABOUT ME
Portfolio
https://www.jms.video/
FIND ME ON SOCIAL
X/Twitter https://x.com/JMSvid
Instagram / jms.vid
#Remotion #ClaudeCode #AIVideo #MotionDesign #AIVideoProduction