[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-remotion-remotion-markup":3,"mdc--zfm2s4-key":35,"related-org-remotion-remotion-markup":4816,"related-repo-remotion-remotion-markup":4961},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":12,"stars":24,"repoUrl":25,"updatedAt":26,"license":27,"forks":28,"topics":29,"repo":30,"sourceUrl":33,"mdContent":34},"remotion-markup","write Remotion React markup","Content, animation and effects best practices",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},"remotion","Remotion","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fremotion.png","remotion-dev",[13,17,18,21],{"name":14,"slug":15,"type":16},"React","react","tag",{"name":9,"slug":8,"type":16},{"name":19,"slug":20,"type":16},"Video","video",{"name":22,"slug":23,"type":16},"Frontend","frontend",4160,"https:\u002F\u002Fgithub.com\u002Fremotion-dev\u002Fskills","2026-07-30T05:25:33.787523",null,481,[],{"repoUrl":25,"stars":24,"forks":28,"topics":31,"description":32},[],"Agent Skills","https:\u002F\u002Fgithub.com\u002Fremotion-dev\u002Fskills\u002Ftree\u002FHEAD\u002Fskills\u002Fremotion-markup","---\nname: remotion-markup\ndescription: Content, animation and effects best practices\nmetadata:\n  tags: remotion, react, markup\n---\n\nThis is guidance for writing Remotion React Markup.\nIf this is not relevant, load [Remotion Best Practices](..\u002Fremotion-best-practices\u002FSKILL.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](..\u002Fremotion-interactivity\u002FSKILL.md)\n\n```tsx\nimport { useCurrentFrame, Easing, interpolate, Interactive } from \"remotion\";\n\nexport const FadeIn = () => {\n  const frame = useCurrentFrame();\n\n  return (\n    \u003CInteractive.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    \u003C\u002FInteractive.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\u002F\u002F 👍 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' \u002F\u002F 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\u002F\u002F 👎 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\u002F` folder at your project root.\nUse `staticFile()` to reference files from the `public\u002F` folder.\n\n## Media components\n\nAdd video and audio using `\u003CVideo>` and `\u003CAudio>` from `@remotion\u002Fmedia`.  \nAdd images using the `\u003CCanvasImage>` component.\nAdd animated GIFs, APNG, WebP or AVIF images using `\u003CAnimatedImage>`, use `@remotion\u002Fgif` if not using Chrome.\nUse `staticFile()` for files in `public\u002F` or pass a remote URL directly:\n\n```tsx\nimport { Audio, Video } from \"@remotion\u002Fmedia\";\nimport { staticFile, CanvasImage, AnimatedImage } from \"remotion\";\n\nexport const MyComposition = () => {\n  return (\n    \u003C>\n      \u003CVideo src={staticFile(\"video.mp4\")} style={{ opacity: 0.5 }} \u002F>\n      \u003CAudio src={staticFile(\"audio.mp3\")} \u002F>\n      \u003CCanvasImage src={staticFile(\"logo.png\")} style={{ width: 100, height: 100 }} \u002F>\n      \u003CVideo src=\"https:\u002F\u002Fremotion.media\u002Fvideo.mp4\" \u002F>\n      \u003CAnimatedImage src={staticFile('nyancat.gif')} \u002F>\n    \u003C\u002F>\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    \u003CAbsoluteFill\n      name=\"Scene\"\n      style={{display: 'flex', justifyContent: 'center', alignItems: 'center', backgroundColor: 'white'}}\n    >\n      \u003CInteractive.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      \u003C\u002FInteractive.Div>\n      \u003CInteractive.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      \u003C\u002FInteractive.Div>\n    \u003C\u002FAbsoluteFill>\n  );\n}\n```\n\n## Delaying, trimming\n\nMost components (`\u003CAbsoluteFill>`, `\u003CInteractive.*>` `\u003CImg>`, `\u003CAnimatedImage>`, `\u003CCanvasImage>`, `\u003CHtmlInCanvas>`, `\u003CSolid>`, `\u003CSequence>` from `remotion`, `\u003CVideo>` and `\u003CAudio>` from `@remotion\u002Fmedia`, `\u003CGif>`, and more) support the following props:\n\n### from\n\n```tsx\n\u003CImg from={1 * fps} {\u002F* ... *\u002F}\u002F>\n\u003CVideo from={1 * fps} {\u002F* ... *\u002F}\u002F>\n\u003CInteractive.Div from={1 * fps} {\u002F* ... *\u002F}\u002F>\n```\n\nWhen the element starts appearing in the timelien.\n\n### durationInFrames\n\n```tsx\n\u003CImg durationInFrames={20 * fps} {\u002F* ... *\u002F}\u002F>\n\u003CInteractive.Div durationInFrames={20 * fps} {\u002F* ... *\u002F}\u002F>\n```\n\nFor how long the layer plays in the timeline.  \nFor media, pass the natural duration of the media: `\u003CVideo durationInFrames={29.322 * fps}\u002F>`\n\n### `trimBefore`\n\nUseful for components whose internal clock should start later:\n\n```tsx\n\u003CVideo trimBefore={2 * fps} {\u002F* ... *\u002F} \u002F> \u002F\u002F Trim away first 2 seconds of footage\n\u003CSequence trimBefore={10 * fps} {\u002F* ... *\u002F} \u002F> \u002F\u002F `useCurrenFrame()` for children starts at `10 * fps`\n```\n\n### Fallback\n\nIf a component does not support these props, wrap it in`\u003CSequence>` 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\u002FREFERENCE.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 (`\u003CVideo>`, `\u003CImg>`), or by wrapping the content in [`\u003CHtmlInCanvas>`](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 [.\u002F3d.md](.\u002F3d.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 [.\u002Fsfx.md](.\u002Fsfx.md) file for more information.\n\n## Audio visualization\n\nWhen needing to visualize audio (spectrum bars, waveforms, bass-reactive effects), load the [.\u002Faudio-visualization.md](.\u002Faudio-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\u002FREFERENCE.md).\n\n## Captions\n\nWhen dealing with captions or subtitles, load the [Remotion Captions](..\u002Fremotion-captions\u002FSKILL.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 [.\u002Fffmpeg.md](.\u002Fffmpeg.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 [.\u002Fsilence-detection.md](.\u002Fsilence-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\u002Fmedia\n```\n\nThis goes for `@remotion\u002F*` packages, `mediabunny`, `@mediabunny\u002F*`, 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 `\u002F[composition-id]`, for example `http:\u002F\u002Flocalhost:3000\u002FMapAnimation`.\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",{"data":36,"body":39},{"name":4,"description":6,"metadata":37},{"tags":38},"remotion, react, markup",{"type":40,"children":41},"root",[42,59,66,115,135,146,707,757,1655,1661,1689,1695,1765,2271,2277,3496,3502,3594,3600,3741,3746,3752,3847,3863,3873,3878,3985,3991,4009,4036,4042,4055,4061,4072,4078,4089,4095,4106,4112,4123,4129,4140,4146,4157,4163,4174,4180,4191,4197,4207,4252,4284,4290,4301,4307,4319,4325,4336,4341,4351,4357,4370,4376,4388,4394,4405,4411,4422,4428,4439,4445,4456,4462,4479,4485,4496,4502,4513,4519,4530,4536,4547,4553,4565,4571,4582,4588,4599,4605,4616,4622,4634,4644,4679,4685,4694,4719,4725,4735,4790,4811],{"type":43,"tag":44,"props":45,"children":46},"element","p",{},[47,50,57],{"type":48,"value":49},"text","This is guidance for writing Remotion React Markup.\nIf this is not relevant, load ",{"type":43,"tag":51,"props":52,"children":54},"a",{"href":53},"..\u002Fremotion-best-practices\u002FSKILL.md",[55],{"type":48,"value":56},"Remotion Best Practices",{"type":48,"value":58}," instead.",{"type":43,"tag":60,"props":61,"children":63},"h2",{"id":62},"general-rules",[64],{"type":48,"value":65},"General rules",{"type":43,"tag":44,"props":67,"children":68},{},[69,71,78,80,86,88,92,94,100,102,108,110,113],{"type":48,"value":70},"Drive animations using ",{"type":43,"tag":72,"props":73,"children":75},"code",{"className":74},[],[76],{"type":48,"value":77},"useCurrentFrame()",{"type":48,"value":79}," and ",{"type":43,"tag":72,"props":81,"children":83},{"className":82},[],[84],{"type":48,"value":85},"interpolate()",{"type":48,"value":87},".",{"type":43,"tag":89,"props":90,"children":91},"br",{},[],{"type":48,"value":93},"\nCSS ",{"type":43,"tag":72,"props":95,"children":97},{"className":96},[],[98],{"type":48,"value":99},"transition",{"type":48,"value":101}," or ",{"type":43,"tag":72,"props":103,"children":105},{"className":104},[],[106],{"type":48,"value":107},"animation",{"type":48,"value":109}," will not render correctly, they need to refactored.",{"type":43,"tag":89,"props":111,"children":112},{},[],{"type":48,"value":114},"\nTailwind animation class will not render correctly, they need to be refactored.",{"type":43,"tag":44,"props":116,"children":117},{},[118,120,126,127,133],{"type":48,"value":119},"Use ",{"type":43,"tag":72,"props":121,"children":123},{"className":122},[],[124],{"type":48,"value":125},"Easing.bezier()",{"type":48,"value":79},{"type":43,"tag":72,"props":128,"children":130},{"className":129},[],[131],{"type":48,"value":132},"Easing.spring()",{"type":48,"value":134}," to customize timing.",{"type":43,"tag":44,"props":136,"children":137},{},[138,140],{"type":48,"value":139},"Structure your markup according to ",{"type":43,"tag":51,"props":141,"children":143},{"href":142},"..\u002Fremotion-interactivity\u002FSKILL.md",[144],{"type":48,"value":145},"Remotion Interactivity Best Practices",{"type":43,"tag":147,"props":148,"children":153},"pre",{"className":149,"code":150,"language":151,"meta":152,"style":152},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { useCurrentFrame, Easing, interpolate, Interactive } from \"remotion\";\n\nexport const FadeIn = () => {\n  const frame = useCurrentFrame();\n\n  return (\n    \u003CInteractive.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    \u003C\u002FInteractive.Div>\n  );\n};\n","tsx","",[154],{"type":43,"tag":72,"props":155,"children":156},{"__ignoreMap":152},[157,239,249,289,323,331,345,360,387,401,492,523,552,622,639,648,657,666,685,698],{"type":43,"tag":158,"props":159,"children":162},"span",{"class":160,"line":161},"line",1,[163,169,175,181,186,191,195,200,204,209,214,219,224,229,234],{"type":43,"tag":158,"props":164,"children":166},{"style":165},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[167],{"type":48,"value":168},"import",{"type":43,"tag":158,"props":170,"children":172},{"style":171},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[173],{"type":48,"value":174}," {",{"type":43,"tag":158,"props":176,"children":178},{"style":177},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[179],{"type":48,"value":180}," useCurrentFrame",{"type":43,"tag":158,"props":182,"children":183},{"style":171},[184],{"type":48,"value":185},",",{"type":43,"tag":158,"props":187,"children":188},{"style":177},[189],{"type":48,"value":190}," Easing",{"type":43,"tag":158,"props":192,"children":193},{"style":171},[194],{"type":48,"value":185},{"type":43,"tag":158,"props":196,"children":197},{"style":177},[198],{"type":48,"value":199}," interpolate",{"type":43,"tag":158,"props":201,"children":202},{"style":171},[203],{"type":48,"value":185},{"type":43,"tag":158,"props":205,"children":206},{"style":177},[207],{"type":48,"value":208}," Interactive",{"type":43,"tag":158,"props":210,"children":211},{"style":171},[212],{"type":48,"value":213}," }",{"type":43,"tag":158,"props":215,"children":216},{"style":165},[217],{"type":48,"value":218}," from",{"type":43,"tag":158,"props":220,"children":221},{"style":171},[222],{"type":48,"value":223}," \"",{"type":43,"tag":158,"props":225,"children":227},{"style":226},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[228],{"type":48,"value":8},{"type":43,"tag":158,"props":230,"children":231},{"style":171},[232],{"type":48,"value":233},"\"",{"type":43,"tag":158,"props":235,"children":236},{"style":171},[237],{"type":48,"value":238},";\n",{"type":43,"tag":158,"props":240,"children":242},{"class":160,"line":241},2,[243],{"type":43,"tag":158,"props":244,"children":246},{"emptyLinePlaceholder":245},true,[247],{"type":48,"value":248},"\n",{"type":43,"tag":158,"props":250,"children":252},{"class":160,"line":251},3,[253,258,264,269,274,279,284],{"type":43,"tag":158,"props":254,"children":255},{"style":165},[256],{"type":48,"value":257},"export",{"type":43,"tag":158,"props":259,"children":261},{"style":260},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[262],{"type":48,"value":263}," const",{"type":43,"tag":158,"props":265,"children":266},{"style":177},[267],{"type":48,"value":268}," FadeIn ",{"type":43,"tag":158,"props":270,"children":271},{"style":171},[272],{"type":48,"value":273},"=",{"type":43,"tag":158,"props":275,"children":276},{"style":171},[277],{"type":48,"value":278}," ()",{"type":43,"tag":158,"props":280,"children":281},{"style":260},[282],{"type":48,"value":283}," =>",{"type":43,"tag":158,"props":285,"children":286},{"style":171},[287],{"type":48,"value":288}," {\n",{"type":43,"tag":158,"props":290,"children":292},{"class":160,"line":291},4,[293,298,303,308,313,319],{"type":43,"tag":158,"props":294,"children":295},{"style":260},[296],{"type":48,"value":297},"  const",{"type":43,"tag":158,"props":299,"children":300},{"style":177},[301],{"type":48,"value":302}," frame",{"type":43,"tag":158,"props":304,"children":305},{"style":171},[306],{"type":48,"value":307}," =",{"type":43,"tag":158,"props":309,"children":311},{"style":310},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[312],{"type":48,"value":180},{"type":43,"tag":158,"props":314,"children":316},{"style":315},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[317],{"type":48,"value":318},"()",{"type":43,"tag":158,"props":320,"children":321},{"style":171},[322],{"type":48,"value":238},{"type":43,"tag":158,"props":324,"children":326},{"class":160,"line":325},5,[327],{"type":43,"tag":158,"props":328,"children":329},{"emptyLinePlaceholder":245},[330],{"type":48,"value":248},{"type":43,"tag":158,"props":332,"children":334},{"class":160,"line":333},6,[335,340],{"type":43,"tag":158,"props":336,"children":337},{"style":165},[338],{"type":48,"value":339},"  return",{"type":43,"tag":158,"props":341,"children":342},{"style":315},[343],{"type":48,"value":344}," (\n",{"type":43,"tag":158,"props":346,"children":348},{"class":160,"line":347},7,[349,354],{"type":43,"tag":158,"props":350,"children":351},{"style":171},[352],{"type":48,"value":353},"    \u003C",{"type":43,"tag":158,"props":355,"children":357},{"style":356},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[358],{"type":48,"value":359},"Interactive.Div\n",{"type":43,"tag":158,"props":361,"children":363},{"class":160,"line":362},8,[364,369,373,377,382],{"type":43,"tag":158,"props":365,"children":366},{"style":260},[367],{"type":48,"value":368},"      name",{"type":43,"tag":158,"props":370,"children":371},{"style":171},[372],{"type":48,"value":273},{"type":43,"tag":158,"props":374,"children":375},{"style":171},[376],{"type":48,"value":233},{"type":43,"tag":158,"props":378,"children":379},{"style":226},[380],{"type":48,"value":381},"Title",{"type":43,"tag":158,"props":383,"children":384},{"style":171},[385],{"type":48,"value":386},"\"\n",{"type":43,"tag":158,"props":388,"children":390},{"class":160,"line":389},9,[391,396],{"type":43,"tag":158,"props":392,"children":393},{"style":260},[394],{"type":48,"value":395},"      style",{"type":43,"tag":158,"props":397,"children":398},{"style":171},[399],{"type":48,"value":400},"={{\n",{"type":43,"tag":158,"props":402,"children":404},{"class":160,"line":403},10,[405,410,415,419,424,428,433,439,443,448,453,458,462,466,470,474,479,484,488],{"type":43,"tag":158,"props":406,"children":407},{"style":315},[408],{"type":48,"value":409},"        opacity",{"type":43,"tag":158,"props":411,"children":412},{"style":171},[413],{"type":48,"value":414},":",{"type":43,"tag":158,"props":416,"children":417},{"style":310},[418],{"type":48,"value":199},{"type":43,"tag":158,"props":420,"children":421},{"style":177},[422],{"type":48,"value":423},"(frame",{"type":43,"tag":158,"props":425,"children":426},{"style":171},[427],{"type":48,"value":185},{"type":43,"tag":158,"props":429,"children":430},{"style":177},[431],{"type":48,"value":432}," [",{"type":43,"tag":158,"props":434,"children":436},{"style":435},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[437],{"type":48,"value":438},"0",{"type":43,"tag":158,"props":440,"children":441},{"style":171},[442],{"type":48,"value":185},{"type":43,"tag":158,"props":444,"children":445},{"style":435},[446],{"type":48,"value":447}," 2",{"type":43,"tag":158,"props":449,"children":450},{"style":171},[451],{"type":48,"value":452}," *",{"type":43,"tag":158,"props":454,"children":455},{"style":177},[456],{"type":48,"value":457}," fps]",{"type":43,"tag":158,"props":459,"children":460},{"style":171},[461],{"type":48,"value":185},{"type":43,"tag":158,"props":463,"children":464},{"style":177},[465],{"type":48,"value":432},{"type":43,"tag":158,"props":467,"children":468},{"style":435},[469],{"type":48,"value":438},{"type":43,"tag":158,"props":471,"children":472},{"style":171},[473],{"type":48,"value":185},{"type":43,"tag":158,"props":475,"children":476},{"style":435},[477],{"type":48,"value":478}," 1",{"type":43,"tag":158,"props":480,"children":481},{"style":177},[482],{"type":48,"value":483},"]",{"type":43,"tag":158,"props":485,"children":486},{"style":171},[487],{"type":48,"value":185},{"type":43,"tag":158,"props":489,"children":490},{"style":171},[491],{"type":48,"value":288},{"type":43,"tag":158,"props":493,"children":495},{"class":160,"line":494},11,[496,501,505,509,514,518],{"type":43,"tag":158,"props":497,"children":498},{"style":315},[499],{"type":48,"value":500},"          extrapolateRight",{"type":43,"tag":158,"props":502,"children":503},{"style":171},[504],{"type":48,"value":414},{"type":43,"tag":158,"props":506,"children":507},{"style":171},[508],{"type":48,"value":223},{"type":43,"tag":158,"props":510,"children":511},{"style":226},[512],{"type":48,"value":513},"clamp",{"type":43,"tag":158,"props":515,"children":516},{"style":171},[517],{"type":48,"value":233},{"type":43,"tag":158,"props":519,"children":520},{"style":171},[521],{"type":48,"value":522},",\n",{"type":43,"tag":158,"props":524,"children":526},{"class":160,"line":525},12,[527,532,536,540,544,548],{"type":43,"tag":158,"props":528,"children":529},{"style":315},[530],{"type":48,"value":531},"          extrapolateLeft",{"type":43,"tag":158,"props":533,"children":534},{"style":171},[535],{"type":48,"value":414},{"type":43,"tag":158,"props":537,"children":538},{"style":171},[539],{"type":48,"value":223},{"type":43,"tag":158,"props":541,"children":542},{"style":226},[543],{"type":48,"value":513},{"type":43,"tag":158,"props":545,"children":546},{"style":171},[547],{"type":48,"value":233},{"type":43,"tag":158,"props":549,"children":550},{"style":171},[551],{"type":48,"value":522},{"type":43,"tag":158,"props":553,"children":555},{"class":160,"line":554},13,[556,561,565,569,573,578,583,588,592,596,600,605,609,613,618],{"type":43,"tag":158,"props":557,"children":558},{"style":315},[559],{"type":48,"value":560},"          easing",{"type":43,"tag":158,"props":562,"children":563},{"style":171},[564],{"type":48,"value":414},{"type":43,"tag":158,"props":566,"children":567},{"style":177},[568],{"type":48,"value":190},{"type":43,"tag":158,"props":570,"children":571},{"style":171},[572],{"type":48,"value":87},{"type":43,"tag":158,"props":574,"children":575},{"style":310},[576],{"type":48,"value":577},"bezier",{"type":43,"tag":158,"props":579,"children":580},{"style":177},[581],{"type":48,"value":582},"(",{"type":43,"tag":158,"props":584,"children":585},{"style":435},[586],{"type":48,"value":587},"0.16",{"type":43,"tag":158,"props":589,"children":590},{"style":171},[591],{"type":48,"value":185},{"type":43,"tag":158,"props":593,"children":594},{"style":435},[595],{"type":48,"value":478},{"type":43,"tag":158,"props":597,"children":598},{"style":171},[599],{"type":48,"value":185},{"type":43,"tag":158,"props":601,"children":602},{"style":435},[603],{"type":48,"value":604}," 0.3",{"type":43,"tag":158,"props":606,"children":607},{"style":171},[608],{"type":48,"value":185},{"type":43,"tag":158,"props":610,"children":611},{"style":435},[612],{"type":48,"value":478},{"type":43,"tag":158,"props":614,"children":615},{"style":177},[616],{"type":48,"value":617},")",{"type":43,"tag":158,"props":619,"children":620},{"style":171},[621],{"type":48,"value":522},{"type":43,"tag":158,"props":623,"children":625},{"class":160,"line":624},14,[626,631,635],{"type":43,"tag":158,"props":627,"children":628},{"style":171},[629],{"type":48,"value":630},"        }",{"type":43,"tag":158,"props":632,"children":633},{"style":177},[634],{"type":48,"value":617},{"type":43,"tag":158,"props":636,"children":637},{"style":171},[638],{"type":48,"value":522},{"type":43,"tag":158,"props":640,"children":642},{"class":160,"line":641},15,[643],{"type":43,"tag":158,"props":644,"children":645},{"style":171},[646],{"type":48,"value":647},"      }}\n",{"type":43,"tag":158,"props":649,"children":651},{"class":160,"line":650},16,[652],{"type":43,"tag":158,"props":653,"children":654},{"style":171},[655],{"type":48,"value":656},"    >\n",{"type":43,"tag":158,"props":658,"children":660},{"class":160,"line":659},17,[661],{"type":43,"tag":158,"props":662,"children":663},{"style":177},[664],{"type":48,"value":665},"      Hello World!\n",{"type":43,"tag":158,"props":667,"children":669},{"class":160,"line":668},18,[670,675,680],{"type":43,"tag":158,"props":671,"children":672},{"style":171},[673],{"type":48,"value":674},"    \u003C\u002F",{"type":43,"tag":158,"props":676,"children":677},{"style":356},[678],{"type":48,"value":679},"Interactive.Div",{"type":43,"tag":158,"props":681,"children":682},{"style":171},[683],{"type":48,"value":684},">\n",{"type":43,"tag":158,"props":686,"children":688},{"class":160,"line":687},19,[689,694],{"type":43,"tag":158,"props":690,"children":691},{"style":315},[692],{"type":48,"value":693},"  )",{"type":43,"tag":158,"props":695,"children":696},{"style":171},[697],{"type":48,"value":238},{"type":43,"tag":158,"props":699,"children":701},{"class":160,"line":700},20,[702],{"type":43,"tag":158,"props":703,"children":704},{"style":171},[705],{"type":48,"value":706},"};\n",{"type":43,"tag":44,"props":708,"children":709},{},[710,712,717,719,725,727,733,735,741,742,748,750,756],{"type":48,"value":711},"Keep the ",{"type":43,"tag":72,"props":713,"children":715},{"className":714},[],[716],{"type":48,"value":85},{"type":48,"value":718}," call inline in the ",{"type":43,"tag":72,"props":720,"children":722},{"className":721},[],[723],{"type":48,"value":724},"style",{"type":48,"value":726}," prop.\nUse ",{"type":43,"tag":72,"props":728,"children":730},{"className":729},[],[731],{"type":48,"value":732},"scale",{"type":48,"value":734},", ",{"type":43,"tag":72,"props":736,"children":738},{"className":737},[],[739],{"type":48,"value":740},"translate",{"type":48,"value":734},{"type":43,"tag":72,"props":743,"children":745},{"className":744},[],[746],{"type":48,"value":747},"rotate",{"type":48,"value":749}," CSS properties over ",{"type":43,"tag":72,"props":751,"children":753},{"className":752},[],[754],{"type":48,"value":755},"transform",{"type":48,"value":87},{"type":43,"tag":147,"props":758,"children":760},{"className":149,"code":759,"language":151,"meta":152,"style":152},"\u002F\u002F 👍 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' \u002F\u002F 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\u002F\u002F 👎 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",[761],{"type":43,"tag":72,"props":762,"children":763},{"__ignoreMap":152},[764,773,784,866,896,924,985,1015,1031,1129,1156,1183,1238,1253,1351,1378,1405,1460,1475,1483,1490,1499,1578,1586,1598,1647],{"type":43,"tag":158,"props":765,"children":766},{"class":160,"line":161},[767],{"type":43,"tag":158,"props":768,"children":770},{"style":769},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[771],{"type":48,"value":772},"\u002F\u002F 👍 Inline editable keyframes and transform shorthands\n",{"type":43,"tag":158,"props":774,"children":775},{"class":160,"line":241},[776,780],{"type":43,"tag":158,"props":777,"children":778},{"style":177},[779],{"type":48,"value":724},{"type":43,"tag":158,"props":781,"children":782},{"style":171},[783],{"type":48,"value":400},{"type":43,"tag":158,"props":785,"children":786},{"class":160,"line":251},[787,792,796,800,804,809,813,817,821,825,830,834,838,842,846,850,854,858,862],{"type":43,"tag":158,"props":788,"children":789},{"style":356},[790],{"type":48,"value":791},"  scale",{"type":43,"tag":158,"props":793,"children":794},{"style":171},[795],{"type":48,"value":414},{"type":43,"tag":158,"props":797,"children":798},{"style":310},[799],{"type":48,"value":199},{"type":43,"tag":158,"props":801,"children":802},{"style":315},[803],{"type":48,"value":582},{"type":43,"tag":158,"props":805,"children":806},{"style":177},[807],{"type":48,"value":808},"frame",{"type":43,"tag":158,"props":810,"children":811},{"style":171},[812],{"type":48,"value":185},{"type":43,"tag":158,"props":814,"children":815},{"style":315},[816],{"type":48,"value":432},{"type":43,"tag":158,"props":818,"children":819},{"style":435},[820],{"type":48,"value":438},{"type":43,"tag":158,"props":822,"children":823},{"style":171},[824],{"type":48,"value":185},{"type":43,"tag":158,"props":826,"children":827},{"style":435},[828],{"type":48,"value":829}," 100",{"type":43,"tag":158,"props":831,"children":832},{"style":315},[833],{"type":48,"value":483},{"type":43,"tag":158,"props":835,"children":836},{"style":171},[837],{"type":48,"value":185},{"type":43,"tag":158,"props":839,"children":840},{"style":315},[841],{"type":48,"value":432},{"type":43,"tag":158,"props":843,"children":844},{"style":435},[845],{"type":48,"value":438},{"type":43,"tag":158,"props":847,"children":848},{"style":171},[849],{"type":48,"value":185},{"type":43,"tag":158,"props":851,"children":852},{"style":435},[853],{"type":48,"value":478},{"type":43,"tag":158,"props":855,"children":856},{"style":315},[857],{"type":48,"value":483},{"type":43,"tag":158,"props":859,"children":860},{"style":171},[861],{"type":48,"value":185},{"type":43,"tag":158,"props":863,"children":864},{"style":171},[865],{"type":48,"value":288},{"type":43,"tag":158,"props":867,"children":868},{"class":160,"line":291},[869,874,878,883,887,892],{"type":43,"tag":158,"props":870,"children":871},{"style":315},[872],{"type":48,"value":873},"    extrapolateLeft",{"type":43,"tag":158,"props":875,"children":876},{"style":171},[877],{"type":48,"value":414},{"type":43,"tag":158,"props":879,"children":880},{"style":171},[881],{"type":48,"value":882}," '",{"type":43,"tag":158,"props":884,"children":885},{"style":226},[886],{"type":48,"value":513},{"type":43,"tag":158,"props":888,"children":889},{"style":171},[890],{"type":48,"value":891},"'",{"type":43,"tag":158,"props":893,"children":894},{"style":171},[895],{"type":48,"value":522},{"type":43,"tag":158,"props":897,"children":898},{"class":160,"line":325},[899,904,908,912,916,920],{"type":43,"tag":158,"props":900,"children":901},{"style":315},[902],{"type":48,"value":903},"    extrapolateRight",{"type":43,"tag":158,"props":905,"children":906},{"style":171},[907],{"type":48,"value":414},{"type":43,"tag":158,"props":909,"children":910},{"style":171},[911],{"type":48,"value":882},{"type":43,"tag":158,"props":913,"children":914},{"style":226},[915],{"type":48,"value":513},{"type":43,"tag":158,"props":917,"children":918},{"style":171},[919],{"type":48,"value":891},{"type":43,"tag":158,"props":921,"children":922},{"style":171},[923],{"type":48,"value":522},{"type":43,"tag":158,"props":925,"children":926},{"class":160,"line":333},[927,932,936,940,944,949,953,958,963,967,972,977,981],{"type":43,"tag":158,"props":928,"children":929},{"style":315},[930],{"type":48,"value":931},"    easing",{"type":43,"tag":158,"props":933,"children":934},{"style":171},[935],{"type":48,"value":414},{"type":43,"tag":158,"props":937,"children":938},{"style":177},[939],{"type":48,"value":190},{"type":43,"tag":158,"props":941,"children":942},{"style":171},[943],{"type":48,"value":87},{"type":43,"tag":158,"props":945,"children":946},{"style":310},[947],{"type":48,"value":948},"spring",{"type":43,"tag":158,"props":950,"children":951},{"style":315},[952],{"type":48,"value":582},{"type":43,"tag":158,"props":954,"children":955},{"style":171},[956],{"type":48,"value":957},"{",{"type":43,"tag":158,"props":959,"children":960},{"style":315},[961],{"type":48,"value":962},"damping",{"type":43,"tag":158,"props":964,"children":965},{"style":171},[966],{"type":48,"value":414},{"type":43,"tag":158,"props":968,"children":969},{"style":435},[970],{"type":48,"value":971}," 200",{"type":43,"tag":158,"props":973,"children":974},{"style":171},[975],{"type":48,"value":976},"}",{"type":43,"tag":158,"props":978,"children":979},{"style":315},[980],{"type":48,"value":617},{"type":43,"tag":158,"props":982,"children":983},{"style":171},[984],{"type":48,"value":522},{"type":43,"tag":158,"props":986,"children":987},{"class":160,"line":347},[988,993,997,1001,1006,1010],{"type":43,"tag":158,"props":989,"children":990},{"style":315},[991],{"type":48,"value":992},"    output",{"type":43,"tag":158,"props":994,"children":995},{"style":171},[996],{"type":48,"value":414},{"type":43,"tag":158,"props":998,"children":999},{"style":171},[1000],{"type":48,"value":882},{"type":43,"tag":158,"props":1002,"children":1003},{"style":226},[1004],{"type":48,"value":1005},"perceptual-scale",{"type":43,"tag":158,"props":1007,"children":1008},{"style":171},[1009],{"type":48,"value":891},{"type":43,"tag":158,"props":1011,"children":1012},{"style":769},[1013],{"type":48,"value":1014}," \u002F\u002F For `scale` animations, use \"output: 'perceptual-scale'\"\n",{"type":43,"tag":158,"props":1016,"children":1017},{"class":160,"line":362},[1018,1023,1027],{"type":43,"tag":158,"props":1019,"children":1020},{"style":171},[1021],{"type":48,"value":1022},"  }",{"type":43,"tag":158,"props":1024,"children":1025},{"style":315},[1026],{"type":48,"value":617},{"type":43,"tag":158,"props":1028,"children":1029},{"style":171},[1030],{"type":48,"value":522},{"type":43,"tag":158,"props":1032,"children":1033},{"class":160,"line":389},[1034,1039,1043,1047,1051,1055,1059,1063,1067,1071,1075,1079,1083,1087,1091,1096,1100,1104,1108,1113,1117,1121,1125],{"type":43,"tag":158,"props":1035,"children":1036},{"style":356},[1037],{"type":48,"value":1038},"  translate",{"type":43,"tag":158,"props":1040,"children":1041},{"style":171},[1042],{"type":48,"value":414},{"type":43,"tag":158,"props":1044,"children":1045},{"style":310},[1046],{"type":48,"value":199},{"type":43,"tag":158,"props":1048,"children":1049},{"style":315},[1050],{"type":48,"value":582},{"type":43,"tag":158,"props":1052,"children":1053},{"style":177},[1054],{"type":48,"value":808},{"type":43,"tag":158,"props":1056,"children":1057},{"style":171},[1058],{"type":48,"value":185},{"type":43,"tag":158,"props":1060,"children":1061},{"style":315},[1062],{"type":48,"value":432},{"type":43,"tag":158,"props":1064,"children":1065},{"style":435},[1066],{"type":48,"value":438},{"type":43,"tag":158,"props":1068,"children":1069},{"style":171},[1070],{"type":48,"value":185},{"type":43,"tag":158,"props":1072,"children":1073},{"style":435},[1074],{"type":48,"value":829},{"type":43,"tag":158,"props":1076,"children":1077},{"style":315},[1078],{"type":48,"value":483},{"type":43,"tag":158,"props":1080,"children":1081},{"style":171},[1082],{"type":48,"value":185},{"type":43,"tag":158,"props":1084,"children":1085},{"style":315},[1086],{"type":48,"value":432},{"type":43,"tag":158,"props":1088,"children":1089},{"style":171},[1090],{"type":48,"value":233},{"type":43,"tag":158,"props":1092,"children":1093},{"style":226},[1094],{"type":48,"value":1095},"0px 0px",{"type":43,"tag":158,"props":1097,"children":1098},{"style":171},[1099],{"type":48,"value":233},{"type":43,"tag":158,"props":1101,"children":1102},{"style":171},[1103],{"type":48,"value":185},{"type":43,"tag":158,"props":1105,"children":1106},{"style":171},[1107],{"type":48,"value":223},{"type":43,"tag":158,"props":1109,"children":1110},{"style":226},[1111],{"type":48,"value":1112},"100px 100px",{"type":43,"tag":158,"props":1114,"children":1115},{"style":171},[1116],{"type":48,"value":233},{"type":43,"tag":158,"props":1118,"children":1119},{"style":315},[1120],{"type":48,"value":483},{"type":43,"tag":158,"props":1122,"children":1123},{"style":171},[1124],{"type":48,"value":185},{"type":43,"tag":158,"props":1126,"children":1127},{"style":171},[1128],{"type":48,"value":288},{"type":43,"tag":158,"props":1130,"children":1131},{"class":160,"line":403},[1132,1136,1140,1144,1148,1152],{"type":43,"tag":158,"props":1133,"children":1134},{"style":315},[1135],{"type":48,"value":873},{"type":43,"tag":158,"props":1137,"children":1138},{"style":171},[1139],{"type":48,"value":414},{"type":43,"tag":158,"props":1141,"children":1142},{"style":171},[1143],{"type":48,"value":882},{"type":43,"tag":158,"props":1145,"children":1146},{"style":226},[1147],{"type":48,"value":513},{"type":43,"tag":158,"props":1149,"children":1150},{"style":171},[1151],{"type":48,"value":891},{"type":43,"tag":158,"props":1153,"children":1154},{"style":171},[1155],{"type":48,"value":522},{"type":43,"tag":158,"props":1157,"children":1158},{"class":160,"line":494},[1159,1163,1167,1171,1175,1179],{"type":43,"tag":158,"props":1160,"children":1161},{"style":315},[1162],{"type":48,"value":903},{"type":43,"tag":158,"props":1164,"children":1165},{"style":171},[1166],{"type":48,"value":414},{"type":43,"tag":158,"props":1168,"children":1169},{"style":171},[1170],{"type":48,"value":882},{"type":43,"tag":158,"props":1172,"children":1173},{"style":226},[1174],{"type":48,"value":513},{"type":43,"tag":158,"props":1176,"children":1177},{"style":171},[1178],{"type":48,"value":891},{"type":43,"tag":158,"props":1180,"children":1181},{"style":171},[1182],{"type":48,"value":522},{"type":43,"tag":158,"props":1184,"children":1185},{"class":160,"line":525},[1186,1190,1194,1198,1202,1206,1210,1214,1218,1222,1226,1230,1234],{"type":43,"tag":158,"props":1187,"children":1188},{"style":315},[1189],{"type":48,"value":931},{"type":43,"tag":158,"props":1191,"children":1192},{"style":171},[1193],{"type":48,"value":414},{"type":43,"tag":158,"props":1195,"children":1196},{"style":177},[1197],{"type":48,"value":190},{"type":43,"tag":158,"props":1199,"children":1200},{"style":171},[1201],{"type":48,"value":87},{"type":43,"tag":158,"props":1203,"children":1204},{"style":310},[1205],{"type":48,"value":948},{"type":43,"tag":158,"props":1207,"children":1208},{"style":315},[1209],{"type":48,"value":582},{"type":43,"tag":158,"props":1211,"children":1212},{"style":171},[1213],{"type":48,"value":957},{"type":43,"tag":158,"props":1215,"children":1216},{"style":315},[1217],{"type":48,"value":962},{"type":43,"tag":158,"props":1219,"children":1220},{"style":171},[1221],{"type":48,"value":414},{"type":43,"tag":158,"props":1223,"children":1224},{"style":435},[1225],{"type":48,"value":971},{"type":43,"tag":158,"props":1227,"children":1228},{"style":171},[1229],{"type":48,"value":976},{"type":43,"tag":158,"props":1231,"children":1232},{"style":315},[1233],{"type":48,"value":617},{"type":43,"tag":158,"props":1235,"children":1236},{"style":171},[1237],{"type":48,"value":522},{"type":43,"tag":158,"props":1239,"children":1240},{"class":160,"line":554},[1241,1245,1249],{"type":43,"tag":158,"props":1242,"children":1243},{"style":171},[1244],{"type":48,"value":1022},{"type":43,"tag":158,"props":1246,"children":1247},{"style":315},[1248],{"type":48,"value":617},{"type":43,"tag":158,"props":1250,"children":1251},{"style":171},[1252],{"type":48,"value":522},{"type":43,"tag":158,"props":1254,"children":1255},{"class":160,"line":624},[1256,1261,1265,1269,1273,1277,1281,1285,1289,1293,1297,1301,1305,1309,1313,1318,1322,1326,1330,1335,1339,1343,1347],{"type":43,"tag":158,"props":1257,"children":1258},{"style":356},[1259],{"type":48,"value":1260},"  rotate",{"type":43,"tag":158,"props":1262,"children":1263},{"style":171},[1264],{"type":48,"value":414},{"type":43,"tag":158,"props":1266,"children":1267},{"style":310},[1268],{"type":48,"value":199},{"type":43,"tag":158,"props":1270,"children":1271},{"style":315},[1272],{"type":48,"value":582},{"type":43,"tag":158,"props":1274,"children":1275},{"style":177},[1276],{"type":48,"value":808},{"type":43,"tag":158,"props":1278,"children":1279},{"style":171},[1280],{"type":48,"value":185},{"type":43,"tag":158,"props":1282,"children":1283},{"style":315},[1284],{"type":48,"value":432},{"type":43,"tag":158,"props":1286,"children":1287},{"style":435},[1288],{"type":48,"value":438},{"type":43,"tag":158,"props":1290,"children":1291},{"style":171},[1292],{"type":48,"value":185},{"type":43,"tag":158,"props":1294,"children":1295},{"style":435},[1296],{"type":48,"value":829},{"type":43,"tag":158,"props":1298,"children":1299},{"style":315},[1300],{"type":48,"value":483},{"type":43,"tag":158,"props":1302,"children":1303},{"style":171},[1304],{"type":48,"value":185},{"type":43,"tag":158,"props":1306,"children":1307},{"style":315},[1308],{"type":48,"value":432},{"type":43,"tag":158,"props":1310,"children":1311},{"style":171},[1312],{"type":48,"value":233},{"type":43,"tag":158,"props":1314,"children":1315},{"style":226},[1316],{"type":48,"value":1317},"20deg",{"type":43,"tag":158,"props":1319,"children":1320},{"style":171},[1321],{"type":48,"value":233},{"type":43,"tag":158,"props":1323,"children":1324},{"style":171},[1325],{"type":48,"value":185},{"type":43,"tag":158,"props":1327,"children":1328},{"style":171},[1329],{"type":48,"value":223},{"type":43,"tag":158,"props":1331,"children":1332},{"style":226},[1333],{"type":48,"value":1334},"90deg",{"type":43,"tag":158,"props":1336,"children":1337},{"style":171},[1338],{"type":48,"value":233},{"type":43,"tag":158,"props":1340,"children":1341},{"style":315},[1342],{"type":48,"value":483},{"type":43,"tag":158,"props":1344,"children":1345},{"style":171},[1346],{"type":48,"value":185},{"type":43,"tag":158,"props":1348,"children":1349},{"style":171},[1350],{"type":48,"value":288},{"type":43,"tag":158,"props":1352,"children":1353},{"class":160,"line":641},[1354,1358,1362,1366,1370,1374],{"type":43,"tag":158,"props":1355,"children":1356},{"style":315},[1357],{"type":48,"value":873},{"type":43,"tag":158,"props":1359,"children":1360},{"style":171},[1361],{"type":48,"value":414},{"type":43,"tag":158,"props":1363,"children":1364},{"style":171},[1365],{"type":48,"value":882},{"type":43,"tag":158,"props":1367,"children":1368},{"style":226},[1369],{"type":48,"value":513},{"type":43,"tag":158,"props":1371,"children":1372},{"style":171},[1373],{"type":48,"value":891},{"type":43,"tag":158,"props":1375,"children":1376},{"style":171},[1377],{"type":48,"value":522},{"type":43,"tag":158,"props":1379,"children":1380},{"class":160,"line":650},[1381,1385,1389,1393,1397,1401],{"type":43,"tag":158,"props":1382,"children":1383},{"style":315},[1384],{"type":48,"value":903},{"type":43,"tag":158,"props":1386,"children":1387},{"style":171},[1388],{"type":48,"value":414},{"type":43,"tag":158,"props":1390,"children":1391},{"style":171},[1392],{"type":48,"value":882},{"type":43,"tag":158,"props":1394,"children":1395},{"style":226},[1396],{"type":48,"value":513},{"type":43,"tag":158,"props":1398,"children":1399},{"style":171},[1400],{"type":48,"value":891},{"type":43,"tag":158,"props":1402,"children":1403},{"style":171},[1404],{"type":48,"value":522},{"type":43,"tag":158,"props":1406,"children":1407},{"class":160,"line":659},[1408,1412,1416,1420,1424,1428,1432,1436,1440,1444,1448,1452,1456],{"type":43,"tag":158,"props":1409,"children":1410},{"style":315},[1411],{"type":48,"value":931},{"type":43,"tag":158,"props":1413,"children":1414},{"style":171},[1415],{"type":48,"value":414},{"type":43,"tag":158,"props":1417,"children":1418},{"style":177},[1419],{"type":48,"value":190},{"type":43,"tag":158,"props":1421,"children":1422},{"style":171},[1423],{"type":48,"value":87},{"type":43,"tag":158,"props":1425,"children":1426},{"style":310},[1427],{"type":48,"value":948},{"type":43,"tag":158,"props":1429,"children":1430},{"style":315},[1431],{"type":48,"value":582},{"type":43,"tag":158,"props":1433,"children":1434},{"style":171},[1435],{"type":48,"value":957},{"type":43,"tag":158,"props":1437,"children":1438},{"style":315},[1439],{"type":48,"value":962},{"type":43,"tag":158,"props":1441,"children":1442},{"style":171},[1443],{"type":48,"value":414},{"type":43,"tag":158,"props":1445,"children":1446},{"style":435},[1447],{"type":48,"value":971},{"type":43,"tag":158,"props":1449,"children":1450},{"style":171},[1451],{"type":48,"value":976},{"type":43,"tag":158,"props":1453,"children":1454},{"style":315},[1455],{"type":48,"value":617},{"type":43,"tag":158,"props":1457,"children":1458},{"style":171},[1459],{"type":48,"value":522},{"type":43,"tag":158,"props":1461,"children":1462},{"class":160,"line":668},[1463,1467,1471],{"type":43,"tag":158,"props":1464,"children":1465},{"style":171},[1466],{"type":48,"value":1022},{"type":43,"tag":158,"props":1468,"children":1469},{"style":315},[1470],{"type":48,"value":617},{"type":43,"tag":158,"props":1472,"children":1473},{"style":171},[1474],{"type":48,"value":522},{"type":43,"tag":158,"props":1476,"children":1477},{"class":160,"line":687},[1478],{"type":43,"tag":158,"props":1479,"children":1480},{"style":171},[1481],{"type":48,"value":1482},"}}\n",{"type":43,"tag":158,"props":1484,"children":1485},{"class":160,"line":700},[1486],{"type":43,"tag":158,"props":1487,"children":1488},{"emptyLinePlaceholder":245},[1489],{"type":48,"value":248},{"type":43,"tag":158,"props":1491,"children":1493},{"class":160,"line":1492},21,[1494],{"type":43,"tag":158,"props":1495,"children":1496},{"style":769},[1497],{"type":48,"value":1498},"\u002F\u002F 👎 Non-inline values and transform strings become harder to edit in Studio\n",{"type":43,"tag":158,"props":1500,"children":1502},{"class":160,"line":1501},22,[1503,1508,1513,1517,1521,1525,1529,1533,1537,1541,1545,1549,1553,1557,1561,1565,1569,1574],{"type":43,"tag":158,"props":1504,"children":1505},{"style":260},[1506],{"type":48,"value":1507},"const",{"type":43,"tag":158,"props":1509,"children":1510},{"style":177},[1511],{"type":48,"value":1512}," scale ",{"type":43,"tag":158,"props":1514,"children":1515},{"style":171},[1516],{"type":48,"value":273},{"type":43,"tag":158,"props":1518,"children":1519},{"style":310},[1520],{"type":48,"value":199},{"type":43,"tag":158,"props":1522,"children":1523},{"style":177},[1524],{"type":48,"value":423},{"type":43,"tag":158,"props":1526,"children":1527},{"style":171},[1528],{"type":48,"value":185},{"type":43,"tag":158,"props":1530,"children":1531},{"style":177},[1532],{"type":48,"value":432},{"type":43,"tag":158,"props":1534,"children":1535},{"style":435},[1536],{"type":48,"value":438},{"type":43,"tag":158,"props":1538,"children":1539},{"style":171},[1540],{"type":48,"value":185},{"type":43,"tag":158,"props":1542,"children":1543},{"style":435},[1544],{"type":48,"value":829},{"type":43,"tag":158,"props":1546,"children":1547},{"style":177},[1548],{"type":48,"value":483},{"type":43,"tag":158,"props":1550,"children":1551},{"style":171},[1552],{"type":48,"value":185},{"type":43,"tag":158,"props":1554,"children":1555},{"style":177},[1556],{"type":48,"value":432},{"type":43,"tag":158,"props":1558,"children":1559},{"style":435},[1560],{"type":48,"value":438},{"type":43,"tag":158,"props":1562,"children":1563},{"style":171},[1564],{"type":48,"value":185},{"type":43,"tag":158,"props":1566,"children":1567},{"style":435},[1568],{"type":48,"value":478},{"type":43,"tag":158,"props":1570,"children":1571},{"style":177},[1572],{"type":48,"value":1573},"])",{"type":43,"tag":158,"props":1575,"children":1576},{"style":171},[1577],{"type":48,"value":238},{"type":43,"tag":158,"props":1579,"children":1581},{"class":160,"line":1580},23,[1582],{"type":43,"tag":158,"props":1583,"children":1584},{"emptyLinePlaceholder":245},[1585],{"type":48,"value":248},{"type":43,"tag":158,"props":1587,"children":1589},{"class":160,"line":1588},24,[1590,1594],{"type":43,"tag":158,"props":1591,"children":1592},{"style":177},[1593],{"type":48,"value":724},{"type":43,"tag":158,"props":1595,"children":1596},{"style":171},[1597],{"type":48,"value":400},{"type":43,"tag":158,"props":1599,"children":1601},{"class":160,"line":1600},25,[1602,1607,1611,1616,1621,1626,1630,1634,1638,1643],{"type":43,"tag":158,"props":1603,"children":1604},{"style":356},[1605],{"type":48,"value":1606},"  transform",{"type":43,"tag":158,"props":1608,"children":1609},{"style":171},[1610],{"type":48,"value":414},{"type":43,"tag":158,"props":1612,"children":1613},{"style":171},[1614],{"type":48,"value":1615}," `",{"type":43,"tag":158,"props":1617,"children":1618},{"style":226},[1619],{"type":48,"value":1620},"scale(",{"type":43,"tag":158,"props":1622,"children":1623},{"style":171},[1624],{"type":48,"value":1625},"${",{"type":43,"tag":158,"props":1627,"children":1628},{"style":177},[1629],{"type":48,"value":732},{"type":43,"tag":158,"props":1631,"children":1632},{"style":171},[1633],{"type":48,"value":976},{"type":43,"tag":158,"props":1635,"children":1636},{"style":226},[1637],{"type":48,"value":617},{"type":43,"tag":158,"props":1639,"children":1640},{"style":171},[1641],{"type":48,"value":1642},"`",{"type":43,"tag":158,"props":1644,"children":1645},{"style":171},[1646],{"type":48,"value":522},{"type":43,"tag":158,"props":1648,"children":1650},{"class":160,"line":1649},26,[1651],{"type":43,"tag":158,"props":1652,"children":1653},{"style":171},[1654],{"type":48,"value":1482},{"type":43,"tag":60,"props":1656,"children":1658},{"id":1657},"assets",[1659],{"type":48,"value":1660},"Assets",{"type":43,"tag":44,"props":1662,"children":1663},{},[1664,1666,1672,1674,1680,1682,1687],{"type":48,"value":1665},"Place assets in the ",{"type":43,"tag":72,"props":1667,"children":1669},{"className":1668},[],[1670],{"type":48,"value":1671},"public\u002F",{"type":48,"value":1673}," folder at your project root.\nUse ",{"type":43,"tag":72,"props":1675,"children":1677},{"className":1676},[],[1678],{"type":48,"value":1679},"staticFile()",{"type":48,"value":1681}," to reference files from the ",{"type":43,"tag":72,"props":1683,"children":1685},{"className":1684},[],[1686],{"type":48,"value":1671},{"type":48,"value":1688}," folder.",{"type":43,"tag":60,"props":1690,"children":1692},{"id":1691},"media-components",[1693],{"type":48,"value":1694},"Media components",{"type":43,"tag":44,"props":1696,"children":1697},{},[1698,1700,1706,1707,1713,1715,1721,1722,1725,1727,1733,1735,1741,1743,1749,1751,1756,1758,1763],{"type":48,"value":1699},"Add video and audio using ",{"type":43,"tag":72,"props":1701,"children":1703},{"className":1702},[],[1704],{"type":48,"value":1705},"\u003CVideo>",{"type":48,"value":79},{"type":43,"tag":72,"props":1708,"children":1710},{"className":1709},[],[1711],{"type":48,"value":1712},"\u003CAudio>",{"type":48,"value":1714}," from ",{"type":43,"tag":72,"props":1716,"children":1718},{"className":1717},[],[1719],{"type":48,"value":1720},"@remotion\u002Fmedia",{"type":48,"value":87},{"type":43,"tag":89,"props":1723,"children":1724},{},[],{"type":48,"value":1726},"\nAdd images using the ",{"type":43,"tag":72,"props":1728,"children":1730},{"className":1729},[],[1731],{"type":48,"value":1732},"\u003CCanvasImage>",{"type":48,"value":1734}," component.\nAdd animated GIFs, APNG, WebP or AVIF images using ",{"type":43,"tag":72,"props":1736,"children":1738},{"className":1737},[],[1739],{"type":48,"value":1740},"\u003CAnimatedImage>",{"type":48,"value":1742},", use ",{"type":43,"tag":72,"props":1744,"children":1746},{"className":1745},[],[1747],{"type":48,"value":1748},"@remotion\u002Fgif",{"type":48,"value":1750}," if not using Chrome.\nUse ",{"type":43,"tag":72,"props":1752,"children":1754},{"className":1753},[],[1755],{"type":48,"value":1679},{"type":48,"value":1757}," for files in ",{"type":43,"tag":72,"props":1759,"children":1761},{"className":1760},[],[1762],{"type":48,"value":1671},{"type":48,"value":1764}," or pass a remote URL directly:",{"type":43,"tag":147,"props":1766,"children":1768},{"className":149,"code":1767,"language":151,"meta":152,"style":152},"import { Audio, Video } from \"@remotion\u002Fmedia\";\nimport { staticFile, CanvasImage, AnimatedImage } from \"remotion\";\n\nexport const MyComposition = () => {\n  return (\n    \u003C>\n      \u003CVideo src={staticFile(\"video.mp4\")} style={{ opacity: 0.5 }} \u002F>\n      \u003CAudio src={staticFile(\"audio.mp3\")} \u002F>\n      \u003CCanvasImage src={staticFile(\"logo.png\")} style={{ width: 100, height: 100 }} \u002F>\n      \u003CVideo src=\"https:\u002F\u002Fremotion.media\u002Fvideo.mp4\" \u002F>\n      \u003CAnimatedImage src={staticFile('nyancat.gif')} \u002F>\n    \u003C\u002F>\n  );\n};\n",[1769],{"type":43,"tag":72,"props":1770,"children":1771},{"__ignoreMap":152},[1772,1821,1879,1886,1918,1929,1937,2018,2068,2159,2196,2245,2253,2264],{"type":43,"tag":158,"props":1773,"children":1774},{"class":160,"line":161},[1775,1779,1783,1788,1792,1797,1801,1805,1809,1813,1817],{"type":43,"tag":158,"props":1776,"children":1777},{"style":165},[1778],{"type":48,"value":168},{"type":43,"tag":158,"props":1780,"children":1781},{"style":171},[1782],{"type":48,"value":174},{"type":43,"tag":158,"props":1784,"children":1785},{"style":177},[1786],{"type":48,"value":1787}," Audio",{"type":43,"tag":158,"props":1789,"children":1790},{"style":171},[1791],{"type":48,"value":185},{"type":43,"tag":158,"props":1793,"children":1794},{"style":177},[1795],{"type":48,"value":1796}," Video",{"type":43,"tag":158,"props":1798,"children":1799},{"style":171},[1800],{"type":48,"value":213},{"type":43,"tag":158,"props":1802,"children":1803},{"style":165},[1804],{"type":48,"value":218},{"type":43,"tag":158,"props":1806,"children":1807},{"style":171},[1808],{"type":48,"value":223},{"type":43,"tag":158,"props":1810,"children":1811},{"style":226},[1812],{"type":48,"value":1720},{"type":43,"tag":158,"props":1814,"children":1815},{"style":171},[1816],{"type":48,"value":233},{"type":43,"tag":158,"props":1818,"children":1819},{"style":171},[1820],{"type":48,"value":238},{"type":43,"tag":158,"props":1822,"children":1823},{"class":160,"line":241},[1824,1828,1832,1837,1841,1846,1850,1855,1859,1863,1867,1871,1875],{"type":43,"tag":158,"props":1825,"children":1826},{"style":165},[1827],{"type":48,"value":168},{"type":43,"tag":158,"props":1829,"children":1830},{"style":171},[1831],{"type":48,"value":174},{"type":43,"tag":158,"props":1833,"children":1834},{"style":177},[1835],{"type":48,"value":1836}," staticFile",{"type":43,"tag":158,"props":1838,"children":1839},{"style":171},[1840],{"type":48,"value":185},{"type":43,"tag":158,"props":1842,"children":1843},{"style":177},[1844],{"type":48,"value":1845}," CanvasImage",{"type":43,"tag":158,"props":1847,"children":1848},{"style":171},[1849],{"type":48,"value":185},{"type":43,"tag":158,"props":1851,"children":1852},{"style":177},[1853],{"type":48,"value":1854}," AnimatedImage",{"type":43,"tag":158,"props":1856,"children":1857},{"style":171},[1858],{"type":48,"value":213},{"type":43,"tag":158,"props":1860,"children":1861},{"style":165},[1862],{"type":48,"value":218},{"type":43,"tag":158,"props":1864,"children":1865},{"style":171},[1866],{"type":48,"value":223},{"type":43,"tag":158,"props":1868,"children":1869},{"style":226},[1870],{"type":48,"value":8},{"type":43,"tag":158,"props":1872,"children":1873},{"style":171},[1874],{"type":48,"value":233},{"type":43,"tag":158,"props":1876,"children":1877},{"style":171},[1878],{"type":48,"value":238},{"type":43,"tag":158,"props":1880,"children":1881},{"class":160,"line":251},[1882],{"type":43,"tag":158,"props":1883,"children":1884},{"emptyLinePlaceholder":245},[1885],{"type":48,"value":248},{"type":43,"tag":158,"props":1887,"children":1888},{"class":160,"line":291},[1889,1893,1897,1902,1906,1910,1914],{"type":43,"tag":158,"props":1890,"children":1891},{"style":165},[1892],{"type":48,"value":257},{"type":43,"tag":158,"props":1894,"children":1895},{"style":260},[1896],{"type":48,"value":263},{"type":43,"tag":158,"props":1898,"children":1899},{"style":177},[1900],{"type":48,"value":1901}," MyComposition ",{"type":43,"tag":158,"props":1903,"children":1904},{"style":171},[1905],{"type":48,"value":273},{"type":43,"tag":158,"props":1907,"children":1908},{"style":171},[1909],{"type":48,"value":278},{"type":43,"tag":158,"props":1911,"children":1912},{"style":260},[1913],{"type":48,"value":283},{"type":43,"tag":158,"props":1915,"children":1916},{"style":171},[1917],{"type":48,"value":288},{"type":43,"tag":158,"props":1919,"children":1920},{"class":160,"line":325},[1921,1925],{"type":43,"tag":158,"props":1922,"children":1923},{"style":165},[1924],{"type":48,"value":339},{"type":43,"tag":158,"props":1926,"children":1927},{"style":315},[1928],{"type":48,"value":344},{"type":43,"tag":158,"props":1930,"children":1931},{"class":160,"line":333},[1932],{"type":43,"tag":158,"props":1933,"children":1934},{"style":171},[1935],{"type":48,"value":1936},"    \u003C>\n",{"type":43,"tag":158,"props":1938,"children":1939},{"class":160,"line":347},[1940,1945,1949,1954,1959,1964,1968,1972,1977,1981,1985,1990,1994,1999,2004,2008,2013],{"type":43,"tag":158,"props":1941,"children":1942},{"style":171},[1943],{"type":48,"value":1944},"      \u003C",{"type":43,"tag":158,"props":1946,"children":1947},{"style":356},[1948],{"type":48,"value":19},{"type":43,"tag":158,"props":1950,"children":1951},{"style":260},[1952],{"type":48,"value":1953}," src",{"type":43,"tag":158,"props":1955,"children":1956},{"style":171},[1957],{"type":48,"value":1958},"={",{"type":43,"tag":158,"props":1960,"children":1961},{"style":310},[1962],{"type":48,"value":1963},"staticFile",{"type":43,"tag":158,"props":1965,"children":1966},{"style":177},[1967],{"type":48,"value":582},{"type":43,"tag":158,"props":1969,"children":1970},{"style":171},[1971],{"type":48,"value":233},{"type":43,"tag":158,"props":1973,"children":1974},{"style":226},[1975],{"type":48,"value":1976},"video.mp4",{"type":43,"tag":158,"props":1978,"children":1979},{"style":171},[1980],{"type":48,"value":233},{"type":43,"tag":158,"props":1982,"children":1983},{"style":177},[1984],{"type":48,"value":617},{"type":43,"tag":158,"props":1986,"children":1987},{"style":171},[1988],{"type":48,"value":1989},"} ",{"type":43,"tag":158,"props":1991,"children":1992},{"style":260},[1993],{"type":48,"value":724},{"type":43,"tag":158,"props":1995,"children":1996},{"style":171},[1997],{"type":48,"value":1998},"={{",{"type":43,"tag":158,"props":2000,"children":2001},{"style":315},[2002],{"type":48,"value":2003}," opacity",{"type":43,"tag":158,"props":2005,"children":2006},{"style":171},[2007],{"type":48,"value":414},{"type":43,"tag":158,"props":2009,"children":2010},{"style":435},[2011],{"type":48,"value":2012}," 0.5",{"type":43,"tag":158,"props":2014,"children":2015},{"style":171},[2016],{"type":48,"value":2017}," }} \u002F>\n",{"type":43,"tag":158,"props":2019,"children":2020},{"class":160,"line":362},[2021,2025,2030,2034,2038,2042,2046,2050,2055,2059,2063],{"type":43,"tag":158,"props":2022,"children":2023},{"style":171},[2024],{"type":48,"value":1944},{"type":43,"tag":158,"props":2026,"children":2027},{"style":356},[2028],{"type":48,"value":2029},"Audio",{"type":43,"tag":158,"props":2031,"children":2032},{"style":260},[2033],{"type":48,"value":1953},{"type":43,"tag":158,"props":2035,"children":2036},{"style":171},[2037],{"type":48,"value":1958},{"type":43,"tag":158,"props":2039,"children":2040},{"style":310},[2041],{"type":48,"value":1963},{"type":43,"tag":158,"props":2043,"children":2044},{"style":177},[2045],{"type":48,"value":582},{"type":43,"tag":158,"props":2047,"children":2048},{"style":171},[2049],{"type":48,"value":233},{"type":43,"tag":158,"props":2051,"children":2052},{"style":226},[2053],{"type":48,"value":2054},"audio.mp3",{"type":43,"tag":158,"props":2056,"children":2057},{"style":171},[2058],{"type":48,"value":233},{"type":43,"tag":158,"props":2060,"children":2061},{"style":177},[2062],{"type":48,"value":617},{"type":43,"tag":158,"props":2064,"children":2065},{"style":171},[2066],{"type":48,"value":2067},"} \u002F>\n",{"type":43,"tag":158,"props":2069,"children":2070},{"class":160,"line":389},[2071,2075,2080,2084,2088,2092,2096,2100,2105,2109,2113,2117,2121,2125,2130,2134,2138,2142,2147,2151,2155],{"type":43,"tag":158,"props":2072,"children":2073},{"style":171},[2074],{"type":48,"value":1944},{"type":43,"tag":158,"props":2076,"children":2077},{"style":356},[2078],{"type":48,"value":2079},"CanvasImage",{"type":43,"tag":158,"props":2081,"children":2082},{"style":260},[2083],{"type":48,"value":1953},{"type":43,"tag":158,"props":2085,"children":2086},{"style":171},[2087],{"type":48,"value":1958},{"type":43,"tag":158,"props":2089,"children":2090},{"style":310},[2091],{"type":48,"value":1963},{"type":43,"tag":158,"props":2093,"children":2094},{"style":177},[2095],{"type":48,"value":582},{"type":43,"tag":158,"props":2097,"children":2098},{"style":171},[2099],{"type":48,"value":233},{"type":43,"tag":158,"props":2101,"children":2102},{"style":226},[2103],{"type":48,"value":2104},"logo.png",{"type":43,"tag":158,"props":2106,"children":2107},{"style":171},[2108],{"type":48,"value":233},{"type":43,"tag":158,"props":2110,"children":2111},{"style":177},[2112],{"type":48,"value":617},{"type":43,"tag":158,"props":2114,"children":2115},{"style":171},[2116],{"type":48,"value":1989},{"type":43,"tag":158,"props":2118,"children":2119},{"style":260},[2120],{"type":48,"value":724},{"type":43,"tag":158,"props":2122,"children":2123},{"style":171},[2124],{"type":48,"value":1998},{"type":43,"tag":158,"props":2126,"children":2127},{"style":315},[2128],{"type":48,"value":2129}," width",{"type":43,"tag":158,"props":2131,"children":2132},{"style":171},[2133],{"type":48,"value":414},{"type":43,"tag":158,"props":2135,"children":2136},{"style":435},[2137],{"type":48,"value":829},{"type":43,"tag":158,"props":2139,"children":2140},{"style":171},[2141],{"type":48,"value":185},{"type":43,"tag":158,"props":2143,"children":2144},{"style":315},[2145],{"type":48,"value":2146}," height",{"type":43,"tag":158,"props":2148,"children":2149},{"style":171},[2150],{"type":48,"value":414},{"type":43,"tag":158,"props":2152,"children":2153},{"style":435},[2154],{"type":48,"value":829},{"type":43,"tag":158,"props":2156,"children":2157},{"style":171},[2158],{"type":48,"value":2017},{"type":43,"tag":158,"props":2160,"children":2161},{"class":160,"line":403},[2162,2166,2170,2174,2178,2182,2187,2191],{"type":43,"tag":158,"props":2163,"children":2164},{"style":171},[2165],{"type":48,"value":1944},{"type":43,"tag":158,"props":2167,"children":2168},{"style":356},[2169],{"type":48,"value":19},{"type":43,"tag":158,"props":2171,"children":2172},{"style":260},[2173],{"type":48,"value":1953},{"type":43,"tag":158,"props":2175,"children":2176},{"style":171},[2177],{"type":48,"value":273},{"type":43,"tag":158,"props":2179,"children":2180},{"style":171},[2181],{"type":48,"value":233},{"type":43,"tag":158,"props":2183,"children":2184},{"style":226},[2185],{"type":48,"value":2186},"https:\u002F\u002Fremotion.media\u002Fvideo.mp4",{"type":43,"tag":158,"props":2188,"children":2189},{"style":171},[2190],{"type":48,"value":233},{"type":43,"tag":158,"props":2192,"children":2193},{"style":171},[2194],{"type":48,"value":2195}," \u002F>\n",{"type":43,"tag":158,"props":2197,"children":2198},{"class":160,"line":494},[2199,2203,2208,2212,2216,2220,2224,2228,2233,2237,2241],{"type":43,"tag":158,"props":2200,"children":2201},{"style":171},[2202],{"type":48,"value":1944},{"type":43,"tag":158,"props":2204,"children":2205},{"style":356},[2206],{"type":48,"value":2207},"AnimatedImage",{"type":43,"tag":158,"props":2209,"children":2210},{"style":260},[2211],{"type":48,"value":1953},{"type":43,"tag":158,"props":2213,"children":2214},{"style":171},[2215],{"type":48,"value":1958},{"type":43,"tag":158,"props":2217,"children":2218},{"style":310},[2219],{"type":48,"value":1963},{"type":43,"tag":158,"props":2221,"children":2222},{"style":177},[2223],{"type":48,"value":582},{"type":43,"tag":158,"props":2225,"children":2226},{"style":171},[2227],{"type":48,"value":891},{"type":43,"tag":158,"props":2229,"children":2230},{"style":226},[2231],{"type":48,"value":2232},"nyancat.gif",{"type":43,"tag":158,"props":2234,"children":2235},{"style":171},[2236],{"type":48,"value":891},{"type":43,"tag":158,"props":2238,"children":2239},{"style":177},[2240],{"type":48,"value":617},{"type":43,"tag":158,"props":2242,"children":2243},{"style":171},[2244],{"type":48,"value":2067},{"type":43,"tag":158,"props":2246,"children":2247},{"class":160,"line":525},[2248],{"type":43,"tag":158,"props":2249,"children":2250},{"style":171},[2251],{"type":48,"value":2252},"    \u003C\u002F>\n",{"type":43,"tag":158,"props":2254,"children":2255},{"class":160,"line":554},[2256,2260],{"type":43,"tag":158,"props":2257,"children":2258},{"style":315},[2259],{"type":48,"value":693},{"type":43,"tag":158,"props":2261,"children":2262},{"style":171},[2263],{"type":48,"value":238},{"type":43,"tag":158,"props":2265,"children":2266},{"class":160,"line":624},[2267],{"type":43,"tag":158,"props":2268,"children":2269},{"style":171},[2270],{"type":48,"value":706},{"type":43,"tag":60,"props":2272,"children":2274},{"id":2273},"example-scene",[2275],{"type":48,"value":2276},"Example scene",{"type":43,"tag":147,"props":2278,"children":2280},{"className":149,"code":2279,"language":151,"meta":152,"style":152},"import {\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    \u003CAbsoluteFill\n      name=\"Scene\"\n      style={{display: 'flex', justifyContent: 'center', alignItems: 'center', backgroundColor: 'white'}}\n    >\n      \u003CInteractive.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      \u003C\u002FInteractive.Div>\n      \u003CInteractive.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      \u003C\u002FInteractive.Div>\n    \u003C\u002FAbsoluteFill>\n  );\n}\n",[2281],{"type":43,"tag":72,"props":2282,"children":2283},{"__ignoreMap":152},[2284,2295,2307,2319,2331,2343,2355,2363,2390,2397,2429,2466,2493,2500,2511,2523,2547,2661,2668,2679,2703,2715,2805,2833,2861,2925,2941,2959,2968,2977,2986,3003,3015,3040,3052,3193,3221,3249,3384,3400,3417,3425,3433,3442,3458,3475,3487],{"type":43,"tag":158,"props":2285,"children":2286},{"class":160,"line":161},[2287,2291],{"type":43,"tag":158,"props":2288,"children":2289},{"style":165},[2290],{"type":48,"value":168},{"type":43,"tag":158,"props":2292,"children":2293},{"style":171},[2294],{"type":48,"value":288},{"type":43,"tag":158,"props":2296,"children":2297},{"class":160,"line":241},[2298,2303],{"type":43,"tag":158,"props":2299,"children":2300},{"style":177},[2301],{"type":48,"value":2302},"  AbsoluteFill",{"type":43,"tag":158,"props":2304,"children":2305},{"style":171},[2306],{"type":48,"value":522},{"type":43,"tag":158,"props":2308,"children":2309},{"class":160,"line":251},[2310,2315],{"type":43,"tag":158,"props":2311,"children":2312},{"style":177},[2313],{"type":48,"value":2314},"  Easing",{"type":43,"tag":158,"props":2316,"children":2317},{"style":171},[2318],{"type":48,"value":522},{"type":43,"tag":158,"props":2320,"children":2321},{"class":160,"line":291},[2322,2327],{"type":43,"tag":158,"props":2323,"children":2324},{"style":177},[2325],{"type":48,"value":2326},"  Interactive",{"type":43,"tag":158,"props":2328,"children":2329},{"style":171},[2330],{"type":48,"value":522},{"type":43,"tag":158,"props":2332,"children":2333},{"class":160,"line":325},[2334,2339],{"type":43,"tag":158,"props":2335,"children":2336},{"style":177},[2337],{"type":48,"value":2338},"  interpolate",{"type":43,"tag":158,"props":2340,"children":2341},{"style":171},[2342],{"type":48,"value":522},{"type":43,"tag":158,"props":2344,"children":2345},{"class":160,"line":333},[2346,2351],{"type":43,"tag":158,"props":2347,"children":2348},{"style":177},[2349],{"type":48,"value":2350},"  useCurrentFrame",{"type":43,"tag":158,"props":2352,"children":2353},{"style":171},[2354],{"type":48,"value":522},{"type":43,"tag":158,"props":2356,"children":2357},{"class":160,"line":347},[2358],{"type":43,"tag":158,"props":2359,"children":2360},{"style":177},[2361],{"type":48,"value":2362},"  useVideoConfig\n",{"type":43,"tag":158,"props":2364,"children":2365},{"class":160,"line":362},[2366,2370,2374,2378,2382,2386],{"type":43,"tag":158,"props":2367,"children":2368},{"style":171},[2369],{"type":48,"value":976},{"type":43,"tag":158,"props":2371,"children":2372},{"style":165},[2373],{"type":48,"value":218},{"type":43,"tag":158,"props":2375,"children":2376},{"style":171},[2377],{"type":48,"value":223},{"type":43,"tag":158,"props":2379,"children":2380},{"style":226},[2381],{"type":48,"value":8},{"type":43,"tag":158,"props":2383,"children":2384},{"style":171},[2385],{"type":48,"value":233},{"type":43,"tag":158,"props":2387,"children":2388},{"style":171},[2389],{"type":48,"value":238},{"type":43,"tag":158,"props":2391,"children":2392},{"class":160,"line":389},[2393],{"type":43,"tag":158,"props":2394,"children":2395},{"emptyLinePlaceholder":245},[2396],{"type":48,"value":248},{"type":43,"tag":158,"props":2398,"children":2399},{"class":160,"line":403},[2400,2404,2408,2413,2417,2421,2425],{"type":43,"tag":158,"props":2401,"children":2402},{"style":165},[2403],{"type":48,"value":257},{"type":43,"tag":158,"props":2405,"children":2406},{"style":260},[2407],{"type":48,"value":263},{"type":43,"tag":158,"props":2409,"children":2410},{"style":177},[2411],{"type":48,"value":2412}," Empty ",{"type":43,"tag":158,"props":2414,"children":2415},{"style":171},[2416],{"type":48,"value":273},{"type":43,"tag":158,"props":2418,"children":2419},{"style":171},[2420],{"type":48,"value":278},{"type":43,"tag":158,"props":2422,"children":2423},{"style":260},[2424],{"type":48,"value":283},{"type":43,"tag":158,"props":2426,"children":2427},{"style":171},[2428],{"type":48,"value":288},{"type":43,"tag":158,"props":2430,"children":2431},{"class":160,"line":494},[2432,2436,2440,2445,2449,2453,2458,2462],{"type":43,"tag":158,"props":2433,"children":2434},{"style":260},[2435],{"type":48,"value":297},{"type":43,"tag":158,"props":2437,"children":2438},{"style":171},[2439],{"type":48,"value":174},{"type":43,"tag":158,"props":2441,"children":2442},{"style":177},[2443],{"type":48,"value":2444},"fps",{"type":43,"tag":158,"props":2446,"children":2447},{"style":171},[2448],{"type":48,"value":976},{"type":43,"tag":158,"props":2450,"children":2451},{"style":171},[2452],{"type":48,"value":307},{"type":43,"tag":158,"props":2454,"children":2455},{"style":310},[2456],{"type":48,"value":2457}," useVideoConfig",{"type":43,"tag":158,"props":2459,"children":2460},{"style":315},[2461],{"type":48,"value":318},{"type":43,"tag":158,"props":2463,"children":2464},{"style":171},[2465],{"type":48,"value":238},{"type":43,"tag":158,"props":2467,"children":2468},{"class":160,"line":525},[2469,2473,2477,2481,2485,2489],{"type":43,"tag":158,"props":2470,"children":2471},{"style":260},[2472],{"type":48,"value":297},{"type":43,"tag":158,"props":2474,"children":2475},{"style":177},[2476],{"type":48,"value":302},{"type":43,"tag":158,"props":2478,"children":2479},{"style":171},[2480],{"type":48,"value":307},{"type":43,"tag":158,"props":2482,"children":2483},{"style":310},[2484],{"type":48,"value":180},{"type":43,"tag":158,"props":2486,"children":2487},{"style":315},[2488],{"type":48,"value":318},{"type":43,"tag":158,"props":2490,"children":2491},{"style":171},[2492],{"type":48,"value":238},{"type":43,"tag":158,"props":2494,"children":2495},{"class":160,"line":554},[2496],{"type":43,"tag":158,"props":2497,"children":2498},{"emptyLinePlaceholder":245},[2499],{"type":48,"value":248},{"type":43,"tag":158,"props":2501,"children":2502},{"class":160,"line":624},[2503,2507],{"type":43,"tag":158,"props":2504,"children":2505},{"style":165},[2506],{"type":48,"value":339},{"type":43,"tag":158,"props":2508,"children":2509},{"style":315},[2510],{"type":48,"value":344},{"type":43,"tag":158,"props":2512,"children":2513},{"class":160,"line":641},[2514,2518],{"type":43,"tag":158,"props":2515,"children":2516},{"style":171},[2517],{"type":48,"value":353},{"type":43,"tag":158,"props":2519,"children":2520},{"style":356},[2521],{"type":48,"value":2522},"AbsoluteFill\n",{"type":43,"tag":158,"props":2524,"children":2525},{"class":160,"line":650},[2526,2530,2534,2538,2543],{"type":43,"tag":158,"props":2527,"children":2528},{"style":260},[2529],{"type":48,"value":368},{"type":43,"tag":158,"props":2531,"children":2532},{"style":171},[2533],{"type":48,"value":273},{"type":43,"tag":158,"props":2535,"children":2536},{"style":171},[2537],{"type":48,"value":233},{"type":43,"tag":158,"props":2539,"children":2540},{"style":226},[2541],{"type":48,"value":2542},"Scene",{"type":43,"tag":158,"props":2544,"children":2545},{"style":171},[2546],{"type":48,"value":386},{"type":43,"tag":158,"props":2548,"children":2549},{"class":160,"line":659},[2550,2554,2558,2563,2567,2571,2576,2580,2584,2589,2593,2597,2602,2606,2610,2615,2619,2623,2627,2631,2635,2640,2644,2648,2653,2657],{"type":43,"tag":158,"props":2551,"children":2552},{"style":260},[2553],{"type":48,"value":395},{"type":43,"tag":158,"props":2555,"children":2556},{"style":171},[2557],{"type":48,"value":1998},{"type":43,"tag":158,"props":2559,"children":2560},{"style":315},[2561],{"type":48,"value":2562},"display",{"type":43,"tag":158,"props":2564,"children":2565},{"style":171},[2566],{"type":48,"value":414},{"type":43,"tag":158,"props":2568,"children":2569},{"style":171},[2570],{"type":48,"value":882},{"type":43,"tag":158,"props":2572,"children":2573},{"style":226},[2574],{"type":48,"value":2575},"flex",{"type":43,"tag":158,"props":2577,"children":2578},{"style":171},[2579],{"type":48,"value":891},{"type":43,"tag":158,"props":2581,"children":2582},{"style":171},[2583],{"type":48,"value":185},{"type":43,"tag":158,"props":2585,"children":2586},{"style":315},[2587],{"type":48,"value":2588}," justifyContent",{"type":43,"tag":158,"props":2590,"children":2591},{"style":171},[2592],{"type":48,"value":414},{"type":43,"tag":158,"props":2594,"children":2595},{"style":171},[2596],{"type":48,"value":882},{"type":43,"tag":158,"props":2598,"children":2599},{"style":226},[2600],{"type":48,"value":2601},"center",{"type":43,"tag":158,"props":2603,"children":2604},{"style":171},[2605],{"type":48,"value":891},{"type":43,"tag":158,"props":2607,"children":2608},{"style":171},[2609],{"type":48,"value":185},{"type":43,"tag":158,"props":2611,"children":2612},{"style":315},[2613],{"type":48,"value":2614}," alignItems",{"type":43,"tag":158,"props":2616,"children":2617},{"style":171},[2618],{"type":48,"value":414},{"type":43,"tag":158,"props":2620,"children":2621},{"style":171},[2622],{"type":48,"value":882},{"type":43,"tag":158,"props":2624,"children":2625},{"style":226},[2626],{"type":48,"value":2601},{"type":43,"tag":158,"props":2628,"children":2629},{"style":171},[2630],{"type":48,"value":891},{"type":43,"tag":158,"props":2632,"children":2633},{"style":171},[2634],{"type":48,"value":185},{"type":43,"tag":158,"props":2636,"children":2637},{"style":315},[2638],{"type":48,"value":2639}," backgroundColor",{"type":43,"tag":158,"props":2641,"children":2642},{"style":171},[2643],{"type":48,"value":414},{"type":43,"tag":158,"props":2645,"children":2646},{"style":171},[2647],{"type":48,"value":882},{"type":43,"tag":158,"props":2649,"children":2650},{"style":226},[2651],{"type":48,"value":2652},"white",{"type":43,"tag":158,"props":2654,"children":2655},{"style":171},[2656],{"type":48,"value":891},{"type":43,"tag":158,"props":2658,"children":2659},{"style":171},[2660],{"type":48,"value":1482},{"type":43,"tag":158,"props":2662,"children":2663},{"class":160,"line":668},[2664],{"type":43,"tag":158,"props":2665,"children":2666},{"style":171},[2667],{"type":48,"value":656},{"type":43,"tag":158,"props":2669,"children":2670},{"class":160,"line":687},[2671,2675],{"type":43,"tag":158,"props":2672,"children":2673},{"style":171},[2674],{"type":48,"value":1944},{"type":43,"tag":158,"props":2676,"children":2677},{"style":356},[2678],{"type":48,"value":359},{"type":43,"tag":158,"props":2680,"children":2681},{"class":160,"line":700},[2682,2687,2691,2695,2699],{"type":43,"tag":158,"props":2683,"children":2684},{"style":260},[2685],{"type":48,"value":2686},"        name",{"type":43,"tag":158,"props":2688,"children":2689},{"style":171},[2690],{"type":48,"value":273},{"type":43,"tag":158,"props":2692,"children":2693},{"style":171},[2694],{"type":48,"value":233},{"type":43,"tag":158,"props":2696,"children":2697},{"style":226},[2698],{"type":48,"value":381},{"type":43,"tag":158,"props":2700,"children":2701},{"style":171},[2702],{"type":48,"value":386},{"type":43,"tag":158,"props":2704,"children":2705},{"class":160,"line":1492},[2706,2711],{"type":43,"tag":158,"props":2707,"children":2708},{"style":260},[2709],{"type":48,"value":2710},"        style",{"type":43,"tag":158,"props":2712,"children":2713},{"style":171},[2714],{"type":48,"value":400},{"type":43,"tag":158,"props":2716,"children":2717},{"class":160,"line":1501},[2718,2723,2727,2731,2735,2739,2743,2748,2752,2757,2761,2765,2769,2773,2777,2781,2785,2789,2793,2797,2801],{"type":43,"tag":158,"props":2719,"children":2720},{"style":315},[2721],{"type":48,"value":2722},"          opacity",{"type":43,"tag":158,"props":2724,"children":2725},{"style":171},[2726],{"type":48,"value":414},{"type":43,"tag":158,"props":2728,"children":2729},{"style":310},[2730],{"type":48,"value":199},{"type":43,"tag":158,"props":2732,"children":2733},{"style":177},[2734],{"type":48,"value":423},{"type":43,"tag":158,"props":2736,"children":2737},{"style":171},[2738],{"type":48,"value":185},{"type":43,"tag":158,"props":2740,"children":2741},{"style":177},[2742],{"type":48,"value":432},{"type":43,"tag":158,"props":2744,"children":2745},{"style":435},[2746],{"type":48,"value":2747},"1",{"type":43,"tag":158,"props":2749,"children":2750},{"style":171},[2751],{"type":48,"value":452},{"type":43,"tag":158,"props":2753,"children":2754},{"style":177},[2755],{"type":48,"value":2756}," fps",{"type":43,"tag":158,"props":2758,"children":2759},{"style":171},[2760],{"type":48,"value":185},{"type":43,"tag":158,"props":2762,"children":2763},{"style":435},[2764],{"type":48,"value":447},{"type":43,"tag":158,"props":2766,"children":2767},{"style":171},[2768],{"type":48,"value":452},{"type":43,"tag":158,"props":2770,"children":2771},{"style":177},[2772],{"type":48,"value":457},{"type":43,"tag":158,"props":2774,"children":2775},{"style":171},[2776],{"type":48,"value":185},{"type":43,"tag":158,"props":2778,"children":2779},{"style":177},[2780],{"type":48,"value":432},{"type":43,"tag":158,"props":2782,"children":2783},{"style":435},[2784],{"type":48,"value":438},{"type":43,"tag":158,"props":2786,"children":2787},{"style":171},[2788],{"type":48,"value":185},{"type":43,"tag":158,"props":2790,"children":2791},{"style":435},[2792],{"type":48,"value":478},{"type":43,"tag":158,"props":2794,"children":2795},{"style":177},[2796],{"type":48,"value":483},{"type":43,"tag":158,"props":2798,"children":2799},{"style":171},[2800],{"type":48,"value":185},{"type":43,"tag":158,"props":2802,"children":2803},{"style":171},[2804],{"type":48,"value":288},{"type":43,"tag":158,"props":2806,"children":2807},{"class":160,"line":1580},[2808,2813,2817,2821,2825,2829],{"type":43,"tag":158,"props":2809,"children":2810},{"style":315},[2811],{"type":48,"value":2812},"            extrapolateRight",{"type":43,"tag":158,"props":2814,"children":2815},{"style":171},[2816],{"type":48,"value":414},{"type":43,"tag":158,"props":2818,"children":2819},{"style":171},[2820],{"type":48,"value":223},{"type":43,"tag":158,"props":2822,"children":2823},{"style":226},[2824],{"type":48,"value":513},{"type":43,"tag":158,"props":2826,"children":2827},{"style":171},[2828],{"type":48,"value":233},{"type":43,"tag":158,"props":2830,"children":2831},{"style":171},[2832],{"type":48,"value":522},{"type":43,"tag":158,"props":2834,"children":2835},{"class":160,"line":1588},[2836,2841,2845,2849,2853,2857],{"type":43,"tag":158,"props":2837,"children":2838},{"style":315},[2839],{"type":48,"value":2840},"            extrapolateLeft",{"type":43,"tag":158,"props":2842,"children":2843},{"style":171},[2844],{"type":48,"value":414},{"type":43,"tag":158,"props":2846,"children":2847},{"style":171},[2848],{"type":48,"value":223},{"type":43,"tag":158,"props":2850,"children":2851},{"style":226},[2852],{"type":48,"value":513},{"type":43,"tag":158,"props":2854,"children":2855},{"style":171},[2856],{"type":48,"value":233},{"type":43,"tag":158,"props":2858,"children":2859},{"style":171},[2860],{"type":48,"value":522},{"type":43,"tag":158,"props":2862,"children":2863},{"class":160,"line":1600},[2864,2869,2873,2877,2881,2885,2889,2893,2897,2901,2905,2909,2913,2917,2921],{"type":43,"tag":158,"props":2865,"children":2866},{"style":315},[2867],{"type":48,"value":2868},"            easing",{"type":43,"tag":158,"props":2870,"children":2871},{"style":171},[2872],{"type":48,"value":414},{"type":43,"tag":158,"props":2874,"children":2875},{"style":177},[2876],{"type":48,"value":190},{"type":43,"tag":158,"props":2878,"children":2879},{"style":171},[2880],{"type":48,"value":87},{"type":43,"tag":158,"props":2882,"children":2883},{"style":310},[2884],{"type":48,"value":577},{"type":43,"tag":158,"props":2886,"children":2887},{"style":177},[2888],{"type":48,"value":582},{"type":43,"tag":158,"props":2890,"children":2891},{"style":435},[2892],{"type":48,"value":587},{"type":43,"tag":158,"props":2894,"children":2895},{"style":171},[2896],{"type":48,"value":185},{"type":43,"tag":158,"props":2898,"children":2899},{"style":435},[2900],{"type":48,"value":478},{"type":43,"tag":158,"props":2902,"children":2903},{"style":171},[2904],{"type":48,"value":185},{"type":43,"tag":158,"props":2906,"children":2907},{"style":435},[2908],{"type":48,"value":604},{"type":43,"tag":158,"props":2910,"children":2911},{"style":171},[2912],{"type":48,"value":185},{"type":43,"tag":158,"props":2914,"children":2915},{"style":435},[2916],{"type":48,"value":478},{"type":43,"tag":158,"props":2918,"children":2919},{"style":177},[2920],{"type":48,"value":617},{"type":43,"tag":158,"props":2922,"children":2923},{"style":171},[2924],{"type":48,"value":522},{"type":43,"tag":158,"props":2926,"children":2927},{"class":160,"line":1649},[2928,2933,2937],{"type":43,"tag":158,"props":2929,"children":2930},{"style":171},[2931],{"type":48,"value":2932},"          }",{"type":43,"tag":158,"props":2934,"children":2935},{"style":177},[2936],{"type":48,"value":617},{"type":43,"tag":158,"props":2938,"children":2939},{"style":171},[2940],{"type":48,"value":522},{"type":43,"tag":158,"props":2942,"children":2944},{"class":160,"line":2943},27,[2945,2950,2954],{"type":43,"tag":158,"props":2946,"children":2947},{"style":315},[2948],{"type":48,"value":2949},"          fontSize",{"type":43,"tag":158,"props":2951,"children":2952},{"style":171},[2953],{"type":48,"value":414},{"type":43,"tag":158,"props":2955,"children":2956},{"style":435},[2957],{"type":48,"value":2958}," 88\n",{"type":43,"tag":158,"props":2960,"children":2962},{"class":160,"line":2961},28,[2963],{"type":43,"tag":158,"props":2964,"children":2965},{"style":171},[2966],{"type":48,"value":2967},"        }}\n",{"type":43,"tag":158,"props":2969,"children":2971},{"class":160,"line":2970},29,[2972],{"type":43,"tag":158,"props":2973,"children":2974},{"style":171},[2975],{"type":48,"value":2976},"      >\n",{"type":43,"tag":158,"props":2978,"children":2980},{"class":160,"line":2979},30,[2981],{"type":43,"tag":158,"props":2982,"children":2983},{"style":177},[2984],{"type":48,"value":2985},"        Title\n",{"type":43,"tag":158,"props":2987,"children":2989},{"class":160,"line":2988},31,[2990,2995,2999],{"type":43,"tag":158,"props":2991,"children":2992},{"style":171},[2993],{"type":48,"value":2994},"      \u003C\u002F",{"type":43,"tag":158,"props":2996,"children":2997},{"style":356},[2998],{"type":48,"value":679},{"type":43,"tag":158,"props":3000,"children":3001},{"style":171},[3002],{"type":48,"value":684},{"type":43,"tag":158,"props":3004,"children":3006},{"class":160,"line":3005},32,[3007,3011],{"type":43,"tag":158,"props":3008,"children":3009},{"style":171},[3010],{"type":48,"value":1944},{"type":43,"tag":158,"props":3012,"children":3013},{"style":356},[3014],{"type":48,"value":359},{"type":43,"tag":158,"props":3016,"children":3018},{"class":160,"line":3017},33,[3019,3023,3027,3031,3036],{"type":43,"tag":158,"props":3020,"children":3021},{"style":260},[3022],{"type":48,"value":2686},{"type":43,"tag":158,"props":3024,"children":3025},{"style":171},[3026],{"type":48,"value":273},{"type":43,"tag":158,"props":3028,"children":3029},{"style":171},[3030],{"type":48,"value":233},{"type":43,"tag":158,"props":3032,"children":3033},{"style":226},[3034],{"type":48,"value":3035},"Subtitle",{"type":43,"tag":158,"props":3037,"children":3038},{"style":171},[3039],{"type":48,"value":386},{"type":43,"tag":158,"props":3041,"children":3043},{"class":160,"line":3042},34,[3044,3048],{"type":43,"tag":158,"props":3045,"children":3046},{"style":260},[3047],{"type":48,"value":2710},{"type":43,"tag":158,"props":3049,"children":3050},{"style":171},[3051],{"type":48,"value":400},{"type":43,"tag":158,"props":3053,"children":3055},{"class":160,"line":3054},35,[3056,3060,3064,3068,3072,3076,3080,3085,3089,3093,3097,3102,3106,3110,3114,3119,3123,3127,3131,3136,3140,3144,3148,3152,3156,3160,3164,3168,3172,3176,3181,3185,3189],{"type":43,"tag":158,"props":3057,"children":3058},{"style":315},[3059],{"type":48,"value":2722},{"type":43,"tag":158,"props":3061,"children":3062},{"style":171},[3063],{"type":48,"value":414},{"type":43,"tag":158,"props":3065,"children":3066},{"style":310},[3067],{"type":48,"value":199},{"type":43,"tag":158,"props":3069,"children":3070},{"style":177},[3071],{"type":48,"value":423},{"type":43,"tag":158,"props":3073,"children":3074},{"style":171},[3075],{"type":48,"value":185},{"type":43,"tag":158,"props":3077,"children":3078},{"style":177},[3079],{"type":48,"value":432},{"type":43,"tag":158,"props":3081,"children":3082},{"style":435},[3083],{"type":48,"value":3084},"2",{"type":43,"tag":158,"props":3086,"children":3087},{"style":171},[3088],{"type":48,"value":452},{"type":43,"tag":158,"props":3090,"children":3091},{"style":177},[3092],{"type":48,"value":2756},{"type":43,"tag":158,"props":3094,"children":3095},{"style":171},[3096],{"type":48,"value":185},{"type":43,"tag":158,"props":3098,"children":3099},{"style":435},[3100],{"type":48,"value":3101}," 3",{"type":43,"tag":158,"props":3103,"children":3104},{"style":171},[3105],{"type":48,"value":452},{"type":43,"tag":158,"props":3107,"children":3108},{"style":177},[3109],{"type":48,"value":2756},{"type":43,"tag":158,"props":3111,"children":3112},{"style":171},[3113],{"type":48,"value":185},{"type":43,"tag":158,"props":3115,"children":3116},{"style":435},[3117],{"type":48,"value":3118}," 8",{"type":43,"tag":158,"props":3120,"children":3121},{"style":171},[3122],{"type":48,"value":452},{"type":43,"tag":158,"props":3124,"children":3125},{"style":177},[3126],{"type":48,"value":2756},{"type":43,"tag":158,"props":3128,"children":3129},{"style":171},[3130],{"type":48,"value":185},{"type":43,"tag":158,"props":3132,"children":3133},{"style":435},[3134],{"type":48,"value":3135}," 10",{"type":43,"tag":158,"props":3137,"children":3138},{"style":171},[3139],{"type":48,"value":452},{"type":43,"tag":158,"props":3141,"children":3142},{"style":177},[3143],{"type":48,"value":457},{"type":43,"tag":158,"props":3145,"children":3146},{"style":171},[3147],{"type":48,"value":185},{"type":43,"tag":158,"props":3149,"children":3150},{"style":177},[3151],{"type":48,"value":432},{"type":43,"tag":158,"props":3153,"children":3154},{"style":435},[3155],{"type":48,"value":438},{"type":43,"tag":158,"props":3157,"children":3158},{"style":171},[3159],{"type":48,"value":185},{"type":43,"tag":158,"props":3161,"children":3162},{"style":435},[3163],{"type":48,"value":478},{"type":43,"tag":158,"props":3165,"children":3166},{"style":171},[3167],{"type":48,"value":185},{"type":43,"tag":158,"props":3169,"children":3170},{"style":435},[3171],{"type":48,"value":478},{"type":43,"tag":158,"props":3173,"children":3174},{"style":171},[3175],{"type":48,"value":185},{"type":43,"tag":158,"props":3177,"children":3178},{"style":435},[3179],{"type":48,"value":3180}," 0",{"type":43,"tag":158,"props":3182,"children":3183},{"style":177},[3184],{"type":48,"value":483},{"type":43,"tag":158,"props":3186,"children":3187},{"style":171},[3188],{"type":48,"value":185},{"type":43,"tag":158,"props":3190,"children":3191},{"style":171},[3192],{"type":48,"value":288},{"type":43,"tag":158,"props":3194,"children":3196},{"class":160,"line":3195},36,[3197,3201,3205,3209,3213,3217],{"type":43,"tag":158,"props":3198,"children":3199},{"style":315},[3200],{"type":48,"value":2812},{"type":43,"tag":158,"props":3202,"children":3203},{"style":171},[3204],{"type":48,"value":414},{"type":43,"tag":158,"props":3206,"children":3207},{"style":171},[3208],{"type":48,"value":223},{"type":43,"tag":158,"props":3210,"children":3211},{"style":226},[3212],{"type":48,"value":513},{"type":43,"tag":158,"props":3214,"children":3215},{"style":171},[3216],{"type":48,"value":233},{"type":43,"tag":158,"props":3218,"children":3219},{"style":171},[3220],{"type":48,"value":522},{"type":43,"tag":158,"props":3222,"children":3224},{"class":160,"line":3223},37,[3225,3229,3233,3237,3241,3245],{"type":43,"tag":158,"props":3226,"children":3227},{"style":315},[3228],{"type":48,"value":2840},{"type":43,"tag":158,"props":3230,"children":3231},{"style":171},[3232],{"type":48,"value":414},{"type":43,"tag":158,"props":3234,"children":3235},{"style":171},[3236],{"type":48,"value":223},{"type":43,"tag":158,"props":3238,"children":3239},{"style":226},[3240],{"type":48,"value":513},{"type":43,"tag":158,"props":3242,"children":3243},{"style":171},[3244],{"type":48,"value":233},{"type":43,"tag":158,"props":3246,"children":3247},{"style":171},[3248],{"type":48,"value":522},{"type":43,"tag":158,"props":3250,"children":3252},{"class":160,"line":3251},38,[3253,3257,3261,3266,3270,3274,3278,3282,3286,3290,3294,3298,3302,3306,3310,3314,3318,3322,3327,3331,3335,3339,3343,3347,3351,3355,3359,3363,3367,3371,3375,3380],{"type":43,"tag":158,"props":3254,"children":3255},{"style":315},[3256],{"type":48,"value":2868},{"type":43,"tag":158,"props":3258,"children":3259},{"style":171},[3260],{"type":48,"value":414},{"type":43,"tag":158,"props":3262,"children":3263},{"style":177},[3264],{"type":48,"value":3265}," [Easing",{"type":43,"tag":158,"props":3267,"children":3268},{"style":171},[3269],{"type":48,"value":87},{"type":43,"tag":158,"props":3271,"children":3272},{"style":310},[3273],{"type":48,"value":577},{"type":43,"tag":158,"props":3275,"children":3276},{"style":177},[3277],{"type":48,"value":582},{"type":43,"tag":158,"props":3279,"children":3280},{"style":435},[3281],{"type":48,"value":587},{"type":43,"tag":158,"props":3283,"children":3284},{"style":171},[3285],{"type":48,"value":185},{"type":43,"tag":158,"props":3287,"children":3288},{"style":435},[3289],{"type":48,"value":478},{"type":43,"tag":158,"props":3291,"children":3292},{"style":171},[3293],{"type":48,"value":185},{"type":43,"tag":158,"props":3295,"children":3296},{"style":435},[3297],{"type":48,"value":604},{"type":43,"tag":158,"props":3299,"children":3300},{"style":171},[3301],{"type":48,"value":185},{"type":43,"tag":158,"props":3303,"children":3304},{"style":435},[3305],{"type":48,"value":478},{"type":43,"tag":158,"props":3307,"children":3308},{"style":177},[3309],{"type":48,"value":617},{"type":43,"tag":158,"props":3311,"children":3312},{"style":171},[3313],{"type":48,"value":185},{"type":43,"tag":158,"props":3315,"children":3316},{"style":177},[3317],{"type":48,"value":190},{"type":43,"tag":158,"props":3319,"children":3320},{"style":171},[3321],{"type":48,"value":87},{"type":43,"tag":158,"props":3323,"children":3324},{"style":177},[3325],{"type":48,"value":3326},"linear",{"type":43,"tag":158,"props":3328,"children":3329},{"style":171},[3330],{"type":48,"value":185},{"type":43,"tag":158,"props":3332,"children":3333},{"style":177},[3334],{"type":48,"value":190},{"type":43,"tag":158,"props":3336,"children":3337},{"style":171},[3338],{"type":48,"value":87},{"type":43,"tag":158,"props":3340,"children":3341},{"style":310},[3342],{"type":48,"value":577},{"type":43,"tag":158,"props":3344,"children":3345},{"style":177},[3346],{"type":48,"value":582},{"type":43,"tag":158,"props":3348,"children":3349},{"style":435},[3350],{"type":48,"value":587},{"type":43,"tag":158,"props":3352,"children":3353},{"style":171},[3354],{"type":48,"value":185},{"type":43,"tag":158,"props":3356,"children":3357},{"style":435},[3358],{"type":48,"value":478},{"type":43,"tag":158,"props":3360,"children":3361},{"style":171},[3362],{"type":48,"value":185},{"type":43,"tag":158,"props":3364,"children":3365},{"style":435},[3366],{"type":48,"value":604},{"type":43,"tag":158,"props":3368,"children":3369},{"style":171},[3370],{"type":48,"value":185},{"type":43,"tag":158,"props":3372,"children":3373},{"style":435},[3374],{"type":48,"value":478},{"type":43,"tag":158,"props":3376,"children":3377},{"style":177},[3378],{"type":48,"value":3379},")]",{"type":43,"tag":158,"props":3381,"children":3382},{"style":171},[3383],{"type":48,"value":522},{"type":43,"tag":158,"props":3385,"children":3387},{"class":160,"line":3386},39,[3388,3392,3396],{"type":43,"tag":158,"props":3389,"children":3390},{"style":171},[3391],{"type":48,"value":2932},{"type":43,"tag":158,"props":3393,"children":3394},{"style":177},[3395],{"type":48,"value":617},{"type":43,"tag":158,"props":3397,"children":3398},{"style":171},[3399],{"type":48,"value":522},{"type":43,"tag":158,"props":3401,"children":3403},{"class":160,"line":3402},40,[3404,3408,3412],{"type":43,"tag":158,"props":3405,"children":3406},{"style":315},[3407],{"type":48,"value":2949},{"type":43,"tag":158,"props":3409,"children":3410},{"style":171},[3411],{"type":48,"value":414},{"type":43,"tag":158,"props":3413,"children":3414},{"style":435},[3415],{"type":48,"value":3416}," 32\n",{"type":43,"tag":158,"props":3418,"children":3420},{"class":160,"line":3419},41,[3421],{"type":43,"tag":158,"props":3422,"children":3423},{"style":171},[3424],{"type":48,"value":2967},{"type":43,"tag":158,"props":3426,"children":3428},{"class":160,"line":3427},42,[3429],{"type":43,"tag":158,"props":3430,"children":3431},{"style":171},[3432],{"type":48,"value":2976},{"type":43,"tag":158,"props":3434,"children":3436},{"class":160,"line":3435},43,[3437],{"type":43,"tag":158,"props":3438,"children":3439},{"style":177},[3440],{"type":48,"value":3441},"        Subtitle\n",{"type":43,"tag":158,"props":3443,"children":3445},{"class":160,"line":3444},44,[3446,3450,3454],{"type":43,"tag":158,"props":3447,"children":3448},{"style":171},[3449],{"type":48,"value":2994},{"type":43,"tag":158,"props":3451,"children":3452},{"style":356},[3453],{"type":48,"value":679},{"type":43,"tag":158,"props":3455,"children":3456},{"style":171},[3457],{"type":48,"value":684},{"type":43,"tag":158,"props":3459,"children":3461},{"class":160,"line":3460},45,[3462,3466,3471],{"type":43,"tag":158,"props":3463,"children":3464},{"style":171},[3465],{"type":48,"value":674},{"type":43,"tag":158,"props":3467,"children":3468},{"style":356},[3469],{"type":48,"value":3470},"AbsoluteFill",{"type":43,"tag":158,"props":3472,"children":3473},{"style":171},[3474],{"type":48,"value":684},{"type":43,"tag":158,"props":3476,"children":3478},{"class":160,"line":3477},46,[3479,3483],{"type":43,"tag":158,"props":3480,"children":3481},{"style":315},[3482],{"type":48,"value":693},{"type":43,"tag":158,"props":3484,"children":3485},{"style":171},[3486],{"type":48,"value":238},{"type":43,"tag":158,"props":3488,"children":3490},{"class":160,"line":3489},47,[3491],{"type":43,"tag":158,"props":3492,"children":3493},{"style":171},[3494],{"type":48,"value":3495},"}\n",{"type":43,"tag":60,"props":3497,"children":3499},{"id":3498},"delaying-trimming",[3500],{"type":48,"value":3501},"Delaying, trimming",{"type":43,"tag":44,"props":3503,"children":3504},{},[3505,3507,3513,3514,3520,3522,3528,3529,3534,3535,3540,3541,3547,3548,3554,3555,3561,3562,3567,3568,3573,3574,3579,3580,3585,3586,3592],{"type":48,"value":3506},"Most components (",{"type":43,"tag":72,"props":3508,"children":3510},{"className":3509},[],[3511],{"type":48,"value":3512},"\u003CAbsoluteFill>",{"type":48,"value":734},{"type":43,"tag":72,"props":3515,"children":3517},{"className":3516},[],[3518],{"type":48,"value":3519},"\u003CInteractive.*>",{"type":48,"value":3521}," ",{"type":43,"tag":72,"props":3523,"children":3525},{"className":3524},[],[3526],{"type":48,"value":3527},"\u003CImg>",{"type":48,"value":734},{"type":43,"tag":72,"props":3530,"children":3532},{"className":3531},[],[3533],{"type":48,"value":1740},{"type":48,"value":734},{"type":43,"tag":72,"props":3536,"children":3538},{"className":3537},[],[3539],{"type":48,"value":1732},{"type":48,"value":734},{"type":43,"tag":72,"props":3542,"children":3544},{"className":3543},[],[3545],{"type":48,"value":3546},"\u003CHtmlInCanvas>",{"type":48,"value":734},{"type":43,"tag":72,"props":3549,"children":3551},{"className":3550},[],[3552],{"type":48,"value":3553},"\u003CSolid>",{"type":48,"value":734},{"type":43,"tag":72,"props":3556,"children":3558},{"className":3557},[],[3559],{"type":48,"value":3560},"\u003CSequence>",{"type":48,"value":1714},{"type":43,"tag":72,"props":3563,"children":3565},{"className":3564},[],[3566],{"type":48,"value":8},{"type":48,"value":734},{"type":43,"tag":72,"props":3569,"children":3571},{"className":3570},[],[3572],{"type":48,"value":1705},{"type":48,"value":79},{"type":43,"tag":72,"props":3575,"children":3577},{"className":3576},[],[3578],{"type":48,"value":1712},{"type":48,"value":1714},{"type":43,"tag":72,"props":3581,"children":3583},{"className":3582},[],[3584],{"type":48,"value":1720},{"type":48,"value":734},{"type":43,"tag":72,"props":3587,"children":3589},{"className":3588},[],[3590],{"type":48,"value":3591},"\u003CGif>",{"type":48,"value":3593},", and more) support the following props:",{"type":43,"tag":3595,"props":3596,"children":3598},"h3",{"id":3597},"from",[3599],{"type":48,"value":3597},{"type":43,"tag":147,"props":3601,"children":3603},{"className":149,"code":3602,"language":151,"meta":152,"style":152},"\u003CImg from={1 * fps} {\u002F* ... *\u002F}\u002F>\n\u003CVideo from={1 * fps} {\u002F* ... *\u002F}\u002F>\n\u003CInteractive.Div from={1 * fps} {\u002F* ... *\u002F}\u002F>\n",[3604],{"type":43,"tag":72,"props":3605,"children":3606},{"__ignoreMap":152},[3607,3655,3698],{"type":43,"tag":158,"props":3608,"children":3609},{"class":160,"line":161},[3610,3615,3620,3624,3628,3632,3636,3640,3645,3650],{"type":43,"tag":158,"props":3611,"children":3612},{"style":171},[3613],{"type":48,"value":3614},"\u003C",{"type":43,"tag":158,"props":3616,"children":3617},{"style":356},[3618],{"type":48,"value":3619},"Img",{"type":43,"tag":158,"props":3621,"children":3622},{"style":260},[3623],{"type":48,"value":218},{"type":43,"tag":158,"props":3625,"children":3626},{"style":171},[3627],{"type":48,"value":1958},{"type":43,"tag":158,"props":3629,"children":3630},{"style":435},[3631],{"type":48,"value":2747},{"type":43,"tag":158,"props":3633,"children":3634},{"style":171},[3635],{"type":48,"value":452},{"type":43,"tag":158,"props":3637,"children":3638},{"style":177},[3639],{"type":48,"value":2756},{"type":43,"tag":158,"props":3641,"children":3642},{"style":171},[3643],{"type":48,"value":3644},"} {",{"type":43,"tag":158,"props":3646,"children":3647},{"style":769},[3648],{"type":48,"value":3649},"\u002F* ... *\u002F",{"type":43,"tag":158,"props":3651,"children":3652},{"style":171},[3653],{"type":48,"value":3654},"}\u002F>\n",{"type":43,"tag":158,"props":3656,"children":3657},{"class":160,"line":241},[3658,3662,3666,3670,3674,3678,3682,3686,3690,3694],{"type":43,"tag":158,"props":3659,"children":3660},{"style":171},[3661],{"type":48,"value":3614},{"type":43,"tag":158,"props":3663,"children":3664},{"style":356},[3665],{"type":48,"value":19},{"type":43,"tag":158,"props":3667,"children":3668},{"style":260},[3669],{"type":48,"value":218},{"type":43,"tag":158,"props":3671,"children":3672},{"style":171},[3673],{"type":48,"value":1958},{"type":43,"tag":158,"props":3675,"children":3676},{"style":435},[3677],{"type":48,"value":2747},{"type":43,"tag":158,"props":3679,"children":3680},{"style":171},[3681],{"type":48,"value":452},{"type":43,"tag":158,"props":3683,"children":3684},{"style":177},[3685],{"type":48,"value":2756},{"type":43,"tag":158,"props":3687,"children":3688},{"style":171},[3689],{"type":48,"value":3644},{"type":43,"tag":158,"props":3691,"children":3692},{"style":769},[3693],{"type":48,"value":3649},{"type":43,"tag":158,"props":3695,"children":3696},{"style":171},[3697],{"type":48,"value":3654},{"type":43,"tag":158,"props":3699,"children":3700},{"class":160,"line":251},[3701,3705,3709,3713,3717,3721,3725,3729,3733,3737],{"type":43,"tag":158,"props":3702,"children":3703},{"style":171},[3704],{"type":48,"value":3614},{"type":43,"tag":158,"props":3706,"children":3707},{"style":356},[3708],{"type":48,"value":679},{"type":43,"tag":158,"props":3710,"children":3711},{"style":260},[3712],{"type":48,"value":218},{"type":43,"tag":158,"props":3714,"children":3715},{"style":171},[3716],{"type":48,"value":1958},{"type":43,"tag":158,"props":3718,"children":3719},{"style":435},[3720],{"type":48,"value":2747},{"type":43,"tag":158,"props":3722,"children":3723},{"style":171},[3724],{"type":48,"value":452},{"type":43,"tag":158,"props":3726,"children":3727},{"style":177},[3728],{"type":48,"value":2756},{"type":43,"tag":158,"props":3730,"children":3731},{"style":171},[3732],{"type":48,"value":3644},{"type":43,"tag":158,"props":3734,"children":3735},{"style":769},[3736],{"type":48,"value":3649},{"type":43,"tag":158,"props":3738,"children":3739},{"style":171},[3740],{"type":48,"value":3654},{"type":43,"tag":44,"props":3742,"children":3743},{},[3744],{"type":48,"value":3745},"When the element starts appearing in the timelien.",{"type":43,"tag":3595,"props":3747,"children":3749},{"id":3748},"durationinframes",[3750],{"type":48,"value":3751},"durationInFrames",{"type":43,"tag":147,"props":3753,"children":3755},{"className":149,"code":3754,"language":151,"meta":152,"style":152},"\u003CImg durationInFrames={20 * fps} {\u002F* ... *\u002F}\u002F>\n\u003CInteractive.Div durationInFrames={20 * fps} {\u002F* ... *\u002F}\u002F>\n",[3756],{"type":43,"tag":72,"props":3757,"children":3758},{"__ignoreMap":152},[3759,3804],{"type":43,"tag":158,"props":3760,"children":3761},{"class":160,"line":161},[3762,3766,3770,3775,3779,3784,3788,3792,3796,3800],{"type":43,"tag":158,"props":3763,"children":3764},{"style":171},[3765],{"type":48,"value":3614},{"type":43,"tag":158,"props":3767,"children":3768},{"style":356},[3769],{"type":48,"value":3619},{"type":43,"tag":158,"props":3771,"children":3772},{"style":260},[3773],{"type":48,"value":3774}," durationInFrames",{"type":43,"tag":158,"props":3776,"children":3777},{"style":171},[3778],{"type":48,"value":1958},{"type":43,"tag":158,"props":3780,"children":3781},{"style":435},[3782],{"type":48,"value":3783},"20",{"type":43,"tag":158,"props":3785,"children":3786},{"style":171},[3787],{"type":48,"value":452},{"type":43,"tag":158,"props":3789,"children":3790},{"style":177},[3791],{"type":48,"value":2756},{"type":43,"tag":158,"props":3793,"children":3794},{"style":171},[3795],{"type":48,"value":3644},{"type":43,"tag":158,"props":3797,"children":3798},{"style":769},[3799],{"type":48,"value":3649},{"type":43,"tag":158,"props":3801,"children":3802},{"style":171},[3803],{"type":48,"value":3654},{"type":43,"tag":158,"props":3805,"children":3806},{"class":160,"line":241},[3807,3811,3815,3819,3823,3827,3831,3835,3839,3843],{"type":43,"tag":158,"props":3808,"children":3809},{"style":171},[3810],{"type":48,"value":3614},{"type":43,"tag":158,"props":3812,"children":3813},{"style":356},[3814],{"type":48,"value":679},{"type":43,"tag":158,"props":3816,"children":3817},{"style":260},[3818],{"type":48,"value":3774},{"type":43,"tag":158,"props":3820,"children":3821},{"style":171},[3822],{"type":48,"value":1958},{"type":43,"tag":158,"props":3824,"children":3825},{"style":435},[3826],{"type":48,"value":3783},{"type":43,"tag":158,"props":3828,"children":3829},{"style":171},[3830],{"type":48,"value":452},{"type":43,"tag":158,"props":3832,"children":3833},{"style":177},[3834],{"type":48,"value":2756},{"type":43,"tag":158,"props":3836,"children":3837},{"style":171},[3838],{"type":48,"value":3644},{"type":43,"tag":158,"props":3840,"children":3841},{"style":769},[3842],{"type":48,"value":3649},{"type":43,"tag":158,"props":3844,"children":3845},{"style":171},[3846],{"type":48,"value":3654},{"type":43,"tag":44,"props":3848,"children":3849},{},[3850,3852,3855,3857],{"type":48,"value":3851},"For how long the layer plays in the timeline.",{"type":43,"tag":89,"props":3853,"children":3854},{},[],{"type":48,"value":3856},"\nFor media, pass the natural duration of the media: ",{"type":43,"tag":72,"props":3858,"children":3860},{"className":3859},[],[3861],{"type":48,"value":3862},"\u003CVideo durationInFrames={29.322 * fps}\u002F>",{"type":43,"tag":3595,"props":3864,"children":3866},{"id":3865},"trimbefore",[3867],{"type":43,"tag":72,"props":3868,"children":3870},{"className":3869},[],[3871],{"type":48,"value":3872},"trimBefore",{"type":43,"tag":44,"props":3874,"children":3875},{},[3876],{"type":48,"value":3877},"Useful for components whose internal clock should start later:",{"type":43,"tag":147,"props":3879,"children":3881},{"className":149,"code":3880,"language":151,"meta":152,"style":152},"\u003CVideo trimBefore={2 * fps} {\u002F* ... *\u002F} \u002F> \u002F\u002F Trim away first 2 seconds of footage\n\u003CSequence trimBefore={10 * fps} {\u002F* ... *\u002F} \u002F> \u002F\u002F `useCurrenFrame()` for children starts at `10 * fps`\n",[3882],{"type":43,"tag":72,"props":3883,"children":3884},{"__ignoreMap":152},[3885,3935],{"type":43,"tag":158,"props":3886,"children":3887},{"class":160,"line":161},[3888,3892,3896,3901,3905,3909,3913,3917,3921,3925,3930],{"type":43,"tag":158,"props":3889,"children":3890},{"style":171},[3891],{"type":48,"value":3614},{"type":43,"tag":158,"props":3893,"children":3894},{"style":356},[3895],{"type":48,"value":19},{"type":43,"tag":158,"props":3897,"children":3898},{"style":260},[3899],{"type":48,"value":3900}," trimBefore",{"type":43,"tag":158,"props":3902,"children":3903},{"style":171},[3904],{"type":48,"value":1958},{"type":43,"tag":158,"props":3906,"children":3907},{"style":435},[3908],{"type":48,"value":3084},{"type":43,"tag":158,"props":3910,"children":3911},{"style":171},[3912],{"type":48,"value":452},{"type":43,"tag":158,"props":3914,"children":3915},{"style":177},[3916],{"type":48,"value":2756},{"type":43,"tag":158,"props":3918,"children":3919},{"style":171},[3920],{"type":48,"value":3644},{"type":43,"tag":158,"props":3922,"children":3923},{"style":769},[3924],{"type":48,"value":3649},{"type":43,"tag":158,"props":3926,"children":3927},{"style":171},[3928],{"type":48,"value":3929},"} \u002F>",{"type":43,"tag":158,"props":3931,"children":3932},{"style":769},[3933],{"type":48,"value":3934}," \u002F\u002F Trim away first 2 seconds of footage\n",{"type":43,"tag":158,"props":3936,"children":3937},{"class":160,"line":241},[3938,3942,3947,3951,3955,3960,3964,3968,3972,3976,3980],{"type":43,"tag":158,"props":3939,"children":3940},{"style":171},[3941],{"type":48,"value":3614},{"type":43,"tag":158,"props":3943,"children":3944},{"style":356},[3945],{"type":48,"value":3946},"Sequence",{"type":43,"tag":158,"props":3948,"children":3949},{"style":260},[3950],{"type":48,"value":3900},{"type":43,"tag":158,"props":3952,"children":3953},{"style":171},[3954],{"type":48,"value":1958},{"type":43,"tag":158,"props":3956,"children":3957},{"style":435},[3958],{"type":48,"value":3959},"10",{"type":43,"tag":158,"props":3961,"children":3962},{"style":171},[3963],{"type":48,"value":452},{"type":43,"tag":158,"props":3965,"children":3966},{"style":177},[3967],{"type":48,"value":2756},{"type":43,"tag":158,"props":3969,"children":3970},{"style":171},[3971],{"type":48,"value":3644},{"type":43,"tag":158,"props":3973,"children":3974},{"style":769},[3975],{"type":48,"value":3649},{"type":43,"tag":158,"props":3977,"children":3978},{"style":171},[3979],{"type":48,"value":3929},{"type":43,"tag":158,"props":3981,"children":3982},{"style":769},[3983],{"type":48,"value":3984}," \u002F\u002F `useCurrenFrame()` for children starts at `10 * fps`\n",{"type":43,"tag":3595,"props":3986,"children":3988},{"id":3987},"fallback",[3989],{"type":48,"value":3990},"Fallback",{"type":43,"tag":44,"props":3992,"children":3993},{},[3994,3996,4001,4002,4007],{"type":48,"value":3995},"If a component does not support these props, wrap it in",{"type":43,"tag":72,"props":3997,"children":3999},{"className":3998},[],[4000],{"type":48,"value":3560},{"type":48,"value":1714},{"type":43,"tag":72,"props":4003,"children":4005},{"className":4004},[],[4006],{"type":48,"value":8},{"type":48,"value":4008},", which has them.",{"type":43,"tag":4010,"props":4011,"children":4012},"ul",{},[4013,4025],{"type":43,"tag":4014,"props":4015,"children":4016},"li",{},[4017,4023],{"type":43,"tag":72,"props":4018,"children":4020},{"className":4019},[],[4021],{"type":48,"value":4022},"layout=\"absolute-fill\"",{"type":48,"value":4024}," makes the Sequence behave like AbsoluteFill",{"type":43,"tag":4014,"props":4026,"children":4027},{},[4028,4034],{"type":43,"tag":72,"props":4029,"children":4031},{"className":4030},[],[4032],{"type":48,"value":4033},"layout=\"none\"",{"type":48,"value":4035}," is \"headless\" mode, no wrapper element is used.",{"type":43,"tag":60,"props":4037,"children":4039},{"id":4038},"maps",[4040],{"type":48,"value":4041},"Maps",{"type":43,"tag":44,"props":4043,"children":4044},{},[4045,4047,4053],{"type":48,"value":4046},"See ",{"type":43,"tag":51,"props":4048,"children":4050},{"href":4049},"remotion-maps\u002FREFERENCE.md",[4051],{"type":48,"value":4052},"Remotion Maps",{"type":48,"value":4054}," if wanting to include maps in the video.",{"type":43,"tag":60,"props":4056,"children":4058},{"id":4057},"text-highlights-and-annotations",[4059],{"type":48,"value":4060},"Text highlights and annotations",{"type":43,"tag":44,"props":4062,"children":4063},{},[4064,4065,4070],{"type":48,"value":4046},{"type":43,"tag":51,"props":4066,"children":4068},{"href":4067},"text-highlights.md",[4069],{"type":48,"value":4067},{"type":48,"value":4071}," for text highlights (highlight markers), circles, underlines, strike-throughs, crossed-off text, boxes.",{"type":43,"tag":60,"props":4073,"children":4075},{"id":4074},"multi-scene-videos",[4076],{"type":48,"value":4077},"Multi-scene videos",{"type":43,"tag":44,"props":4079,"children":4080},{},[4081,4082,4087],{"type":48,"value":4046},{"type":43,"tag":51,"props":4083,"children":4085},{"href":4084},"multi-scene-video.md",[4086],{"type":48,"value":4084},{"type":48,"value":4088}," if planning to make a video with multiple subsequent scenes.",{"type":43,"tag":60,"props":4090,"children":4092},{"id":4091},"voiceover",[4093],{"type":48,"value":4094},"Voiceover",{"type":43,"tag":44,"props":4096,"children":4097},{},[4098,4099,4104],{"type":48,"value":4046},{"type":43,"tag":51,"props":4100,"children":4102},{"href":4101},"voiceover.md",[4103],{"type":48,"value":4101},{"type":48,"value":4105}," for adding an AI-generated voiceover to Remotion compositions using ElevenLabs TTS.",{"type":43,"tag":60,"props":4107,"children":4109},{"id":4108},"embedding-videos",[4110],{"type":48,"value":4111},"Embedding Videos",{"type":43,"tag":44,"props":4113,"children":4114},{},[4115,4116,4121],{"type":48,"value":4046},{"type":43,"tag":51,"props":4117,"children":4119},{"href":4118},"embedding-videos.md",[4120],{"type":48,"value":4118},{"type":48,"value":4122}," for advanced knowledge about embedding videos - trimming, volume, speed, looping, pitch.",{"type":43,"tag":60,"props":4124,"children":4126},{"id":4125},"embedding-audio",[4127],{"type":48,"value":4128},"Embedding Audio",{"type":43,"tag":44,"props":4130,"children":4131},{},[4132,4133,4138],{"type":48,"value":4046},{"type":43,"tag":51,"props":4134,"children":4136},{"href":4135},"audio.md",[4137],{"type":48,"value":4135},{"type":48,"value":4139}," for advanced audio features like trimming, volume, speed, pitch.",{"type":43,"tag":60,"props":4141,"children":4143},{"id":4142},"video-editing",[4144],{"type":48,"value":4145},"Video editing",{"type":43,"tag":44,"props":4147,"children":4148},{},[4149,4150,4155],{"type":48,"value":4046},{"type":43,"tag":51,"props":4151,"children":4153},{"href":4152},"video-editing.md",[4154],{"type":48,"value":4152},{"type":48,"value":4156}," for structuring editable video timelines in Remotion Studio.",{"type":43,"tag":60,"props":4158,"children":4160},{"id":4159},"cropping",[4161],{"type":48,"value":4162},"Cropping",{"type":43,"tag":44,"props":4164,"children":4165},{},[4166,4167,4172],{"type":48,"value":4046},{"type":43,"tag":51,"props":4168,"children":4170},{"href":4169},"cropping.md",[4171],{"type":48,"value":4169},{"type":48,"value":4173}," if needing to crop the visible rectangle of a component.",{"type":43,"tag":60,"props":4175,"children":4177},{"id":4176},"transitions",[4178],{"type":48,"value":4179},"Transitions",{"type":43,"tag":44,"props":4181,"children":4182},{},[4183,4184,4189],{"type":48,"value":4046},{"type":43,"tag":51,"props":4185,"children":4187},{"href":4186},"transitions.md",[4188],{"type":48,"value":4186},{"type":48,"value":4190}," for scene transition patterns.",{"type":43,"tag":60,"props":4192,"children":4194},{"id":4193},"visual-and-pixel-effects",[4195],{"type":48,"value":4196},"Visual and pixel effects",{"type":43,"tag":44,"props":4198,"children":4199},{},[4200,4202,4205],{"type":48,"value":4201},"When creating a visual effect, consider whether it is feasible using CSS and HTML, or whether a shader is needed.",{"type":43,"tag":89,"props":4203,"children":4204},{},[],{"type":48,"value":4206},"\nOrder or preference:",{"type":43,"tag":4208,"props":4209,"children":4210},"ol",{},[4211,4216],{"type":43,"tag":4014,"props":4212,"children":4213},{},[4214],{"type":48,"value":4215},"Regular HTML + CSS or other web techniques",{"type":43,"tag":4014,"props":4217,"children":4218},{},[4219,4221,4226,4227,4232,4234,4243,4245,4251],{"type":48,"value":4220},"An effect applied to the element directly (",{"type":43,"tag":72,"props":4222,"children":4224},{"className":4223},[],[4225],{"type":48,"value":1705},{"type":48,"value":734},{"type":43,"tag":72,"props":4228,"children":4230},{"className":4229},[],[4231],{"type":48,"value":3527},{"type":48,"value":4233},"), or by wrapping the content in ",{"type":43,"tag":51,"props":4235,"children":4237},{"href":4236},"html-in-canvas.md",[4238],{"type":43,"tag":72,"props":4239,"children":4241},{"className":4240},[],[4242],{"type":48,"value":3546},{"type":48,"value":4244},", which also accepts ",{"type":43,"tag":72,"props":4246,"children":4248},{"className":4247},[],[4249],{"type":48,"value":4250},"effects",{"type":48,"value":414},{"type":43,"tag":4010,"props":4253,"children":4254},{},[4255,4265],{"type":43,"tag":4014,"props":4256,"children":4257},{},[4258,4260],{"type":48,"value":4259},"A listed effect via ",{"type":43,"tag":51,"props":4261,"children":4263},{"href":4262},"effects.md",[4264],{"type":48,"value":4262},{"type":43,"tag":4014,"props":4266,"children":4267},{},[4268,4270,4276,4278,4282],{"type":48,"value":4269},"A custom ",{"type":43,"tag":72,"props":4271,"children":4273},{"className":4272},[],[4274],{"type":48,"value":4275},"createEffect()",{"type":48,"value":4277}," via ",{"type":43,"tag":51,"props":4279,"children":4280},{"href":4262},[4281],{"type":48,"value":4262},{"type":48,"value":4283}," when no preset is available.",{"type":43,"tag":60,"props":4285,"children":4287},{"id":4286},"_3d-content",[4288],{"type":48,"value":4289},"3D content",{"type":43,"tag":44,"props":4291,"children":4292},{},[4293,4294,4299],{"type":48,"value":4046},{"type":43,"tag":51,"props":4295,"children":4297},{"href":4296},".\u002F3d.md",[4298],{"type":48,"value":4296},{"type":48,"value":4300}," for 3D content in Remotion using Three.js and React Three Fiber.",{"type":43,"tag":60,"props":4302,"children":4304},{"id":4303},"sound-effects",[4305],{"type":48,"value":4306},"Sound effects",{"type":43,"tag":44,"props":4308,"children":4309},{},[4310,4312,4317],{"type":48,"value":4311},"When needing to use sound effects, load the ",{"type":43,"tag":51,"props":4313,"children":4315},{"href":4314},".\u002Fsfx.md",[4316],{"type":48,"value":4314},{"type":48,"value":4318}," file for more information.",{"type":43,"tag":60,"props":4320,"children":4322},{"id":4321},"audio-visualization",[4323],{"type":48,"value":4324},"Audio visualization",{"type":43,"tag":44,"props":4326,"children":4327},{},[4328,4330,4335],{"type":48,"value":4329},"When needing to visualize audio (spectrum bars, waveforms, bass-reactive effects), load the ",{"type":43,"tag":51,"props":4331,"children":4333},{"href":4332},".\u002Faudio-visualization.md",[4334],{"type":48,"value":4332},{"type":48,"value":4318},{"type":43,"tag":60,"props":4337,"children":4339},{"id":4338},"maps-1",[4340],{"type":48,"value":4041},{"type":43,"tag":44,"props":4342,"children":4343},{},[4344,4346,4350],{"type":48,"value":4345},"For static maps, animated routes and markers, geographic explainers, Mapbox, MapLibre, MapTiler, GeoJSON, or 3D geographic flyovers, load ",{"type":43,"tag":51,"props":4347,"children":4348},{"href":4049},[4349],{"type":48,"value":4052},{"type":48,"value":87},{"type":43,"tag":60,"props":4352,"children":4354},{"id":4353},"captions",[4355],{"type":48,"value":4356},"Captions",{"type":43,"tag":44,"props":4358,"children":4359},{},[4360,4362,4368],{"type":48,"value":4361},"When dealing with captions or subtitles, load the ",{"type":43,"tag":51,"props":4363,"children":4365},{"href":4364},"..\u002Fremotion-captions\u002FSKILL.md",[4366],{"type":48,"value":4367},"Remotion Captions",{"type":48,"value":4369}," skill for more information.",{"type":43,"tag":60,"props":4371,"children":4373},{"id":4372},"google-fonts",[4374],{"type":48,"value":4375},"Google Fonts",{"type":43,"tag":44,"props":4377,"children":4378},{},[4379,4381,4386],{"type":48,"value":4380},"Is the recommended way to load fonts in Remotion. See ",{"type":43,"tag":51,"props":4382,"children":4384},{"href":4383},"google-fonts.md",[4385],{"type":48,"value":4383},{"type":48,"value":4387}," for how to load Google Fonts.",{"type":43,"tag":60,"props":4389,"children":4391},{"id":4390},"local-fonts",[4392],{"type":48,"value":4393},"Local fonts",{"type":43,"tag":44,"props":4395,"children":4396},{},[4397,4398,4403],{"type":48,"value":4046},{"type":43,"tag":51,"props":4399,"children":4401},{"href":4400},"local-fonts.md",[4402],{"type":48,"value":4400},{"type":48,"value":4404}," for how to load local fonts.",{"type":43,"tag":60,"props":4406,"children":4408},{"id":4407},"gifs",[4409],{"type":48,"value":4410},"GIFs",{"type":43,"tag":44,"props":4412,"children":4413},{},[4414,4415,4420],{"type":48,"value":4046},{"type":43,"tag":51,"props":4416,"children":4418},{"href":4417},"gifs.md",[4419],{"type":48,"value":4417},{"type":48,"value":4421}," for how to display GIFs synchronized with Remotion's timeline.",{"type":43,"tag":60,"props":4423,"children":4425},{"id":4424},"advanced-images",[4426],{"type":48,"value":4427},"Advanced Images",{"type":43,"tag":44,"props":4429,"children":4430},{},[4431,4432,4437],{"type":48,"value":4046},{"type":43,"tag":51,"props":4433,"children":4435},{"href":4434},"images.md",[4436],{"type":48,"value":4434},{"type":48,"value":4438}," for sizing and positioning images, dynamic image paths, and getting image dimensions.",{"type":43,"tag":60,"props":4440,"children":4442},{"id":4441},"lottie-animations",[4443],{"type":48,"value":4444},"Lottie animations",{"type":43,"tag":44,"props":4446,"children":4447},{},[4448,4449,4454],{"type":48,"value":4046},{"type":43,"tag":51,"props":4450,"children":4452},{"href":4451},"lottie.md",[4453],{"type":48,"value":4451},{"type":48,"value":4455}," for embedding Lottie animations in Remotion.",{"type":43,"tag":60,"props":4457,"children":4459},{"id":4458},"timing",[4460],{"type":48,"value":4461},"Timing",{"type":43,"tag":44,"props":4463,"children":4464},{},[4465,4466,4471,4473,4478],{"type":48,"value":4046},{"type":43,"tag":51,"props":4467,"children":4469},{"href":4468},"timing.md",[4470],{"type":48,"value":4468},{"type":48,"value":4472}," for more timing techniques for ",{"type":43,"tag":72,"props":4474,"children":4476},{"className":4475},[],[4477],{"type":48,"value":85},{"type":48,"value":87},{"type":43,"tag":60,"props":4480,"children":4482},{"id":4481},"parameterized-videos",[4483],{"type":48,"value":4484},"Parameterized videos",{"type":43,"tag":44,"props":4486,"children":4487},{},[4488,4489,4494],{"type":48,"value":4046},{"type":43,"tag":51,"props":4490,"children":4492},{"href":4491},"parameters.md",[4493],{"type":48,"value":4491},{"type":48,"value":4495}," for making a composition parametrizable by adding a Zod schema.",{"type":43,"tag":60,"props":4497,"children":4499},{"id":4498},"measuring-dom-nodes",[4500],{"type":48,"value":4501},"Measuring DOM nodes",{"type":43,"tag":44,"props":4503,"children":4504},{},[4505,4506,4511],{"type":48,"value":4046},{"type":43,"tag":51,"props":4507,"children":4509},{"href":4508},"measuring-dom-nodes.md",[4510],{"type":48,"value":4508},{"type":48,"value":4512}," for measuring DOM element dimensions in Remotion.",{"type":43,"tag":60,"props":4514,"children":4516},{"id":4515},"measuring-text",[4517],{"type":48,"value":4518},"Measuring text",{"type":43,"tag":44,"props":4520,"children":4521},{},[4522,4523,4528],{"type":48,"value":4046},{"type":43,"tag":51,"props":4524,"children":4526},{"href":4525},"measuring-text.md",[4527],{"type":48,"value":4525},{"type":48,"value":4529}," for measuring text dimensions, fitting text to containers, and checking overflow.",{"type":43,"tag":60,"props":4531,"children":4533},{"id":4532},"using-ffmpeg",[4534],{"type":48,"value":4535},"Using FFmpeg",{"type":43,"tag":44,"props":4537,"children":4538},{},[4539,4541,4546],{"type":48,"value":4540},"For some video operations, such as trimming videos or detecting silence, FFmpeg should be used. Load the ",{"type":43,"tag":51,"props":4542,"children":4544},{"href":4543},".\u002Fffmpeg.md",[4545],{"type":48,"value":4543},{"type":48,"value":4318},{"type":43,"tag":60,"props":4548,"children":4550},{"id":4549},"silence-detection",[4551],{"type":48,"value":4552},"Silence detection",{"type":43,"tag":44,"props":4554,"children":4555},{},[4556,4558,4563],{"type":48,"value":4557},"When needing to detect and trim silent segments from video or audio files, load the ",{"type":43,"tag":51,"props":4559,"children":4561},{"href":4560},".\u002Fsilence-detection.md",[4562],{"type":48,"value":4560},{"type":48,"value":4564}," file.",{"type":43,"tag":60,"props":4566,"children":4568},{"id":4567},"dynamic-duration-dimensions-and-data",[4569],{"type":48,"value":4570},"Dynamic duration, dimensions and data",{"type":43,"tag":44,"props":4572,"children":4573},{},[4574,4575,4580],{"type":48,"value":4046},{"type":43,"tag":51,"props":4576,"children":4578},{"href":4577},"calculate-metadata.md",[4579],{"type":48,"value":4577},{"type":48,"value":4581}," for dynamically set composition duration, dimensions, and props.",{"type":43,"tag":60,"props":4583,"children":4585},{"id":4584},"advanced-compositions",[4586],{"type":48,"value":4587},"Advanced compositions",{"type":43,"tag":44,"props":4589,"children":4590},{},[4591,4592,4597],{"type":48,"value":4046},{"type":43,"tag":51,"props":4593,"children":4595},{"href":4594},"compositions.md",[4596],{"type":48,"value":4594},{"type":48,"value":4598}," for how to define stills, folders, default props and for how to nest compositions.",{"type":43,"tag":60,"props":4600,"children":4602},{"id":4601},"advanced-sequencing",[4603],{"type":48,"value":4604},"Advanced sequencing",{"type":43,"tag":44,"props":4606,"children":4607},{},[4608,4609,4614],{"type":48,"value":4046},{"type":43,"tag":51,"props":4610,"children":4612},{"href":4611},"sequencing.md",[4613],{"type":48,"value":4611},{"type":48,"value":4615}," for more sequencing patterns - delay, trim, limit duration of items.",{"type":43,"tag":60,"props":4617,"children":4619},{"id":4618},"install-modules",[4620],{"type":48,"value":4621},"Install modules",{"type":43,"tag":44,"props":4623,"children":4624},{},[4625,4626,4632],{"type":48,"value":119},{"type":43,"tag":72,"props":4627,"children":4629},{"className":4628},[],[4630],{"type":48,"value":4631},"npx remotion add",{"type":48,"value":4633}," to add new packages with the right version:",{"type":43,"tag":147,"props":4635,"children":4639},{"className":4636,"code":4638,"language":48},[4637],"language-text","npx remotion add @remotion\u002Fmedia\n",[4640],{"type":43,"tag":72,"props":4641,"children":4642},{"__ignoreMap":152},[4643],{"type":48,"value":4638},{"type":43,"tag":44,"props":4645,"children":4646},{},[4647,4649,4655,4657,4663,4664,4670,4672,4678],{"type":48,"value":4648},"This goes for ",{"type":43,"tag":72,"props":4650,"children":4652},{"className":4651},[],[4653],{"type":48,"value":4654},"@remotion\u002F*",{"type":48,"value":4656}," packages, ",{"type":43,"tag":72,"props":4658,"children":4660},{"className":4659},[],[4661],{"type":48,"value":4662},"mediabunny",{"type":48,"value":734},{"type":43,"tag":72,"props":4665,"children":4667},{"className":4666},[],[4668],{"type":48,"value":4669},"@mediabunny\u002F*",{"type":48,"value":4671},", and ",{"type":43,"tag":72,"props":4673,"children":4675},{"className":4674},[],[4676],{"type":48,"value":4677},"zod",{"type":48,"value":87},{"type":43,"tag":60,"props":4680,"children":4682},{"id":4681},"previewing-markup",[4683],{"type":48,"value":4684},"Previewing markup",{"type":43,"tag":147,"props":4686,"children":4689},{"className":4687,"code":4688,"language":48},[4637],"npx remotion studio --no-open\n",[4690],{"type":43,"tag":72,"props":4691,"children":4692},{"__ignoreMap":152},[4693],{"type":48,"value":4688},{"type":43,"tag":44,"props":4695,"children":4696},{},[4697,4699,4702,4704,4710,4712,4718],{"type":48,"value":4698},"This will start a long-running process and print the server URL for the preview.",{"type":43,"tag":89,"props":4700,"children":4701},{},[],{"type":48,"value":4703},"\nIf server is already started, it will print the URL.\nYou can visit a specific composition by navigating to ",{"type":43,"tag":72,"props":4705,"children":4707},{"className":4706},[],[4708],{"type":48,"value":4709},"\u002F[composition-id]",{"type":48,"value":4711},", for example ",{"type":43,"tag":72,"props":4713,"children":4715},{"className":4714},[],[4716],{"type":48,"value":4717},"http:\u002F\u002Flocalhost:3000\u002FMapAnimation",{"type":48,"value":87},{"type":43,"tag":60,"props":4720,"children":4722},{"id":4721},"optional-one-frame-render-check",[4723],{"type":48,"value":4724},"Optional: one-frame render check",{"type":43,"tag":44,"props":4726,"children":4727},{},[4728,4730,4733],{"type":48,"value":4729},"You can render a single frame with the CLI to sanity-check layout, colors, or timing.",{"type":43,"tag":89,"props":4731,"children":4732},{},[],{"type":48,"value":4734},"\nSkip it for trivial edits, pure refactors, or when you already have enough confidence from Studio or prior renders.",{"type":43,"tag":147,"props":4736,"children":4740},{"className":4737,"code":4738,"language":4739,"meta":152,"style":152},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npx remotion still [composition-id] --scale=0.25 --frame=30\n","bash",[4741],{"type":43,"tag":72,"props":4742,"children":4743},{"__ignoreMap":152},[4744],{"type":43,"tag":158,"props":4745,"children":4746},{"class":160,"line":161},[4747,4752,4757,4762,4767,4771,4776,4781,4785],{"type":43,"tag":158,"props":4748,"children":4749},{"style":356},[4750],{"type":48,"value":4751},"npx",{"type":43,"tag":158,"props":4753,"children":4754},{"style":226},[4755],{"type":48,"value":4756}," remotion",{"type":43,"tag":158,"props":4758,"children":4759},{"style":226},[4760],{"type":48,"value":4761}," still",{"type":43,"tag":158,"props":4763,"children":4764},{"style":177},[4765],{"type":48,"value":4766}," [composition-id] --scale",{"type":43,"tag":158,"props":4768,"children":4769},{"style":171},[4770],{"type":48,"value":273},{"type":43,"tag":158,"props":4772,"children":4773},{"style":226},[4774],{"type":48,"value":4775},"0.25",{"type":43,"tag":158,"props":4777,"children":4778},{"style":177},[4779],{"type":48,"value":4780}," --frame",{"type":43,"tag":158,"props":4782,"children":4783},{"style":171},[4784],{"type":48,"value":273},{"type":43,"tag":158,"props":4786,"children":4787},{"style":226},[4788],{"type":48,"value":4789},"30\n",{"type":43,"tag":44,"props":4791,"children":4792},{},[4793,4795,4801,4803,4809],{"type":48,"value":4794},"At 30 fps, ",{"type":43,"tag":72,"props":4796,"children":4798},{"className":4797},[],[4799],{"type":48,"value":4800},"--frame=30",{"type":48,"value":4802}," is the one-second mark (",{"type":43,"tag":72,"props":4804,"children":4806},{"className":4805},[],[4807],{"type":48,"value":4808},"--frame",{"type":48,"value":4810}," is zero-based).",{"type":43,"tag":724,"props":4812,"children":4813},{},[4814],{"type":48,"value":4815},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":4817,"total":494},[4818,4835,4848,4860,4876,4888,4900,4914,4925,4932,4947],{"slug":4819,"name":4819,"fn":4820,"description":4821,"org":4822,"tags":4823,"stars":4832,"repoUrl":4833,"updatedAt":4834},"remotion-best-practices","build programmatic videos with Remotion","Router for all Remotion skills",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[4824,4826,4827,4828,4831],{"name":4825,"slug":107,"type":16},"Animation",{"name":14,"slug":15,"type":16},{"name":9,"slug":8,"type":16},{"name":4829,"slug":4830,"type":16},"TypeScript","typescript",{"name":19,"slug":20,"type":16},54855,"https:\u002F\u002Fgithub.com\u002Fremotion-dev\u002Fremotion","2026-07-27T06:08:28.310856",{"slug":4836,"name":4836,"fn":4837,"description":4838,"org":4839,"tags":4840,"stars":4832,"repoUrl":4833,"updatedAt":4847},"remotion-interactivity","create interactive Remotion animations","Structure Remotion markup for interactivity",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[4841,4842,4845,4846],{"name":4825,"slug":107,"type":16},{"name":4843,"slug":4844,"type":16},"Design","design",{"name":14,"slug":15,"type":16},{"name":9,"slug":8,"type":16},"2026-07-30T05:25:35.376625",{"slug":4849,"name":4849,"fn":4850,"description":4851,"org":4852,"tags":4853,"stars":4832,"repoUrl":4833,"updatedAt":4859},"remotion-multimedia","interact with Mediabunny in Remotion","Interacting with Mediabunny",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[4854,4857,4858],{"name":4855,"slug":4856,"type":16},"Media","media",{"name":9,"slug":8,"type":16},{"name":19,"slug":20,"type":16},"2026-07-27T06:28:53.1297",{"slug":4861,"name":4861,"fn":4862,"description":4863,"org":4864,"tags":4865,"stars":4832,"repoUrl":4833,"updatedAt":4875},"remotion-saas","build Remotion-powered SaaS applications","Build an app with Remotion",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[4866,4867,4868,4871,4872],{"name":14,"slug":15,"type":16},{"name":9,"slug":8,"type":16},{"name":4869,"slug":4870,"type":16},"SaaS","saas",{"name":19,"slug":20,"type":16},{"name":4873,"slug":4874,"type":16},"Web Development","web-development","2026-07-27T06:08:27.300451",{"slug":4877,"name":4877,"fn":4878,"description":4879,"org":4880,"tags":4881,"stars":24,"repoUrl":25,"updatedAt":4887},"remotion-captions","manage video captions in Remotion","Transcribing, displaying and animating captions",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[4882,4883,4886],{"name":9,"slug":8,"type":16},{"name":4884,"slug":4885,"type":16},"Transcription","transcription",{"name":19,"slug":20,"type":16},"2026-07-30T05:25:30.695925",{"slug":4889,"name":4889,"fn":4890,"description":4891,"org":4892,"tags":4893,"stars":24,"repoUrl":25,"updatedAt":4899},"remotion-create","create new Remotion video projects","Create a new Remotion video",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[4894,4897,4898],{"name":4895,"slug":4896,"type":16},"Creative","creative",{"name":9,"slug":8,"type":16},{"name":19,"slug":20,"type":16},"2026-07-30T05:25:29.406181",{"slug":4901,"name":4901,"fn":4902,"description":4903,"org":4904,"tags":4905,"stars":24,"repoUrl":25,"updatedAt":4913},"remotion-docs","search Remotion documentation","Search Remotion documentation",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[4906,4909,4912],{"name":4907,"slug":4908,"type":16},"Documentation","documentation",{"name":4910,"slug":4911,"type":16},"Reference","reference",{"name":9,"slug":8,"type":16},"2026-07-30T05:25:32.714247",{"slug":4915,"name":4915,"fn":4916,"description":4917,"org":4918,"tags":4919,"stars":24,"repoUrl":25,"updatedAt":4924},"remotion-maps","animate maps using Remotion","Remotion Map animation knowledge",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[4920,4921,4922,4923],{"name":4825,"slug":107,"type":16},{"name":4041,"slug":4038,"type":16},{"name":9,"slug":8,"type":16},{"name":19,"slug":20,"type":16},"2026-07-30T05:25:28.60293",{"slug":4,"name":4,"fn":5,"description":6,"org":4926,"tags":4927,"stars":24,"repoUrl":25,"updatedAt":26},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[4928,4929,4930,4931],{"name":22,"slug":23,"type":16},{"name":14,"slug":15,"type":16},{"name":9,"slug":8,"type":16},{"name":19,"slug":20,"type":16},{"slug":4933,"name":4933,"fn":4934,"description":4935,"org":4936,"tags":4937,"stars":24,"repoUrl":25,"updatedAt":4946},"remotion-render","render videos with Remotion","Export a Remotion video",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[4938,4941,4944,4945],{"name":4939,"slug":4940,"type":16},"Deployment","deployment",{"name":4942,"slug":4943,"type":16},"Performance","performance",{"name":9,"slug":8,"type":16},{"name":19,"slug":20,"type":16},"2026-07-30T05:25:31.705328",{"slug":4948,"name":4948,"fn":4949,"description":4950,"org":4951,"tags":4952,"stars":24,"repoUrl":25,"updatedAt":4960},"remotion-upgrade","upgrade Remotion projects and dependencies","Upgrade Remotion, its related packages, compatible Mediabunny packages, and installed Remotion Agent Skills. Use when asked to upgrade or update a Remotion project.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[4953,4956,4959],{"name":4954,"slug":4955,"type":16},"Engineering","engineering",{"name":4957,"slug":4958,"type":16},"Migration","migration",{"name":9,"slug":8,"type":16},"2026-07-21T06:07:40.273712",{"items":4962,"total":347},[4963,4969,4975,4981,4988,4995,5002],{"slug":4877,"name":4877,"fn":4878,"description":4879,"org":4964,"tags":4965,"stars":24,"repoUrl":25,"updatedAt":4887},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[4966,4967,4968],{"name":9,"slug":8,"type":16},{"name":4884,"slug":4885,"type":16},{"name":19,"slug":20,"type":16},{"slug":4889,"name":4889,"fn":4890,"description":4891,"org":4970,"tags":4971,"stars":24,"repoUrl":25,"updatedAt":4899},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[4972,4973,4974],{"name":4895,"slug":4896,"type":16},{"name":9,"slug":8,"type":16},{"name":19,"slug":20,"type":16},{"slug":4901,"name":4901,"fn":4902,"description":4903,"org":4976,"tags":4977,"stars":24,"repoUrl":25,"updatedAt":4913},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[4978,4979,4980],{"name":4907,"slug":4908,"type":16},{"name":4910,"slug":4911,"type":16},{"name":9,"slug":8,"type":16},{"slug":4915,"name":4915,"fn":4916,"description":4917,"org":4982,"tags":4983,"stars":24,"repoUrl":25,"updatedAt":4924},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[4984,4985,4986,4987],{"name":4825,"slug":107,"type":16},{"name":4041,"slug":4038,"type":16},{"name":9,"slug":8,"type":16},{"name":19,"slug":20,"type":16},{"slug":4,"name":4,"fn":5,"description":6,"org":4989,"tags":4990,"stars":24,"repoUrl":25,"updatedAt":26},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[4991,4992,4993,4994],{"name":22,"slug":23,"type":16},{"name":14,"slug":15,"type":16},{"name":9,"slug":8,"type":16},{"name":19,"slug":20,"type":16},{"slug":4933,"name":4933,"fn":4934,"description":4935,"org":4996,"tags":4997,"stars":24,"repoUrl":25,"updatedAt":4946},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[4998,4999,5000,5001],{"name":4939,"slug":4940,"type":16},{"name":4942,"slug":4943,"type":16},{"name":9,"slug":8,"type":16},{"name":19,"slug":20,"type":16},{"slug":4948,"name":4948,"fn":4949,"description":4950,"org":5003,"tags":5004,"stars":24,"repoUrl":25,"updatedAt":4960},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[5005,5006,5007],{"name":4954,"slug":4955,"type":16},{"name":4957,"slug":4958,"type":16},{"name":9,"slug":8,"type":16}]