remotion-interactivity

By writing Remotion markup in a specific way, the Remotion Studio is able to recognize the structure of the code and makes it interactive:

• Allowing items to be selected by clicking on them
• Allowing drag+drop, resizing and rotation
• Editing the CSS styles
• Making keyframes and easing values editable

If the markup is too complex for the Studio to make it interactive, then the values become grayed out.

Prefer interactive components with their own timelines

Build new compositions with Track, connected compositions, and Interactive.create().

Set layout explicitly to 'absolute-fill' for scenes or 'none' for bounded elements. Register the same exported scene and reusable element components with Composition.

Start with the complete Track + connected compositions example. It includes the element, scene, parent timeline, and root registrations.