Update to Remotion

{
  "name": "remotion-markup",
  "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.png",
      "size_in_bytes": 1286
    },
    {
      "relative_path": "audio-visualization.md",
      "size_in_bytes": 4892
    },
    {
      "relative_path": "audio.md",
      "size_in_bytes": 3615
    },
    {
      "relative_path": "calculate-metadata.md",
      "size_in_bytes": 3498
    },
    {
      "relative_path": "compositions.md",
      "size_in_bytes": 3194
    },
    {
      "relative_path": "cropping.md",
      "size_in_bytes": 1098
    },
    {
      "relative_path": "effects.md",
      "size_in_bytes": 8904
    },
    {
      "relative_path": "embedding-videos.md",
      "size_in_bytes": 3505
    },
    {
      "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": 3680
    },
    {
      "relative_path": "images.md",
      "size_in_bytes": 1466
    },
    {
      "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": "multi-scene-video.md",
      "size_in_bytes": 2035
    },
    {
      "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.png",
      "size_in_bytes": 1286
    },
    {
      "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": 13403
    },
    {
      "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": 1130
    },
    {
      "relative_path": "sequencing.md",
      "size_in_bytes": 3829
    },
    {
      "relative_path": "sfx.md",
      "size_in_bytes": 1806
    },
    {
      "relative_path": "silence-detection.md",
      "size_in_bytes": 2548
    },
    {
      "relative_path": "text-highlights.md",
      "size_in_bytes": 1847
    },
    {
      "relative_path": "timing.md",
      "size_in_bytes": 3315
    },
    {
      "relative_path": "transitions.md",
      "size_in_bytes": 6882
    },
    {
      "relative_path": "video-editing.md",
      "size_in_bytes": 3404
    },
    {
      "relative_path": "voiceover.md",
      "size_in_bytes": 3342
    }
  ],
  "skill_md_contents": "---\nname: remotion-markup\ndescription: Content, animation and effects best practices\nversion: 4.0.506\n---\n\nThis is guidance for writing Remotion React Markup.\nIf this is not relevant, load [Remotion Best Practices](../remotion-best-practices/SKILL.md) instead.\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](../remotion-interactivity/SKILL.md)\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\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### 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## 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## Video editing\n\nSee [video-editing.md](video-editing.md) for structuring editable video timelines in Remotion Studio.\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## 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](../remotion-captions/SKILL.md) 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## Advanced compositions\n\nSee [compositions.md](compositions.md) for how to define stills, folders, default props and for how to nest compositions.\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/*`, and `zod`.\n\n## Previewing markup\n\n```\nnpx remotion studio --no-open\n```\n\nThis will start a long-running process and print the server URL for the preview.  \nIf server is already started, it will print the URL.\nYou can visit a specific composition by navigating to `/[composition-id]`, for example `http://localhost:3000/MapAnimation`.\n\n## Optional: one-frame render check\n\nYou can render a single frame with the CLI to sanity-check layout, colors, or timing.  \nSkip it for trivial edits, pure refactors, or when you already have enough confidence from Studio or prior renders.\n\n```bash\nnpx remotion still [composition-id] --scale=0.25 --frame=30\n```\n\nAt 30 fps, `--frame=30` is the one-second mark (`--frame` is zero-based).\n"
}