Back to prompts
✦ClaudeVideo
Product UI-states video spec
<inputs>/<rules> spec: one HTML file, one canvas, one draw(t) function, product UI states with real data.
Loading the original X post…
Open original on X<inputs>/<rules> spec: one HTML file, one canvas, one draw(t) function, product UI states with real data.
The prompt
✦Claude Opus 5.5
| 1 | <inputs> |
| 2 | Ask me for: |
| 3 | • my product + URL |
| 4 | • 8–12 UI states that tell its story |
| 5 | • the real data shown in each state |
| 6 | • brand colors + fonts + accent color |
| 7 | • required formats (1:1, 16:9, 9:16) |
| 8 | </inputs> |
| 9 | |
| 10 | <rules> |
| 11 | One HTML file. One canvas |
| 12 | One draw(t) function |
| 13 | |
| 14 | No CSS transitions |
| 15 | No timers |
| 16 | No state carried between frames |
| 17 | |
| 18 | One shape, never cut |
| 19 | |
| 20 | Every state is the same element changing size, radius and color while the content swaps |
| 21 | |
| 22 | A cursor drives the sequence with real clicks, typing and one drag |
| 23 | |
| 24 | Real UI. Real data. No placeholders. |
| 25 | |
| 26 | </rules> |
| 27 | <structure> |
| 28 | 120 BPM grid |
| 29 | |
| 30 | Something happens on every bea |
| 31 | |
| 32 | logo → button → handle field → “is this you?” → loader → pin → globe filling with users → matches → tabs → RSVP → search → logo |
| 33 | |
| 34 | </structure> |
| 35 | |
| 36 | <motion> |
| 37 | Closed-form springs everywhere with only a tiny overshoot. |
| 38 | |
| 39 | If a value changes target multiple times, sum one spring per change |
| 40 | |
| 41 | Content enters after its container starts morphing and leaves before the next morph so text never overlaps |
| 42 | |
| 43 | Use a short blur on transitions |
| 44 | |
| 45 | Never fade black directly into the accent color. Move an accent element between states instead |
| 46 | |
| 47 | Make tab indicators stretch by putting each edge on a different spring |
| 48 | |
| 49 | Zoom the camera so every state fills the frame |
| 50 | |
| 51 | Make the last frame equal the first so the whole thing loops |
| 52 | </motion> |
| 53 | |
| 54 | <export> |
| 55 | First render one frame per beat as a contact sheet |
| 56 | |
| 57 | Fix anything cramped or broken |
| 58 | |
| 59 | Then render every frame in headless Chrome at 60fps, averaging 6 subframes for motion blur |
| 60 | |
| 61 | Pipe into ffmpeg: |
| 62 | H.264 + yuv420p |
| 63 | |
| 64 | Export all aspect ratios in parallel |
| 65 | </export> |
What this prompt is good for
Product videos
Cinematic videos for SaaS and apps
Launch videos
Perfect for product launches and updates
Social media content
Short videos for X, LinkedIn, YouTube
App demos
Showcase key features and use cases
