# Screen in a phone or browser frame

Edit / Edit effect / Overlays and inserts. Checked 2026-11-13.

The interface reads as a real product on a real device.

- Use when: App and web product shots in an animated video.
- Phrase: the app screen inside a phone frame that slides up into the shot, the screen scrolling inside it
- Page: https://directorchair.ai/effect/device-frame
- JSON: https://directorchair.ai/api/effect/device-frame.json

## Watch out

- Put a real screenshot or a screen recording in the frame; a drawn stand-in is the fallback, never the plan. (practitioner; Director Chair field notes on motion graphics)

## Prompts

### Any chat model

```
Give me an edit brief: where it goes on the timeline, the exact settings, and what to check before export, for a short video about [your product], for [your audience]. The technique is screen in a phone or browser frame: the interface reads as a real product on a real device. How it works: the app screen inside a phone frame that slides up into the shot, the screen scrolling inside it. It is right for: app and web product shots in an animated video. Put a real screenshot or a screen recording in the frame; a drawn stand-in is the fallback, never the plan. Be concrete: numbers, seconds and settings, no theory. Ask me one question first if something you need is missing.
```

## Goes well with

- POV phone scroll: https://directorchair.ai/hook/pov-phone-scroll
- Spotlight and numbered tooltip: https://directorchair.ai/effect/spotlight-and-tooltip
- Feature drop: https://directorchair.ai/preset/preset-feature-drop

## Source

Own words from Director Chair field notes on motion graphics

Text CC BY 4.0, Director Chair (directorchair.ai). Reference clips and their card texts belong to their makers.