# Remotion Markup

Best practices for writing Remotion React Markup

- Repository: https://github.com/guanyang/open-agent-hub (985 stars)
- Category: Writing
- License: MIT
- Last updated: 2026-10-31
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add guanyang/open-agent-hub --skill remotion-markup -g -a claude-code -y`
Codex: `npx skills add guanyang/open-agent-hub --skill remotion-markup -g -a codex -y`
Cursor: `npx skills add guanyang/open-agent-hub --skill remotion-markup -g -a cursor -y`
Gemini CLI: `npx skills add guanyang/open-agent-hub --skill remotion-markup -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add guanyang/open-agent-hub`

## Description

Best practices for writing Remotion React Markup

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

This is guidance for writing Remotion React Markup.
If this is not relevant, load [Remotion Best Practices](../SKILL.md) instead.

## General rules

Animate properties using `useCurrentFrame()` and `interpolate()`.

Use `interpolate()` over `spring()`.

Use `Easing.bezier()` to customize timing, including jumpy or overshooting motion.
Use `Easing.spring()` if you want spring animations

HTML Elements which make sense to be made interactive in the Studio should use `Interactive`: `<div>` -> `<Interactive.Div>`.  
Set a descriptive `name` prop such as `name="Hero title"` for `Interactive`, `Solid`, `Sequence`.

```tsx
import { useCurrentFrame, Easing, interpolate, Interactive } from "remotion";

export const FadeIn = () => {
  const frame = useCurrentFrame();

  return (
    <Interactive.Div
      name="Title"
      style={{
        opacity: interpolate(frame, [0, 60], [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.
Prefer `scale`, `translate`, `rotate` CSS properties over `transform`.

```tsx
// 👍 Inline editable keyframes and transform shorthands
style={{
  scale: interpolate(frame, [0, 100], [0, 1]),
  translate: interpolate(frame, [0, 100], ["0px 0px", "100px 100px"]),
  rotate: interpolate(frame, [0, 100], ["20deg", "90deg"]),
}}

// 👎 Hidden values and transform strings become harder to edit in Studio
const scale = interpolate(frame, [0, 100], [0, 1]);

style={{
  transform: `scale(${scale})`,
}}
```

CSS transitions or animations are FORBIDDEN - they will not render correctly.  
Tailwind animation class names are FORBIDDEN - they will not render correctly.

Place assets in the `public/` folder at your project root.

Use `staticFile()` to reference files from the `public/` folder.

The rest: https://github.com/guanyang/open-agent-hub/blob/HEAD/skills/remotion-best-practices/remotion-markup/SKILL.md