Product UI
Device Mockup — editable Remotion component
A responsive phone, tablet, or laptop frame that accepts editable HTML or React content for polished product demos.
Component details
- Version
- 0.1.0
- License
- MIT
- Duration
- 5.0 seconds
- Dimensions
- 1920 × 1080
Prerequisite: Create a Remotion project
Agent Motion installs components into an existing Remotion project. If you are starting fresh, create a blank project first:
npx create-video --yes --blank my-video
Add editable source
Run this command from the root of your Remotion project. No separate Agent Motion CLI installation is required.
npx @agent-motion/cli add device-mockup@0.1.0
Agent guidance
- Choose iphone or android for portrait app stories, tablet for touch-first dashboards, and laptop for desktop SaaS demos.
- Pass an HTML string as children for manifest-driven editing or any React node when composing directly in source code.
- Place Cursor Tour above Device Mockup when the screen content needs a guided pointer walkthrough.
- The component is useful from frame zero and does not animate the entire device; apply scene transitions externally.
- Leave x, y, width, and height unset for a centered component using eighty percent of the composition box.