Free Video Effect
UI World Effect: A Chat Window Above Your Head
The top half of the frame becomes a Claude-style chat window that acts out your process while you keep talking below.
Claude Code · Opus 5.59:16Medium
- Run the setup once
- Paste the prompt, fill in the [brackets]
- Approve the preview, get your MP4
New to Claude Code? Start with the beginner guide →
Want all 17 at once? Get the full pack →
The prompt
effects/ui_world.py: add a "UI World" effect between [START S] and [END S].
- Make the background cream (#F5F1E8). My video sits in the bottom 55% of the screen,
with a soft fade at its top (feather 80 px).
- In the top part, design a Claude interface in HTML:
a small orange ✳ logo + the word "Claude" in the middle, and under it a white,
rounded message box.
- Animation order:
1) 5 small video thumbnails slide into the message box from left to right
(80 ms apart each), and a yellow "RAW CLIPS" label appears at their top right.
2) "[COMMAND, e.g. /video-edit]" is typed into the box letter by letter (45 ms per letter), with a blinking cursor.
3) A click effect on the orange send button at the bottom right (scale 0.9→1).
- My captions in large, bold white letters over the video;
when [ACCENT WORD] comes, its letters appear behind a mask that opens from left to right.
- The interface enters by sliding down 30 px from above, with a fade-in (easeOutCubic, 400 ms).Fill in the brackets
| Placeholder | What to put there | Example |
|---|---|---|
[START S] / [END S] | Where the effect starts and ends, in seconds from the start of input.mp4. | 12.0 / 17.5 |
[COMMAND, e.g. /video-edit] | The text that types itself into the message box, letter by letter. Short commands finish sooner. | /video-edit |
[ACCENT WORD] | The spoken word whose caption appears with a left-to-right wipe. Claude finds its exact time in words.json. | command |
About UI World
UI World is a talking-head video effect that splits a vertical frame in two: the top becomes a mock Claude chat window where clip thumbnails slide in and a command types itself out, while you keep talking in the lower half. After the one-time setup, paste the prompt into Claude Code with Opus 5.5 and it builds the interface in HTML and animates it.
Use it when: 'Here is how I do it' moments, when you want to show the process step by step.
What the UI World effect does
UI World turns the top of your frame into an app and leaves the bottom to you. The background becomes a warm cream, your footage moves into the lower 55% with a soft 80 px fade along its top edge, and above it a chat window builds itself: a small orange ✳ mark, the word “Claude” and a white message box.
Then the interface acts out a short sequence. Five clip thumbnails slide into the message box one after another and a yellow “RAW CLIPS” tag lands on them. A command such as /video-edit types itself out behind a blinking cursor, and the send button gets pressed. Meanwhile your captions keep running over your video, and the word you pick reveals itself with a left-to-right wipe.
When it works and when it hurts
Use it when you explain how you made something. Saying “I drop in my raw clips and type one command” is abstract; watching it happen above your head makes the steps concrete without cutting away from your face.
It hurts if viewers take it for a screen recording. It is a designed scene, so do not use it to suggest a product does something it does not. The split also costs you space: your shot gets a little over half the frame, so wide gestures and the top of your head can be lost. And it is a busy layout, which suits a short, clear sentence better than a long tangent.
How Claude builds it
The interface is a small web page. Claude writes the HTML and CSS for the window, the message box, the thumbnails and the button, then uses Playwright to render each animation state to a transparent PNG. The timing comes straight from the prompt: 80 ms between thumbnails, 45 ms per letter for the command, a 400 ms easeOutCubic slide for the entrance.
For each frame, the script paints the cream background, places your video in the lower 55% with the feathered edge, lays the rendered interface on top, then draws captions using the word times in words.json. The accent-word wipe is a mask that grows across the letters from left to right, starting on the frame where you say the word. ffmpeg writes the result with your audio untouched.
Make it yours
The chat window is a starting design. Restyle it to look like the tool you actually use, swap the cream for your own background colour, or replace the thumbnails with screenshots, documents or audio files, depending on what you are explaining. The command can be anything short; longer ones take longer to type at 45 ms a letter, so check that they finish inside your range. If you want more steps, describe each on its own line, in order, with what happens on screen.
Questions
Does the interface have to look like Claude?
No. The prompt describes a Claude-style window, but you can describe any layout: a different mark, other colours, another button shape. Claude rewrites the HTML from your description, and the animation timings stay the same unless you ask to change them.
Where do the five thumbnails come from?
The prompt leaves that open. The simplest route is a folder of five images plus one extra line telling Claude where it is. You can also ask Claude to pull five stills from your own footage at times you choose, which keeps the scene consistent with the rest of the video.
Is my video cropped or shrunk?
The prompt places your video in the lower 55% of the frame, so part of the original picture will not show. Ask Claude how it fitted the shot. If it cropped, make sure your face sits below the feather; if it scaled, check that you are still large enough to read on a phone.
Can I add more steps, such as a reply appearing?
Yes. Add numbered steps after the third one and describe what appears and when, for example a reply bubble that fades in after the send click. Keep each step short, because the top half of a vertical frame only fits a few lines of text that stay readable.
Step by step
Run the setup once
Open the folder with input.mp4 in Claude Code, choose Opus 5.5 and paste the setup prompt. UI World uses its word timestamps for the captions and its Playwright helper to render the interface.
Prepare five thumbnails
Put five images in a folder such as assets/clips/ and add a line to the prompt saying where they are, or ask Claude to take five stills from your own footage.
Paste and fill in the prompt
Copy the UI World prompt, replace the bracketed values with your start and end seconds, the command to type and the accent word, and send it.
Check the timing
Watch whether the command finishes typing and the send click lands before the effect ends. Give notes such as 'type faster' or 'start the thumbnails on the word clips', then ask for the final render.
You need: Setup prompt (run once) · Word timestamps · 5 thumbnail images · A short command to type
Tips
- The prompt does not name a folder for the five thumbnails. Add a line such as 'use the images in assets/clips/', or ask Claude to take stills from your own footage.
- Place the range on the sentence where you describe how you work. A step-by-step scene helps most where you are actually explaining steps.
- Count the characters in your command. At 45 ms a letter, a 12-character command types in about half a second; a full sentence takes several seconds.
- Leave some headroom when you film. Your video only gets the lower 55% of the frame, and a face near the top edge ends up in the fade.
- Restyle the window to match the tool you actually use, so the scene looks like what viewers will see if they try it.
If it goes wrong
The top of your head fades into the cream background.
Your face sits too high for the lower-55% layout. Ask Claude to shift your footage down or scale it slightly so your whole face sits below the 80 px feather.
Text in the chat window looks soft or jagged.
Ask Claude to render the HTML in Playwright at twice the size (device scale factor 2) and scale it down when compositing.
The command is still typing when the effect ends.
Shorten the command, lower the per-letter time or move [END S] later. Ask Claude to tell you how long the typing takes before it renders.
The accent-word wipe starts too early or too late.
Open words.json and check how the word was transcribed. If it was misheard, correct it there, or give Claude the exact second to use instead.
What it does not do
- It is a designed mock-up, not a recording of a real app. It illustrates your process; it cannot prove that a tool behaves the way it shows.
- Your footage is confined to the lower 55% of the frame, so gestures above chest height and a high head position can be lost in the fade.
- The interface is rendered from HTML with Playwright, which can add noticeable render time compared with effects drawn only in Python.
- The window is hand-built, so it will not match any real app pixel for pixel, and real apps change their design over time.
Sources
- Screenshots — Playwright for Python. Accessed October 21, 2026.
- Easing functions cheat sheet — easings.net. Accessed October 21, 2026.
- faster-whisper — GitHub — SYSTRAN. Accessed October 21, 2026.
- Claude Code overview — Anthropic. Accessed October 21, 2026.
Want the whole library?
Lifetime opens every AI Video Effect, AI Motion Graphic and AI Creator Concept, inside Claude via MCP, for one payment of $79.