remotion-markup
Content, animation and effects best practices
npx skills add guanyang/open-agent-hub --skill remotion-markup --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
This is guidance for writing Remotion React Markup. If this is not relevant, load [Remotion Best Practices](../remotion-best-practices/SKILL.md) instead. ## General rules Drive animations using `useCurrentFrame()` and `interpolate()`. CSS `transition` or `animation` will not render correctly, they need to refactored. Tailwind animation class will not render correctly, they need to be refactored. Use `Easing.bezier()` and `Easing.spring()` to customize timing. Structure your markup according to [Remotion Interactivity Best Practices](../remotion-interactivity/SKILL.md) ```tsx import { useCurrentFrame, Easing, interpolate, Interactive } from "remotion"; export const FadeIn = () => { const frame = useCurrentFrame(); return ( <Interactive.Div name="Title" style={{ opacity: interpolate(frame, [0, 2 * fps], [0, 1], { extrapolateRight: "clamp", extrapolateLeft: "clamp", easing: Easing.bezier(0.16, 1, 0.3, 1), }), }} > Hello World! </Interactive.Div> ); }; ``` Keep the `interpolate()` call inline in the `style` prop. Use `scale`, `translate`, `rotate` CSS properties over `transform`. ```tsx // 👍 Inline editable keyframes and transform shorthands style={{ scale: interpolate(frame, [0, 100]
- General rules
- Assets
- Media components
- Example scene
- Delaying, trimming
- from
- durationInFrames
- trimBefore
- Fallback
- Maps
- Text highlights and annotations
- Multi-scene videos
- Voiceover
- Embedding Videos
npx remotion still [composition-id] --scale=0.25 --frame=30
What does the remotion-markup skill do?
Content, animation and effects best practices
How do I install it?
Run `npx skills add guanyang/open-agent-hub --skill remotion-markup --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From guanyang/open-agent-hub, a repository with 940 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.