Description
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.…
Highlights
- Structure that lets Remotion Studio edit the video
- Click select, drag, resize and rotate in the Studio
- Editable CSS, keyframes and easing
- Interactive.withSchema wrapper guidance
- Components that carry their own timelines
- Installs with the skills CLI
Ratings & Reviews
No ratings yet
Be the first to rate remotion-interactivity.
People also visit
canvas-design
Create beautiful visual art in .png and .pdf documents using design philosophy
remotion-interactivity FAQ
What does the Studio let me do?
When the markup is structured as the skill describes, you can select, drag, resize and rotate items, edit their CSS, and edit keyframes and easing.
Why are some controls grayed out?
The skill says the Studio cannot make markup that is too complex interactive, so those values become read-only.
What is Interactive.withSchema?
A wrapper recommended for components that fill their parent, which provides the visual root and timeline item.
Where should timing go?
On the exported component, so it can be edited in the Studio.
How do I install it?
Run npx skills add https://github.com/remotion-dev/skills --skill remotion-interactivity.
What security audits does it have?
skills.sh lists three audits: Gen Agent Trust Hub Pass, Socket Pass and Snyk Pass.
What are the best remotion-interactivity alternatives?
Popular alternatives to remotion-interactivity include implement, brand-guidelines and canvas-design. See all remotion-interactivity alternatives