Agent skill · remotion-dev
remotion-interactivity
Structure Remotion markup for interactivity
What it needs
About 4k tokens when loaded.
What this skill does
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: 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. 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. Keep all CSS styles inline The best way is to just pass a plain object to style - no referring to constants, no object spreading, no math. Animate using interpolate() Write animations as inline interpolate() calls on the property that changes. The output range, easing, extrapolation and output property should use hardcoded values. The input range may additionally use durationInFrames, fps, width and height destructured directly from useVideoConfig(). Bare identifiers such as durationInFrames, multiplication with a number such as 2 fps or fps 2, and subtraction of a number such as durationInFrames - 1 are supported. Use scale, translate, rotate CSS properties Avoid the transform CSS property. If possible, use scale, rotate and translate instead because only they are interactively editable. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills remotion-dev/remotion-interactivity--d8db59