Effects

Perspective View — editable Remotion component

A transparent 3D perspective wrapper with seamless ambient camera motion for React interfaces, screenshots, browser mockups, and product UI.

Component details

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

Run this command from the root of your Remotion project. No separate Agent Motion CLI installation is required.

npx @agent-motion/cli add perspective-view@0.1.0

Pass any React node as children in source code; use an HTML string only when configuring the registry editor.
Start with subtle, cinematic, left-focus, right-focus, or dramatic; each preset owns perspective, rotation, 3D translation, travel amplitudes, and loop timing.
Use translateX, translateY, and translateZ to override the preset's base 3D position; use motionX, motionY, and motionZ to override its travel amplitudes.
Use Perspective View for a single coherent surface such as a screenshot, browser mockup, dashboard, card, or product interface.
The ambient motion loops seamlessly and has no intrinsic maximum duration; let the consuming composition choose the scene length.
Import calculatePerspectiveViewDuration to preview exactly one seamless cycle for the selected preset or cycleDurationInFrames override.
Set motionAmount to zero for a static perspective plane or animate the wrapper props externally for custom camera choreography.
Leave x, y, width, and height unset for a centered plane occupying 80% of the composition on each axis.
Make children fill the wrapper box; composition-aware Agent Motion children should receive x=0, y=0, and the same width and height as Perspective View.
The outer background is transparent; shadow and glow affect only the presentation behind the child surface.
Perspective View does not split children into layers; it transforms the complete child tree as one 3D plane.