{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"remotion-best-practices","type":"registry:item","title":"remotion-best-practices","description":"Router for all Remotion skills","author":"remotion-dev/skills ","files":[{"path":"agents/openai.yaml","content":"interface:\n display_name: '/remotion-best-practices'\n short_description: 'Route Remotion tasks to the right workflow'\n icon_small: './assets/remotion-icon.svg'\n icon_large: './assets/remotion-icon.svg'\n brand_color: '#0B84F3'\n default_prompt: '$remotion-best-practices: Make a promo video for my product'\n","type":"registry:file","target":"~/skills/remotion-best-practices/agents/openai.yaml"},{"path":"assets/remotion-icon.svg","content":"\nRemotion\n\n\n","type":"registry:file","target":"~/skills/remotion-best-practices/assets/remotion-icon.svg"},{"path":"remotion-captions/agents/openai.yaml","content":"interface:\n display_name: '/remotion-captions'\n short_description: 'Transcribe, display, and animate captions'\n icon_small: './assets/remotion-icon.svg'\n icon_large: './assets/remotion-icon.svg'\n brand_color: '#0B84F3'\n default_prompt: '$remotion-captions: Transcribe my video and display captions'\n","type":"registry:file","target":"~/skills/remotion-best-practices/remotion-captions/agents/openai.yaml"},{"path":"remotion-captions/assets/remotion-icon.svg","content":"\nRemotion\n\n\n","type":"registry:file","target":"~/skills/remotion-best-practices/remotion-captions/assets/remotion-icon.svg"},{"path":"remotion-captions/display-captions.md","content":"---\nname: display-captions\ndescription: Displaying captions in Remotion using the Basic Captions element\nmetadata:\n tags: captions, subtitles, display, element\n---\n\n# Displaying captions in Remotion\n\nThis guide explains how to display captions in Remotion, assuming you already have captions in the [`Caption`](https://www.remotion.dev/docs/captions/caption.md) format.\n\n## Prerequisites\n\nRead [Transcribing audio](transcribe-captions.md) for how to generate captions.\n\nFirst, the [`@remotion/captions`](https://www.remotion.dev/docs/captions.md) package needs to be installed.\nIf it is not installed, use the following command:\n\n```bash\nnpx remotion add @remotion/captions # If project uses npm\nbunx remotion add @remotion/captions # If project uses bun\nyarn remotion add @remotion/captions # If project uses yarn\npnpm exec remotion add @remotion/captions # If project uses pnpm\n```\n\n## Adding the Basic Captions element\n\nUse the [Basic Captions](https://www.remotion.dev/elements/captions/basic-captions) element to display captions.\n\nAlternatives are available at [Remotion Captions Elements](https://www.remotion.dev/elements/captions), but use Basic Captions unless there are more precise specifications.\n\nFetch its source code from https://www.remotion.dev/elements/captions/basic-captions.md and copy the `basic-captions.tsx` file into the project unchanged.\n\n## Displaying captions alongside video content\n\nKeep each clip's video and captions inside the same `` or ``.\nPut the clip's `trimBefore`, `durationInFrames`, and `playbackRate` on that shared parent so trimming or changing the speed affects both. \nFor independently positioned clips, put `from` on the shared `` too.\n\nGive every captioned clip its own group and inline caption array; do not combine captions from multiple clips into one overlay outside the scene timeline. \nMoving, reordering, trimming, or deleting the group then affects its video and captions together.\n\nPutting captions inside a scene is insufficient if `trimBefore` or `playbackRate` is still applied only to `\n \n \n \n \n \n );\n};\n```\n\n```tsx title=\"src/Root.tsx\"\nimport { Composition } from \"remotion\";\nimport { MyComposition } from \"./MyComposition\";\n\nexport const RemotionRoot = () => {\n return (\n \n );\n};\n```\n\nTo change a captioned clip's speed, set `playbackRate` on its shared sequence.\n`durationInFrames` selects a range of source frames; the group occupies `durationInFrames / playbackRate` frames in its parent timeline.\nUpdate the composition duration when changing the total timeline length.\n\nIf a caption has `pageBreakAfter: true`, the current page ends after that caption and the next caption starts a new page.\n\n## White-space preservation\n\nThe captions are whitespace sensitive. You should include spaces in the `text` field before each word.\n","type":"registry:file","target":"~/skills/remotion-best-practices/remotion-captions/display-captions.md"},{"path":"remotion-captions/import-srt-captions.md","content":"---\nname: import-srt-captions\ndescription: Importing .srt subtitle files into Remotion using @remotion/captions\nmetadata:\n tags: captions, subtitles, srt, import, parse\n---\n\n# Importing .srt subtitles into Remotion\n\nIf you have an existing `.srt` subtitle file, you can import it into Remotion using `parseSrt()` from `@remotion/captions`.\n\nIf you don't have a .srt file, read [Transcribing audio](transcribe-captions.md) for how to generate captions instead.\n\n## Prerequisites\n\nFirst, the @remotion/captions package needs to be installed.\nIf it is not installed, use the following command:\n\n```bash\nnpx remotion add @remotion/captions # If project uses npm\nbunx remotion add @remotion/captions # If project uses bun\nyarn remotion add @remotion/captions # If project uses yarn\npnpm exec remotion add @remotion/captions # If project uses pnpm\n```\n\n## Reading an .srt file\n\nUse `staticFile()` to reference an `.srt` file in your `public` folder, then fetch and parse it:\n\n```tsx\nimport { useState, useEffect, useCallback } from \"react\";\nimport { staticFile, useDelayRender } from \"remotion\";\nimport { parseSrt } from \"@remotion/captions\";\nimport type { Caption } from \"@remotion/captions\";\n\nexport const MyComponent: React.FC = () => {\n const [captions, setCaptions] = useState(null);\n const { delayRender, continueRender, cancelRender } = useDelayRender();\n const [handle] = useState(() => delayRender());\n\n const fetchCaptions = useCallback(async () => {\n try {\n const response = await fetch(staticFile(\"subtitles.srt\"));\n const text = await response.text();\n const { captions: parsed } = parseSrt({ input: text });\n setCaptions(parsed);\n continueRender(handle);\n } catch (e) {\n cancelRender(e);\n }\n }, [continueRender, cancelRender, handle]);\n\n useEffect(() => {\n fetchCaptions();\n }, [fetchCaptions]);\n\n if (!captions) {\n return null;\n }\n\n return (\n <>\n {/* Use captions here */}\n \n );\n};\n```\n\nRemote URLs are also supported - you can `fetch()` a remote file via URL instead of using `staticFile()`.\n\n## Using imported captions\n\nOnce parsed, the captions are in the `Caption` format and can be used with all `@remotion/captions` utilities.\n","type":"registry:file","target":"~/skills/remotion-best-practices/remotion-captions/import-srt-captions.md"},{"path":"remotion-captions/REFERENCE.md","content":"---\nname: remotion-captions\ndescription: Transcribing, displaying and animating captions\nversion: 4.0.540\n---\n\nAll captions must be processed in JSON. The captions must use the [`Caption`](https://www.remotion.dev/docs/captions/caption.md) type which is the following:\n\n```ts\nimport type { Caption } from \"@remotion/captions\";\n```\n\nThis is the definition:\n\n```ts\ntype Caption = {\n text: string;\n startMs: number;\n endMs: number;\n timestampMs: number | null;\n confidence: number | null;\n pageBreakAfter?: boolean;\n};\n```\n\n## Generating captions\n\nTo transcribe video and audio files to generate captions, load the [transcribe-captions.md](transcribe-captions.md) file for more instructions.\n\n## Displaying captions\n\nTo display captions in your video, load the [display-captions.md](display-captions.md) file for more instructions.\n\n## Importing captions\n\nTo import captions from a .srt file, load the [import-srt-captions.md](import-srt-captions.md) file for more instructions.\n\n## Post-creation\n\nAfter you're done, load this skill: [Remotion Best Practices](../SKILL.md)\n\nIf not alreay done, open the Remotion Studio, unless instructed otherwise.\n","type":"registry:file","target":"~/skills/remotion-best-practices/remotion-captions/REFERENCE.md"},{"path":"remotion-captions/transcribe-captions.md","content":"# Transcribing audio\n\nTo transcribe audio to generate captions in Remotion, use the [`transcribe()`](https://www.remotion.dev/docs/whisper-webgpu/transcribe.md) function from the [`@remotion/whisper-webgpu`](https://www.remotion.dev/docs/whisper-webgpu.md) package.\nIt runs Whisper locally on the GPU and works in both Node.js and the browser.\n\n## Prerequisites\n\nInstall the required packages if they are not installed:\n\n```bash\nnpx remotion add @remotion/whisper-webgpu @huggingface/transformers mediabunny @mediabunny/server # If project uses npm\nbunx remotion add @remotion/whisper-webgpu @huggingface/transformers mediabunny @mediabunny/server # If project uses bun\nyarn remotion add @remotion/whisper-webgpu @huggingface/transformers mediabunny @mediabunny/server # If project uses yarn\npnpm exec remotion add @remotion/whisper-webgpu @huggingface/transformers mediabunny @mediabunny/server # If project uses pnpm\n```\n\nA compatible GPU is required. ONNX Runtime does not work on Linux arm64.\n\n## Transcribing\n\nMake a Node.js script that decodes the audio to a 16kHz mono waveform, downloads a model, and transcribes it.\n\n```ts\nimport { registerMediabunnyServer } from \"@mediabunny/server\";\nimport {\n WHISPER_WEBGPU_SAMPLE_RATE,\n canUseWhisperWebGpu,\n downloadWhisperModel,\n loadWhisperModel,\n toCaptions,\n transcribe,\n} from \"@remotion/whisper-webgpu\";\nimport {\n ALL_FORMATS,\n Conversion,\n FilePathSource,\n Input,\n NullTarget,\n Output,\n WavOutputFormat,\n} from \"mediabunny\";\nimport { writeFile } from \"node:fs/promises\";\n\nregisterMediabunnyServer();\n\nconst support = await canUseWhisperWebGpu();\nif (!support.supported) {\n throw new Error(support.detailedReason);\n}\n\ntype WaveformChunk = {\n startFrame: number;\n waveform: Float32Array;\n};\nconst chunks: WaveformChunk[] = [];\n\nusing input = new Input({\n formats: ALL_FORMATS,\n source: new FilePathSource(\"public/video123.mp4\"),\n});\nconst audioTrack = await input.getPrimaryAudioTrack();\nif (audioTrack === null) {\n throw new Error(\"The media does not contain an audio track.\");\n}\n\nconst conversion = await Conversion.init({\n input,\n output: new Output({\n format: new WavOutputFormat(),\n target: new NullTarget(),\n }),\n video: { discard: true },\n audio: (track) => {\n if (track.id !== audioTrack.id) {\n return { discard: true };\n }\n\n return {\n codec: \"pcm-f32\",\n forceTranscode: true,\n numberOfChannels: 1,\n sampleFormat: \"f32\",\n sampleRate: WHISPER_WEBGPU_SAMPLE_RATE,\n process: (sample) => {\n const waveform = new Float32Array(\n sample.allocationSize({ format: \"f32\", planeIndex: 0 }) /\n Float32Array.BYTES_PER_ELEMENT,\n );\n sample.copyTo(waveform, { format: \"f32\", planeIndex: 0 });\n chunks.push({\n startFrame: Math.round(sample.timestamp * WHISPER_WEBGPU_SAMPLE_RATE),\n waveform,\n });\n return sample;\n },\n };\n },\n});\n\nif (!conversion.isValid) {\n throw new Error(\"The audio track cannot be decoded.\");\n}\n\nawait conversion.execute();\n\nconst waveformLength = chunks.reduce(\n (max, chunk) => Math.max(max, chunk.startFrame + chunk.waveform.length),\n 0,\n);\nconst channelWaveform = new Float32Array(waveformLength);\nfor (const chunk of chunks) {\n const destinationStart = Math.max(0, chunk.startFrame);\n const sourceStart = Math.max(0, -chunk.startFrame);\n const availableLength = Math.min(\n chunk.waveform.length - sourceStart,\n channelWaveform.length - destinationStart,\n );\n\n if (availableLength > 0) {\n channelWaveform.set(\n chunk.waveform.subarray(sourceStart, sourceStart + availableLength),\n destinationStart,\n );\n }\n}\n\nconst model = \"small.en\";\nawait downloadWhisperModel({ model });\nawait using modelHandle = await loadWhisperModel({ model });\nconst transcription = await transcribe({ channelWaveform, model });\nconst { captions } = toCaptions({ whisperWebGpuOutput: transcription });\n\n// Write it to a file so the captions can be inlined into the Remotion code\nawait writeFile(\"captions123.json\", JSON.stringify(captions, null, 2));\n```\n\n## Choosing a model\n\n`small.en` is the recommended default for English. \nFor other languages, use a multilingual model such as `small` and pass the `language` option to `transcribe()` - automatic language detection is not supported. \nSee [`getAvailableModels()`](https://www.remotion.dev/docs/whisper-webgpu/get-available-models.md) for all models.\n\n## Transcribing in the browser\n\nIn the browser, use [`resampleTo16Khz()`](https://www.remotion.dev/docs/whisper-webgpu/resample-to-16khz.md) to get the waveform from a `File` instead of using Mediabunny:\n\n```ts\nimport {\n downloadWhisperModel,\n resampleTo16Khz,\n toCaptions,\n transcribe,\n} from \"@remotion/whisper-webgpu\";\n\nexport const transcribeFile = async (file: File) => {\n await downloadWhisperModel({ model: \"small.en\" });\n const channelWaveform = await resampleTo16Khz({ file });\n const transcription = await transcribe({\n channelWaveform,\n model: \"small.en\",\n });\n\n const { captions } = toCaptions({ whisperWebGpuOutput: transcription });\n return captions;\n};\n```\n\nTranscribe each original source video or audio file individually. \nKeep the resulting caption timestamps relative to the beginning of that source file, including portions currently trimmed out of the edit. \nDo not add composition offsets or flatten multiple transcripts into composition-wide timestamps.\n\nSee [Displaying captions](display-captions.md) for how to display the captions in Remotion.\n","type":"registry:file","target":"~/skills/remotion-best-practices/remotion-captions/transcribe-captions.md"},{"path":"remotion-create/agents/openai.yaml","content":"interface:\n display_name: '/remotion-create'\n short_description: 'Create a new Remotion video project'\n icon_small: './assets/remotion-icon.svg'\n icon_large: './assets/remotion-icon.svg'\n brand_color: '#0B84F3'\n default_prompt: '$remotion-create: Create a Remotion video and make a promo for my product'\n","type":"registry:file","target":"~/skills/remotion-best-practices/remotion-create/agents/openai.yaml"},{"path":"remotion-create/assets/remotion-icon.svg","content":"\nRemotion\n\n\n","type":"registry:file","target":"~/skills/remotion-best-practices/remotion-create/assets/remotion-icon.svg"},{"path":"remotion-create/REFERENCE.md","content":"---\nname: remotion-create\ndescription: Create a new Remotion video\nversion: 4.0.540\n---\n\nThese are instructions for making a new Remotion project and composition. \nIf this is not the next task, see [Remotion Best Practices](../SKILL.md)\n\n## Scaffold a project\n\nIf a project already exists, skip this.\nEnsure Node.js and Git is installed, and the current folder is appropriate for starting a new project.\n\nInspect the current folder, including hidden files, before choosing where to scaffold.\n\n### Empty folder\n\nIf it is empty, or contains only disposable operating-system metadata such as `.DS_Store`, create the project directly in the current folder.\nRemove only those disposable metadata files first, since `create-video` rejects non-empty folders.\nDo not treat all hidden files as disposable: files such as `.env` and directories such as `.git` are meaningful contents.\n\nScaffold in existing folder:\n\n```bash\nnpx create-video@latest --yes --blank --no-tailwind .\nnpm i\n```\n\n### Non-empty folder\n\nIf the current folder contains meaningful contents and no project already exists, scaffold into a new subfolder.\nReplace `my-video` with a suitable project name.\n\n```bash\nnpx create-video@latest --yes --blank --no-tailwind my-video\ncd my-video\nnpm i\n```\n\n## Open the preview before building the video\n\nAs soon as the project can run, open [Remotion Studio](../remotion-studio/REFERENCE.md) in the browser before writing or changing the composition. For a new project, do this immediately after scaffolding and installing dependencies. For an existing project, do it before editing the video. Keep Studio running while you work so the user can see changes as they appear and steer the result.\n\n## Designing a video\n\nKeep the scaffold and add React Markup.\nFollow [Remotion React Markup Best Practices](../remotion-markup/REFERENCE.md) and [Video Layout Rules](video-layout.md) for video-first layout and text sizing guidance.\n\nBefore writing the root that registers `` or `` elements,\nfollow [Compositions and stills](../remotion-markup/compositions.md).\n\n## Is this a timeline of clips?\n\nIf the video arranges multiple video or audio clips on a timeline, follow\n[Video editing](../remotion-markup/video-editing.md) before writing the\ntimeline. Give every clip that should be edited independently its own authored\nJSX node.\n\n## Is this a multi-scene video?\n\nIf this is a video with multiple subsequent scenes, follow guidance at [Multi-scene videos](../remotion-markup/multi-scene-video.md).\n\n## Interactivity Best Practices\n\nBy structuring the React Markup following [Remotion Interactivity Best Practices](../remotion-interactivity/REFERENCE.md), you allow the user to make edits in the Studio which write back to code.\n\n## TailwindCSS\n\nIf Tailwind is requested, see [tailwind.md](tailwind.md) for using TailwindCSS in Remotion.\n\n## Follow-up\n\nThe video creation process has finished.\nFor follow-up prompts, use [Remotion Best Practices](../SKILL.md)\n","type":"registry:file","target":"~/skills/remotion-best-practices/remotion-create/REFERENCE.md"},{"path":"remotion-create/tailwind.md","content":"---\nname: tailwind\ndescription: Using TailwindCSS in Remotion.\nmetadata:\n---\n\nYou can and should use TailwindCSS in Remotion, if TailwindCSS is installed in the project.\n\nDon't use `transition-*` or `animate-*` classes - always animate using the `useCurrentFrame()` hook.\n\nTailwind must be installed and enabled first in a Remotion project - see https://www.remotion.dev/docs/tailwind.\n","type":"registry:file","target":"~/skills/remotion-best-practices/remotion-create/tailwind.md"},{"path":"remotion-create/video-layout.md","content":"You are designing a video, not a webpage.\n\n- Decide what the viewer should notice first in each scene. Build the frame around that one thing.\n- Keep important content inside a generous safe area. For 1080px-wide videos, keep key text at least 80px from the sides and 100px from the top and bottom.\n- Do not add redundant elements.\n- For 1080px-wide compositions, use these rough minimums:\n - Main headline: 84px\n - Important supporting text: 44px\n- Scale those values with the composition width.\n","type":"registry:file","target":"~/skills/remotion-best-practices/remotion-create/video-layout.md"},{"path":"remotion-docs/agents/openai.yaml","content":"interface:\n display_name: '/remotion-docs'\n short_description: 'Search current Remotion documentation'\n icon_small: './assets/remotion-icon.svg'\n icon_large: './assets/remotion-icon.svg'\n brand_color: '#0B84F3'\n default_prompt: '$remotion-docs: What server-side rendering options does Remotion have?'\n","type":"registry:file","target":"~/skills/remotion-best-practices/remotion-docs/agents/openai.yaml"},{"path":"remotion-docs/assets/remotion-icon.svg","content":"\nRemotion\n\n\n","type":"registry:file","target":"~/skills/remotion-best-practices/remotion-docs/assets/remotion-icon.svg"},{"path":"remotion-docs/REFERENCE.md","content":"---\nname: remotion-docs\ndescription: Search Remotion documentation\nversion: 4.0.540\n---\n\nThis skill teaches you how to discover and read current Remotion documentation.\nIf this is not relevant, load [Remotion Best Practices](../SKILL.md) instead.\n\n## Searching the docs\n\nUse the Algolia search API to find relevant documentation pages:\n\n```\nPOST https://plsduol1ca-dsn.algolia.net/1/indexes/*/queries?x-algolia-api-key=3e42dbd4f895fe93ff5cf40d860c4a85&x-algolia-application-id=PLSDUOL1CA\nContent-Type: application/x-www-form-urlencoded\n\n{\n \"requests\": [\n {\n \"query\": \"\",\n \"indexName\": \"remotion\",\n \"params\": \"attributesToRetrieve=[\\\"hierarchy.lvl0\\\",\\\"hierarchy.lvl1\\\",\\\"hierarchy.lvl2\\\",\\\"url\\\"]&hitsPerPage=10\"\n }\n ]\n}\n```\n\nEach hit contains a `url` field pointing to the documentation page.\n\n## Fetching a page as Markdown\n\nAppend `.md` to any Remotion docs URL to retrieve its Markdown source (saves tokens):\n\n```\nhttps://www.remotion.dev/docs/use-video-config.md\nhttps://www.remotion.dev/docs/sequence.md\nhttps://www.remotion.dev/docs/lambda/rendermediaonlambda.md\n```\n\n## Workflow\n\n1. Search Algolia for the concept or API you need.\n2. Pick the most relevant URL(s) from the results.\n3. Fetch each URL with the `.md` suffix.\n4. Implement using the current documentation rather than memorized API knowledge.\n","type":"registry:file","target":"~/skills/remotion-best-practices/remotion-docs/REFERENCE.md"},{"path":"remotion-interactivity/agents/openai.yaml","content":"interface:\n display_name: '/remotion-interactivity'\n short_description: 'Make compositions editable in Remotion Studio'\n icon_small: './assets/remotion-icon.svg'\n icon_large: './assets/remotion-icon.svg'\n brand_color: '#0B84F3'\n default_prompt: '$remotion-interactivity: Make the markup in MyComp.tsx interactive'\n","type":"registry:file","target":"~/skills/remotion-best-practices/remotion-interactivity/agents/openai.yaml"},{"path":"remotion-interactivity/assets/remotion-icon.svg","content":"\nRemotion\n\n\n","type":"registry:file","target":"~/skills/remotion-best-practices/remotion-interactivity/assets/remotion-icon.svg"},{"path":"remotion-interactivity/inline-effects.md","content":"## Effects should be inline too\n\nThe effects array should not be computed.\nThe same rules for setting keyframes as `interpolate()` apply too here: All values should also be hardcoded: Input range, output range, easing, extrapolation, `output` property.\n\n```tsx title=\"Effects\"\n// πŸ‘ Parameters are inline and the array shape is stable\n\n\nconst center = [0.5, 0.5] as const;\nconst rotation = frame * 1.5;\n\n\n```\n\nRender separate elements if one version should have effects and another should not.\n","type":"registry:file","target":"~/skills/remotion-best-practices/remotion-interactivity/inline-effects.md"},{"path":"remotion-interactivity/REFERENCE.md","content":"---\nname: remotion-interactivity\ndescription: Structure Remotion markup for interactivity\nversion: 4.0.540\n---\n\nStudio edits the JSX nodes that create timeline items. Structure the code around\nwhat the user should be able to select, move, trim, or style independently.\nKeep editable values inline on each instance.\n\nBefore writing a scene or refactoring its layers, read\n[editable timeline structure](timeline-structure.md). It covers editing units,\ntracks, shared timing, plain layout containers, and a complete component-to-root\nexample. For a timeline built from footage, also read\n[editable video timelines](../remotion-markup/video-editing.md).\n\nUse [connected compositions](../remotion-markup/connected-compositions.md) when\na scene or reusable group needs its own timeline. Validate both its standalone\nview and the full parent timeline; a connection alone does not guarantee fewer\nvisible rows.\n\n## Choose schema fields\n\nEach key in the schema is a prop that Studio can read and edit at the call site.\nProps that are not in the schema still work, but are not editable in Studio.\nKeys may use dot notation, such as `style.color`.\n\n| Type | Use for | Keyframable |\n| ---------------------------------------------------------------------------- | ------------------------------------------------------------ | ------------- |\n| `string` | Strings, such as a title, prompt, or code snippet | No |\n| `number` | Numbers, with optional `min`, `max`, `step`, `integer` | Yes |\n| `boolean` | On/off switches | Yes (hold) |\n| `color` | CSS color strings | Yes |\n| `enum` | A choice between `variants`, each with its own nested schema | Opt-in (hold) |\n| `array` | Lists of numbers, colors, enums and more | No |\n| `asset` | Media sources, with optional `assetType` | No |\n| `font-family` | CSS font family | No |\n| `font-weight` | Font weight | Yes |\n| `translate`, `scale`, `rotation-css`, `rotation-degrees`, `transform-origin` | Transforms | Yes |\n| `uv-coordinate` | A normalized `[x, y]` point on the element | Yes |\n| `svg-path` | SVG path data | Yes |\n| `remotion-captions` | `Caption[]` data | No |\n| `hidden` | A value kept out of the controls | β€” |\n\nEvery field needs a `default` and should have a `description`, which Studio shows as the label.\nSet `keyframable: false` to show a static control.\n\nExpose content and per-instance appearance, such as the text and an accent color.\nDo not add fields for `style.translate`, `style.scale`, `style.rotate`, `style.transformOrigin` and `style.opacity`: `Interactive.create()` adds them automatically.\n\nTo make CSS properties of the root editable per instance, spread the built-in schema fragments:\n\n```tsx\nconst cardSchema = {\n ...Interactive.textSchema, // style.color, style.fontSize, style.fontWeight, ...\n ...Interactive.backgroundSchema, // style.backgroundColor\n ...Interactive.borderRadiusSchema, // style.borderRadius, ...\n} as const satisfies InteractivitySchema;\n```\n\nAlso available: `Interactive.borderSchema`, and `Interactive.captionsSchema` for components that accept captions.\nFor components that accept `React.ReactNode` children, add `...Interactive.childrenSchema`.\nIt provides controls for children content and may evolve to support richer content.\nCurrently, it uses a string field labeled \"Text\" with a default of `''`.\nIf a component requires string-only children, declare an explicit `children` field with `type: 'string'` instead.\n`Interactive.textSchema` controls typography styles; `childrenSchema` controls content.\nThe children fragment is not included in `baseSchema` or automatically added to custom components.\nNested markup and computed children are currently read-only.\n`text-content` is a deprecated alias for the `string` field type.\nSee [`InteractivitySchema`](https://www.remotion.dev/docs/interactivity-schema) for all options.\n\n## Make an HTML element interactive using `Interactive`\n\nEvery HTML and SVG element (except ``, it already is interactive) such as `
` can be turned interactive using `Interactive`:\n\n```tsx title=\"Interactive elements\"\n\n Hello\n\n```\n\nUse this for text or graphics that need independent controls. Keep layout-only\ncontainers and decorative internals as plain HTML; an interactive component\nalready provides controls for its root.\n\n## Prefer inline text\n\nIf text is fixed and only used once, write it directly inside the interactive element instead of extracting it into a constant.\n\n```tsx title=\"Inline text\"\n// πŸ‘ Fixed copy stays editable\n\n Remotion Best Practices\n\n```\n\nUse a prop or variable only when the text is dynamic or reused.\n\n## Give interactive elements a descriptive name\n\nAdd a `name` prop to elements to make them easily identifyable.\nAvoid computed names, hardcode them.\n\n```tsx title=\"Interactive names\"\n<>\n \n Launch day\n \n \n