Open source alternatives to remotion-interactivity

R

remotion-interactivity

Structure Remotion markup for interactivity

remotion-interactivity is an agent skill from the remotion-dev skills collection that explains how to structure Remotion markup so that Remotion Studio can make a video interactive. When the code is written in a particular way, the Studio can recognize its structure and let a person select items by clicking on them, drag, resize and rotate them, edit their CSS styles, and change keyframes and easing values directly. If the markup is too complex for the Studio to understand, those controls are grayed out, so the skill's job is to keep the code within the structure the Studio can read. Its main guidance is to prefer interactive components that carry their own timelines. For components that fill their parent, the skill recommends wrapping the component with Interactive.withSchema using a wrapInSequence option and an absolute-fill layout, so the wrapper provides the visual root and the timeline item and clips overflow, while the inner component can return a fragment. Timing, premounting, dimensions and per-instance styles belong on the exported component. Visuals that belong together should live in the same component so they move and trim together, and an inner layout container is kept only when it does a job such as alignment or clipping. Cards, text boxes and SVGs with their own bounds can keep the default layout and forward style to their visual root. The skill is for people building videos in Remotion who want to edit them visually in the Studio. It is installed with the skills CLI from the remotion-dev/skills repository, and its skills.sh page showed about 152.2K installs and passing results from three security audits at the time of the scan.