Free Video Effect
Phone Mockup Effect: A Live App Screen Beside You
A tilted iPhone floats beside your face while its app screen gets tapped and switches to a result.
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/phone_mockup.py: add a "Phone Mockup" effect between [START S] and [END S].
- Design a dark-theme phone app screen in HTML:
the title "[APP NAME]", under it a suggestion card
("[SUGGESTION TEXT, e.g. Pause ad 3, move its budget to ad 1]"),
small chart icons, and a white "[BUTTON, e.g. Approve]" button.
- Put this screen into a realistic iPhone frame (black bezel, Dynamic Island,
rounded corners, a thin glare reflection).
- The phone sits in the top-right quarter of the screen, next to my face (without covering it),
rotated -18° on the Y axis and 6° on the Z axis, with perspective.
- Entrance: it comes in from the bottom right while rotating (spring animation, 600 ms).
While it stays, it floats very slightly (±6 px, 3 s loop).
- At [TAP S], a tap effect on the button on the screen (a gray circle grows and fades),
then the card switches to a green "✓ [RESULT TEXT]" state.
- Captions under the video, bold white.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. | 3.5 / 9.0 |
[APP NAME] | The title at the top of the app screen. | Ad Assistant |
[SUGGESTION TEXT, e.g. Pause ad 3, move its budget to ad 1] | The text on the suggestion card. One short sentence stays readable at phone size. | Pause Ad 3, move the budget to Ad 1 |
[BUTTON, e.g. Approve] | The label on the white button that gets tapped. | Approve |
[TAP S] | The second at which the button is tapped and the card changes state. Usually the moment you say the result. | 6.4 |
[RESULT TEXT] | The green confirmation shown after the ✓ once the button is tapped. | Budget moved |
About Phone Mockup
Phone Mockup is a talking-head video effect that brings a tilted iPhone into the frame beside your face, showing an app screen that reacts: a button gets tapped and the card turns into a green result. After the one-time setup, paste the prompt into Claude Code with Opus 5.5; Claude designs the screen in HTML and animates it over your footage.
Use it when: When you talk about an app, a tool or a result.
What the Phone Mockup effect does
Phone Mockup puts a working-looking phone next to your head. A dark-themed app screen, designed in HTML, sits inside an iPhone-style frame with a Dynamic Island, rounded corners and a thin glare. The phone hangs in the top-right quarter of the shot, turned -18° on the vertical axis and tilted 6°, so it reads as an object in space rather than a sticker.
It arrives from the bottom right on a 600 ms spring, then drifts up and down by 6 px on a three-second loop while it is on screen. The screen tells a tiny story: an app name, a suggestion card such as “Pause Ad 3, move the budget to Ad 1”, a few chart icons and a white button. At the tap second a grey ripple spreads from the button and the card turns into a green ✓ result.
When it works and when it hurts
Use it when you mention an app, a tool or an outcome and want the viewer to picture it. One suggestion and one result fit the screen, and that is about as much as a phone in a quarter of a vertical frame can show legibly.
It hurts when the screen promises something the product does not do. The app is designed from your text, not captured from a device, so accuracy is your responsibility. It also hurts when you move into the top-right corner: the phone is drawn over the footage without the mask, so a raised hand or a lean to that side ends up behind it.
How Claude builds it
The phone starts life as a web page. Claude writes the HTML and CSS for the app screen in its two states, before and after the tap, plus the tap ripple, and renders them to transparent PNGs with Playwright. Around the screen it draws the phone body: black frame, Dynamic Island, corner radius and glare.
For each frame, the script applies a perspective warp for the -18° and 6° rotation, moves the phone along the spring entrance and the floating loop, and composites it onto your footage. At the tap second it switches to the ripple frames and then to the result state. Captions run along the bottom from words.json, and ffmpeg writes the MP4 with your original audio.
Make it yours
Change the content before the styling, because the app name, the suggestion and the result are what viewers actually read. Keep each to a handful of words. Move the phone to the left if your face sits right of centre, and the rotation flips with it. Swap the dark theme for your product’s colours, replace the HTML screen with a real screenshot, or drop the tap and let the phone simply show a result.
Questions
Can I show a real screenshot instead of a designed screen?
Yes. Put the image in your folder and ask Claude to use it as the phone screen instead of the HTML design. The frame, tilt, entrance and float stay the same. For the tap and state change, give it a second screenshot showing the result, or drop that part.
Does it need the person mask?
Not as written. The phone sits next to your face and is drawn on top of the footage, so it relies on placement rather than masking. If you want a hand to pass in front of the phone, ask Claude to draw you over it using the mask from the setup.
Do I need an iPhone template image?
No. The prompt asks Claude to draw the frame itself, with a black bezel, Dynamic Island, rounded corners and a glare. It is an approximation rather than an exact model. If you have a mockup image you are licensed to use, you can give it to Claude instead.
Can the phone go on the left side?
Yes. Ask Claude to move it to the top-left quarter and reverse the Y rotation so the screen still angles towards the centre of the frame. Pick whichever side has more empty space next to your face in your shot.
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. It provides the word timestamps for the captions and the Playwright helper that renders the screen.
Write the screen text
Decide on the app name, the suggestion, the button label and the result. Keep each to a few words; the phone takes up only a quarter of the frame.
Find the tap second
Ask Claude for the time of the word where you state the result, using words.json, and use it as [TAP S] so the tap lands on that word.
Paste, fill in and check
Paste the Phone Mockup prompt with your values and send it. Check that the phone stays clear of your face and hands for the whole range, then give notes or approve.
You need: Setup prompt (run once) · Word timestamps · HTML rendering (Playwright) · Short screen text
Tips
- Use it when you talk about an app, a tool or a result, as the source suggests. One suggestion and one result is enough for the screen.
- Time [TAP S] to the word where you state the outcome, so the green result lands as you say it.
- Keep the screen text short. At this size, a title, one sentence and a button label are roughly what stays readable.
- If the screen shows a real product, make it match what that product actually does.
- If you lean or gesture to the right during the range, ask Claude to place the phone higher or smaller before it renders.
If it goes wrong
The phone covers part of your face or a raised hand.
It is drawn over the footage without the mask. Ask Claude to move it higher, make it smaller, or track your face with MediaPipe and keep a fixed gap from it.
The phone looks pasted on.
Ask for a soft shadow on the side away from your main light, a touch of grain to match your footage and slightly lower screen brightness.
The tap happens before or after you say the result.
Replace the [TAP S] number with a word: ask Claude to use frame_at() on the word where you say the result.
Text on the screen is hard to read.
Cut the text down, ask for larger type in the HTML, and have Playwright render the screen at twice the size before the perspective warp.
What it does not do
- The tilt is a perspective warp of a flat picture, not a 3D model. It holds at one angle, but the phone does not pick up or reflect your room's light.
- The phone is drawn on top of your footage without the person mask, so anything you move into the top-right quarter disappears behind it.
- It is a designed screen, not a recording of a working app. It can illustrate a feature; it is not evidence that the feature exists.
- A phone in one quarter of a vertical frame leaves little room for text, so a full interface will not be readable on a viewer's screen.
Sources
- Screenshots — Playwright for Python. Accessed October 21, 2026.
- Pillow documentation — Pillow. Accessed October 21, 2026.
- Easing functions cheat sheet — easings.net. Accessed October 21, 2026.
- Face detection guide — Google AI Edge — MediaPipe. 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.