Product UI
Browser Spotlight — editable Remotion component
A polished Chrome or Safari frame that accepts any React content as the page body.
Component details
- Version
- 0.10.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 the standard project structure first:
npx @agent-motion/cli create remotion my-remotion-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 browser-spotlight@0.10.0
Agent guidance
- Pass an HTML string as children for editor-controlled markup, or any React node when using the component in code.
- Pass a URL, staticFile result, or React image element as logo.
- Position the browser from the composition's top-left corner using x and y.
- When width or height is omitted, the browser fits measured content up to 80 percent of the composition on that axis.
- Automatic scrolling only runs when measured content is taller than the resolved browser viewport.
- Use scrollStartFrame and scrollEndFrame to align the scroll with narration, or set scrollMode to none for a static page.
- Make children fill their container when edge-to-edge page content is desired.
- Use chrome or safari for browser and light or dark for theme.