{"id":28279,"plugin_id":"plugins~Plugin_efd07789186881918253a50acfc32762","kind":"skill","collection_source":"plugin_package","comparison_source":"plugin_package","observed_at":"2026-10-08T18:03:26.537Z","digest":"1c58052dfd54bbcbf1e3499448976d954ac8bbaafc4a885d2cd3dc9a2ab75d83","against":25857,"payload":{"description":"Content, animation and effects best practices","included_files":[{"relative_path":"3d.md","size_in_bytes":2292},{"relative_path":"agents/openai.yaml","size_in_bytes":310},{"relative_path":"assets/remotion-icon.svg","size_in_bytes":1303},{"relative_path":"audio-visualization.md","size_in_bytes":4892},{"relative_path":"audio.md","size_in_bytes":4154},{"relative_path":"calculate-metadata.md","size_in_bytes":3350},{"relative_path":"compositions.md","size_in_bytes":4924},{"relative_path":"connected-compositions.md","size_in_bytes":4937},{"relative_path":"cropping.md","size_in_bytes":1270},{"relative_path":"effects.md","size_in_bytes":10701},{"relative_path":"embedding-videos.md","size_in_bytes":3725},{"relative_path":"ffmpeg.md","size_in_bytes":1112},{"relative_path":"gifs.md","size_in_bytes":3783},{"relative_path":"google-fonts.md","size_in_bytes":1714},{"relative_path":"html-in-canvas.md","size_in_bytes":2976},{"relative_path":"images.md","size_in_bytes":1568},{"relative_path":"light-leaks.md","size_in_bytes":3148},{"relative_path":"local-fonts.md","size_in_bytes":1533},{"relative_path":"lottie.md","size_in_bytes":1806},{"relative_path":"measuring-dom-nodes.md","size_in_bytes":995},{"relative_path":"measuring-text.md","size_in_bytes":2801},{"relative_path":"motion-blur.md","size_in_bytes":2039},{"relative_path":"multi-scene-video.md","size_in_bytes":3213},{"relative_path":"parameters.md","size_in_bytes":2403},{"relative_path":"remotion-maps/REFERENCE.md","size_in_bytes":1030},{"relative_path":"remotion-maps/agents/openai.yaml","size_in_bytes":293},{"relative_path":"remotion-maps/assets/remotion-icon.svg","size_in_bytes":1303},{"relative_path":"remotion-maps/techniques/cesium/TECHNIQUE.md","size_in_bytes":3909},{"relative_path":"remotion-maps/techniques/cesium/assets/cesium-path.json","size_in_bytes":12329},{"relative_path":"remotion-maps/techniques/cesium/assets/city-path.json","size_in_bytes":223},{"relative_path":"remotion-maps/techniques/cesium/assets/flight-path.ts","size_in_bytes":1240},{"relative_path":"remotion-maps/techniques/cesium/assets/sample-river.geojson","size_in_bytes":6409},{"relative_path":"remotion-maps/techniques/cesium/references/3d-data-sources.md","size_in_bytes":1451},{"relative_path":"remotion-maps/techniques/cesium/references/3d-flyover-architecture.md","size_in_bytes":7887},{"relative_path":"remotion-maps/techniques/cesium/references/3d-troubleshooting.md","size_in_bytes":6741},{"relative_path":"remotion-maps/techniques/cesium/scripts/prep-cesium-path.mjs","size_in_bytes":5561},{"relative_path":"remotion-maps/techniques/mapbox/TECHNIQUE.md","size_in_bytes":13128},{"relative_path":"remotion-maps/techniques/mapbox/references/render-stability.md","size_in_bytes":3639},{"relative_path":"remotion-maps/techniques/maplibre/TECHNIQUE.md","size_in_bytes":13843},{"relative_path":"remotion-maps/techniques/maplibre/references/render-stability.md","size_in_bytes":3639},{"relative_path":"remotion-maps/techniques/maptiler/TECHNIQUE.md","size_in_bytes":4518},{"relative_path":"remotion-maps/techniques/maptiler/assets/MapTilerVectorElement.ts","size_in_bytes":2183},{"relative_path":"remotion-maps/techniques/maptiler/assets/sample-data/country-meta.json","size_in_bytes":333134},{"relative_path":"remotion-maps/techniques/maptiler/assets/sample-data/yarlung-flow.json","size_in_bytes":13082},{"relative_path":"remotion-maps/techniques/maptiler/assets/tokens.ts","size_in_bytes":1256},{"relative_path":"remotion-maps/techniques/maptiler/references/map-data-sources.md","size_in_bytes":4798},{"relative_path":"remotion-maps/techniques/maptiler/references/map-explainer-architecture.md","size_in_bytes":6871},{"relative_path":"remotion-maps/techniques/maptiler/references/map-geo-prep.md","size_in_bytes":4098},{"relative_path":"remotion-maps/techniques/maptiler/references/render-stability.md","size_in_bytes":3639},{"relative_path":"remotion-maps/techniques/maptiler/scripts/prep-geo.mjs","size_in_bytes":7553},{"relative_path":"remotion-maps/techniques/static-map/TECHNIQUE.md","size_in_bytes":1083},{"relative_path":"sequencing.md","size_in_bytes":2766},{"relative_path":"sfx.md","size_in_bytes":1823},{"relative_path":"silence-detection.md","size_in_bytes":2593},{"relative_path":"text-highlights.md","size_in_bytes":1809},{"relative_path":"timing-props.md","size_in_bytes":3535},{"relative_path":"timing.md","size_in_bytes":3315},{"relative_path":"transitions.md","size_in_bytes":7600},{"relative_path":"video-editing.md","size_in_bytes":6604},{"relative_path":"voiceover.md","size_in_bytes":3594}],"name":"remotion-markup","skill_md_contents":"---\nname: remotion-markup\ndescription: Content, animation and effects best practices\nversion: 4.0.534\n---\n\nThis is guidance for writing Remotion React Markup.\nIf this is not relevant, load Remotion Best Practices instead.\n\n## Preserve user changes\n\nUsers may make edits in the code outside of the conversation.\n\nIf you detect a surprising change made in the meanwhile, don't overwrite it, assume it was intentional or ask for confirmation.\n\n## General rules\n\nInside a composition or scene component, get `fps` from `useVideoConfig()` for\nall seconds-to-frames calculations, including timing props such as `from`,\n`trimBefore`, `durationInFrames`, and `premountFor`. Keeping the expression on\nthe JSX node, such as `trimBefore={4 * fps}`, lets Studio edit the timing and\nkeeps it correct if the composition frame rate changes.\n\nDrive animations using `useCurrentFrame()` and `interpolate()`.  \nCSS `transition` or `animation` will not render correctly, they need to refactored.  \nTailwind animation class will not render correctly, they need to be refactored.\n\nUse `Easing.bezier()` and `Easing.spring()` to customize timing.\n\nStructure your markup according to Remotion Interactivity Best Practices.\nPrefer `Interactive.withSchema({wrapInSequence: true})` for custom visual components\nwith editable props, and register reusable scenes as connected compositions.\nPut timing directly on components that support it; avoid redundant `<Sequence>` wrappers.\nGive every timed component that supports `premountFor` one second of premounting:\n`premountFor={fps}`, where `fps` comes from `useVideoConfig()`. Apply this to\nmedia, interactive components, `<Sequence>`, `<Series.Sequence>`,\n`<TransitionSeries.Sequence>`, and `<TransitionSeries.Overlay>`, including\ntimed components nested inside scenes. Premount the parent timeline item too\nwhen a nested item needs to mount before the parent starts. A component without\n`premountFor`, such as `<TransitionSeries.Transition>`, needs no substitute.\n\nThe Studio edits the JSX source node that created an item. Author every composition registration, clip, scene, layer and sequence that should be editable independently as its own JSX node, with its editable props inline.\nProgrammatic loops are suitable when the generated instances are intentionally controlled as one source template, not when users need to edit the instances\nseparately.\n\n```tsx\nimport { useCurrentFrame, useVideoConfig, Easing, interpolate, Interactive } from \"remotion\";\n\nexport const FadeIn = () => {\n  const frame = useCurrentFrame();\n  const {fps} = useVideoConfig();\n\n  return (\n    <Interactive.Div\n      name=\"Title\"\n      premountFor={fps}\n      style={{\n        opacity: interpolate(frame, [0, 2 * fps], [0, 1], {\n          extrapolateRight: \"clamp\",\n          extrapolateLeft: \"clamp\",\n          easing: Easing.bezier(0.16, 1, 0.3, 1),\n        }),\n      }}\n    >\n      Hello World!\n    </Interactive.Div>\n  );\n};\n```\n\nKeep the `interpolate()` call inline in the `style` prop.\nUse `scale`, `translate`, `rotate` CSS properties over `transform`.\n\n```tsx\n// 👍 Inline editable keyframes and transform shorthands\nstyle={{\n  scale: interpolate(frame, [0, 100], [0, 1], {\n    extrapolateLeft: 'clamp',\n    extrapolateRight: 'clamp',\n    easing: Easing.spring({damping: 200}),\n    output: 'perceptual-scale' // For `scale` animations, use \"output: 'perceptual-scale'\"\n  }),\n  translate: interpolate(frame, [0, 100], [\"0px 0px\", \"100px 100px\"], {\n    extrapolateLeft: 'clamp',\n    extrapolateRight: 'clamp',\n    easing: Easing.spring({damping: 200}),\n  }),\n  rotate: interpolate(frame, [0, 100], [\"20deg\", \"90deg\"], {\n    extrapolateLeft: 'clamp',\n    extrapolateRight: 'clamp',\n    easing: Easing.spring({damping: 200}),\n  }),\n}}\n\n// 👎 Non-inline values and transform strings become harder to edit in Studio\nconst scale = interpolate(frame, [0, 100], [0, 1]);\n\nstyle={{\n  transform: `scale(${scale})`,\n}}\n```\n\n## Assets\n\nPlace assets in the `public/` folder at your project root.\nUse `staticFile()` to reference files from the `public/` folder.\n\n## Media components\n\nAdd video and audio using `<Video>` and `<Audio>` from `@remotion/media`.  \nAdd images using the `<CanvasImage>` component.\nAdd animated GIFs, APNG, WebP or AVIF images using `<AnimatedImage>`, use `@remotion/gif` if not using Chrome.\nUse `staticFile()` for files in `public/` or pass a remote URL directly:\n\n```tsx\nimport { Audio, Video } from \"@remotion/media\";\nimport { staticFile, CanvasImage, AnimatedImage, useVideoConfig } from \"remotion\";\n\nexport const MyComposition = () => {\n  const {fps} = useVideoConfig();\n\n  return (\n    <>\n      <Video src={staticFile(\"video.mp4\")} premountFor={fps} style={{ opacity: 0.5 }} />\n      <Audio src={staticFile(\"audio.mp3\")} premountFor={fps} />\n      <CanvasImage\n        src={staticFile(\"logo.png\")}\n        premountFor={fps}\n        style={{ width: 100, height: 100 }}\n      />\n      <Video src=\"https://remotion.media/video.mp4\" premountFor={fps} />\n      <AnimatedImage src={staticFile('nyancat.gif')} premountFor={fps} />\n    </>\n  );\n};\n```\n\nIf the composition is primarily a timeline of video or audio clips, read\n[video-editing.md](video-editing.md) before choosing its source structure.\n\n## Example scene\n\nA background video with a lower third.\nThe lower third is an interactive component with its own timeline, registered as a [connected composition](connected-compositions.md).\nIts text is passed as `children` and `accentColor` is an editable prop.\nThe fade-in is keyframed inline at the call site.\n\n```tsx\n// MyScene.tsx\nimport { Video } from \"@remotion/media\";\nimport { Easing, interpolate, useCurrentFrame, useVideoConfig } from \"remotion\";\nimport { LowerThird } from \"./LowerThird\";\n\nexport const MyScene = () => {\n  const { fps } = useVideoConfig();\n  const frame = useCurrentFrame();\n\n  return (\n    <>\n      <Video\n        name=\"Background\"\n        src=\"https://remotion.media/video.mp4\"\n        premountFor={fps}\n        objectFit=\"cover\"\n        style={{\n          position: \"absolute\",\n          width: \"100%\",\n          height: \"100%\",\n        }}\n      />\n      <LowerThird\n        name=\"Lower third\"\n        from={1 * fps}\n        premountFor={fps}\n        accentColor=\"#0b84f3\"\n        style={{\n          opacity: interpolate(frame, [1 * fps, 2 * fps], [0, 1], {\n            extrapolateRight: \"clamp\",\n            extrapolateLeft: \"clamp\",\n            easing: Easing.bezier(0.16, 1, 0.3, 1),\n          }),\n        }}\n      >\n        Jane Doe, Product Designer\n      </LowerThird>\n    </>\n  );\n};\n```\n\n```tsx\n// LowerThird.tsx\nimport type React from \"react\";\nimport { Interactive, type InteractivitySchema } from \"remotion\";\n\ntype LowerThirdProps = {\n  readonly children: string;\n  readonly accentColor: string;\n  readonly style?: React.CSSProperties;\n};\n\nconst LowerThirdInner: React.FC<LowerThirdProps> = ({\n  children,\n  accentColor,\n  style,\n}) => {\n  return (\n    <Interactive.Div\n      style={{\n        position: \"absolute\",\n        left: 80,\n        bottom: 80,\n        display: \"flex\",\n        alignItems: \"center\",\n        gap: 20,\n        backgroundColor: \"white\",\n        borderRadius: 16,\n        padding: \"20px 32px\",\n        color: \"black\",\n        fontFamily: \"Helvetica, Arial, sans-serif\",\n        fontSize: 48,\n        fontWeight: 600,\n        ...style,\n      }}\n    >\n      <div\n        style={{\n          width: 8,\n          alignSelf: \"stretch\",\n          borderRadius: 4,\n          backgroundColor: accentColor,\n        }}\n      />\n      {children}\n    </Interactive.Div>\n  );\n};\n\nconst lowerThirdSchema = {\n  children: { type: \"text-content\", default: \"\", description: \"Text\" },\n  accentColor: {\n    type: \"color\",\n    default: \"#0b84f3\",\n    description: \"Accent color\",\n  },\n} as const satisfies InteractivitySchema;\n\nexport const LowerThird = Interactive.withSchema({\n  Component: LowerThirdInner,\n  componentName: \"<LowerThird>\",\n  schema: lowerThirdSchema,\n  wrapInSequence: true,\n});\n```\n\n```tsx\n// Root.tsx\nimport { Composition } from \"remotion\";\nimport { LowerThird } from \"./LowerThird\";\nimport { MyScene } from \"./MyScene\";\n\nexport const RemotionRoot: React.FC = () => {\n  return (\n    <>\n      <Composition\n        id=\"MyScene\"\n        component={MyScene}\n        durationInFrames={60}\n        fps={30}\n        width={1280}\n        height={720}\n      />\n      <Composition\n        id=\"LowerThird\"\n        component={LowerThird}\n        durationInFrames={30}\n        fps={30}\n        width={1280}\n        height={720}\n        defaultProps={{\n          children: \"Jane Doe, Product Designer\",\n          accentColor: \"#0b84f3\",\n        }}\n      />\n    </>\n  );\n};\n```\n\n## Delaying, trimming\n\nPut timing directly on components that support it. See [Timing props](./timing-props.md) for the supported props, examples, and order of operations.\n\n## Maps\n\nSee [Remotion Maps](./remotion-maps/REFERENCE.md) if wanting to include maps in the video.\n\n## Text highlights and annotations\n\nSee [text-highlights.md](text-highlights.md) for text highlights (highlight markers), circles, underlines, strike-throughs, crossed-off text, boxes.\n\n## Multi-scene videos\n\nSee [multi-scene-video.md](multi-scene-video.md) if planning to make a video with multiple subsequent scenes.\n\n## Connected compositions\n\nWhen a scene or group of layers deserves its own editable timeline, follow [connected-compositions.md](connected-compositions.md). Prefer this structure for substantial scenes in a multi-scene video.\n\n### Pre-compose action\n\nFor a Studio request such as `Pre-compose Ambient glow (src/BarChart.tsx:134)`, find the selected sequence markup at the given location. Make a connected composition, following [connected-compositions.md](connected-compositions.md): extract the markup into a named component, preferably make it interactive with `Interactive.withSchema({wrapInSequence: true})`, and register the same exported component reference with a unique `<Composition>` in the root. Render the interactive component directly with its timing props, or as the only child of a sequence when that wrapper has a purpose. If the selected node is already a sequence, keep its props and extract its children. The registration needs dimensions, fps, duration, and `defaultProps` equivalent to its parent use. A component extraction without a registered composition does not complete a pre-compose request.\n\nCarry inherited styles such as `fontFamily` and font loading into the extracted\ncomponent; see [parent independence](connected-compositions.md#make-the-component-independent-of-its-parent).\n\n## Voiceover\n\nSee [voiceover.md](voiceover.md) for adding an AI-generated voiceover to Remotion compositions using ElevenLabs TTS.\n\n## Embedding Videos\n\nSee [embedding-videos.md](embedding-videos.md) for advanced knowledge about embedding videos - trimming, volume, speed, looping, pitch.\n\n## Embedding Audio\n\nSee [audio.md](audio.md) for advanced audio features like trimming, volume, speed, pitch.\n\n## Cropping\n\nSee [cropping.md](cropping.md) if needing to crop the visible rectangle of a component.\n\n## Transitions\n\nSee [transitions.md](transitions.md) for scene transition patterns.\n\n## Motion blur\n\nWhen adding motion blur or a movement trail, read [motion-blur.md](motion-blur.md) for the preferred HTML-in-canvas approach, preview requirements, and alternatives.\n\n## Visual and pixel effects\n\nWhen adding a visual effect, first identify the element or group it should affect.\nIf the target component supports `effects` and a built-in effect below matches the\nrequest, prefer that effect over a CSS approximation. For example, apply\n`vignette()` directly to a `<Video>`'s `effects` prop when the vignette should\naffect that video.\n\nThese components accept `effects` directly:\n\n| Import from        | Components                                                                                                                    |\n| ------------------ | ----------------------------------------------------------------------------------------------------------------------------- |\n| `remotion`         | `<Img>`, `<CanvasImage>`, `<AnimatedImage>`, `<Solid>`, `<HtmlInCanvas>`                                                      |\n| `@remotion/media`  | `<Video>`                                                                                                                     |\n| `@remotion/gif`    | `<Gif>`                                                                                                                       |\n| `@remotion/rive`   | `<RemotionRiveCanvas>`                                                                                                        |\n| `@remotion/shapes` | `<Arrow>`, `<Callout>`, `<Circle>`, `<Ellipse>`, `<Heart>`, `<Pie>`, `<Polygon>`, `<Rect>`, `<Spark>`, `<Star>`, `<Triangle>` |\n\nOrdinary HTML elements, `<Interactive.*>` DOM wrappers, `<AbsoluteFill>`, and\n`<Sequence>` do not accept `effects` directly. To apply effects to their content,\nwrap them in `<HtmlInCanvas>` and put the `effects` prop on the wrapper.\n\nFor other elements, prefer regular HTML and CSS where suitable. Consider wrapping\na group in [`<HtmlInCanvas>`](html-in-canvas.md) when post-processing the whole\ngroup is appropriate and the environment supports it.\n\nRead [effects.md](effects.md) before applying an effect for imports, parameters,\nand setup. It also covers reusable custom effects with `createEffect()` when no\nbuilt-in effect matches.\n\n### Available effects\n\nBuilt-in effects from `@remotion/effects`:\n\n- Color and tone: `brightness()`, `colorCorrection()`, `colorKey()`, `contrast()`, `duotone()`, `exposure()`, `grayscale()`, `hue()`, `invert()`, `levels()`, `linearGradient()`, `linearGradientTint()`, `lut()`, `saturation()`, `shadowsHighlights()`, `thermalVision()`, `tint()`, `vibrance()`, `whiteBalance()`.\n- Blur and trails: `blur()`, `lightTrail()`, `linearProgressiveBlur()`, `radialProgressiveBlur()`, `regionBlur()`, `zoomBlur()`.\n- Lighting: `dropShadow()`, `glow()`, `lightLeak()`, `shine()`, `starburst()`, `vignette()`.\n- Distortion and transforms: `barrelDistortion()`, `chromaticAberration()`, `cornerPin()`, `fisheye()`, `mirror()`, `noiseDisplacement()`, `scale()`, `skew()`, `tile()`, `uvTranslate()`, `wave()`, `xyTranslate()`.\n- Textures and patterns: `burlap()`, `checkerboard()`, `contourLines()`, `dotGrid()`, `emboss()`, `flannel()`, `gridlines()`, `halftone()`, `halftoneLinearGradient()`, `lines()`, `liquidContours()`, `noise()`, `paper()`, `pattern()`, `rings()`, `scanlines()`, `speckle()`, `tvSignalOff()`, `waves()`, `whiteNoise()`, `zigzag()`.\n- Edges: `outline()`, `roughenEdges()`, `shrinkwrap()`, `tear()`.\n- Pixelation and transitions: `evolve()`, `linearProgressivePixelate()`, `pixelate()`, `pixelDissolve()`, `radialProgressivePixelate()`, `venetianBlinds()`.\n\n## 3D content\n\nSee [./3d.md](./3d.md) for 3D content in Remotion using Three.js and React Three Fiber.\n\n## Sound effects\n\nWhen needing to use sound effects, load the [./sfx.md](./sfx.md) file for more information.\n\n## Audio visualization\n\nWhen needing to visualize audio (spectrum bars, waveforms, bass-reactive effects), load the [./audio-visualization.md](./audio-visualization.md) file for more information.\n\n## Maps\n\nFor static maps, animated routes and markers, geographic explainers, Mapbox, MapLibre, MapTiler, GeoJSON, or 3D geographic flyovers, load [Remotion Maps](./remotion-maps/REFERENCE.md).\n\n## Captions\n\nWhen dealing with captions or subtitles, load the Remotion Captions skill for more information.\n\n## Google Fonts\n\nIs the recommended way to load fonts in Remotion. See [google-fonts.md](google-fonts.md) for how to load Google Fonts.\n\n## Local fonts\n\nSee [local-fonts.md](local-fonts.md) for how to load local fonts.\n\n## GIFs\n\nSee [gifs.md](gifs.md) for how to display GIFs synchronized with Remotion's timeline.\n\n## Advanced Images\n\nSee [images.md](images.md) for sizing and positioning images, dynamic image paths, and getting image dimensions.\n\n## Lottie animations\n\nSee [lottie.md](lottie.md) for embedding Lottie animations in Remotion.\n\n## Timing\n\nSee [timing.md](timing.md) for more timing techniques for `interpolate()`.\n\n## Parameterized videos\n\nSee [parameters.md](parameters.md) for making a composition parametrizable by adding a Zod schema.\n\n## Measuring DOM nodes\n\nSee [measuring-dom-nodes.md](measuring-dom-nodes.md) for measuring DOM element dimensions in Remotion.\n\n## Measuring text\n\nSee [measuring-text.md](measuring-text.md) for measuring text dimensions, fitting text to containers, and checking overflow.\n\n## Using FFmpeg\n\nFor some video operations, such as trimming videos or detecting silence, FFmpeg should be used. Load the [./ffmpeg.md](./ffmpeg.md) file for more information.\n\n## Silence detection\n\nWhen needing to detect and trim silent segments from video or audio files, load the [./silence-detection.md](./silence-detection.md) file.\n\n## Dynamic duration, dimensions and data\n\nSee [calculate-metadata.md](calculate-metadata.md) for dynamically set composition duration, dimensions, and props.\n\n## Compositions and stills\n\nBefore registering `<Composition>` or `<Still>` elements, read [compositions.md](compositions.md) for source-editable registrations, folders, default props and nesting. For Studio navigation into a scene's own timeline, use [connected compositions](connected-compositions.md).\n\n## Advanced sequencing\n\nSee [sequencing.md](sequencing.md) for more sequencing patterns - delay, trim, limit duration of items.\n\n## Install modules\n\nUse `npx remotion add` to add new packages with the right version:\n\n```\nnpx remotion add @remotion/media\n```\n\nThis goes for `@remotion/*` packages, `mediabunny`, `@mediabunny/*`, `zod`, and `@huggingface/transformers`.\n\n## Visual checks\n\nWhen a visual check is useful, open the Remotion Studio for an interactive preview.\n\nYou can also use Rendering to inspect one or several frames as images.\n"},"changes":[{"path":"/included_files","type":"changed","before":[{"relative_path":"3d.md","size_in_bytes":2292},{"relative_path":"agents/openai.yaml","size_in_bytes":310},{"relative_path":"assets/remotion-icon.svg","size_in_bytes":1303},{"relative_path":"audio-visualization.md","size_in_bytes":4892},{"relative_path":"audio.md","size_in_bytes":3993},{"relative_path":"calculate-metadata.md","size_in_bytes":3350},{"relative_path":"compositions.md","size_in_bytes":4924},{"relative_path":"connected-compositions.md","size_in_bytes":3887},{"relative_path":"cropping.md","size_in_bytes":1060},{"relative_path":"effects.md","size_in_bytes":8954},{"relative_path":"embedding-videos.md","size_in_bytes":3778},{"relative_path":"ffmpeg.md","size_in_bytes":1099},{"relative_path":"gifs.md","size_in_bytes":3783},{"relative_path":"google-fonts.md","size_in_bytes":1714},{"relative_path":"html-in-canvas.md","size_in_bytes":3626},{"relative_path":"images.md","size_in_bytes":1568},{"relative_path":"light-leaks.md","size_in_bytes":3212},{"relative_path":"local-fonts.md","size_in_bytes":1533},{"relative_path":"lottie.md","size_in_bytes":1806},{"relative_path":"measuring-dom-nodes.md","size_in_bytes":995},{"relative_path":"measuring-text.md","size_in_bytes":2801},{"relative_path":"motion-blur.md","size_in_bytes":1964},{"relative_path":"multi-scene-video.md","size_in_bytes":2660},{"relative_path":"parameters.md","size_in_bytes":2403},{"relative_path":"remotion-maps/REFERENCE.md","size_in_bytes":1030},{"relative_path":"remotion-maps/agents/openai.yaml","size_in_bytes":293},{"relative_path":"remotion-maps/assets/remotion-icon.svg","size_in_bytes":1303},{"relative_path":"remotion-maps/techniques/cesium/TECHNIQUE.md","size_in_bytes":3909},{"relative_path":"remotion-maps/techniques/cesium/assets/cesium-path.json","size_in_bytes":12329},{"relative_path":"remotion-maps/techniques/cesium/assets/city-path.json","size_in_bytes":223},{"relative_path":"remotion-maps/techniques/cesium/assets/flight-path.ts","size_in_bytes":1240},{"relative_path":"remotion-maps/techniques/cesium/assets/sample-river.geojson","size_in_bytes":6409},{"relative_path":"remotion-maps/techniques/cesium/references/3d-data-sources.md","size_in_bytes":1451},{"relative_path":"remotion-maps/techniques/cesium/references/3d-flyover-architecture.md","size_in_bytes":7887},{"relative_path":"remotion-maps/techniques/cesium/references/3d-troubleshooting.md","size_in_bytes":6741},{"relative_path":"remotion-maps/techniques/cesium/scripts/prep-cesium-path.mjs","size_in_bytes":5561},{"relative_path":"remotion-maps/techniques/mapbox/TECHNIQUE.md","size_in_bytes":13166},{"relative_path":"remotion-maps/techniques/mapbox/references/render-stability.md","size_in_bytes":3639},{"relative_path":"remotion-maps/techniques/maplibre/TECHNIQUE.md","size_in_bytes":13881},{"relative_path":"remotion-maps/techniques/maplibre/references/render-stability.md","size_in_bytes":3639},{"relative_path":"remotion-maps/techniques/maptiler/TECHNIQUE.md","size_in_bytes":4518},{"relative_path":"remotion-maps/techniques/maptiler/assets/MapTilerVectorElement.ts","size_in_bytes":2183},{"relative_path":"remotion-maps/techniques/maptiler/assets/sample-data/country-meta.json","size_in_bytes":333134},{"relative_path":"remotion-maps/techniques/maptiler/assets/sample-data/yarlung-flow.json","size_in_bytes":13082},{"relative_path":"remotion-maps/techniques/maptiler/assets/tokens.ts","size_in_bytes":1256},{"relative_path":"remotion-maps/techniques/maptiler/references/map-data-sources.md","size_in_bytes":4798},{"relative_path":"remotion-maps/techniques/maptiler/references/map-explainer-architecture.md","size_in_bytes":6871},{"relative_path":"remotion-maps/techniques/maptiler/references/map-geo-prep.md","size_in_bytes":4098},{"relative_path":"remotion-maps/techniques/maptiler/references/render-stability.md","size_in_bytes":3639},{"relative_path":"remotion-maps/techniques/maptiler/scripts/prep-geo.mjs","size_in_bytes":7553},{"relative_path":"remotion-maps/techniques/static-map/TECHNIQUE.md","size_in_bytes":1083},{"relative_path":"sequencing.md","size_in_bytes":3829},{"relative_path":"sfx.md","size_in_bytes":1808},{"relative_path":"silence-detection.md","size_in_bytes":2548},{"relative_path":"text-highlights.md","size_in_bytes":1809},{"relative_path":"timing.md","size_in_bytes":3315},{"relative_path":"transitions.md","size_in_bytes":6882},{"relative_path":"video-editing.md","size_in_bytes":4245},{"relative_path":"voiceover.md","size_in_bytes":3294}],"after":[{"relative_path":"3d.md","size_in_bytes":2292},{"relative_path":"agents/openai.yaml","size_in_bytes":310},{"relative_path":"assets/remotion-icon.svg","size_in_bytes":1303},{"relative_path":"audio-visualization.md","size_in_bytes":4892},{"relative_path":"audio.md","size_in_bytes":4154},{"relative_path":"calculate-metadata.md","size_in_bytes":3350},{"relative_path":"compositions.md","size_in_bytes":4924},{"relative_path":"connected-compositions.md","size_in_bytes":4937},{"relative_path":"cropping.md","size_in_bytes":1270},{"relative_path":"effects.md","size_in_bytes":10701},{"relative_path":"embedding-videos.md","size_in_bytes":3725},{"relative_path":"ffmpeg.md","size_in_bytes":1112},{"relative_path":"gifs.md","size_in_bytes":3783},{"relative_path":"google-fonts.md","size_in_bytes":1714},{"relative_path":"html-in-canvas.md","size_in_bytes":2976},{"relative_path":"images.md","size_in_bytes":1568},{"relative_path":"light-leaks.md","size_in_bytes":3148},{"relative_path":"local-fonts.md","size_in_bytes":1533},{"relative_path":"lottie.md","size_in_bytes":1806},{"relative_path":"measuring-dom-nodes.md","size_in_bytes":995},{"relative_path":"measuring-text.md","size_in_bytes":2801},{"relative_path":"motion-blur.md","size_in_bytes":2039},{"relative_path":"multi-scene-video.md","size_in_bytes":3213},{"relative_path":"parameters.md","size_in_bytes":2403},{"relative_path":"remotion-maps/REFERENCE.md","size_in_bytes":1030},{"relative_path":"remotion-maps/agents/openai.yaml","size_in_bytes":293},{"relative_path":"remotion-maps/assets/remotion-icon.svg","size_in_bytes":1303},{"relative_path":"remotion-maps/techniques/cesium/TECHNIQUE.md","size_in_bytes":3909},{"relative_path":"remotion-maps/techniques/cesium/assets/cesium-path.json","size_in_bytes":12329},{"relative_path":"remotion-maps/techniques/cesium/assets/city-path.json","size_in_bytes":223},{"relative_path":"remotion-maps/techniques/cesium/assets/flight-path.ts","size_in_bytes":1240},{"relative_path":"remotion-maps/techniques/cesium/assets/sample-river.geojson","size_in_bytes":6409},{"relative_path":"remotion-maps/techniques/cesium/references/3d-data-sources.md","size_in_bytes":1451},{"relative_path":"remotion-maps/techniques/cesium/references/3d-flyover-architecture.md","size_in_bytes":7887},{"relative_path":"remotion-maps/techniques/cesium/references/3d-troubleshooting.md","size_in_bytes":6741},{"relative_path":"remotion-maps/techniques/cesium/scripts/prep-cesium-path.mjs","size_in_bytes":5561},{"relative_path":"remotion-maps/techniques/mapbox/TECHNIQUE.md","size_in_bytes":13128},{"relative_path":"remotion-maps/techniques/mapbox/references/render-stability.md","size_in_bytes":3639},{"relative_path":"remotion-maps/techniques/maplibre/TECHNIQUE.md","size_in_bytes":13843},{"relative_path":"remotion-maps/techniques/maplibre/references/render-stability.md","size_in_bytes":3639},{"relative_path":"remotion-maps/techniques/maptiler/TECHNIQUE.md","size_in_bytes":4518},{"relative_path":"remotion-maps/techniques/maptiler/assets/MapTilerVectorElement.ts","size_in_bytes":2183},{"relative_path":"remotion-maps/techniques/maptiler/assets/sample-data/country-meta.json","size_in_bytes":333134},{"relative_path":"remotion-maps/techniques/maptiler/assets/sample-data/yarlung-flow.json","size_in_bytes":13082},{"relative_path":"remotion-maps/techniques/maptiler/assets/tokens.ts","size_in_bytes":1256},{"relative_path":"remotion-maps/techniques/maptiler/references/map-data-sources.md","size_in_bytes":4798},{"relative_path":"remotion-maps/techniques/maptiler/references/map-explainer-architecture.md","size_in_bytes":6871},{"relative_path":"remotion-maps/techniques/maptiler/references/map-geo-prep.md","size_in_bytes":4098},{"relative_path":"remotion-maps/techniques/maptiler/references/render-stability.md","size_in_bytes":3639},{"relative_path":"remotion-maps/techniques/maptiler/scripts/prep-geo.mjs","size_in_bytes":7553},{"relative_path":"remotion-maps/techniques/static-map/TECHNIQUE.md","size_in_bytes":1083},{"relative_path":"sequencing.md","size_in_bytes":2766},{"relative_path":"sfx.md","size_in_bytes":1823},{"relative_path":"silence-detection.md","size_in_bytes":2593},{"relative_path":"text-highlights.md","size_in_bytes":1809},{"relative_path":"timing-props.md","size_in_bytes":3535},{"relative_path":"timing.md","size_in_bytes":3315},{"relative_path":"transitions.md","size_in_bytes":7600},{"relative_path":"video-editing.md","size_in_bytes":6604},{"relative_path":"voiceover.md","size_in_bytes":3594}]},{"path":"/skill_md_contents","type":"changed","before":"---\nname: remotion-markup\ndescription: Content, animation and effects best practices\nversion: 4.0.530\n---\n\nThis is guidance for writing Remotion React Markup.\nIf this is not relevant, load Remotion Best Practices instead.\n\n## Preserve user changes\n\nUsers may make edits in the code outside of the conversation.\n\nIf you detect a surprising change made in the meanwhile, don't overwrite it, assume it was intentional or ask for confirmation.\n\n## General rules\n\nDrive animations using `useCurrentFrame()` and `interpolate()`.  \nCSS `transition` or `animation` will not render correctly, they need to refactored.  \nTailwind animation class will not render correctly, they need to be refactored.\n\nUse `Easing.bezier()` and `Easing.spring()` to customize timing.\n\nStructure your markup according to Remotion Interactivity Best Practices\n\nThe Studio edits the JSX source node that created an item. Author every\ncomposition registration, clip, scene, layer and sequence that should be\neditable independently as its own JSX node, with its editable props inline.\nProgrammatic loops are suitable when the generated instances are intentionally\ncontrolled as one source template, not when users need to edit the instances\nseparately.\n\n```tsx\nimport { useCurrentFrame, Easing, interpolate, Interactive } from \"remotion\";\n\nexport const FadeIn = () => {\n  const frame = useCurrentFrame();\n\n  return (\n    <Interactive.Div\n      name=\"Title\"\n      style={{\n        opacity: interpolate(frame, [0, 2 * fps], [0, 1], {\n          extrapolateRight: \"clamp\",\n          extrapolateLeft: \"clamp\",\n          easing: Easing.bezier(0.16, 1, 0.3, 1),\n        }),\n      }}\n    >\n      Hello World!\n    </Interactive.Div>\n  );\n};\n```\n\nKeep the `interpolate()` call inline in the `style` prop.\nUse `scale`, `translate`, `rotate` CSS properties over `transform`.\n\n```tsx\n// 👍 Inline editable keyframes and transform shorthands\nstyle={{\n  scale: interpolate(frame, [0, 100], [0, 1], {\n    extrapolateLeft: 'clamp',\n    extrapolateRight: 'clamp',\n    easing: Easing.spring({damping: 200}),\n    output: 'perceptual-scale' // For `scale` animations, use \"output: 'perceptual-scale'\"\n  }),\n  translate: interpolate(frame, [0, 100], [\"0px 0px\", \"100px 100px\"], {\n    extrapolateLeft: 'clamp',\n    extrapolateRight: 'clamp',\n    easing: Easing.spring({damping: 200}),\n  }),\n  rotate: interpolate(frame, [0, 100], [\"20deg\", \"90deg\"], {\n    extrapolateLeft: 'clamp',\n    extrapolateRight: 'clamp',\n    easing: Easing.spring({damping: 200}),\n  }),\n}}\n\n// 👎 Non-inline values and transform strings become harder to edit in Studio\nconst scale = interpolate(frame, [0, 100], [0, 1]);\n\nstyle={{\n  transform: `scale(${scale})`,\n}}\n```\n\n## Assets\n\nPlace assets in the `public/` folder at your project root.\nUse `staticFile()` to reference files from the `public/` folder.\n\n## Media components\n\nAdd video and audio using `<Video>` and `<Audio>` from `@remotion/media`.  \nAdd images using the `<CanvasImage>` component.\nAdd animated GIFs, APNG, WebP or AVIF images using `<AnimatedImage>`, use `@remotion/gif` if not using Chrome.\nUse `staticFile()` for files in `public/` or pass a remote URL directly:\n\n```tsx\nimport { Audio, Video } from \"@remotion/media\";\nimport { staticFile, CanvasImage, AnimatedImage } from \"remotion\";\n\nexport const MyComposition = () => {\n  return (\n    <>\n      <Video src={staticFile(\"video.mp4\")} style={{ opacity: 0.5 }} />\n      <Audio src={staticFile(\"audio.mp3\")} />\n      <CanvasImage\n        src={staticFile(\"logo.png\")}\n        style={{ width: 100, height: 100 }}\n      />\n      <Video src=\"https://remotion.media/video.mp4\" />\n      <AnimatedImage src={staticFile('nyancat.gif')} />\n    </>\n  );\n};\n```\n\nIf the composition is primarily a timeline of video or audio clips, read\n[video-editing.md](video-editing.md) before choosing its source structure.\n\n## Example scene\n\n```tsx\nimport {\n  AbsoluteFill,\n  Easing,\n  Interactive,\n  interpolate,\n  useCurrentFrame,\n  useVideoConfig\n} from \"remotion\";\n\nexport const Empty = () => {\n  const {fps} = useVideoConfig();\n  const frame = useCurrentFrame();\n\n  return (\n    <AbsoluteFill\n      name=\"Scene\"\n      style={{\n        display: 'flex',\n        justifyContent: 'center',\n        alignItems: 'center',\n        backgroundColor: 'white'\n      }}\n    >\n      <Interactive.Div\n        name=\"Title\"\n        style={{\n          opacity: interpolate(frame, [1 * fps, 2 * fps], [0, 1], {\n            extrapolateRight: \"clamp\",\n            extrapolateLeft: \"clamp\",\n            easing: Easing.bezier(0.16, 1, 0.3, 1),\n          }),\n          fontSize: 88\n        }}\n      >\n        Title\n      </Interactive.Div>\n      <Interactive.Div\n        name=\"Subtitle\"\n        style={{\n          opacity: interpolate(frame, [2 * fps, 3 * fps, 8 * fps, 10 * fps], [0, 1, 1, 0], {\n            extrapolateRight: \"clamp\",\n            extrapolateLeft: \"clamp\",\n            easing: [Easing.bezier(0.16, 1, 0.3, 1), Easing.linear, Easing.bezier(0.16, 1, 0.3, 1)],\n          }),\n          fontSize: 32\n        }}\n      >\n        Subtitle\n      </Interactive.Div>\n    </AbsoluteFill>\n  );\n}\n```\n\n## Delaying, trimming\n\nMost components (`<AbsoluteFill>`, `<Interactive.*>` `<Img>`, `<AnimatedImage>`, `<CanvasImage>`, `<HtmlInCanvas>`, `<Solid>`, `<Sequence>` from `remotion`, `<Video>` and `<Audio>` from `@remotion/media`, `<Gif>`, and more) support the following props:\n\n### from\n\n```tsx\n<Img from={1 * fps} {/* ... */}/>\n<Video from={1 * fps} {/* ... */}/>\n<Interactive.Div from={1 * fps} {/* ... */}/>\n```\n\nWhen the element starts appearing in the timelien.\n\n### durationInFrames\n\n```tsx\n<Img durationInFrames={20 * fps} {/* ... */}/>\n<Interactive.Div durationInFrames={20 * fps} {/* ... */}/>\n```\n\nFor how long the layer plays in the timeline.  \nFor media, pass the natural duration of the media: `<Video durationInFrames={29.322 * fps}/>`\n\n### `trimBefore`\n\nUseful for components whose internal clock should start later:\n\n```tsx\n// Trim away first 2 seconds of footage\n<Video trimBefore={2 * fps} {/* ... */} />\n\n// `useCurrenFrame()` for children starts at `10 * fps`\n<Sequence trimBefore={10 * fps} {/* ... */} />\n```\n\n### `trimAfter`\n\nEnds the internal clock at a frame. Measured in the same clock as `trimBefore`, so the layer lasts `(trimAfter - trimBefore) / playbackRate` frames in the timeline unless `durationInFrames` is shorter:\n\n```tsx\n// Play the footage from second 2 to second 5\n<Video trimBefore={2 * fps} trimAfter={5 * fps} {/* ... */} />\n\n// Children see frames `10 * fps` through `15 * fps - 1`\n<Sequence trimBefore={10 * fps} trimAfter={15 * fps} {/* ... */} />\n```\n\n### `loop`\n\nRepeats the range between `trimBefore` and `trimAfter`. `durationInFrames` sets the total length. `<Video>` and `<Audio>` may omit `trimAfter` and loop the whole file; other layers need `trimAfter` because they have no intrinsic end:\n\n```tsx\n<Video loop durationInFrames={20 * fps} {/* ... */} />\n<Sequence trimAfter={2 * fps} durationInFrames={20 * fps} loop {/* ... */} />\n```\n\n`<Img>`, `<CanvasImage>`, `<Solid>` and shapes do not support `loop` because their output does not change over time.\n\n### Fallback\n\nIf a component does not support these props, wrap it in`<Sequence>` from `remotion`, which has them.\n\n- `layout=\"absolute-fill\"` makes the Sequence behave like AbsoluteFill\n- `layout=\"none\"` is \"headless\" mode, no wrapper element is used.\n\n## Maps\n\nSee [Remotion Maps](./remotion-maps/REFERENCE.md) if wanting to include maps in the video.\n\n## Text highlights and annotations\n\nSee [text-highlights.md](text-highlights.md) for text highlights (highlight markers), circles, underlines, strike-throughs, crossed-off text, boxes.\n\n## Multi-scene videos\n\nSee [multi-scene-video.md](multi-scene-video.md) if planning to make a video with multiple subsequent scenes.\n\n## Connected compositions\n\nWhen a scene or group of layers deserves its own editable timeline, follow [connected-compositions.md](connected-compositions.md). Prefer this structure for substantial scenes in a multi-scene video.\n\nFor a Studio request such as `Pre-compose Ambient glow (src/BarChart.tsx:134)`, find the selected sequence markup at the given location. Make a connected composition, following [connected-compositions.md](connected-compositions.md): extract the markup into a named component, render one direct instance of it as the only child of a `<Sequence>`, `<Series.Sequence>`, or `<TransitionSeries.Sequence>`, and register that same component reference with a unique `<Composition>` in the root. If the selected node is already a sequence, keep its props and extract its children. The registration needs dimensions, fps, duration, and `defaultProps` equivalent to its parent use. A component extraction without a registered composition does not complete a pre-compose request.\n\nThe extracted component may return a fragment; do not add a DOM wrapper. Preserve sibling order, props, keys, conditional rendering, dimensions, appearance, and timing. Trace values used by the selected markup: move their derivations only when the same scope and lifecycle are preserved, otherwise pass them as props. In particular, moving `useCurrentFrame()` or `useVideoConfig()` across a sequence boundary can change its result; pass the parent value when needed. If the selection or a behavior-preserving connected composition is unclear, ask for clarification instead of guessing.\n\n## Voiceover\n\nSee [voiceover.md](voiceover.md) for adding an AI-generated voiceover to Remotion compositions using ElevenLabs TTS.\n\n## Embedding Videos\n\nSee [embedding-videos.md](embedding-videos.md) for advanced knowledge about embedding videos - trimming, volume, speed, looping, pitch.\n\n## Embedding Audio\n\nSee [audio.md](audio.md) for advanced audio features like trimming, volume, speed, pitch.\n\n## Cropping\n\nSee [cropping.md](cropping.md) if needing to crop the visible rectangle of a component.\n\n## Transitions\n\nSee [transitions.md](transitions.md) for scene transition patterns.\n\n## Motion blur\n\nWhen adding motion blur or a movement trail, read [motion-blur.md](motion-blur.md) for the preferred HTML-in-canvas approach, preview requirements, and alternatives.\n\n## Visual and pixel effects\n\nWhen creating a visual effect, consider whether it is feasible using CSS and HTML, or whether a shader is needed.  \nOrder or preference:\n\n1. Regular HTML + CSS or other web techniques\n2. An effect applied to the element directly (`<Video>`, `<Img>`), or by wrapping the content in [`<HtmlInCanvas>`](html-in-canvas.md), which also accepts `effects`:\n\n- A listed effect via [effects.md](effects.md)\n- A custom `createEffect()` via [effects.md](effects.md) when no preset is available.\n\n## 3D content\n\nSee [./3d.md](./3d.md) for 3D content in Remotion using Three.js and React Three Fiber.\n\n## Sound effects\n\nWhen needing to use sound effects, load the [./sfx.md](./sfx.md) file for more information.\n\n## Audio visualization\n\nWhen needing to visualize audio (spectrum bars, waveforms, bass-reactive effects), load the [./audio-visualization.md](./audio-visualization.md) file for more information.\n\n## Maps\n\nFor static maps, animated routes and markers, geographic explainers, Mapbox, MapLibre, MapTiler, GeoJSON, or 3D geographic flyovers, load [Remotion Maps](./remotion-maps/REFERENCE.md).\n\n## Captions\n\nWhen dealing with captions or subtitles, load the Remotion Captions skill for more information.\n\n## Google Fonts\n\nIs the recommended way to load fonts in Remotion. See [google-fonts.md](google-fonts.md) for how to load Google Fonts.\n\n## Local fonts\n\nSee [local-fonts.md](local-fonts.md) for how to load local fonts.\n\n## GIFs\n\nSee [gifs.md](gifs.md) for how to display GIFs synchronized with Remotion's timeline.\n\n## Advanced Images\n\nSee [images.md](images.md) for sizing and positioning images, dynamic image paths, and getting image dimensions.\n\n## Lottie animations\n\nSee [lottie.md](lottie.md) for embedding Lottie animations in Remotion.\n\n## Timing\n\nSee [timing.md](timing.md) for more timing techniques for `interpolate()`.\n\n## Parameterized videos\n\nSee [parameters.md](parameters.md) for making a composition parametrizable by adding a Zod schema.\n\n## Measuring DOM nodes\n\nSee [measuring-dom-nodes.md](measuring-dom-nodes.md) for measuring DOM element dimensions in Remotion.\n\n## Measuring text\n\nSee [measuring-text.md](measuring-text.md) for measuring text dimensions, fitting text to containers, and checking overflow.\n\n## Using FFmpeg\n\nFor some video operations, such as trimming videos or detecting silence, FFmpeg should be used. Load the [./ffmpeg.md](./ffmpeg.md) file for more information.\n\n## Silence detection\n\nWhen needing to detect and trim silent segments from video or audio files, load the [./silence-detection.md](./silence-detection.md) file.\n\n## Dynamic duration, dimensions and data\n\nSee [calculate-metadata.md](calculate-metadata.md) for dynamically set composition duration, dimensions, and props.\n\n## Compositions and stills\n\nBefore registering `<Composition>` or `<Still>` elements, read [compositions.md](compositions.md) for source-editable registrations, folders, default props and nesting. For Studio navigation into a scene's own timeline, use [connected compositions](connected-compositions.md).\n\n## Advanced sequencing\n\nSee [sequencing.md](sequencing.md) for more sequencing patterns - delay, trim, limit duration of items.\n\n## Install modules\n\nUse `npx remotion add` to add new packages with the right version:\n\n```\nnpx remotion add @remotion/media\n```\n\nThis goes for `@remotion/*` packages, `mediabunny`, `@mediabunny/*`, `zod`, and `@huggingface/transformers`.\n\n## Visual checks\n\nWhen a visual check is useful, open the Remotion Studio for an interactive preview.\n\nYou can also use Rendering to inspect one or several frames as images.\n","after":"---\nname: remotion-markup\ndescription: Content, animation and effects best practices\nversion: 4.0.534\n---\n\nThis is guidance for writing Remotion React Markup.\nIf this is not relevant, load Remotion Best Practices instead.\n\n## Preserve user changes\n\nUsers may make edits in the code outside of the conversation.\n\nIf you detect a surprising change made in the meanwhile, don't overwrite it, assume it was intentional or ask for confirmation.\n\n## General rules\n\nInside a composition or scene component, get `fps` from `useVideoConfig()` for\nall seconds-to-frames calculations, including timing props such as `from`,\n`trimBefore`, `durationInFrames`, and `premountFor`. Keeping the expression on\nthe JSX node, such as `trimBefore={4 * fps}`, lets Studio edit the timing and\nkeeps it correct if the composition frame rate changes.\n\nDrive animations using `useCurrentFrame()` and `interpolate()`.  \nCSS `transition` or `animation` will not render correctly, they need to refactored.  \nTailwind animation class will not render correctly, they need to be refactored.\n\nUse `Easing.bezier()` and `Easing.spring()` to customize timing.\n\nStructure your markup according to Remotion Interactivity Best Practices.\nPrefer `Interactive.withSchema({wrapInSequence: true})` for custom visual components\nwith editable props, and register reusable scenes as connected compositions.\nPut timing directly on components that support it; avoid redundant `<Sequence>` wrappers.\nGive every timed component that supports `premountFor` one second of premounting:\n`premountFor={fps}`, where `fps` comes from `useVideoConfig()`. Apply this to\nmedia, interactive components, `<Sequence>`, `<Series.Sequence>`,\n`<TransitionSeries.Sequence>`, and `<TransitionSeries.Overlay>`, including\ntimed components nested inside scenes. Premount the parent timeline item too\nwhen a nested item needs to mount before the parent starts. A component without\n`premountFor`, such as `<TransitionSeries.Transition>`, needs no substitute.\n\nThe Studio edits the JSX source node that created an item. Author every composition registration, clip, scene, layer and sequence that should be editable independently as its own JSX node, with its editable props inline.\nProgrammatic loops are suitable when the generated instances are intentionally controlled as one source template, not when users need to edit the instances\nseparately.\n\n```tsx\nimport { useCurrentFrame, useVideoConfig, Easing, interpolate, Interactive } from \"remotion\";\n\nexport const FadeIn = () => {\n  const frame = useCurrentFrame();\n  const {fps} = useVideoConfig();\n\n  return (\n    <Interactive.Div\n      name=\"Title\"\n      premountFor={fps}\n      style={{\n        opacity: interpolate(frame, [0, 2 * fps], [0, 1], {\n          extrapolateRight: \"clamp\",\n          extrapolateLeft: \"clamp\",\n          easing: Easing.bezier(0.16, 1, 0.3, 1),\n        }),\n      }}\n    >\n      Hello World!\n    </Interactive.Div>\n  );\n};\n```\n\nKeep the `interpolate()` call inline in the `style` prop.\nUse `scale`, `translate`, `rotate` CSS properties over `transform`.\n\n```tsx\n// 👍 Inline editable keyframes and transform shorthands\nstyle={{\n  scale: interpolate(frame, [0, 100], [0, 1], {\n    extrapolateLeft: 'clamp',\n    extrapolateRight: 'clamp',\n    easing: Easing.spring({damping: 200}),\n    output: 'perceptual-scale' // For `scale` animations, use \"output: 'perceptual-scale'\"\n  }),\n  translate: interpolate(frame, [0, 100], [\"0px 0px\", \"100px 100px\"], {\n    extrapolateLeft: 'clamp',\n    extrapolateRight: 'clamp',\n    easing: Easing.spring({damping: 200}),\n  }),\n  rotate: interpolate(frame, [0, 100], [\"20deg\", \"90deg\"], {\n    extrapolateLeft: 'clamp',\n    extrapolateRight: 'clamp',\n    easing: Easing.spring({damping: 200}),\n  }),\n}}\n\n// 👎 Non-inline values and transform strings become harder to edit in Studio\nconst scale = interpolate(frame, [0, 100], [0, 1]);\n\nstyle={{\n  transform: `scale(${scale})`,\n}}\n```\n\n## Assets\n\nPlace assets in the `public/` folder at your project root.\nUse `staticFile()` to reference files from the `public/` folder.\n\n## Media components\n\nAdd video and audio using `<Video>` and `<Audio>` from `@remotion/media`.  \nAdd images using the `<CanvasImage>` component.\nAdd animated GIFs, APNG, WebP or AVIF images using `<AnimatedImage>`, use `@remotion/gif` if not using Chrome.\nUse `staticFile()` for files in `public/` or pass a remote URL directly:\n\n```tsx\nimport { Audio, Video } from \"@remotion/media\";\nimport { staticFile, CanvasImage, AnimatedImage, useVideoConfig } from \"remotion\";\n\nexport const MyComposition = () => {\n  const {fps} = useVideoConfig();\n\n  return (\n    <>\n      <Video src={staticFile(\"video.mp4\")} premountFor={fps} style={{ opacity: 0.5 }} />\n      <Audio src={staticFile(\"audio.mp3\")} premountFor={fps} />\n      <CanvasImage\n        src={staticFile(\"logo.png\")}\n        premountFor={fps}\n        style={{ width: 100, height: 100 }}\n      />\n      <Video src=\"https://remotion.media/video.mp4\" premountFor={fps} />\n      <AnimatedImage src={staticFile('nyancat.gif')} premountFor={fps} />\n    </>\n  );\n};\n```\n\nIf the composition is primarily a timeline of video or audio clips, read\n[video-editing.md](video-editing.md) before choosing its source structure.\n\n## Example scene\n\nA background video with a lower third.\nThe lower third is an interactive component with its own timeline, registered as a [connected composition](connected-compositions.md).\nIts text is passed as `children` and `accentColor` is an editable prop.\nThe fade-in is keyframed inline at the call site.\n\n```tsx\n// MyScene.tsx\nimport { Video } from \"@remotion/media\";\nimport { Easing, interpolate, useCurrentFrame, useVideoConfig } from \"remotion\";\nimport { LowerThird } from \"./LowerThird\";\n\nexport const MyScene = () => {\n  const { fps } = useVideoConfig();\n  const frame = useCurrentFrame();\n\n  return (\n    <>\n      <Video\n        name=\"Background\"\n        src=\"https://remotion.media/video.mp4\"\n        premountFor={fps}\n        objectFit=\"cover\"\n        style={{\n          position: \"absolute\",\n          width: \"100%\",\n          height: \"100%\",\n        }}\n      />\n      <LowerThird\n        name=\"Lower third\"\n        from={1 * fps}\n        premountFor={fps}\n        accentColor=\"#0b84f3\"\n        style={{\n          opacity: interpolate(frame, [1 * fps, 2 * fps], [0, 1], {\n            extrapolateRight: \"clamp\",\n            extrapolateLeft: \"clamp\",\n            easing: Easing.bezier(0.16, 1, 0.3, 1),\n          }),\n        }}\n      >\n        Jane Doe, Product Designer\n      </LowerThird>\n    </>\n  );\n};\n```\n\n```tsx\n// LowerThird.tsx\nimport type React from \"react\";\nimport { Interactive, type InteractivitySchema } from \"remotion\";\n\ntype LowerThirdProps = {\n  readonly children: string;\n  readonly accentColor: string;\n  readonly style?: React.CSSProperties;\n};\n\nconst LowerThirdInner: React.FC<LowerThirdProps> = ({\n  children,\n  accentColor,\n  style,\n}) => {\n  return (\n    <Interactive.Div\n      style={{\n        position: \"absolute\",\n        left: 80,\n        bottom: 80,\n        display: \"flex\",\n        alignItems: \"center\",\n        gap: 20,\n        backgroundColor: \"white\",\n        borderRadius: 16,\n        padding: \"20px 32px\",\n        color: \"black\",\n        fontFamily: \"Helvetica, Arial, sans-serif\",\n        fontSize: 48,\n        fontWeight: 600,\n        ...style,\n      }}\n    >\n      <div\n        style={{\n          width: 8,\n          alignSelf: \"stretch\",\n          borderRadius: 4,\n          backgroundColor: accentColor,\n        }}\n      />\n      {children}\n    </Interactive.Div>\n  );\n};\n\nconst lowerThirdSchema = {\n  children: { type: \"text-content\", default: \"\", description: \"Text\" },\n  accentColor: {\n    type: \"color\",\n    default: \"#0b84f3\",\n    description: \"Accent color\",\n  },\n} as const satisfies InteractivitySchema;\n\nexport const LowerThird = Interactive.withSchema({\n  Component: LowerThirdInner,\n  componentName: \"<LowerThird>\",\n  schema: lowerThirdSchema,\n  wrapInSequence: true,\n});\n```\n\n```tsx\n// Root.tsx\nimport { Composition } from \"remotion\";\nimport { LowerThird } from \"./LowerThird\";\nimport { MyScene } from \"./MyScene\";\n\nexport const RemotionRoot: React.FC = () => {\n  return (\n    <>\n      <Composition\n        id=\"MyScene\"\n        component={MyScene}\n        durationInFrames={60}\n        fps={30}\n        width={1280}\n        height={720}\n      />\n      <Composition\n        id=\"LowerThird\"\n        component={LowerThird}\n        durationInFrames={30}\n        fps={30}\n        width={1280}\n        height={720}\n        defaultProps={{\n          children: \"Jane Doe, Product Designer\",\n          accentColor: \"#0b84f3\",\n        }}\n      />\n    </>\n  );\n};\n```\n\n## Delaying, trimming\n\nPut timing directly on components that support it. See [Timing props](./timing-props.md) for the supported props, examples, and order of operations.\n\n## Maps\n\nSee [Remotion Maps](./remotion-maps/REFERENCE.md) if wanting to include maps in the video.\n\n## Text highlights and annotations\n\nSee [text-highlights.md](text-highlights.md) for text highlights (highlight markers), circles, underlines, strike-throughs, crossed-off text, boxes.\n\n## Multi-scene videos\n\nSee [multi-scene-video.md](multi-scene-video.md) if planning to make a video with multiple subsequent scenes.\n\n## Connected compositions\n\nWhen a scene or group of layers deserves its own editable timeline, follow [connected-compositions.md](connected-compositions.md). Prefer this structure for substantial scenes in a multi-scene video.\n\n### Pre-compose action\n\nFor a Studio request such as `Pre-compose Ambient glow (src/BarChart.tsx:134)`, find the selected sequence markup at the given location. Make a connected composition, following [connected-compositions.md](connected-compositions.md): extract the markup into a named component, preferably make it interactive with `Interactive.withSchema({wrapInSequence: true})`, and register the same exported component reference with a unique `<Composition>` in the root. Render the interactive component directly with its timing props, or as the only child of a sequence when that wrapper has a purpose. If the selected node is already a sequence, keep its props and extract its children. The registration needs dimensions, fps, duration, and `defaultProps` equivalent to its parent use. A component extraction without a registered composition does not complete a pre-compose request.\n\nCarry inherited styles such as `fontFamily` and font loading into the extracted\ncomponent; see [parent independence](connected-compositions.md#make-the-component-independent-of-its-parent).\n\n## Voiceover\n\nSee [voiceover.md](voiceover.md) for adding an AI-generated voiceover to Remotion compositions using ElevenLabs TTS.\n\n## Embedding Videos\n\nSee [embedding-videos.md](embedding-videos.md) for advanced knowledge about embedding videos - trimming, volume, speed, looping, pitch.\n\n## Embedding Audio\n\nSee [audio.md](audio.md) for advanced audio features like trimming, volume, speed, pitch.\n\n## Cropping\n\nSee [cropping.md](cropping.md) if needing to crop the visible rectangle of a component.\n\n## Transitions\n\nSee [transitions.md](transitions.md) for scene transition patterns.\n\n## Motion blur\n\nWhen adding motion blur or a movement trail, read [motion-blur.md](motion-blur.md) for the preferred HTML-in-canvas approach, preview requirements, and alternatives.\n\n## Visual and pixel effects\n\nWhen adding a visual effect, first identify the element or group it should affect.\nIf the target component supports `effects` and a built-in effect below matches the\nrequest, prefer that effect over a CSS approximation. For example, apply\n`vignette()` directly to a `<Video>`'s `effects` prop when the vignette should\naffect that video.\n\nThese components accept `effects` directly:\n\n| Import from        | Components                                                                                                                    |\n| ------------------ | ----------------------------------------------------------------------------------------------------------------------------- |\n| `remotion`         | `<Img>`, `<CanvasImage>`, `<AnimatedImage>`, `<Solid>`, `<HtmlInCanvas>`                                                      |\n| `@remotion/media`  | `<Video>`                                                                                                                     |\n| `@remotion/gif`    | `<Gif>`                                                                                                                       |\n| `@remotion/rive`   | `<RemotionRiveCanvas>`                                                                                                        |\n| `@remotion/shapes` | `<Arrow>`, `<Callout>`, `<Circle>`, `<Ellipse>`, `<Heart>`, `<Pie>`, `<Polygon>`, `<Rect>`, `<Spark>`, `<Star>`, `<Triangle>` |\n\nOrdinary HTML elements, `<Interactive.*>` DOM wrappers, `<AbsoluteFill>`, and\n`<Sequence>` do not accept `effects` directly. To apply effects to their content,\nwrap them in `<HtmlInCanvas>` and put the `effects` prop on the wrapper.\n\nFor other elements, prefer regular HTML and CSS where suitable. Consider wrapping\na group in [`<HtmlInCanvas>`](html-in-canvas.md) when post-processing the whole\ngroup is appropriate and the environment supports it.\n\nRead [effects.md](effects.md) before applying an effect for imports, parameters,\nand setup. It also covers reusable custom effects with `createEffect()` when no\nbuilt-in effect matches.\n\n### Available effects\n\nBuilt-in effects from `@remotion/effects`:\n\n- Color and tone: `brightness()`, `colorCorrection()`, `colorKey()`, `contrast()`, `duotone()`, `exposure()`, `grayscale()`, `hue()`, `invert()`, `levels()`, `linearGradient()`, `linearGradientTint()`, `lut()`, `saturation()`, `shadowsHighlights()`, `thermalVision()`, `tint()`, `vibrance()`, `whiteBalance()`.\n- Blur and trails: `blur()`, `lightTrail()`, `linearProgressiveBlur()`, `radialProgressiveBlur()`, `regionBlur()`, `zoomBlur()`.\n- Lighting: `dropShadow()`, `glow()`, `lightLeak()`, `shine()`, `starburst()`, `vignette()`.\n- Distortion and transforms: `barrelDistortion()`, `chromaticAberration()`, `cornerPin()`, `fisheye()`, `mirror()`, `noiseDisplacement()`, `scale()`, `skew()`, `tile()`, `uvTranslate()`, `wave()`, `xyTranslate()`.\n- Textures and patterns: `burlap()`, `checkerboard()`, `contourLines()`, `dotGrid()`, `emboss()`, `flannel()`, `gridlines()`, `halftone()`, `halftoneLinearGradient()`, `lines()`, `liquidContours()`, `noise()`, `paper()`, `pattern()`, `rings()`, `scanlines()`, `speckle()`, `tvSignalOff()`, `waves()`, `whiteNoise()`, `zigzag()`.\n- Edges: `outline()`, `roughenEdges()`, `shrinkwrap()`, `tear()`.\n- Pixelation and transitions: `evolve()`, `linearProgressivePixelate()`, `pixelate()`, `pixelDissolve()`, `radialProgressivePixelate()`, `venetianBlinds()`.\n\n## 3D content\n\nSee [./3d.md](./3d.md) for 3D content in Remotion using Three.js and React Three Fiber.\n\n## Sound effects\n\nWhen needing to use sound effects, load the [./sfx.md](./sfx.md) file for more information.\n\n## Audio visualization\n\nWhen needing to visualize audio (spectrum bars, waveforms, bass-reactive effects), load the [./audio-visualization.md](./audio-visualization.md) file for more information.\n\n## Maps\n\nFor static maps, animated routes and markers, geographic explainers, Mapbox, MapLibre, MapTiler, GeoJSON, or 3D geographic flyovers, load [Remotion Maps](./remotion-maps/REFERENCE.md).\n\n## Captions\n\nWhen dealing with captions or subtitles, load the Remotion Captions skill for more information.\n\n## Google Fonts\n\nIs the recommended way to load fonts in Remotion. See [google-fonts.md](google-fonts.md) for how to load Google Fonts.\n\n## Local fonts\n\nSee [local-fonts.md](local-fonts.md) for how to load local fonts.\n\n## GIFs\n\nSee [gifs.md](gifs.md) for how to display GIFs synchronized with Remotion's timeline.\n\n## Advanced Images\n\nSee [images.md](images.md) for sizing and positioning images, dynamic image paths, and getting image dimensions.\n\n## Lottie animations\n\nSee [lottie.md](lottie.md) for embedding Lottie animations in Remotion.\n\n## Timing\n\nSee [timing.md](timing.md) for more timing techniques for `interpolate()`.\n\n## Parameterized videos\n\nSee [parameters.md](parameters.md) for making a composition parametrizable by adding a Zod schema.\n\n## Measuring DOM nodes\n\nSee [measuring-dom-nodes.md](measuring-dom-nodes.md) for measuring DOM element dimensions in Remotion.\n\n## Measuring text\n\nSee [measuring-text.md](measuring-text.md) for measuring text dimensions, fitting text to containers, and checking overflow.\n\n## Using FFmpeg\n\nFor some video operations, such as trimming videos or detecting silence, FFmpeg should be used. Load the [./ffmpeg.md](./ffmpeg.md) file for more information.\n\n## Silence detection\n\nWhen needing to detect and trim silent segments from video or audio files, load the [./silence-detection.md](./silence-detection.md) file.\n\n## Dynamic duration, dimensions and data\n\nSee [calculate-metadata.md](calculate-metadata.md) for dynamically set composition duration, dimensions, and props.\n\n## Compositions and stills\n\nBefore registering `<Composition>` or `<Still>` elements, read [compositions.md](compositions.md) for source-editable registrations, folders, default props and nesting. For Studio navigation into a scene's own timeline, use [connected compositions](connected-compositions.md).\n\n## Advanced sequencing\n\nSee [sequencing.md](sequencing.md) for more sequencing patterns - delay, trim, limit duration of items.\n\n## Install modules\n\nUse `npx remotion add` to add new packages with the right version:\n\n```\nnpx remotion add @remotion/media\n```\n\nThis goes for `@remotion/*` packages, `mediabunny`, `@mediabunny/*`, `zod`, and `@huggingface/transformers`.\n\n## Visual checks\n\nWhen a visual check is useful, open the Remotion Studio for an interactive preview.\n\nYou can also use Rendering to inspect one or several frames as images.\n"}],"summary":"Fields changed: 2. /included_files, /skill_md_contents.","summary_kind":"deterministic","summary_metadata":{}}