remotion-interactivity
When to Use
- Use when this upstream workflow matches the user's stated goal.
- Use when the task requires the procedures documented in this skill.
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.
Version and snippet scope
Use the installed Remotion version matching these Studio features; examples omit imports and application helpers. calculateMetadata must be a function, not a Promise returned from an async useMemo factory. Supply static fallback width/height on Composition as required by its props, then return dynamic overrides. Inspect the actual Studio edit diff before saving over source. See calculateMetadata.
Make an HTML element interactive using Interactive
Every HTML and SVG element (except <Img>, it already is interactive) such as <div> can be turned interactive using Interactive: