# Remotion Interactivity

Structure Remotion markup for interactivity

- Repository: https://github.com/remotion-dev/remotion (69731 stars)
- Category: Media
- License: see repository
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add remotion-dev/remotion --skill remotion-interactivity -g -a claude-code -y`
Codex: `npx skills add remotion-dev/remotion --skill remotion-interactivity -g -a codex -y`
Cursor: `npx skills add remotion-dev/remotion --skill remotion-interactivity -g -a cursor -y`
Gemini CLI: `npx skills add remotion-dev/remotion --skill remotion-interactivity -g -a gemini-cli -y`

## Description

Structure Remotion markup for interactivity

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

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`:

```tsx title="Interactive elements"
<Interactive.Div
  name="Greeting card"
  style={{fontSize: 80, padding: 24}}
>
  Hello
</Interactive.Div>
```

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.

```tsx title="Inline text"
// 👍 Fixed copy stays editable
<Interactive.Div name="Title">
  Remotion Best Practices
</Interactive.Div>
```

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.

```tsx title="Interactive names"
<>
  <Interactive.Div name="Hero title" style={{fontSize: 80}}>
    Launch day
  </Interactive.Div>
  <Img name="Avatar" src="https://remotion.media/image.jpeg" />
  <Video name="Background" src="https://remotion.media/video.mp4" />
  <Sequence name="Title">
    Launch day
  </Sequence>
</>
```

## 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.

The rest: https://github.com/remotion-dev/remotion/blob/HEAD/packages/codex-plugin/skills/remotion-interactivity/SKILL.md