remotion-interactivitylisted

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. ## 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`: ```tsx title="Interactive elements" <Interactive.Div name="Greeting card" style={{fontSize: 80, padding: 24}} > Hello </Interactive.Div> ``` This allows styles and keyframes to be set in the Studio. Be sensible, if a component has many elements, the timeline might get messy. ## Prefer inline text If text is fixed and only used once, write it directly inside the interactive element instead of extracting it into a constant. ```tsx title="Inline text" // 👍 Fixed copy stays editable <Interactive.Div name="Title"> Remotion Best Practices </Interactive.Div> ``` Use a prop or variable only when the text is dynamic or reused. ## Give interactive elements a descriptive name Add a `name` prop to elements to make them easily identifyable. Avoid computed names, hardcode them. ```tsx title="Interactive names" <> <Interactive.Div name="Hero title" style={{fontSize: 80}}> Lau