[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-remotion-remotion-interactivity":3,"mdc-vlbt6d-key":37,"related-org-remotion-remotion-interactivity":4078,"related-repo-remotion-remotion-interactivity":4224},{"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":32,"sourceUrl":35,"mdContent":36},"remotion-interactivity","create interactive Remotion animations","Structure Remotion markup for interactivity",{"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},"Animation","animation",{"name":22,"slug":23,"type":16},"Design","design",54855,"https:\u002F\u002Fgithub.com\u002Fremotion-dev\u002Fremotion","2026-07-30T05:25:35.376625",null,4008,[30,15,31],"javascript","video",{"repoUrl":25,"stars":24,"forks":28,"topics":33,"description":34},[30,15,31],"🎥      Make videos programmatically with React","https:\u002F\u002Fgithub.com\u002Fremotion-dev\u002Fremotion\u002Ftree\u002FHEAD\u002Fpackages\u002Fskills\u002Fskills\u002Fremotion-interactivity","---\nname: remotion-interactivity\ndescription: Structure Remotion markup for interactivity\nmetadata:\n  tags: remotion, interactivity, studio, visual mode\n---\n\nBy writing Remotion markup in a specific way, the Remotion Studio is able to recognize the structure of the code and makes it interactive:\n\n- Allowing items to be selected by clicking on them\n- Allowing drag+drop, resizing and rotation\n- Editing the CSS styles\n- Making keyframes and easing values editable\n\nIf the markup is too complex for the Studio to make it interactive, then the values become grayed out.\n\n## Make an HTML element interactive using `Interactive`\n\nEvery HTML and SVG element such as `\u003Cdiv>` can be turned interactive using `Interactive`:\n\n```tsx title=\"Interactive elements\"\n\u003CInteractive.Div\n  name=\"Greeting card\"\n  style={{fontSize: 80, padding: 24}}\n>\n  Hello\n\u003C\u002FInteractive.Div>\n```\n\nThis allows styles and keyframes to be set in the Studio. Be sensible, if a component has many elements, the timeline might get messy.\n\n## Prefer inline text\n\nIf text is fixed and only used once, write it directly inside the interactive element instead of extracting it into a constant.\n\n```tsx title=\"Inline text\"\n\u002F\u002F 👍 Fixed copy stays editable\n\u003CInteractive.Div name=\"Title\">\n  Remotion Best Practices\n\u003C\u002FInteractive.Div>\n```\n\nUse a prop or variable only when the text is dynamic or reused.\n\n## Give interactive elements a descriptive name\n\nAdd a `name` prop to elements to make them easily identifyable.\n\n```tsx title=\"Interactive names\"\n\u003C>\n  \u003CInteractive.Div name=\"Hero title\" style={{fontSize: 80}}>\n    Launch day\n  \u003C\u002FInteractive.Div>\n  \u003CImg name=\"Avatar\" src=\"https:\u002F\u002Fremotion.media\u002Fimage.jpeg\" \u002F>\n  \u003CVideo name=\"Background\" src=\"https:\u002F\u002Fremotion.media\u002Fvideo.mp4\" \u002F>\n  \u003CSequence name=\"Title\">\n    Launch day\n  \u003C\u002FSequence>\n\u003C\u002F>\n```\n\n## Keep all CSS styles inline\n\nThe best way is to just pass a plain object to `style` - no referring to constants, no object spreading, no math.\n\n```tsx title=\"Interactive example\"\n\u003CInteractive.Div\n  style={{\n    fontSize: 80,\n    color: 'red',\n  }}\n>\n  Hello World!\n\u003C\u002FInteractive.Div>\n```\n\n```tsx title=\"❌ Bad for interactivity\"\nconst baseStyle = useMemo(() => {\n  return {\n    fontSize: 12 \u002F\u002F ❌ Non-inline styles are not supported\n  }\n}, []);\n\n\u003CInteractive.Div\n  style={{\n    ...baseStyle, \u002F\u002F ❌ Spreading is not supported\n    color: RED, \u002F\u002F ❌ Referring to constants is not supported\n    scale: frame * 10 \u002F\u002F ❌ Math is not supported\n  }}\n>\n  Hello World!\n\u003C\u002FInteractive.Div>\n```\n\n## Animate using `interpolate()`\n\nWrite animations as inline `interpolate()` calls on the property that changes.  \nThe output range, easing, extrapolation and `output` property should use hardcoded values.\n\nThe input range may additionally use `durationInFrames`, `fps`, `width` and `height` destructured directly from `useVideoConfig()`. Bare identifiers such as `durationInFrames`, multiplication with a number such as `2 * fps` or `fps * 2`, and subtraction of a number such as `durationInFrames - 1` are supported.\n\n```tsx title=\"Inline values\"\nconst {fps, durationInFrames} = useVideoConfig();\n\n\u002F\u002F 👍 Inline values can be standardized and keyframed\n\u003CInteractive.Div\n  name=\"Product card\"\n  style={{\n    color: 'white',\n    fontSize: 80,\n    scale: interpolate(frame, [0, fps], [0, 1], {\n      easing: Easing.spring({damping: 200}),\n      output: 'perceptual-scale',\n      extrapolateLeft: 'clamp',\n      extrapolateRight: 'clamp'\n    }),\n    rotate: interpolate(frame, [0, 1 * fps], ['0deg', '20deg'], {\n      easing: Easing.spring({damping: 200}),\n      extrapolateLeft: 'clamp',\n      extrapolateRight: 'clamp'\n    }),\n    translate: interpolate(\n      frame,\n      [durationInFrames - 30, durationInFrames],\n      ['0px 0px', '0px 120px'],\n      {\n        easing: Easing.spring({damping: 200}),\n        output: 'perceptual-scale',\n        extrapolateLeft: 'clamp',\n        extrapolateRight: 'clamp'\n      }\n    ),\n  }}\n\u002F>\n```\n\n```tsx title=\"❌ Bad interactivity\"\nconst translateY = interpolate(frame, [0, 30], [0, 120]); \u002F\u002F ❌ Math should be directly in the markup\n\n\u003CInteractive.Div\n  name=\"Product card\"\n  style={{\n    translate: translateY, \u002F\u002F ❌ Only inline interpolate() calls are supported,\n    rotate: interpolate(frame, [start, start + 10], [0, Math.PI]), \u002F\u002F ❌ Cannot use math with arbitrary variables, cannot use constants\n    scale: interpolate(anyVariable, [0, 30], [0, 1]) \u002F\u002F ❌ Can only interpret the `frame` variable.\n  }}\n\u002F>\n```\n\n## Use `scale`, `translate`, `rotate` CSS properties\n\nAvoid the `transform` CSS property.  \nIf possible, use `scale`, `rotate` and `translate` instead because only they are interactively editable.\n\n## Keep composition metadata inline\n\nWhen scaffolding a composition, keep `width`, `height`, `fps`, `durationInFrames` and `defaultProps` inline and make no type assertions.\n\nThe Props editor can save visual edits back to your code when `defaultProps` is an inline object literal on `\u003CComposition>` or `\u003CStill>`.\n\n```tsx\n\u002F\u002F 👍 Static values are in \u003CComposition>, dynamic values are in calculateMetadata()\nconst calculateMetadata = useMemo(async () => {\n  const dimensions = await getDimensions(); \u002F\u002F just an example\n  return {width: dimensions.width, height: dimensions.height};\n});\n\n\u003CComposition\n  id=\"my-video\"\n  component={MyComponent}\n  durationInFrames={150}\n  fps={30}\n  calculateMetadata={calculateMetadata}\n  defaultProps={{title: 'Hello', color: '#0b84ff'}}\n\u002F>\n```\n\n```tsx title=\"Negative examples\"\nconst defaultProps = {title: 'Hello', color: '#0b84ff'}; \u002F\u002F ❌ Don't extract defaultProps, must be inline\nconst calculateMetadata = useMemo(() => {\n  \u002F\u002F ❌ Unnecessary because no calculation is being done,\n  return {durationInFrames: 150, fps: 30, width: 1920, height: 1080};\n});\n\n\u003CComposition\n  id=\"my-video\"\n  component={MyComponent}\n  calculateMetadata={calculateMetadata}\n  defaultProps={{\n    title: 'Hello',\n  } as Props} \u002F\u002F ❌ Don't have type assertions, instead type MyComponent correctly\n\u002F>\n```\n\nUse only `calculateMetadata()` for the part of the metadata that is dynamic.\n\n## Effects should be inline too\n\nThe effects array should not be computed.  \nThe same rules for setting keyframes as `interpolate()` apply too here: All values should also be hardcoded: Input range, output range, easing, extrapolation, `output` property.\n\n```tsx title=\"Effects\"\n\u002F\u002F 👍 Parameters are inline and the array shape is stable\n\u003CCanvasImage\n  src={src}\n  width={1280}\n  height={720}\n  effects={[\n    radialProgressiveBlur({\n      center: [0.5, 0.5],\n      width: 1.2,\n      height: 0.8,\n      start: 0.2,\n      disabled: true,\n      rotation: interpolate(frame, [0, 120], [0, 180]),\n    }),\n  ]}\n\u002F>\n\nconst center = [0.5, 0.5] as const;\nconst rotation = frame * 1.5;\n\n\u003CCanvasImage\n  src={src}\n  width={1280}\n  height={720}\n  \u002F\u002F ❌ Conditional effect is not animateable\n  effects={enabled ? [\n    radialProgressiveBlur({\n      \u002F\u002F ❌ Not inline\n      center,\n      rotation,\n    }),\n  ] : []}\n\u002F>\n```\n\nRender separate elements if one version should have effects and another should not.\n\n## Making your own component interactive\n\nTo make a custom userland component interactive, use:\n[Make a component interactive](https:\u002F\u002Fwww.remotion.dev\u002Fdocs\u002Fstudio\u002Fmake-component-interactive.md)\n\n## Video editing\n\nIf a Remotion component mainly consists of video and audio clips, see [Video editing](..\u002Fremotion-markup\u002Fvideo-editing.md) for best practices on how to structure Remotion markup so the clips are interactively editable in the timeline.\n",{"data":38,"body":41},{"name":4,"description":6,"metadata":39},{"tags":40},"remotion, interactivity, studio, visual mode",{"type":42,"children":43},"root",[44,52,77,82,96,116,268,273,279,284,361,366,372,385,672,678,691,812,1074,1086,1112,1187,2116,2462,2490,2527,2533,2570,2596,2970,3343,3356,3362,3386,4030,4035,4041,4055,4061,4073],{"type":45,"tag":46,"props":47,"children":48},"element","p",{},[49],{"type":50,"value":51},"text","By writing Remotion markup in a specific way, the Remotion Studio is able to recognize the structure of the code and makes it interactive:",{"type":45,"tag":53,"props":54,"children":55},"ul",{},[56,62,67,72],{"type":45,"tag":57,"props":58,"children":59},"li",{},[60],{"type":50,"value":61},"Allowing items to be selected by clicking on them",{"type":45,"tag":57,"props":63,"children":64},{},[65],{"type":50,"value":66},"Allowing drag+drop, resizing and rotation",{"type":45,"tag":57,"props":68,"children":69},{},[70],{"type":50,"value":71},"Editing the CSS styles",{"type":45,"tag":57,"props":73,"children":74},{},[75],{"type":50,"value":76},"Making keyframes and easing values editable",{"type":45,"tag":46,"props":78,"children":79},{},[80],{"type":50,"value":81},"If the markup is too complex for the Studio to make it interactive, then the values become grayed out.",{"type":45,"tag":83,"props":84,"children":86},"h2",{"id":85},"make-an-html-element-interactive-using-interactive",[87,89],{"type":50,"value":88},"Make an HTML element interactive using ",{"type":45,"tag":90,"props":91,"children":93},"code",{"className":92},[],[94],{"type":50,"value":95},"Interactive",{"type":45,"tag":46,"props":97,"children":98},{},[99,101,107,109,114],{"type":50,"value":100},"Every HTML and SVG element such as ",{"type":45,"tag":90,"props":102,"children":104},{"className":103},[],[105],{"type":50,"value":106},"\u003Cdiv>",{"type":50,"value":108}," can be turned interactive using ",{"type":45,"tag":90,"props":110,"children":112},{"className":111},[],[113],{"type":50,"value":95},{"type":50,"value":115},":",{"type":45,"tag":117,"props":118,"children":124},"pre",{"className":119,"code":120,"language":121,"meta":122,"style":123},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CInteractive.Div\n  name=\"Greeting card\"\n  style={{fontSize: 80, padding: 24}}\n>\n  Hello\n\u003C\u002FInteractive.Div>\n","tsx","title=\"Interactive elements\"","",[125],{"type":45,"tag":90,"props":126,"children":127},{"__ignoreMap":123},[128,146,177,231,240,250],{"type":45,"tag":129,"props":130,"children":133},"span",{"class":131,"line":132},"line",1,[134,140],{"type":45,"tag":129,"props":135,"children":137},{"style":136},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[138],{"type":50,"value":139},"\u003C",{"type":45,"tag":129,"props":141,"children":143},{"style":142},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[144],{"type":50,"value":145},"Interactive.Div\n",{"type":45,"tag":129,"props":147,"children":149},{"class":131,"line":148},2,[150,156,161,166,172],{"type":45,"tag":129,"props":151,"children":153},{"style":152},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[154],{"type":50,"value":155},"  name",{"type":45,"tag":129,"props":157,"children":158},{"style":136},[159],{"type":50,"value":160},"=",{"type":45,"tag":129,"props":162,"children":163},{"style":136},[164],{"type":50,"value":165},"\"",{"type":45,"tag":129,"props":167,"children":169},{"style":168},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[170],{"type":50,"value":171},"Greeting card",{"type":45,"tag":129,"props":173,"children":174},{"style":136},[175],{"type":50,"value":176},"\"\n",{"type":45,"tag":129,"props":178,"children":180},{"class":131,"line":179},3,[181,186,191,197,201,207,212,217,221,226],{"type":45,"tag":129,"props":182,"children":183},{"style":152},[184],{"type":50,"value":185},"  style",{"type":45,"tag":129,"props":187,"children":188},{"style":136},[189],{"type":50,"value":190},"={{",{"type":45,"tag":129,"props":192,"children":194},{"style":193},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[195],{"type":50,"value":196},"fontSize",{"type":45,"tag":129,"props":198,"children":199},{"style":136},[200],{"type":50,"value":115},{"type":45,"tag":129,"props":202,"children":204},{"style":203},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[205],{"type":50,"value":206}," 80",{"type":45,"tag":129,"props":208,"children":209},{"style":136},[210],{"type":50,"value":211},",",{"type":45,"tag":129,"props":213,"children":214},{"style":193},[215],{"type":50,"value":216}," padding",{"type":45,"tag":129,"props":218,"children":219},{"style":136},[220],{"type":50,"value":115},{"type":45,"tag":129,"props":222,"children":223},{"style":203},[224],{"type":50,"value":225}," 24",{"type":45,"tag":129,"props":227,"children":228},{"style":136},[229],{"type":50,"value":230},"}}\n",{"type":45,"tag":129,"props":232,"children":234},{"class":131,"line":233},4,[235],{"type":45,"tag":129,"props":236,"children":237},{"style":136},[238],{"type":50,"value":239},">\n",{"type":45,"tag":129,"props":241,"children":243},{"class":131,"line":242},5,[244],{"type":45,"tag":129,"props":245,"children":247},{"style":246},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[248],{"type":50,"value":249},"  Hello\n",{"type":45,"tag":129,"props":251,"children":253},{"class":131,"line":252},6,[254,259,264],{"type":45,"tag":129,"props":255,"children":256},{"style":136},[257],{"type":50,"value":258},"\u003C\u002F",{"type":45,"tag":129,"props":260,"children":261},{"style":142},[262],{"type":50,"value":263},"Interactive.Div",{"type":45,"tag":129,"props":265,"children":266},{"style":136},[267],{"type":50,"value":239},{"type":45,"tag":46,"props":269,"children":270},{},[271],{"type":50,"value":272},"This allows styles and keyframes to be set in the Studio. Be sensible, if a component has many elements, the timeline might get messy.",{"type":45,"tag":83,"props":274,"children":276},{"id":275},"prefer-inline-text",[277],{"type":50,"value":278},"Prefer inline text",{"type":45,"tag":46,"props":280,"children":281},{},[282],{"type":50,"value":283},"If text is fixed and only used once, write it directly inside the interactive element instead of extracting it into a constant.",{"type":45,"tag":117,"props":285,"children":288},{"className":119,"code":286,"language":121,"meta":287,"style":123},"\u002F\u002F 👍 Fixed copy stays editable\n\u003CInteractive.Div name=\"Title\">\n  Remotion Best Practices\n\u003C\u002FInteractive.Div>\n","title=\"Inline text\"",[289],{"type":45,"tag":90,"props":290,"children":291},{"__ignoreMap":123},[292,301,338,346],{"type":45,"tag":129,"props":293,"children":294},{"class":131,"line":132},[295],{"type":45,"tag":129,"props":296,"children":298},{"style":297},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[299],{"type":50,"value":300},"\u002F\u002F 👍 Fixed copy stays editable\n",{"type":45,"tag":129,"props":302,"children":303},{"class":131,"line":148},[304,308,312,317,321,325,330,334],{"type":45,"tag":129,"props":305,"children":306},{"style":136},[307],{"type":50,"value":139},{"type":45,"tag":129,"props":309,"children":310},{"style":142},[311],{"type":50,"value":263},{"type":45,"tag":129,"props":313,"children":314},{"style":152},[315],{"type":50,"value":316}," name",{"type":45,"tag":129,"props":318,"children":319},{"style":136},[320],{"type":50,"value":160},{"type":45,"tag":129,"props":322,"children":323},{"style":136},[324],{"type":50,"value":165},{"type":45,"tag":129,"props":326,"children":327},{"style":168},[328],{"type":50,"value":329},"Title",{"type":45,"tag":129,"props":331,"children":332},{"style":136},[333],{"type":50,"value":165},{"type":45,"tag":129,"props":335,"children":336},{"style":136},[337],{"type":50,"value":239},{"type":45,"tag":129,"props":339,"children":340},{"class":131,"line":179},[341],{"type":45,"tag":129,"props":342,"children":343},{"style":246},[344],{"type":50,"value":345},"  Remotion Best Practices\n",{"type":45,"tag":129,"props":347,"children":348},{"class":131,"line":233},[349,353,357],{"type":45,"tag":129,"props":350,"children":351},{"style":136},[352],{"type":50,"value":258},{"type":45,"tag":129,"props":354,"children":355},{"style":142},[356],{"type":50,"value":263},{"type":45,"tag":129,"props":358,"children":359},{"style":136},[360],{"type":50,"value":239},{"type":45,"tag":46,"props":362,"children":363},{},[364],{"type":50,"value":365},"Use a prop or variable only when the text is dynamic or reused.",{"type":45,"tag":83,"props":367,"children":369},{"id":368},"give-interactive-elements-a-descriptive-name",[370],{"type":50,"value":371},"Give interactive elements a descriptive name",{"type":45,"tag":46,"props":373,"children":374},{},[375,377,383],{"type":50,"value":376},"Add a ",{"type":45,"tag":90,"props":378,"children":380},{"className":379},[],[381],{"type":50,"value":382},"name",{"type":50,"value":384}," prop to elements to make them easily identifyable.",{"type":45,"tag":117,"props":386,"children":389},{"className":119,"code":387,"language":121,"meta":388,"style":123},"\u003C>\n  \u003CInteractive.Div name=\"Hero title\" style={{fontSize: 80}}>\n    Launch day\n  \u003C\u002FInteractive.Div>\n  \u003CImg name=\"Avatar\" src=\"https:\u002F\u002Fremotion.media\u002Fimage.jpeg\" \u002F>\n  \u003CVideo name=\"Background\" src=\"https:\u002F\u002Fremotion.media\u002Fvideo.mp4\" \u002F>\n  \u003CSequence name=\"Title\">\n    Launch day\n  \u003C\u002FSequence>\n\u003C\u002F>\n","title=\"Interactive names\"",[390],{"type":45,"tag":90,"props":391,"children":392},{"__ignoreMap":123},[393,401,460,468,484,544,602,639,647,663],{"type":45,"tag":129,"props":394,"children":395},{"class":131,"line":132},[396],{"type":45,"tag":129,"props":397,"children":398},{"style":136},[399],{"type":50,"value":400},"\u003C>\n",{"type":45,"tag":129,"props":402,"children":403},{"class":131,"line":148},[404,409,413,417,421,425,430,434,439,443,447,451,455],{"type":45,"tag":129,"props":405,"children":406},{"style":136},[407],{"type":50,"value":408},"  \u003C",{"type":45,"tag":129,"props":410,"children":411},{"style":142},[412],{"type":50,"value":263},{"type":45,"tag":129,"props":414,"children":415},{"style":152},[416],{"type":50,"value":316},{"type":45,"tag":129,"props":418,"children":419},{"style":136},[420],{"type":50,"value":160},{"type":45,"tag":129,"props":422,"children":423},{"style":136},[424],{"type":50,"value":165},{"type":45,"tag":129,"props":426,"children":427},{"style":168},[428],{"type":50,"value":429},"Hero title",{"type":45,"tag":129,"props":431,"children":432},{"style":136},[433],{"type":50,"value":165},{"type":45,"tag":129,"props":435,"children":436},{"style":152},[437],{"type":50,"value":438}," style",{"type":45,"tag":129,"props":440,"children":441},{"style":136},[442],{"type":50,"value":190},{"type":45,"tag":129,"props":444,"children":445},{"style":193},[446],{"type":50,"value":196},{"type":45,"tag":129,"props":448,"children":449},{"style":136},[450],{"type":50,"value":115},{"type":45,"tag":129,"props":452,"children":453},{"style":203},[454],{"type":50,"value":206},{"type":45,"tag":129,"props":456,"children":457},{"style":136},[458],{"type":50,"value":459},"}}>\n",{"type":45,"tag":129,"props":461,"children":462},{"class":131,"line":179},[463],{"type":45,"tag":129,"props":464,"children":465},{"style":246},[466],{"type":50,"value":467},"    Launch day\n",{"type":45,"tag":129,"props":469,"children":470},{"class":131,"line":233},[471,476,480],{"type":45,"tag":129,"props":472,"children":473},{"style":136},[474],{"type":50,"value":475},"  \u003C\u002F",{"type":45,"tag":129,"props":477,"children":478},{"style":142},[479],{"type":50,"value":263},{"type":45,"tag":129,"props":481,"children":482},{"style":136},[483],{"type":50,"value":239},{"type":45,"tag":129,"props":485,"children":486},{"class":131,"line":242},[487,491,496,500,504,508,513,517,522,526,530,535,539],{"type":45,"tag":129,"props":488,"children":489},{"style":136},[490],{"type":50,"value":408},{"type":45,"tag":129,"props":492,"children":493},{"style":142},[494],{"type":50,"value":495},"Img",{"type":45,"tag":129,"props":497,"children":498},{"style":152},[499],{"type":50,"value":316},{"type":45,"tag":129,"props":501,"children":502},{"style":136},[503],{"type":50,"value":160},{"type":45,"tag":129,"props":505,"children":506},{"style":136},[507],{"type":50,"value":165},{"type":45,"tag":129,"props":509,"children":510},{"style":168},[511],{"type":50,"value":512},"Avatar",{"type":45,"tag":129,"props":514,"children":515},{"style":136},[516],{"type":50,"value":165},{"type":45,"tag":129,"props":518,"children":519},{"style":152},[520],{"type":50,"value":521}," src",{"type":45,"tag":129,"props":523,"children":524},{"style":136},[525],{"type":50,"value":160},{"type":45,"tag":129,"props":527,"children":528},{"style":136},[529],{"type":50,"value":165},{"type":45,"tag":129,"props":531,"children":532},{"style":168},[533],{"type":50,"value":534},"https:\u002F\u002Fremotion.media\u002Fimage.jpeg",{"type":45,"tag":129,"props":536,"children":537},{"style":136},[538],{"type":50,"value":165},{"type":45,"tag":129,"props":540,"children":541},{"style":136},[542],{"type":50,"value":543}," \u002F>\n",{"type":45,"tag":129,"props":545,"children":546},{"class":131,"line":252},[547,551,556,560,564,568,573,577,581,585,589,594,598],{"type":45,"tag":129,"props":548,"children":549},{"style":136},[550],{"type":50,"value":408},{"type":45,"tag":129,"props":552,"children":553},{"style":142},[554],{"type":50,"value":555},"Video",{"type":45,"tag":129,"props":557,"children":558},{"style":152},[559],{"type":50,"value":316},{"type":45,"tag":129,"props":561,"children":562},{"style":136},[563],{"type":50,"value":160},{"type":45,"tag":129,"props":565,"children":566},{"style":136},[567],{"type":50,"value":165},{"type":45,"tag":129,"props":569,"children":570},{"style":168},[571],{"type":50,"value":572},"Background",{"type":45,"tag":129,"props":574,"children":575},{"style":136},[576],{"type":50,"value":165},{"type":45,"tag":129,"props":578,"children":579},{"style":152},[580],{"type":50,"value":521},{"type":45,"tag":129,"props":582,"children":583},{"style":136},[584],{"type":50,"value":160},{"type":45,"tag":129,"props":586,"children":587},{"style":136},[588],{"type":50,"value":165},{"type":45,"tag":129,"props":590,"children":591},{"style":168},[592],{"type":50,"value":593},"https:\u002F\u002Fremotion.media\u002Fvideo.mp4",{"type":45,"tag":129,"props":595,"children":596},{"style":136},[597],{"type":50,"value":165},{"type":45,"tag":129,"props":599,"children":600},{"style":136},[601],{"type":50,"value":543},{"type":45,"tag":129,"props":603,"children":605},{"class":131,"line":604},7,[606,610,615,619,623,627,631,635],{"type":45,"tag":129,"props":607,"children":608},{"style":136},[609],{"type":50,"value":408},{"type":45,"tag":129,"props":611,"children":612},{"style":142},[613],{"type":50,"value":614},"Sequence",{"type":45,"tag":129,"props":616,"children":617},{"style":152},[618],{"type":50,"value":316},{"type":45,"tag":129,"props":620,"children":621},{"style":136},[622],{"type":50,"value":160},{"type":45,"tag":129,"props":624,"children":625},{"style":136},[626],{"type":50,"value":165},{"type":45,"tag":129,"props":628,"children":629},{"style":168},[630],{"type":50,"value":329},{"type":45,"tag":129,"props":632,"children":633},{"style":136},[634],{"type":50,"value":165},{"type":45,"tag":129,"props":636,"children":637},{"style":136},[638],{"type":50,"value":239},{"type":45,"tag":129,"props":640,"children":642},{"class":131,"line":641},8,[643],{"type":45,"tag":129,"props":644,"children":645},{"style":246},[646],{"type":50,"value":467},{"type":45,"tag":129,"props":648,"children":650},{"class":131,"line":649},9,[651,655,659],{"type":45,"tag":129,"props":652,"children":653},{"style":136},[654],{"type":50,"value":475},{"type":45,"tag":129,"props":656,"children":657},{"style":142},[658],{"type":50,"value":614},{"type":45,"tag":129,"props":660,"children":661},{"style":136},[662],{"type":50,"value":239},{"type":45,"tag":129,"props":664,"children":666},{"class":131,"line":665},10,[667],{"type":45,"tag":129,"props":668,"children":669},{"style":136},[670],{"type":50,"value":671},"\u003C\u002F>\n",{"type":45,"tag":83,"props":673,"children":675},{"id":674},"keep-all-css-styles-inline",[676],{"type":50,"value":677},"Keep all CSS styles inline",{"type":45,"tag":46,"props":679,"children":680},{},[681,683,689],{"type":50,"value":682},"The best way is to just pass a plain object to ",{"type":45,"tag":90,"props":684,"children":686},{"className":685},[],[687],{"type":50,"value":688},"style",{"type":50,"value":690}," - no referring to constants, no object spreading, no math.",{"type":45,"tag":117,"props":692,"children":695},{"className":119,"code":693,"language":121,"meta":694,"style":123},"\u003CInteractive.Div\n  style={{\n    fontSize: 80,\n    color: 'red',\n  }}\n>\n  Hello World!\n\u003C\u002FInteractive.Div>\n","title=\"Interactive example\"",[696],{"type":45,"tag":90,"props":697,"children":698},{"__ignoreMap":123},[699,710,722,743,774,782,789,797],{"type":45,"tag":129,"props":700,"children":701},{"class":131,"line":132},[702,706],{"type":45,"tag":129,"props":703,"children":704},{"style":136},[705],{"type":50,"value":139},{"type":45,"tag":129,"props":707,"children":708},{"style":142},[709],{"type":50,"value":145},{"type":45,"tag":129,"props":711,"children":712},{"class":131,"line":148},[713,717],{"type":45,"tag":129,"props":714,"children":715},{"style":152},[716],{"type":50,"value":185},{"type":45,"tag":129,"props":718,"children":719},{"style":136},[720],{"type":50,"value":721},"={{\n",{"type":45,"tag":129,"props":723,"children":724},{"class":131,"line":179},[725,730,734,738],{"type":45,"tag":129,"props":726,"children":727},{"style":193},[728],{"type":50,"value":729},"    fontSize",{"type":45,"tag":129,"props":731,"children":732},{"style":136},[733],{"type":50,"value":115},{"type":45,"tag":129,"props":735,"children":736},{"style":203},[737],{"type":50,"value":206},{"type":45,"tag":129,"props":739,"children":740},{"style":136},[741],{"type":50,"value":742},",\n",{"type":45,"tag":129,"props":744,"children":745},{"class":131,"line":233},[746,751,755,760,765,770],{"type":45,"tag":129,"props":747,"children":748},{"style":193},[749],{"type":50,"value":750},"    color",{"type":45,"tag":129,"props":752,"children":753},{"style":136},[754],{"type":50,"value":115},{"type":45,"tag":129,"props":756,"children":757},{"style":136},[758],{"type":50,"value":759}," '",{"type":45,"tag":129,"props":761,"children":762},{"style":168},[763],{"type":50,"value":764},"red",{"type":45,"tag":129,"props":766,"children":767},{"style":136},[768],{"type":50,"value":769},"'",{"type":45,"tag":129,"props":771,"children":772},{"style":136},[773],{"type":50,"value":742},{"type":45,"tag":129,"props":775,"children":776},{"class":131,"line":242},[777],{"type":45,"tag":129,"props":778,"children":779},{"style":136},[780],{"type":50,"value":781},"  }}\n",{"type":45,"tag":129,"props":783,"children":784},{"class":131,"line":252},[785],{"type":45,"tag":129,"props":786,"children":787},{"style":136},[788],{"type":50,"value":239},{"type":45,"tag":129,"props":790,"children":791},{"class":131,"line":604},[792],{"type":45,"tag":129,"props":793,"children":794},{"style":246},[795],{"type":50,"value":796},"  Hello World!\n",{"type":45,"tag":129,"props":798,"children":799},{"class":131,"line":641},[800,804,808],{"type":45,"tag":129,"props":801,"children":802},{"style":136},[803],{"type":50,"value":258},{"type":45,"tag":129,"props":805,"children":806},{"style":142},[807],{"type":50,"value":263},{"type":45,"tag":129,"props":809,"children":810},{"style":136},[811],{"type":50,"value":239},{"type":45,"tag":117,"props":813,"children":816},{"className":119,"code":814,"language":121,"meta":815,"style":123},"const baseStyle = useMemo(() => {\n  return {\n    fontSize: 12 \u002F\u002F ❌ Non-inline styles are not supported\n  }\n}, []);\n\n\u003CInteractive.Div\n  style={{\n    ...baseStyle, \u002F\u002F ❌ Spreading is not supported\n    color: RED, \u002F\u002F ❌ Referring to constants is not supported\n    scale: frame * 10 \u002F\u002F ❌ Math is not supported\n  }}\n>\n  Hello World!\n\u003C\u002FInteractive.Div>\n","title=\"❌ Bad for interactivity\"",[817],{"type":45,"tag":90,"props":818,"children":819},{"__ignoreMap":123},[820,863,876,897,905,923,932,943,954,976,1001,1034,1042,1050,1058],{"type":45,"tag":129,"props":821,"children":822},{"class":131,"line":132},[823,828,833,837,843,848,853,858],{"type":45,"tag":129,"props":824,"children":825},{"style":152},[826],{"type":50,"value":827},"const",{"type":45,"tag":129,"props":829,"children":830},{"style":246},[831],{"type":50,"value":832}," baseStyle ",{"type":45,"tag":129,"props":834,"children":835},{"style":136},[836],{"type":50,"value":160},{"type":45,"tag":129,"props":838,"children":840},{"style":839},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[841],{"type":50,"value":842}," useMemo",{"type":45,"tag":129,"props":844,"children":845},{"style":246},[846],{"type":50,"value":847},"(",{"type":45,"tag":129,"props":849,"children":850},{"style":136},[851],{"type":50,"value":852},"()",{"type":45,"tag":129,"props":854,"children":855},{"style":152},[856],{"type":50,"value":857}," =>",{"type":45,"tag":129,"props":859,"children":860},{"style":136},[861],{"type":50,"value":862}," {\n",{"type":45,"tag":129,"props":864,"children":865},{"class":131,"line":148},[866,872],{"type":45,"tag":129,"props":867,"children":869},{"style":868},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[870],{"type":50,"value":871},"  return",{"type":45,"tag":129,"props":873,"children":874},{"style":136},[875],{"type":50,"value":862},{"type":45,"tag":129,"props":877,"children":878},{"class":131,"line":179},[879,883,887,892],{"type":45,"tag":129,"props":880,"children":881},{"style":193},[882],{"type":50,"value":729},{"type":45,"tag":129,"props":884,"children":885},{"style":136},[886],{"type":50,"value":115},{"type":45,"tag":129,"props":888,"children":889},{"style":203},[890],{"type":50,"value":891}," 12",{"type":45,"tag":129,"props":893,"children":894},{"style":297},[895],{"type":50,"value":896}," \u002F\u002F ❌ Non-inline styles are not supported\n",{"type":45,"tag":129,"props":898,"children":899},{"class":131,"line":233},[900],{"type":45,"tag":129,"props":901,"children":902},{"style":136},[903],{"type":50,"value":904},"  }\n",{"type":45,"tag":129,"props":906,"children":907},{"class":131,"line":242},[908,913,918],{"type":45,"tag":129,"props":909,"children":910},{"style":136},[911],{"type":50,"value":912},"},",{"type":45,"tag":129,"props":914,"children":915},{"style":246},[916],{"type":50,"value":917}," [])",{"type":45,"tag":129,"props":919,"children":920},{"style":136},[921],{"type":50,"value":922},";\n",{"type":45,"tag":129,"props":924,"children":925},{"class":131,"line":252},[926],{"type":45,"tag":129,"props":927,"children":929},{"emptyLinePlaceholder":928},true,[930],{"type":50,"value":931},"\n",{"type":45,"tag":129,"props":933,"children":934},{"class":131,"line":604},[935,939],{"type":45,"tag":129,"props":936,"children":937},{"style":136},[938],{"type":50,"value":139},{"type":45,"tag":129,"props":940,"children":941},{"style":142},[942],{"type":50,"value":145},{"type":45,"tag":129,"props":944,"children":945},{"class":131,"line":641},[946,950],{"type":45,"tag":129,"props":947,"children":948},{"style":152},[949],{"type":50,"value":185},{"type":45,"tag":129,"props":951,"children":952},{"style":136},[953],{"type":50,"value":721},{"type":45,"tag":129,"props":955,"children":956},{"class":131,"line":649},[957,962,967,971],{"type":45,"tag":129,"props":958,"children":959},{"style":136},[960],{"type":50,"value":961},"    ...",{"type":45,"tag":129,"props":963,"children":964},{"style":246},[965],{"type":50,"value":966},"baseStyle",{"type":45,"tag":129,"props":968,"children":969},{"style":136},[970],{"type":50,"value":211},{"type":45,"tag":129,"props":972,"children":973},{"style":297},[974],{"type":50,"value":975}," \u002F\u002F ❌ Spreading is not supported\n",{"type":45,"tag":129,"props":977,"children":978},{"class":131,"line":665},[979,983,987,992,996],{"type":45,"tag":129,"props":980,"children":981},{"style":193},[982],{"type":50,"value":750},{"type":45,"tag":129,"props":984,"children":985},{"style":136},[986],{"type":50,"value":115},{"type":45,"tag":129,"props":988,"children":989},{"style":246},[990],{"type":50,"value":991}," RED",{"type":45,"tag":129,"props":993,"children":994},{"style":136},[995],{"type":50,"value":211},{"type":45,"tag":129,"props":997,"children":998},{"style":297},[999],{"type":50,"value":1000}," \u002F\u002F ❌ Referring to constants is not supported\n",{"type":45,"tag":129,"props":1002,"children":1004},{"class":131,"line":1003},11,[1005,1010,1014,1019,1024,1029],{"type":45,"tag":129,"props":1006,"children":1007},{"style":193},[1008],{"type":50,"value":1009},"    scale",{"type":45,"tag":129,"props":1011,"children":1012},{"style":136},[1013],{"type":50,"value":115},{"type":45,"tag":129,"props":1015,"children":1016},{"style":246},[1017],{"type":50,"value":1018}," frame ",{"type":45,"tag":129,"props":1020,"children":1021},{"style":136},[1022],{"type":50,"value":1023},"*",{"type":45,"tag":129,"props":1025,"children":1026},{"style":203},[1027],{"type":50,"value":1028}," 10",{"type":45,"tag":129,"props":1030,"children":1031},{"style":297},[1032],{"type":50,"value":1033}," \u002F\u002F ❌ Math is not supported\n",{"type":45,"tag":129,"props":1035,"children":1037},{"class":131,"line":1036},12,[1038],{"type":45,"tag":129,"props":1039,"children":1040},{"style":136},[1041],{"type":50,"value":781},{"type":45,"tag":129,"props":1043,"children":1045},{"class":131,"line":1044},13,[1046],{"type":45,"tag":129,"props":1047,"children":1048},{"style":136},[1049],{"type":50,"value":239},{"type":45,"tag":129,"props":1051,"children":1053},{"class":131,"line":1052},14,[1054],{"type":45,"tag":129,"props":1055,"children":1056},{"style":246},[1057],{"type":50,"value":796},{"type":45,"tag":129,"props":1059,"children":1061},{"class":131,"line":1060},15,[1062,1066,1070],{"type":45,"tag":129,"props":1063,"children":1064},{"style":136},[1065],{"type":50,"value":258},{"type":45,"tag":129,"props":1067,"children":1068},{"style":142},[1069],{"type":50,"value":263},{"type":45,"tag":129,"props":1071,"children":1072},{"style":136},[1073],{"type":50,"value":239},{"type":45,"tag":83,"props":1075,"children":1077},{"id":1076},"animate-using-interpolate",[1078,1080],{"type":50,"value":1079},"Animate using ",{"type":45,"tag":90,"props":1081,"children":1083},{"className":1082},[],[1084],{"type":50,"value":1085},"interpolate()",{"type":45,"tag":46,"props":1087,"children":1088},{},[1089,1091,1096,1098,1102,1104,1110],{"type":50,"value":1090},"Write animations as inline ",{"type":45,"tag":90,"props":1092,"children":1094},{"className":1093},[],[1095],{"type":50,"value":1085},{"type":50,"value":1097}," calls on the property that changes.",{"type":45,"tag":1099,"props":1100,"children":1101},"br",{},[],{"type":50,"value":1103},"\nThe output range, easing, extrapolation and ",{"type":45,"tag":90,"props":1105,"children":1107},{"className":1106},[],[1108],{"type":50,"value":1109},"output",{"type":50,"value":1111}," property should use hardcoded values.",{"type":45,"tag":46,"props":1113,"children":1114},{},[1115,1117,1123,1125,1131,1132,1138,1140,1146,1148,1154,1156,1161,1163,1169,1171,1177,1179,1185],{"type":50,"value":1116},"The input range may additionally use ",{"type":45,"tag":90,"props":1118,"children":1120},{"className":1119},[],[1121],{"type":50,"value":1122},"durationInFrames",{"type":50,"value":1124},", ",{"type":45,"tag":90,"props":1126,"children":1128},{"className":1127},[],[1129],{"type":50,"value":1130},"fps",{"type":50,"value":1124},{"type":45,"tag":90,"props":1133,"children":1135},{"className":1134},[],[1136],{"type":50,"value":1137},"width",{"type":50,"value":1139}," and ",{"type":45,"tag":90,"props":1141,"children":1143},{"className":1142},[],[1144],{"type":50,"value":1145},"height",{"type":50,"value":1147}," destructured directly from ",{"type":45,"tag":90,"props":1149,"children":1151},{"className":1150},[],[1152],{"type":50,"value":1153},"useVideoConfig()",{"type":50,"value":1155},". Bare identifiers such as ",{"type":45,"tag":90,"props":1157,"children":1159},{"className":1158},[],[1160],{"type":50,"value":1122},{"type":50,"value":1162},", multiplication with a number such as ",{"type":45,"tag":90,"props":1164,"children":1166},{"className":1165},[],[1167],{"type":50,"value":1168},"2 * fps",{"type":50,"value":1170}," or ",{"type":45,"tag":90,"props":1172,"children":1174},{"className":1173},[],[1175],{"type":50,"value":1176},"fps * 2",{"type":50,"value":1178},", and subtraction of a number such as ",{"type":45,"tag":90,"props":1180,"children":1182},{"className":1181},[],[1183],{"type":50,"value":1184},"durationInFrames - 1",{"type":50,"value":1186}," are supported.",{"type":45,"tag":117,"props":1188,"children":1191},{"className":119,"code":1189,"language":121,"meta":1190,"style":123},"const {fps, durationInFrames} = useVideoConfig();\n\n\u002F\u002F 👍 Inline values can be standardized and keyframed\n\u003CInteractive.Div\n  name=\"Product card\"\n  style={{\n    color: 'white',\n    fontSize: 80,\n    scale: interpolate(frame, [0, fps], [0, 1], {\n      easing: Easing.spring({damping: 200}),\n      output: 'perceptual-scale',\n      extrapolateLeft: 'clamp',\n      extrapolateRight: 'clamp'\n    }),\n    rotate: interpolate(frame, [0, 1 * fps], ['0deg', '20deg'], {\n      easing: Easing.spring({damping: 200}),\n      extrapolateLeft: 'clamp',\n      extrapolateRight: 'clamp'\n    }),\n    translate: interpolate(\n      frame,\n      [durationInFrames - 30, durationInFrames],\n      ['0px 0px', '0px 120px'],\n      {\n        easing: Easing.spring({damping: 200}),\n        output: 'perceptual-scale',\n        extrapolateLeft: 'clamp',\n        extrapolateRight: 'clamp'\n      }\n    ),\n  }}\n\u002F>\n","title=\"Inline values\"",[1192],{"type":45,"tag":90,"props":1193,"children":1194},{"__ignoreMap":123},[1195,1243,1250,1258,1269,1293,1304,1332,1351,1429,1492,1521,1550,1575,1591,1690,1746,1774,1798,1814,1836,1849,1881,1928,1937,1994,2023,2052,2077,2086,2099,2107],{"type":45,"tag":129,"props":1196,"children":1197},{"class":131,"line":132},[1198,1202,1207,1211,1215,1220,1225,1230,1235,1239],{"type":45,"tag":129,"props":1199,"children":1200},{"style":152},[1201],{"type":50,"value":827},{"type":45,"tag":129,"props":1203,"children":1204},{"style":136},[1205],{"type":50,"value":1206}," {",{"type":45,"tag":129,"props":1208,"children":1209},{"style":246},[1210],{"type":50,"value":1130},{"type":45,"tag":129,"props":1212,"children":1213},{"style":136},[1214],{"type":50,"value":211},{"type":45,"tag":129,"props":1216,"children":1217},{"style":246},[1218],{"type":50,"value":1219}," durationInFrames",{"type":45,"tag":129,"props":1221,"children":1222},{"style":136},[1223],{"type":50,"value":1224},"}",{"type":45,"tag":129,"props":1226,"children":1227},{"style":136},[1228],{"type":50,"value":1229}," =",{"type":45,"tag":129,"props":1231,"children":1232},{"style":839},[1233],{"type":50,"value":1234}," useVideoConfig",{"type":45,"tag":129,"props":1236,"children":1237},{"style":246},[1238],{"type":50,"value":852},{"type":45,"tag":129,"props":1240,"children":1241},{"style":136},[1242],{"type":50,"value":922},{"type":45,"tag":129,"props":1244,"children":1245},{"class":131,"line":148},[1246],{"type":45,"tag":129,"props":1247,"children":1248},{"emptyLinePlaceholder":928},[1249],{"type":50,"value":931},{"type":45,"tag":129,"props":1251,"children":1252},{"class":131,"line":179},[1253],{"type":45,"tag":129,"props":1254,"children":1255},{"style":297},[1256],{"type":50,"value":1257},"\u002F\u002F 👍 Inline values can be standardized and keyframed\n",{"type":45,"tag":129,"props":1259,"children":1260},{"class":131,"line":233},[1261,1265],{"type":45,"tag":129,"props":1262,"children":1263},{"style":136},[1264],{"type":50,"value":139},{"type":45,"tag":129,"props":1266,"children":1267},{"style":142},[1268],{"type":50,"value":145},{"type":45,"tag":129,"props":1270,"children":1271},{"class":131,"line":242},[1272,1276,1280,1284,1289],{"type":45,"tag":129,"props":1273,"children":1274},{"style":152},[1275],{"type":50,"value":155},{"type":45,"tag":129,"props":1277,"children":1278},{"style":136},[1279],{"type":50,"value":160},{"type":45,"tag":129,"props":1281,"children":1282},{"style":136},[1283],{"type":50,"value":165},{"type":45,"tag":129,"props":1285,"children":1286},{"style":168},[1287],{"type":50,"value":1288},"Product card",{"type":45,"tag":129,"props":1290,"children":1291},{"style":136},[1292],{"type":50,"value":176},{"type":45,"tag":129,"props":1294,"children":1295},{"class":131,"line":252},[1296,1300],{"type":45,"tag":129,"props":1297,"children":1298},{"style":152},[1299],{"type":50,"value":185},{"type":45,"tag":129,"props":1301,"children":1302},{"style":136},[1303],{"type":50,"value":721},{"type":45,"tag":129,"props":1305,"children":1306},{"class":131,"line":604},[1307,1311,1315,1319,1324,1328],{"type":45,"tag":129,"props":1308,"children":1309},{"style":193},[1310],{"type":50,"value":750},{"type":45,"tag":129,"props":1312,"children":1313},{"style":136},[1314],{"type":50,"value":115},{"type":45,"tag":129,"props":1316,"children":1317},{"style":136},[1318],{"type":50,"value":759},{"type":45,"tag":129,"props":1320,"children":1321},{"style":168},[1322],{"type":50,"value":1323},"white",{"type":45,"tag":129,"props":1325,"children":1326},{"style":136},[1327],{"type":50,"value":769},{"type":45,"tag":129,"props":1329,"children":1330},{"style":136},[1331],{"type":50,"value":742},{"type":45,"tag":129,"props":1333,"children":1334},{"class":131,"line":641},[1335,1339,1343,1347],{"type":45,"tag":129,"props":1336,"children":1337},{"style":193},[1338],{"type":50,"value":729},{"type":45,"tag":129,"props":1340,"children":1341},{"style":136},[1342],{"type":50,"value":115},{"type":45,"tag":129,"props":1344,"children":1345},{"style":203},[1346],{"type":50,"value":206},{"type":45,"tag":129,"props":1348,"children":1349},{"style":136},[1350],{"type":50,"value":742},{"type":45,"tag":129,"props":1352,"children":1353},{"class":131,"line":649},[1354,1358,1362,1367,1372,1376,1381,1386,1390,1395,1399,1403,1407,1411,1416,1421,1425],{"type":45,"tag":129,"props":1355,"children":1356},{"style":193},[1357],{"type":50,"value":1009},{"type":45,"tag":129,"props":1359,"children":1360},{"style":136},[1361],{"type":50,"value":115},{"type":45,"tag":129,"props":1363,"children":1364},{"style":839},[1365],{"type":50,"value":1366}," interpolate",{"type":45,"tag":129,"props":1368,"children":1369},{"style":246},[1370],{"type":50,"value":1371},"(frame",{"type":45,"tag":129,"props":1373,"children":1374},{"style":136},[1375],{"type":50,"value":211},{"type":45,"tag":129,"props":1377,"children":1378},{"style":246},[1379],{"type":50,"value":1380}," [",{"type":45,"tag":129,"props":1382,"children":1383},{"style":203},[1384],{"type":50,"value":1385},"0",{"type":45,"tag":129,"props":1387,"children":1388},{"style":136},[1389],{"type":50,"value":211},{"type":45,"tag":129,"props":1391,"children":1392},{"style":246},[1393],{"type":50,"value":1394}," fps]",{"type":45,"tag":129,"props":1396,"children":1397},{"style":136},[1398],{"type":50,"value":211},{"type":45,"tag":129,"props":1400,"children":1401},{"style":246},[1402],{"type":50,"value":1380},{"type":45,"tag":129,"props":1404,"children":1405},{"style":203},[1406],{"type":50,"value":1385},{"type":45,"tag":129,"props":1408,"children":1409},{"style":136},[1410],{"type":50,"value":211},{"type":45,"tag":129,"props":1412,"children":1413},{"style":203},[1414],{"type":50,"value":1415}," 1",{"type":45,"tag":129,"props":1417,"children":1418},{"style":246},[1419],{"type":50,"value":1420},"]",{"type":45,"tag":129,"props":1422,"children":1423},{"style":136},[1424],{"type":50,"value":211},{"type":45,"tag":129,"props":1426,"children":1427},{"style":136},[1428],{"type":50,"value":862},{"type":45,"tag":129,"props":1430,"children":1431},{"class":131,"line":665},[1432,1437,1441,1446,1451,1456,1460,1465,1470,1474,1479,1483,1488],{"type":45,"tag":129,"props":1433,"children":1434},{"style":193},[1435],{"type":50,"value":1436},"      easing",{"type":45,"tag":129,"props":1438,"children":1439},{"style":136},[1440],{"type":50,"value":115},{"type":45,"tag":129,"props":1442,"children":1443},{"style":246},[1444],{"type":50,"value":1445}," Easing",{"type":45,"tag":129,"props":1447,"children":1448},{"style":136},[1449],{"type":50,"value":1450},".",{"type":45,"tag":129,"props":1452,"children":1453},{"style":839},[1454],{"type":50,"value":1455},"spring",{"type":45,"tag":129,"props":1457,"children":1458},{"style":246},[1459],{"type":50,"value":847},{"type":45,"tag":129,"props":1461,"children":1462},{"style":136},[1463],{"type":50,"value":1464},"{",{"type":45,"tag":129,"props":1466,"children":1467},{"style":193},[1468],{"type":50,"value":1469},"damping",{"type":45,"tag":129,"props":1471,"children":1472},{"style":136},[1473],{"type":50,"value":115},{"type":45,"tag":129,"props":1475,"children":1476},{"style":203},[1477],{"type":50,"value":1478}," 200",{"type":45,"tag":129,"props":1480,"children":1481},{"style":136},[1482],{"type":50,"value":1224},{"type":45,"tag":129,"props":1484,"children":1485},{"style":246},[1486],{"type":50,"value":1487},")",{"type":45,"tag":129,"props":1489,"children":1490},{"style":136},[1491],{"type":50,"value":742},{"type":45,"tag":129,"props":1493,"children":1494},{"class":131,"line":1003},[1495,1500,1504,1508,1513,1517],{"type":45,"tag":129,"props":1496,"children":1497},{"style":193},[1498],{"type":50,"value":1499},"      output",{"type":45,"tag":129,"props":1501,"children":1502},{"style":136},[1503],{"type":50,"value":115},{"type":45,"tag":129,"props":1505,"children":1506},{"style":136},[1507],{"type":50,"value":759},{"type":45,"tag":129,"props":1509,"children":1510},{"style":168},[1511],{"type":50,"value":1512},"perceptual-scale",{"type":45,"tag":129,"props":1514,"children":1515},{"style":136},[1516],{"type":50,"value":769},{"type":45,"tag":129,"props":1518,"children":1519},{"style":136},[1520],{"type":50,"value":742},{"type":45,"tag":129,"props":1522,"children":1523},{"class":131,"line":1036},[1524,1529,1533,1537,1542,1546],{"type":45,"tag":129,"props":1525,"children":1526},{"style":193},[1527],{"type":50,"value":1528},"      extrapolateLeft",{"type":45,"tag":129,"props":1530,"children":1531},{"style":136},[1532],{"type":50,"value":115},{"type":45,"tag":129,"props":1534,"children":1535},{"style":136},[1536],{"type":50,"value":759},{"type":45,"tag":129,"props":1538,"children":1539},{"style":168},[1540],{"type":50,"value":1541},"clamp",{"type":45,"tag":129,"props":1543,"children":1544},{"style":136},[1545],{"type":50,"value":769},{"type":45,"tag":129,"props":1547,"children":1548},{"style":136},[1549],{"type":50,"value":742},{"type":45,"tag":129,"props":1551,"children":1552},{"class":131,"line":1044},[1553,1558,1562,1566,1570],{"type":45,"tag":129,"props":1554,"children":1555},{"style":193},[1556],{"type":50,"value":1557},"      extrapolateRight",{"type":45,"tag":129,"props":1559,"children":1560},{"style":136},[1561],{"type":50,"value":115},{"type":45,"tag":129,"props":1563,"children":1564},{"style":136},[1565],{"type":50,"value":759},{"type":45,"tag":129,"props":1567,"children":1568},{"style":168},[1569],{"type":50,"value":1541},{"type":45,"tag":129,"props":1571,"children":1572},{"style":136},[1573],{"type":50,"value":1574},"'\n",{"type":45,"tag":129,"props":1576,"children":1577},{"class":131,"line":1052},[1578,1583,1587],{"type":45,"tag":129,"props":1579,"children":1580},{"style":136},[1581],{"type":50,"value":1582},"    }",{"type":45,"tag":129,"props":1584,"children":1585},{"style":246},[1586],{"type":50,"value":1487},{"type":45,"tag":129,"props":1588,"children":1589},{"style":136},[1590],{"type":50,"value":742},{"type":45,"tag":129,"props":1592,"children":1593},{"class":131,"line":1060},[1594,1599,1603,1607,1611,1615,1619,1623,1627,1631,1636,1640,1644,1648,1652,1657,1661,1665,1669,1674,1678,1682,1686],{"type":45,"tag":129,"props":1595,"children":1596},{"style":193},[1597],{"type":50,"value":1598},"    rotate",{"type":45,"tag":129,"props":1600,"children":1601},{"style":136},[1602],{"type":50,"value":115},{"type":45,"tag":129,"props":1604,"children":1605},{"style":839},[1606],{"type":50,"value":1366},{"type":45,"tag":129,"props":1608,"children":1609},{"style":246},[1610],{"type":50,"value":1371},{"type":45,"tag":129,"props":1612,"children":1613},{"style":136},[1614],{"type":50,"value":211},{"type":45,"tag":129,"props":1616,"children":1617},{"style":246},[1618],{"type":50,"value":1380},{"type":45,"tag":129,"props":1620,"children":1621},{"style":203},[1622],{"type":50,"value":1385},{"type":45,"tag":129,"props":1624,"children":1625},{"style":136},[1626],{"type":50,"value":211},{"type":45,"tag":129,"props":1628,"children":1629},{"style":203},[1630],{"type":50,"value":1415},{"type":45,"tag":129,"props":1632,"children":1633},{"style":136},[1634],{"type":50,"value":1635}," *",{"type":45,"tag":129,"props":1637,"children":1638},{"style":246},[1639],{"type":50,"value":1394},{"type":45,"tag":129,"props":1641,"children":1642},{"style":136},[1643],{"type":50,"value":211},{"type":45,"tag":129,"props":1645,"children":1646},{"style":246},[1647],{"type":50,"value":1380},{"type":45,"tag":129,"props":1649,"children":1650},{"style":136},[1651],{"type":50,"value":769},{"type":45,"tag":129,"props":1653,"children":1654},{"style":168},[1655],{"type":50,"value":1656},"0deg",{"type":45,"tag":129,"props":1658,"children":1659},{"style":136},[1660],{"type":50,"value":769},{"type":45,"tag":129,"props":1662,"children":1663},{"style":136},[1664],{"type":50,"value":211},{"type":45,"tag":129,"props":1666,"children":1667},{"style":136},[1668],{"type":50,"value":759},{"type":45,"tag":129,"props":1670,"children":1671},{"style":168},[1672],{"type":50,"value":1673},"20deg",{"type":45,"tag":129,"props":1675,"children":1676},{"style":136},[1677],{"type":50,"value":769},{"type":45,"tag":129,"props":1679,"children":1680},{"style":246},[1681],{"type":50,"value":1420},{"type":45,"tag":129,"props":1683,"children":1684},{"style":136},[1685],{"type":50,"value":211},{"type":45,"tag":129,"props":1687,"children":1688},{"style":136},[1689],{"type":50,"value":862},{"type":45,"tag":129,"props":1691,"children":1693},{"class":131,"line":1692},16,[1694,1698,1702,1706,1710,1714,1718,1722,1726,1730,1734,1738,1742],{"type":45,"tag":129,"props":1695,"children":1696},{"style":193},[1697],{"type":50,"value":1436},{"type":45,"tag":129,"props":1699,"children":1700},{"style":136},[1701],{"type":50,"value":115},{"type":45,"tag":129,"props":1703,"children":1704},{"style":246},[1705],{"type":50,"value":1445},{"type":45,"tag":129,"props":1707,"children":1708},{"style":136},[1709],{"type":50,"value":1450},{"type":45,"tag":129,"props":1711,"children":1712},{"style":839},[1713],{"type":50,"value":1455},{"type":45,"tag":129,"props":1715,"children":1716},{"style":246},[1717],{"type":50,"value":847},{"type":45,"tag":129,"props":1719,"children":1720},{"style":136},[1721],{"type":50,"value":1464},{"type":45,"tag":129,"props":1723,"children":1724},{"style":193},[1725],{"type":50,"value":1469},{"type":45,"tag":129,"props":1727,"children":1728},{"style":136},[1729],{"type":50,"value":115},{"type":45,"tag":129,"props":1731,"children":1732},{"style":203},[1733],{"type":50,"value":1478},{"type":45,"tag":129,"props":1735,"children":1736},{"style":136},[1737],{"type":50,"value":1224},{"type":45,"tag":129,"props":1739,"children":1740},{"style":246},[1741],{"type":50,"value":1487},{"type":45,"tag":129,"props":1743,"children":1744},{"style":136},[1745],{"type":50,"value":742},{"type":45,"tag":129,"props":1747,"children":1749},{"class":131,"line":1748},17,[1750,1754,1758,1762,1766,1770],{"type":45,"tag":129,"props":1751,"children":1752},{"style":193},[1753],{"type":50,"value":1528},{"type":45,"tag":129,"props":1755,"children":1756},{"style":136},[1757],{"type":50,"value":115},{"type":45,"tag":129,"props":1759,"children":1760},{"style":136},[1761],{"type":50,"value":759},{"type":45,"tag":129,"props":1763,"children":1764},{"style":168},[1765],{"type":50,"value":1541},{"type":45,"tag":129,"props":1767,"children":1768},{"style":136},[1769],{"type":50,"value":769},{"type":45,"tag":129,"props":1771,"children":1772},{"style":136},[1773],{"type":50,"value":742},{"type":45,"tag":129,"props":1775,"children":1777},{"class":131,"line":1776},18,[1778,1782,1786,1790,1794],{"type":45,"tag":129,"props":1779,"children":1780},{"style":193},[1781],{"type":50,"value":1557},{"type":45,"tag":129,"props":1783,"children":1784},{"style":136},[1785],{"type":50,"value":115},{"type":45,"tag":129,"props":1787,"children":1788},{"style":136},[1789],{"type":50,"value":759},{"type":45,"tag":129,"props":1791,"children":1792},{"style":168},[1793],{"type":50,"value":1541},{"type":45,"tag":129,"props":1795,"children":1796},{"style":136},[1797],{"type":50,"value":1574},{"type":45,"tag":129,"props":1799,"children":1801},{"class":131,"line":1800},19,[1802,1806,1810],{"type":45,"tag":129,"props":1803,"children":1804},{"style":136},[1805],{"type":50,"value":1582},{"type":45,"tag":129,"props":1807,"children":1808},{"style":246},[1809],{"type":50,"value":1487},{"type":45,"tag":129,"props":1811,"children":1812},{"style":136},[1813],{"type":50,"value":742},{"type":45,"tag":129,"props":1815,"children":1817},{"class":131,"line":1816},20,[1818,1823,1827,1831],{"type":45,"tag":129,"props":1819,"children":1820},{"style":193},[1821],{"type":50,"value":1822},"    translate",{"type":45,"tag":129,"props":1824,"children":1825},{"style":136},[1826],{"type":50,"value":115},{"type":45,"tag":129,"props":1828,"children":1829},{"style":839},[1830],{"type":50,"value":1366},{"type":45,"tag":129,"props":1832,"children":1833},{"style":246},[1834],{"type":50,"value":1835},"(\n",{"type":45,"tag":129,"props":1837,"children":1839},{"class":131,"line":1838},21,[1840,1845],{"type":45,"tag":129,"props":1841,"children":1842},{"style":246},[1843],{"type":50,"value":1844},"      frame",{"type":45,"tag":129,"props":1846,"children":1847},{"style":136},[1848],{"type":50,"value":742},{"type":45,"tag":129,"props":1850,"children":1852},{"class":131,"line":1851},22,[1853,1858,1863,1868,1872,1877],{"type":45,"tag":129,"props":1854,"children":1855},{"style":246},[1856],{"type":50,"value":1857},"      [durationInFrames ",{"type":45,"tag":129,"props":1859,"children":1860},{"style":136},[1861],{"type":50,"value":1862},"-",{"type":45,"tag":129,"props":1864,"children":1865},{"style":203},[1866],{"type":50,"value":1867}," 30",{"type":45,"tag":129,"props":1869,"children":1870},{"style":136},[1871],{"type":50,"value":211},{"type":45,"tag":129,"props":1873,"children":1874},{"style":246},[1875],{"type":50,"value":1876}," durationInFrames]",{"type":45,"tag":129,"props":1878,"children":1879},{"style":136},[1880],{"type":50,"value":742},{"type":45,"tag":129,"props":1882,"children":1884},{"class":131,"line":1883},23,[1885,1890,1894,1899,1903,1907,1911,1916,1920,1924],{"type":45,"tag":129,"props":1886,"children":1887},{"style":246},[1888],{"type":50,"value":1889},"      [",{"type":45,"tag":129,"props":1891,"children":1892},{"style":136},[1893],{"type":50,"value":769},{"type":45,"tag":129,"props":1895,"children":1896},{"style":168},[1897],{"type":50,"value":1898},"0px 0px",{"type":45,"tag":129,"props":1900,"children":1901},{"style":136},[1902],{"type":50,"value":769},{"type":45,"tag":129,"props":1904,"children":1905},{"style":136},[1906],{"type":50,"value":211},{"type":45,"tag":129,"props":1908,"children":1909},{"style":136},[1910],{"type":50,"value":759},{"type":45,"tag":129,"props":1912,"children":1913},{"style":168},[1914],{"type":50,"value":1915},"0px 120px",{"type":45,"tag":129,"props":1917,"children":1918},{"style":136},[1919],{"type":50,"value":769},{"type":45,"tag":129,"props":1921,"children":1922},{"style":246},[1923],{"type":50,"value":1420},{"type":45,"tag":129,"props":1925,"children":1926},{"style":136},[1927],{"type":50,"value":742},{"type":45,"tag":129,"props":1929,"children":1931},{"class":131,"line":1930},24,[1932],{"type":45,"tag":129,"props":1933,"children":1934},{"style":136},[1935],{"type":50,"value":1936},"      {\n",{"type":45,"tag":129,"props":1938,"children":1940},{"class":131,"line":1939},25,[1941,1946,1950,1954,1958,1962,1966,1970,1974,1978,1982,1986,1990],{"type":45,"tag":129,"props":1942,"children":1943},{"style":193},[1944],{"type":50,"value":1945},"        easing",{"type":45,"tag":129,"props":1947,"children":1948},{"style":136},[1949],{"type":50,"value":115},{"type":45,"tag":129,"props":1951,"children":1952},{"style":246},[1953],{"type":50,"value":1445},{"type":45,"tag":129,"props":1955,"children":1956},{"style":136},[1957],{"type":50,"value":1450},{"type":45,"tag":129,"props":1959,"children":1960},{"style":839},[1961],{"type":50,"value":1455},{"type":45,"tag":129,"props":1963,"children":1964},{"style":246},[1965],{"type":50,"value":847},{"type":45,"tag":129,"props":1967,"children":1968},{"style":136},[1969],{"type":50,"value":1464},{"type":45,"tag":129,"props":1971,"children":1972},{"style":193},[1973],{"type":50,"value":1469},{"type":45,"tag":129,"props":1975,"children":1976},{"style":136},[1977],{"type":50,"value":115},{"type":45,"tag":129,"props":1979,"children":1980},{"style":203},[1981],{"type":50,"value":1478},{"type":45,"tag":129,"props":1983,"children":1984},{"style":136},[1985],{"type":50,"value":1224},{"type":45,"tag":129,"props":1987,"children":1988},{"style":246},[1989],{"type":50,"value":1487},{"type":45,"tag":129,"props":1991,"children":1992},{"style":136},[1993],{"type":50,"value":742},{"type":45,"tag":129,"props":1995,"children":1997},{"class":131,"line":1996},26,[1998,2003,2007,2011,2015,2019],{"type":45,"tag":129,"props":1999,"children":2000},{"style":193},[2001],{"type":50,"value":2002},"        output",{"type":45,"tag":129,"props":2004,"children":2005},{"style":136},[2006],{"type":50,"value":115},{"type":45,"tag":129,"props":2008,"children":2009},{"style":136},[2010],{"type":50,"value":759},{"type":45,"tag":129,"props":2012,"children":2013},{"style":168},[2014],{"type":50,"value":1512},{"type":45,"tag":129,"props":2016,"children":2017},{"style":136},[2018],{"type":50,"value":769},{"type":45,"tag":129,"props":2020,"children":2021},{"style":136},[2022],{"type":50,"value":742},{"type":45,"tag":129,"props":2024,"children":2026},{"class":131,"line":2025},27,[2027,2032,2036,2040,2044,2048],{"type":45,"tag":129,"props":2028,"children":2029},{"style":193},[2030],{"type":50,"value":2031},"        extrapolateLeft",{"type":45,"tag":129,"props":2033,"children":2034},{"style":136},[2035],{"type":50,"value":115},{"type":45,"tag":129,"props":2037,"children":2038},{"style":136},[2039],{"type":50,"value":759},{"type":45,"tag":129,"props":2041,"children":2042},{"style":168},[2043],{"type":50,"value":1541},{"type":45,"tag":129,"props":2045,"children":2046},{"style":136},[2047],{"type":50,"value":769},{"type":45,"tag":129,"props":2049,"children":2050},{"style":136},[2051],{"type":50,"value":742},{"type":45,"tag":129,"props":2053,"children":2055},{"class":131,"line":2054},28,[2056,2061,2065,2069,2073],{"type":45,"tag":129,"props":2057,"children":2058},{"style":193},[2059],{"type":50,"value":2060},"        extrapolateRight",{"type":45,"tag":129,"props":2062,"children":2063},{"style":136},[2064],{"type":50,"value":115},{"type":45,"tag":129,"props":2066,"children":2067},{"style":136},[2068],{"type":50,"value":759},{"type":45,"tag":129,"props":2070,"children":2071},{"style":168},[2072],{"type":50,"value":1541},{"type":45,"tag":129,"props":2074,"children":2075},{"style":136},[2076],{"type":50,"value":1574},{"type":45,"tag":129,"props":2078,"children":2080},{"class":131,"line":2079},29,[2081],{"type":45,"tag":129,"props":2082,"children":2083},{"style":136},[2084],{"type":50,"value":2085},"      }\n",{"type":45,"tag":129,"props":2087,"children":2089},{"class":131,"line":2088},30,[2090,2095],{"type":45,"tag":129,"props":2091,"children":2092},{"style":246},[2093],{"type":50,"value":2094},"    )",{"type":45,"tag":129,"props":2096,"children":2097},{"style":136},[2098],{"type":50,"value":742},{"type":45,"tag":129,"props":2100,"children":2102},{"class":131,"line":2101},31,[2103],{"type":45,"tag":129,"props":2104,"children":2105},{"style":136},[2106],{"type":50,"value":781},{"type":45,"tag":129,"props":2108,"children":2110},{"class":131,"line":2109},32,[2111],{"type":45,"tag":129,"props":2112,"children":2113},{"style":136},[2114],{"type":50,"value":2115},"\u002F>\n",{"type":45,"tag":117,"props":2117,"children":2120},{"className":119,"code":2118,"language":121,"meta":2119,"style":123},"const translateY = interpolate(frame, [0, 30], [0, 120]); \u002F\u002F ❌ Math should be directly in the markup\n\n\u003CInteractive.Div\n  name=\"Product card\"\n  style={{\n    translate: translateY, \u002F\u002F ❌ Only inline interpolate() calls are supported,\n    rotate: interpolate(frame, [start, start + 10], [0, Math.PI]), \u002F\u002F ❌ Cannot use math with arbitrary variables, cannot use constants\n    scale: interpolate(anyVariable, [0, 30], [0, 1]) \u002F\u002F ❌ Can only interpret the `frame` variable.\n  }}\n\u002F>\n","title=\"❌ Bad interactivity\"",[2121],{"type":45,"tag":90,"props":2122,"children":2123},{"__ignoreMap":123},[2124,2208,2215,2226,2249,2260,2285,2374,2448,2455],{"type":45,"tag":129,"props":2125,"children":2126},{"class":131,"line":132},[2127,2131,2136,2140,2144,2148,2152,2156,2160,2164,2168,2172,2176,2180,2184,2188,2193,2198,2203],{"type":45,"tag":129,"props":2128,"children":2129},{"style":152},[2130],{"type":50,"value":827},{"type":45,"tag":129,"props":2132,"children":2133},{"style":246},[2134],{"type":50,"value":2135}," translateY ",{"type":45,"tag":129,"props":2137,"children":2138},{"style":136},[2139],{"type":50,"value":160},{"type":45,"tag":129,"props":2141,"children":2142},{"style":839},[2143],{"type":50,"value":1366},{"type":45,"tag":129,"props":2145,"children":2146},{"style":246},[2147],{"type":50,"value":1371},{"type":45,"tag":129,"props":2149,"children":2150},{"style":136},[2151],{"type":50,"value":211},{"type":45,"tag":129,"props":2153,"children":2154},{"style":246},[2155],{"type":50,"value":1380},{"type":45,"tag":129,"props":2157,"children":2158},{"style":203},[2159],{"type":50,"value":1385},{"type":45,"tag":129,"props":2161,"children":2162},{"style":136},[2163],{"type":50,"value":211},{"type":45,"tag":129,"props":2165,"children":2166},{"style":203},[2167],{"type":50,"value":1867},{"type":45,"tag":129,"props":2169,"children":2170},{"style":246},[2171],{"type":50,"value":1420},{"type":45,"tag":129,"props":2173,"children":2174},{"style":136},[2175],{"type":50,"value":211},{"type":45,"tag":129,"props":2177,"children":2178},{"style":246},[2179],{"type":50,"value":1380},{"type":45,"tag":129,"props":2181,"children":2182},{"style":203},[2183],{"type":50,"value":1385},{"type":45,"tag":129,"props":2185,"children":2186},{"style":136},[2187],{"type":50,"value":211},{"type":45,"tag":129,"props":2189,"children":2190},{"style":203},[2191],{"type":50,"value":2192}," 120",{"type":45,"tag":129,"props":2194,"children":2195},{"style":246},[2196],{"type":50,"value":2197},"])",{"type":45,"tag":129,"props":2199,"children":2200},{"style":136},[2201],{"type":50,"value":2202},";",{"type":45,"tag":129,"props":2204,"children":2205},{"style":297},[2206],{"type":50,"value":2207}," \u002F\u002F ❌ Math should be directly in the markup\n",{"type":45,"tag":129,"props":2209,"children":2210},{"class":131,"line":148},[2211],{"type":45,"tag":129,"props":2212,"children":2213},{"emptyLinePlaceholder":928},[2214],{"type":50,"value":931},{"type":45,"tag":129,"props":2216,"children":2217},{"class":131,"line":179},[2218,2222],{"type":45,"tag":129,"props":2219,"children":2220},{"style":136},[2221],{"type":50,"value":139},{"type":45,"tag":129,"props":2223,"children":2224},{"style":142},[2225],{"type":50,"value":145},{"type":45,"tag":129,"props":2227,"children":2228},{"class":131,"line":233},[2229,2233,2237,2241,2245],{"type":45,"tag":129,"props":2230,"children":2231},{"style":152},[2232],{"type":50,"value":155},{"type":45,"tag":129,"props":2234,"children":2235},{"style":136},[2236],{"type":50,"value":160},{"type":45,"tag":129,"props":2238,"children":2239},{"style":136},[2240],{"type":50,"value":165},{"type":45,"tag":129,"props":2242,"children":2243},{"style":168},[2244],{"type":50,"value":1288},{"type":45,"tag":129,"props":2246,"children":2247},{"style":136},[2248],{"type":50,"value":176},{"type":45,"tag":129,"props":2250,"children":2251},{"class":131,"line":242},[2252,2256],{"type":45,"tag":129,"props":2253,"children":2254},{"style":152},[2255],{"type":50,"value":185},{"type":45,"tag":129,"props":2257,"children":2258},{"style":136},[2259],{"type":50,"value":721},{"type":45,"tag":129,"props":2261,"children":2262},{"class":131,"line":252},[2263,2267,2271,2276,2280],{"type":45,"tag":129,"props":2264,"children":2265},{"style":193},[2266],{"type":50,"value":1822},{"type":45,"tag":129,"props":2268,"children":2269},{"style":136},[2270],{"type":50,"value":115},{"type":45,"tag":129,"props":2272,"children":2273},{"style":246},[2274],{"type":50,"value":2275}," translateY",{"type":45,"tag":129,"props":2277,"children":2278},{"style":136},[2279],{"type":50,"value":211},{"type":45,"tag":129,"props":2281,"children":2282},{"style":297},[2283],{"type":50,"value":2284}," \u002F\u002F ❌ Only inline interpolate() calls are supported,\n",{"type":45,"tag":129,"props":2286,"children":2287},{"class":131,"line":604},[2288,2292,2296,2300,2304,2308,2313,2317,2322,2327,2331,2335,2339,2343,2347,2351,2356,2360,2365,2369],{"type":45,"tag":129,"props":2289,"children":2290},{"style":193},[2291],{"type":50,"value":1598},{"type":45,"tag":129,"props":2293,"children":2294},{"style":136},[2295],{"type":50,"value":115},{"type":45,"tag":129,"props":2297,"children":2298},{"style":839},[2299],{"type":50,"value":1366},{"type":45,"tag":129,"props":2301,"children":2302},{"style":246},[2303],{"type":50,"value":1371},{"type":45,"tag":129,"props":2305,"children":2306},{"style":136},[2307],{"type":50,"value":211},{"type":45,"tag":129,"props":2309,"children":2310},{"style":246},[2311],{"type":50,"value":2312}," [start",{"type":45,"tag":129,"props":2314,"children":2315},{"style":136},[2316],{"type":50,"value":211},{"type":45,"tag":129,"props":2318,"children":2319},{"style":246},[2320],{"type":50,"value":2321}," start ",{"type":45,"tag":129,"props":2323,"children":2324},{"style":136},[2325],{"type":50,"value":2326},"+",{"type":45,"tag":129,"props":2328,"children":2329},{"style":203},[2330],{"type":50,"value":1028},{"type":45,"tag":129,"props":2332,"children":2333},{"style":246},[2334],{"type":50,"value":1420},{"type":45,"tag":129,"props":2336,"children":2337},{"style":136},[2338],{"type":50,"value":211},{"type":45,"tag":129,"props":2340,"children":2341},{"style":246},[2342],{"type":50,"value":1380},{"type":45,"tag":129,"props":2344,"children":2345},{"style":203},[2346],{"type":50,"value":1385},{"type":45,"tag":129,"props":2348,"children":2349},{"style":136},[2350],{"type":50,"value":211},{"type":45,"tag":129,"props":2352,"children":2353},{"style":246},[2354],{"type":50,"value":2355}," Math",{"type":45,"tag":129,"props":2357,"children":2358},{"style":136},[2359],{"type":50,"value":1450},{"type":45,"tag":129,"props":2361,"children":2362},{"style":246},[2363],{"type":50,"value":2364},"PI])",{"type":45,"tag":129,"props":2366,"children":2367},{"style":136},[2368],{"type":50,"value":211},{"type":45,"tag":129,"props":2370,"children":2371},{"style":297},[2372],{"type":50,"value":2373}," \u002F\u002F ❌ Cannot use math with arbitrary variables, cannot use constants\n",{"type":45,"tag":129,"props":2375,"children":2376},{"class":131,"line":641},[2377,2381,2385,2389,2394,2398,2402,2406,2410,2414,2418,2422,2426,2430,2434,2438,2443],{"type":45,"tag":129,"props":2378,"children":2379},{"style":193},[2380],{"type":50,"value":1009},{"type":45,"tag":129,"props":2382,"children":2383},{"style":136},[2384],{"type":50,"value":115},{"type":45,"tag":129,"props":2386,"children":2387},{"style":839},[2388],{"type":50,"value":1366},{"type":45,"tag":129,"props":2390,"children":2391},{"style":246},[2392],{"type":50,"value":2393},"(anyVariable",{"type":45,"tag":129,"props":2395,"children":2396},{"style":136},[2397],{"type":50,"value":211},{"type":45,"tag":129,"props":2399,"children":2400},{"style":246},[2401],{"type":50,"value":1380},{"type":45,"tag":129,"props":2403,"children":2404},{"style":203},[2405],{"type":50,"value":1385},{"type":45,"tag":129,"props":2407,"children":2408},{"style":136},[2409],{"type":50,"value":211},{"type":45,"tag":129,"props":2411,"children":2412},{"style":203},[2413],{"type":50,"value":1867},{"type":45,"tag":129,"props":2415,"children":2416},{"style":246},[2417],{"type":50,"value":1420},{"type":45,"tag":129,"props":2419,"children":2420},{"style":136},[2421],{"type":50,"value":211},{"type":45,"tag":129,"props":2423,"children":2424},{"style":246},[2425],{"type":50,"value":1380},{"type":45,"tag":129,"props":2427,"children":2428},{"style":203},[2429],{"type":50,"value":1385},{"type":45,"tag":129,"props":2431,"children":2432},{"style":136},[2433],{"type":50,"value":211},{"type":45,"tag":129,"props":2435,"children":2436},{"style":203},[2437],{"type":50,"value":1415},{"type":45,"tag":129,"props":2439,"children":2440},{"style":246},[2441],{"type":50,"value":2442},"]) ",{"type":45,"tag":129,"props":2444,"children":2445},{"style":297},[2446],{"type":50,"value":2447},"\u002F\u002F ❌ Can only interpret the `frame` variable.\n",{"type":45,"tag":129,"props":2449,"children":2450},{"class":131,"line":649},[2451],{"type":45,"tag":129,"props":2452,"children":2453},{"style":136},[2454],{"type":50,"value":781},{"type":45,"tag":129,"props":2456,"children":2457},{"class":131,"line":665},[2458],{"type":45,"tag":129,"props":2459,"children":2460},{"style":136},[2461],{"type":50,"value":2115},{"type":45,"tag":83,"props":2463,"children":2465},{"id":2464},"use-scale-translate-rotate-css-properties",[2466,2468,2474,2475,2481,2482,2488],{"type":50,"value":2467},"Use ",{"type":45,"tag":90,"props":2469,"children":2471},{"className":2470},[],[2472],{"type":50,"value":2473},"scale",{"type":50,"value":1124},{"type":45,"tag":90,"props":2476,"children":2478},{"className":2477},[],[2479],{"type":50,"value":2480},"translate",{"type":50,"value":1124},{"type":45,"tag":90,"props":2483,"children":2485},{"className":2484},[],[2486],{"type":50,"value":2487},"rotate",{"type":50,"value":2489}," CSS properties",{"type":45,"tag":46,"props":2491,"children":2492},{},[2493,2495,2501,2503,2506,2508,2513,2514,2519,2520,2525],{"type":50,"value":2494},"Avoid the ",{"type":45,"tag":90,"props":2496,"children":2498},{"className":2497},[],[2499],{"type":50,"value":2500},"transform",{"type":50,"value":2502}," CSS property.",{"type":45,"tag":1099,"props":2504,"children":2505},{},[],{"type":50,"value":2507},"\nIf possible, use ",{"type":45,"tag":90,"props":2509,"children":2511},{"className":2510},[],[2512],{"type":50,"value":2473},{"type":50,"value":1124},{"type":45,"tag":90,"props":2515,"children":2517},{"className":2516},[],[2518],{"type":50,"value":2487},{"type":50,"value":1139},{"type":45,"tag":90,"props":2521,"children":2523},{"className":2522},[],[2524],{"type":50,"value":2480},{"type":50,"value":2526}," instead because only they are interactively editable.",{"type":45,"tag":83,"props":2528,"children":2530},{"id":2529},"keep-composition-metadata-inline",[2531],{"type":50,"value":2532},"Keep composition metadata inline",{"type":45,"tag":46,"props":2534,"children":2535},{},[2536,2538,2543,2544,2549,2550,2555,2556,2561,2562,2568],{"type":50,"value":2537},"When scaffolding a composition, keep ",{"type":45,"tag":90,"props":2539,"children":2541},{"className":2540},[],[2542],{"type":50,"value":1137},{"type":50,"value":1124},{"type":45,"tag":90,"props":2545,"children":2547},{"className":2546},[],[2548],{"type":50,"value":1145},{"type":50,"value":1124},{"type":45,"tag":90,"props":2551,"children":2553},{"className":2552},[],[2554],{"type":50,"value":1130},{"type":50,"value":1124},{"type":45,"tag":90,"props":2557,"children":2559},{"className":2558},[],[2560],{"type":50,"value":1122},{"type":50,"value":1139},{"type":45,"tag":90,"props":2563,"children":2565},{"className":2564},[],[2566],{"type":50,"value":2567},"defaultProps",{"type":50,"value":2569}," inline and make no type assertions.",{"type":45,"tag":46,"props":2571,"children":2572},{},[2573,2575,2580,2582,2588,2589,2595],{"type":50,"value":2574},"The Props editor can save visual edits back to your code when ",{"type":45,"tag":90,"props":2576,"children":2578},{"className":2577},[],[2579],{"type":50,"value":2567},{"type":50,"value":2581}," is an inline object literal on ",{"type":45,"tag":90,"props":2583,"children":2585},{"className":2584},[],[2586],{"type":50,"value":2587},"\u003CComposition>",{"type":50,"value":1170},{"type":45,"tag":90,"props":2590,"children":2592},{"className":2591},[],[2593],{"type":50,"value":2594},"\u003CStill>",{"type":50,"value":1450},{"type":45,"tag":117,"props":2597,"children":2599},{"className":119,"code":2598,"language":121,"meta":123,"style":123},"\u002F\u002F 👍 Static values are in \u003CComposition>, dynamic values are in calculateMetadata()\nconst calculateMetadata = useMemo(async () => {\n  const dimensions = await getDimensions(); \u002F\u002F just an example\n  return {width: dimensions.width, height: dimensions.height};\n});\n\n\u003CComposition\n  id=\"my-video\"\n  component={MyComponent}\n  durationInFrames={150}\n  fps={30}\n  calculateMetadata={calculateMetadata}\n  defaultProps={{title: 'Hello', color: '#0b84ff'}}\n\u002F>\n",[2600],{"type":45,"tag":90,"props":2601,"children":2602},{"__ignoreMap":123},[2603,2611,2653,2693,2754,2769,2776,2788,2813,2836,2857,2878,2899,2963],{"type":45,"tag":129,"props":2604,"children":2605},{"class":131,"line":132},[2606],{"type":45,"tag":129,"props":2607,"children":2608},{"style":297},[2609],{"type":50,"value":2610},"\u002F\u002F 👍 Static values are in \u003CComposition>, dynamic values are in calculateMetadata()\n",{"type":45,"tag":129,"props":2612,"children":2613},{"class":131,"line":148},[2614,2618,2623,2627,2631,2635,2640,2645,2649],{"type":45,"tag":129,"props":2615,"children":2616},{"style":152},[2617],{"type":50,"value":827},{"type":45,"tag":129,"props":2619,"children":2620},{"style":246},[2621],{"type":50,"value":2622}," calculateMetadata ",{"type":45,"tag":129,"props":2624,"children":2625},{"style":136},[2626],{"type":50,"value":160},{"type":45,"tag":129,"props":2628,"children":2629},{"style":839},[2630],{"type":50,"value":842},{"type":45,"tag":129,"props":2632,"children":2633},{"style":246},[2634],{"type":50,"value":847},{"type":45,"tag":129,"props":2636,"children":2637},{"style":152},[2638],{"type":50,"value":2639},"async",{"type":45,"tag":129,"props":2641,"children":2642},{"style":136},[2643],{"type":50,"value":2644}," ()",{"type":45,"tag":129,"props":2646,"children":2647},{"style":152},[2648],{"type":50,"value":857},{"type":45,"tag":129,"props":2650,"children":2651},{"style":136},[2652],{"type":50,"value":862},{"type":45,"tag":129,"props":2654,"children":2655},{"class":131,"line":179},[2656,2661,2666,2670,2675,2680,2684,2688],{"type":45,"tag":129,"props":2657,"children":2658},{"style":152},[2659],{"type":50,"value":2660},"  const",{"type":45,"tag":129,"props":2662,"children":2663},{"style":246},[2664],{"type":50,"value":2665}," dimensions",{"type":45,"tag":129,"props":2667,"children":2668},{"style":136},[2669],{"type":50,"value":1229},{"type":45,"tag":129,"props":2671,"children":2672},{"style":868},[2673],{"type":50,"value":2674}," await",{"type":45,"tag":129,"props":2676,"children":2677},{"style":839},[2678],{"type":50,"value":2679}," getDimensions",{"type":45,"tag":129,"props":2681,"children":2682},{"style":193},[2683],{"type":50,"value":852},{"type":45,"tag":129,"props":2685,"children":2686},{"style":136},[2687],{"type":50,"value":2202},{"type":45,"tag":129,"props":2689,"children":2690},{"style":297},[2691],{"type":50,"value":2692}," \u002F\u002F just an example\n",{"type":45,"tag":129,"props":2694,"children":2695},{"class":131,"line":233},[2696,2700,2704,2708,2712,2716,2720,2724,2728,2733,2737,2741,2745,2749],{"type":45,"tag":129,"props":2697,"children":2698},{"style":868},[2699],{"type":50,"value":871},{"type":45,"tag":129,"props":2701,"children":2702},{"style":136},[2703],{"type":50,"value":1206},{"type":45,"tag":129,"props":2705,"children":2706},{"style":193},[2707],{"type":50,"value":1137},{"type":45,"tag":129,"props":2709,"children":2710},{"style":136},[2711],{"type":50,"value":115},{"type":45,"tag":129,"props":2713,"children":2714},{"style":246},[2715],{"type":50,"value":2665},{"type":45,"tag":129,"props":2717,"children":2718},{"style":136},[2719],{"type":50,"value":1450},{"type":45,"tag":129,"props":2721,"children":2722},{"style":246},[2723],{"type":50,"value":1137},{"type":45,"tag":129,"props":2725,"children":2726},{"style":136},[2727],{"type":50,"value":211},{"type":45,"tag":129,"props":2729,"children":2730},{"style":193},[2731],{"type":50,"value":2732}," height",{"type":45,"tag":129,"props":2734,"children":2735},{"style":136},[2736],{"type":50,"value":115},{"type":45,"tag":129,"props":2738,"children":2739},{"style":246},[2740],{"type":50,"value":2665},{"type":45,"tag":129,"props":2742,"children":2743},{"style":136},[2744],{"type":50,"value":1450},{"type":45,"tag":129,"props":2746,"children":2747},{"style":246},[2748],{"type":50,"value":1145},{"type":45,"tag":129,"props":2750,"children":2751},{"style":136},[2752],{"type":50,"value":2753},"};\n",{"type":45,"tag":129,"props":2755,"children":2756},{"class":131,"line":242},[2757,2761,2765],{"type":45,"tag":129,"props":2758,"children":2759},{"style":136},[2760],{"type":50,"value":1224},{"type":45,"tag":129,"props":2762,"children":2763},{"style":246},[2764],{"type":50,"value":1487},{"type":45,"tag":129,"props":2766,"children":2767},{"style":136},[2768],{"type":50,"value":922},{"type":45,"tag":129,"props":2770,"children":2771},{"class":131,"line":252},[2772],{"type":45,"tag":129,"props":2773,"children":2774},{"emptyLinePlaceholder":928},[2775],{"type":50,"value":931},{"type":45,"tag":129,"props":2777,"children":2778},{"class":131,"line":604},[2779,2783],{"type":45,"tag":129,"props":2780,"children":2781},{"style":136},[2782],{"type":50,"value":139},{"type":45,"tag":129,"props":2784,"children":2785},{"style":142},[2786],{"type":50,"value":2787},"Composition\n",{"type":45,"tag":129,"props":2789,"children":2790},{"class":131,"line":641},[2791,2796,2800,2804,2809],{"type":45,"tag":129,"props":2792,"children":2793},{"style":152},[2794],{"type":50,"value":2795},"  id",{"type":45,"tag":129,"props":2797,"children":2798},{"style":136},[2799],{"type":50,"value":160},{"type":45,"tag":129,"props":2801,"children":2802},{"style":136},[2803],{"type":50,"value":165},{"type":45,"tag":129,"props":2805,"children":2806},{"style":168},[2807],{"type":50,"value":2808},"my-video",{"type":45,"tag":129,"props":2810,"children":2811},{"style":136},[2812],{"type":50,"value":176},{"type":45,"tag":129,"props":2814,"children":2815},{"class":131,"line":649},[2816,2821,2826,2831],{"type":45,"tag":129,"props":2817,"children":2818},{"style":152},[2819],{"type":50,"value":2820},"  component",{"type":45,"tag":129,"props":2822,"children":2823},{"style":136},[2824],{"type":50,"value":2825},"={",{"type":45,"tag":129,"props":2827,"children":2828},{"style":246},[2829],{"type":50,"value":2830},"MyComponent",{"type":45,"tag":129,"props":2832,"children":2833},{"style":136},[2834],{"type":50,"value":2835},"}\n",{"type":45,"tag":129,"props":2837,"children":2838},{"class":131,"line":665},[2839,2844,2848,2853],{"type":45,"tag":129,"props":2840,"children":2841},{"style":152},[2842],{"type":50,"value":2843},"  durationInFrames",{"type":45,"tag":129,"props":2845,"children":2846},{"style":136},[2847],{"type":50,"value":2825},{"type":45,"tag":129,"props":2849,"children":2850},{"style":203},[2851],{"type":50,"value":2852},"150",{"type":45,"tag":129,"props":2854,"children":2855},{"style":136},[2856],{"type":50,"value":2835},{"type":45,"tag":129,"props":2858,"children":2859},{"class":131,"line":1003},[2860,2865,2869,2874],{"type":45,"tag":129,"props":2861,"children":2862},{"style":152},[2863],{"type":50,"value":2864},"  fps",{"type":45,"tag":129,"props":2866,"children":2867},{"style":136},[2868],{"type":50,"value":2825},{"type":45,"tag":129,"props":2870,"children":2871},{"style":203},[2872],{"type":50,"value":2873},"30",{"type":45,"tag":129,"props":2875,"children":2876},{"style":136},[2877],{"type":50,"value":2835},{"type":45,"tag":129,"props":2879,"children":2880},{"class":131,"line":1036},[2881,2886,2890,2895],{"type":45,"tag":129,"props":2882,"children":2883},{"style":152},[2884],{"type":50,"value":2885},"  calculateMetadata",{"type":45,"tag":129,"props":2887,"children":2888},{"style":136},[2889],{"type":50,"value":2825},{"type":45,"tag":129,"props":2891,"children":2892},{"style":246},[2893],{"type":50,"value":2894},"calculateMetadata",{"type":45,"tag":129,"props":2896,"children":2897},{"style":136},[2898],{"type":50,"value":2835},{"type":45,"tag":129,"props":2900,"children":2901},{"class":131,"line":1044},[2902,2907,2911,2916,2920,2924,2929,2933,2937,2942,2946,2950,2955,2959],{"type":45,"tag":129,"props":2903,"children":2904},{"style":152},[2905],{"type":50,"value":2906},"  defaultProps",{"type":45,"tag":129,"props":2908,"children":2909},{"style":136},[2910],{"type":50,"value":190},{"type":45,"tag":129,"props":2912,"children":2913},{"style":193},[2914],{"type":50,"value":2915},"title",{"type":45,"tag":129,"props":2917,"children":2918},{"style":136},[2919],{"type":50,"value":115},{"type":45,"tag":129,"props":2921,"children":2922},{"style":136},[2923],{"type":50,"value":759},{"type":45,"tag":129,"props":2925,"children":2926},{"style":168},[2927],{"type":50,"value":2928},"Hello",{"type":45,"tag":129,"props":2930,"children":2931},{"style":136},[2932],{"type":50,"value":769},{"type":45,"tag":129,"props":2934,"children":2935},{"style":136},[2936],{"type":50,"value":211},{"type":45,"tag":129,"props":2938,"children":2939},{"style":193},[2940],{"type":50,"value":2941}," color",{"type":45,"tag":129,"props":2943,"children":2944},{"style":136},[2945],{"type":50,"value":115},{"type":45,"tag":129,"props":2947,"children":2948},{"style":136},[2949],{"type":50,"value":759},{"type":45,"tag":129,"props":2951,"children":2952},{"style":168},[2953],{"type":50,"value":2954},"#0b84ff",{"type":45,"tag":129,"props":2956,"children":2957},{"style":136},[2958],{"type":50,"value":769},{"type":45,"tag":129,"props":2960,"children":2961},{"style":136},[2962],{"type":50,"value":230},{"type":45,"tag":129,"props":2964,"children":2965},{"class":131,"line":1052},[2966],{"type":45,"tag":129,"props":2967,"children":2968},{"style":136},[2969],{"type":50,"value":2115},{"type":45,"tag":117,"props":2971,"children":2974},{"className":119,"code":2972,"language":121,"meta":2973,"style":123},"const defaultProps = {title: 'Hello', color: '#0b84ff'}; \u002F\u002F ❌ Don't extract defaultProps, must be inline\nconst calculateMetadata = useMemo(() => {\n  \u002F\u002F ❌ Unnecessary because no calculation is being done,\n  return {durationInFrames: 150, fps: 30, width: 1920, height: 1080};\n});\n\n\u003CComposition\n  id=\"my-video\"\n  component={MyComponent}\n  calculateMetadata={calculateMetadata}\n  defaultProps={{\n    title: 'Hello',\n  } as Props} \u002F\u002F ❌ Don't have type assertions, instead type MyComponent correctly\n\u002F>\n","title=\"Negative examples\"",[2975],{"type":45,"tag":90,"props":2976,"children":2977},{"__ignoreMap":123},[2978,3052,3087,3095,3175,3190,3197,3208,3231,3250,3269,3280,3308,3336],{"type":45,"tag":129,"props":2979,"children":2980},{"class":131,"line":132},[2981,2985,2990,2994,2998,3002,3006,3010,3014,3018,3022,3026,3030,3034,3038,3042,3047],{"type":45,"tag":129,"props":2982,"children":2983},{"style":152},[2984],{"type":50,"value":827},{"type":45,"tag":129,"props":2986,"children":2987},{"style":246},[2988],{"type":50,"value":2989}," defaultProps ",{"type":45,"tag":129,"props":2991,"children":2992},{"style":136},[2993],{"type":50,"value":160},{"type":45,"tag":129,"props":2995,"children":2996},{"style":136},[2997],{"type":50,"value":1206},{"type":45,"tag":129,"props":2999,"children":3000},{"style":193},[3001],{"type":50,"value":2915},{"type":45,"tag":129,"props":3003,"children":3004},{"style":136},[3005],{"type":50,"value":115},{"type":45,"tag":129,"props":3007,"children":3008},{"style":136},[3009],{"type":50,"value":759},{"type":45,"tag":129,"props":3011,"children":3012},{"style":168},[3013],{"type":50,"value":2928},{"type":45,"tag":129,"props":3015,"children":3016},{"style":136},[3017],{"type":50,"value":769},{"type":45,"tag":129,"props":3019,"children":3020},{"style":136},[3021],{"type":50,"value":211},{"type":45,"tag":129,"props":3023,"children":3024},{"style":193},[3025],{"type":50,"value":2941},{"type":45,"tag":129,"props":3027,"children":3028},{"style":136},[3029],{"type":50,"value":115},{"type":45,"tag":129,"props":3031,"children":3032},{"style":136},[3033],{"type":50,"value":759},{"type":45,"tag":129,"props":3035,"children":3036},{"style":168},[3037],{"type":50,"value":2954},{"type":45,"tag":129,"props":3039,"children":3040},{"style":136},[3041],{"type":50,"value":769},{"type":45,"tag":129,"props":3043,"children":3044},{"style":136},[3045],{"type":50,"value":3046},"};",{"type":45,"tag":129,"props":3048,"children":3049},{"style":297},[3050],{"type":50,"value":3051}," \u002F\u002F ❌ Don't extract defaultProps, must be inline\n",{"type":45,"tag":129,"props":3053,"children":3054},{"class":131,"line":148},[3055,3059,3063,3067,3071,3075,3079,3083],{"type":45,"tag":129,"props":3056,"children":3057},{"style":152},[3058],{"type":50,"value":827},{"type":45,"tag":129,"props":3060,"children":3061},{"style":246},[3062],{"type":50,"value":2622},{"type":45,"tag":129,"props":3064,"children":3065},{"style":136},[3066],{"type":50,"value":160},{"type":45,"tag":129,"props":3068,"children":3069},{"style":839},[3070],{"type":50,"value":842},{"type":45,"tag":129,"props":3072,"children":3073},{"style":246},[3074],{"type":50,"value":847},{"type":45,"tag":129,"props":3076,"children":3077},{"style":136},[3078],{"type":50,"value":852},{"type":45,"tag":129,"props":3080,"children":3081},{"style":152},[3082],{"type":50,"value":857},{"type":45,"tag":129,"props":3084,"children":3085},{"style":136},[3086],{"type":50,"value":862},{"type":45,"tag":129,"props":3088,"children":3089},{"class":131,"line":179},[3090],{"type":45,"tag":129,"props":3091,"children":3092},{"style":297},[3093],{"type":50,"value":3094},"  \u002F\u002F ❌ Unnecessary because no calculation is being done,\n",{"type":45,"tag":129,"props":3096,"children":3097},{"class":131,"line":233},[3098,3102,3106,3110,3114,3119,3123,3128,3132,3136,3140,3145,3149,3154,3158,3162,3166,3171],{"type":45,"tag":129,"props":3099,"children":3100},{"style":868},[3101],{"type":50,"value":871},{"type":45,"tag":129,"props":3103,"children":3104},{"style":136},[3105],{"type":50,"value":1206},{"type":45,"tag":129,"props":3107,"children":3108},{"style":193},[3109],{"type":50,"value":1122},{"type":45,"tag":129,"props":3111,"children":3112},{"style":136},[3113],{"type":50,"value":115},{"type":45,"tag":129,"props":3115,"children":3116},{"style":203},[3117],{"type":50,"value":3118}," 150",{"type":45,"tag":129,"props":3120,"children":3121},{"style":136},[3122],{"type":50,"value":211},{"type":45,"tag":129,"props":3124,"children":3125},{"style":193},[3126],{"type":50,"value":3127}," fps",{"type":45,"tag":129,"props":3129,"children":3130},{"style":136},[3131],{"type":50,"value":115},{"type":45,"tag":129,"props":3133,"children":3134},{"style":203},[3135],{"type":50,"value":1867},{"type":45,"tag":129,"props":3137,"children":3138},{"style":136},[3139],{"type":50,"value":211},{"type":45,"tag":129,"props":3141,"children":3142},{"style":193},[3143],{"type":50,"value":3144}," width",{"type":45,"tag":129,"props":3146,"children":3147},{"style":136},[3148],{"type":50,"value":115},{"type":45,"tag":129,"props":3150,"children":3151},{"style":203},[3152],{"type":50,"value":3153}," 1920",{"type":45,"tag":129,"props":3155,"children":3156},{"style":136},[3157],{"type":50,"value":211},{"type":45,"tag":129,"props":3159,"children":3160},{"style":193},[3161],{"type":50,"value":2732},{"type":45,"tag":129,"props":3163,"children":3164},{"style":136},[3165],{"type":50,"value":115},{"type":45,"tag":129,"props":3167,"children":3168},{"style":203},[3169],{"type":50,"value":3170}," 1080",{"type":45,"tag":129,"props":3172,"children":3173},{"style":136},[3174],{"type":50,"value":2753},{"type":45,"tag":129,"props":3176,"children":3177},{"class":131,"line":242},[3178,3182,3186],{"type":45,"tag":129,"props":3179,"children":3180},{"style":136},[3181],{"type":50,"value":1224},{"type":45,"tag":129,"props":3183,"children":3184},{"style":246},[3185],{"type":50,"value":1487},{"type":45,"tag":129,"props":3187,"children":3188},{"style":136},[3189],{"type":50,"value":922},{"type":45,"tag":129,"props":3191,"children":3192},{"class":131,"line":252},[3193],{"type":45,"tag":129,"props":3194,"children":3195},{"emptyLinePlaceholder":928},[3196],{"type":50,"value":931},{"type":45,"tag":129,"props":3198,"children":3199},{"class":131,"line":604},[3200,3204],{"type":45,"tag":129,"props":3201,"children":3202},{"style":136},[3203],{"type":50,"value":139},{"type":45,"tag":129,"props":3205,"children":3206},{"style":142},[3207],{"type":50,"value":2787},{"type":45,"tag":129,"props":3209,"children":3210},{"class":131,"line":641},[3211,3215,3219,3223,3227],{"type":45,"tag":129,"props":3212,"children":3213},{"style":152},[3214],{"type":50,"value":2795},{"type":45,"tag":129,"props":3216,"children":3217},{"style":136},[3218],{"type":50,"value":160},{"type":45,"tag":129,"props":3220,"children":3221},{"style":136},[3222],{"type":50,"value":165},{"type":45,"tag":129,"props":3224,"children":3225},{"style":168},[3226],{"type":50,"value":2808},{"type":45,"tag":129,"props":3228,"children":3229},{"style":136},[3230],{"type":50,"value":176},{"type":45,"tag":129,"props":3232,"children":3233},{"class":131,"line":649},[3234,3238,3242,3246],{"type":45,"tag":129,"props":3235,"children":3236},{"style":152},[3237],{"type":50,"value":2820},{"type":45,"tag":129,"props":3239,"children":3240},{"style":136},[3241],{"type":50,"value":2825},{"type":45,"tag":129,"props":3243,"children":3244},{"style":246},[3245],{"type":50,"value":2830},{"type":45,"tag":129,"props":3247,"children":3248},{"style":136},[3249],{"type":50,"value":2835},{"type":45,"tag":129,"props":3251,"children":3252},{"class":131,"line":665},[3253,3257,3261,3265],{"type":45,"tag":129,"props":3254,"children":3255},{"style":152},[3256],{"type":50,"value":2885},{"type":45,"tag":129,"props":3258,"children":3259},{"style":136},[3260],{"type":50,"value":2825},{"type":45,"tag":129,"props":3262,"children":3263},{"style":246},[3264],{"type":50,"value":2894},{"type":45,"tag":129,"props":3266,"children":3267},{"style":136},[3268],{"type":50,"value":2835},{"type":45,"tag":129,"props":3270,"children":3271},{"class":131,"line":1003},[3272,3276],{"type":45,"tag":129,"props":3273,"children":3274},{"style":152},[3275],{"type":50,"value":2906},{"type":45,"tag":129,"props":3277,"children":3278},{"style":136},[3279],{"type":50,"value":721},{"type":45,"tag":129,"props":3281,"children":3282},{"class":131,"line":1036},[3283,3288,3292,3296,3300,3304],{"type":45,"tag":129,"props":3284,"children":3285},{"style":193},[3286],{"type":50,"value":3287},"    title",{"type":45,"tag":129,"props":3289,"children":3290},{"style":136},[3291],{"type":50,"value":115},{"type":45,"tag":129,"props":3293,"children":3294},{"style":136},[3295],{"type":50,"value":759},{"type":45,"tag":129,"props":3297,"children":3298},{"style":168},[3299],{"type":50,"value":2928},{"type":45,"tag":129,"props":3301,"children":3302},{"style":136},[3303],{"type":50,"value":769},{"type":45,"tag":129,"props":3305,"children":3306},{"style":136},[3307],{"type":50,"value":742},{"type":45,"tag":129,"props":3309,"children":3310},{"class":131,"line":1044},[3311,3316,3321,3326,3331],{"type":45,"tag":129,"props":3312,"children":3313},{"style":136},[3314],{"type":50,"value":3315},"  }",{"type":45,"tag":129,"props":3317,"children":3318},{"style":868},[3319],{"type":50,"value":3320}," as",{"type":45,"tag":129,"props":3322,"children":3323},{"style":142},[3324],{"type":50,"value":3325}," Props",{"type":45,"tag":129,"props":3327,"children":3328},{"style":136},[3329],{"type":50,"value":3330},"} ",{"type":45,"tag":129,"props":3332,"children":3333},{"style":297},[3334],{"type":50,"value":3335},"\u002F\u002F ❌ Don't have type assertions, instead type MyComponent correctly\n",{"type":45,"tag":129,"props":3337,"children":3338},{"class":131,"line":1052},[3339],{"type":45,"tag":129,"props":3340,"children":3341},{"style":136},[3342],{"type":50,"value":2115},{"type":45,"tag":46,"props":3344,"children":3345},{},[3346,3348,3354],{"type":50,"value":3347},"Use only ",{"type":45,"tag":90,"props":3349,"children":3351},{"className":3350},[],[3352],{"type":50,"value":3353},"calculateMetadata()",{"type":50,"value":3355}," for the part of the metadata that is dynamic.",{"type":45,"tag":83,"props":3357,"children":3359},{"id":3358},"effects-should-be-inline-too",[3360],{"type":50,"value":3361},"Effects should be inline too",{"type":45,"tag":46,"props":3363,"children":3364},{},[3365,3367,3370,3372,3377,3379,3384],{"type":50,"value":3366},"The effects array should not be computed.",{"type":45,"tag":1099,"props":3368,"children":3369},{},[],{"type":50,"value":3371},"\nThe same rules for setting keyframes as ",{"type":45,"tag":90,"props":3373,"children":3375},{"className":3374},[],[3376],{"type":50,"value":1085},{"type":50,"value":3378}," apply too here: All values should also be hardcoded: Input range, output range, easing, extrapolation, ",{"type":45,"tag":90,"props":3380,"children":3382},{"className":3381},[],[3383],{"type":50,"value":1109},{"type":50,"value":3385}," property.",{"type":45,"tag":117,"props":3387,"children":3390},{"className":119,"code":3388,"language":121,"meta":3389,"style":123},"\u002F\u002F 👍 Parameters are inline and the array shape is stable\n\u003CCanvasImage\n  src={src}\n  width={1280}\n  height={720}\n  effects={[\n    radialProgressiveBlur({\n      center: [0.5, 0.5],\n      width: 1.2,\n      height: 0.8,\n      start: 0.2,\n      disabled: true,\n      rotation: interpolate(frame, [0, 120], [0, 180]),\n    }),\n  ]}\n\u002F>\n\nconst center = [0.5, 0.5] as const;\nconst rotation = frame * 1.5;\n\n\u003CCanvasImage\n  src={src}\n  width={1280}\n  height={720}\n  \u002F\u002F ❌ Conditional effect is not animateable\n  effects={enabled ? [\n    radialProgressiveBlur({\n      \u002F\u002F ❌ Not inline\n      center,\n      rotation,\n    }),\n  ] : []}\n\u002F>\n","title=\"Effects\"",[3391],{"type":45,"tag":90,"props":3392,"children":3393},{"__ignoreMap":123},[3394,3402,3414,3435,3456,3477,3494,3511,3549,3570,3591,3612,3634,3707,3722,3734,3741,3748,3799,3832,3839,3850,3869,3888,3907,3915,3941,3956,3964,3975,3986,4001,4022],{"type":45,"tag":129,"props":3395,"children":3396},{"class":131,"line":132},[3397],{"type":45,"tag":129,"props":3398,"children":3399},{"style":297},[3400],{"type":50,"value":3401},"\u002F\u002F 👍 Parameters are inline and the array shape is stable\n",{"type":45,"tag":129,"props":3403,"children":3404},{"class":131,"line":148},[3405,3409],{"type":45,"tag":129,"props":3406,"children":3407},{"style":136},[3408],{"type":50,"value":139},{"type":45,"tag":129,"props":3410,"children":3411},{"style":142},[3412],{"type":50,"value":3413},"CanvasImage\n",{"type":45,"tag":129,"props":3415,"children":3416},{"class":131,"line":179},[3417,3422,3426,3431],{"type":45,"tag":129,"props":3418,"children":3419},{"style":152},[3420],{"type":50,"value":3421},"  src",{"type":45,"tag":129,"props":3423,"children":3424},{"style":136},[3425],{"type":50,"value":2825},{"type":45,"tag":129,"props":3427,"children":3428},{"style":246},[3429],{"type":50,"value":3430},"src",{"type":45,"tag":129,"props":3432,"children":3433},{"style":136},[3434],{"type":50,"value":2835},{"type":45,"tag":129,"props":3436,"children":3437},{"class":131,"line":233},[3438,3443,3447,3452],{"type":45,"tag":129,"props":3439,"children":3440},{"style":152},[3441],{"type":50,"value":3442},"  width",{"type":45,"tag":129,"props":3444,"children":3445},{"style":136},[3446],{"type":50,"value":2825},{"type":45,"tag":129,"props":3448,"children":3449},{"style":203},[3450],{"type":50,"value":3451},"1280",{"type":45,"tag":129,"props":3453,"children":3454},{"style":136},[3455],{"type":50,"value":2835},{"type":45,"tag":129,"props":3457,"children":3458},{"class":131,"line":242},[3459,3464,3468,3473],{"type":45,"tag":129,"props":3460,"children":3461},{"style":152},[3462],{"type":50,"value":3463},"  height",{"type":45,"tag":129,"props":3465,"children":3466},{"style":136},[3467],{"type":50,"value":2825},{"type":45,"tag":129,"props":3469,"children":3470},{"style":203},[3471],{"type":50,"value":3472},"720",{"type":45,"tag":129,"props":3474,"children":3475},{"style":136},[3476],{"type":50,"value":2835},{"type":45,"tag":129,"props":3478,"children":3479},{"class":131,"line":252},[3480,3485,3489],{"type":45,"tag":129,"props":3481,"children":3482},{"style":152},[3483],{"type":50,"value":3484},"  effects",{"type":45,"tag":129,"props":3486,"children":3487},{"style":136},[3488],{"type":50,"value":2825},{"type":45,"tag":129,"props":3490,"children":3491},{"style":246},[3492],{"type":50,"value":3493},"[\n",{"type":45,"tag":129,"props":3495,"children":3496},{"class":131,"line":604},[3497,3502,3506],{"type":45,"tag":129,"props":3498,"children":3499},{"style":839},[3500],{"type":50,"value":3501},"    radialProgressiveBlur",{"type":45,"tag":129,"props":3503,"children":3504},{"style":246},[3505],{"type":50,"value":847},{"type":45,"tag":129,"props":3507,"children":3508},{"style":136},[3509],{"type":50,"value":3510},"{\n",{"type":45,"tag":129,"props":3512,"children":3513},{"class":131,"line":641},[3514,3519,3523,3527,3532,3536,3541,3545],{"type":45,"tag":129,"props":3515,"children":3516},{"style":193},[3517],{"type":50,"value":3518},"      center",{"type":45,"tag":129,"props":3520,"children":3521},{"style":136},[3522],{"type":50,"value":115},{"type":45,"tag":129,"props":3524,"children":3525},{"style":246},[3526],{"type":50,"value":1380},{"type":45,"tag":129,"props":3528,"children":3529},{"style":203},[3530],{"type":50,"value":3531},"0.5",{"type":45,"tag":129,"props":3533,"children":3534},{"style":136},[3535],{"type":50,"value":211},{"type":45,"tag":129,"props":3537,"children":3538},{"style":203},[3539],{"type":50,"value":3540}," 0.5",{"type":45,"tag":129,"props":3542,"children":3543},{"style":246},[3544],{"type":50,"value":1420},{"type":45,"tag":129,"props":3546,"children":3547},{"style":136},[3548],{"type":50,"value":742},{"type":45,"tag":129,"props":3550,"children":3551},{"class":131,"line":649},[3552,3557,3561,3566],{"type":45,"tag":129,"props":3553,"children":3554},{"style":193},[3555],{"type":50,"value":3556},"      width",{"type":45,"tag":129,"props":3558,"children":3559},{"style":136},[3560],{"type":50,"value":115},{"type":45,"tag":129,"props":3562,"children":3563},{"style":203},[3564],{"type":50,"value":3565}," 1.2",{"type":45,"tag":129,"props":3567,"children":3568},{"style":136},[3569],{"type":50,"value":742},{"type":45,"tag":129,"props":3571,"children":3572},{"class":131,"line":665},[3573,3578,3582,3587],{"type":45,"tag":129,"props":3574,"children":3575},{"style":193},[3576],{"type":50,"value":3577},"      height",{"type":45,"tag":129,"props":3579,"children":3580},{"style":136},[3581],{"type":50,"value":115},{"type":45,"tag":129,"props":3583,"children":3584},{"style":203},[3585],{"type":50,"value":3586}," 0.8",{"type":45,"tag":129,"props":3588,"children":3589},{"style":136},[3590],{"type":50,"value":742},{"type":45,"tag":129,"props":3592,"children":3593},{"class":131,"line":1003},[3594,3599,3603,3608],{"type":45,"tag":129,"props":3595,"children":3596},{"style":193},[3597],{"type":50,"value":3598},"      start",{"type":45,"tag":129,"props":3600,"children":3601},{"style":136},[3602],{"type":50,"value":115},{"type":45,"tag":129,"props":3604,"children":3605},{"style":203},[3606],{"type":50,"value":3607}," 0.2",{"type":45,"tag":129,"props":3609,"children":3610},{"style":136},[3611],{"type":50,"value":742},{"type":45,"tag":129,"props":3613,"children":3614},{"class":131,"line":1036},[3615,3620,3624,3630],{"type":45,"tag":129,"props":3616,"children":3617},{"style":193},[3618],{"type":50,"value":3619},"      disabled",{"type":45,"tag":129,"props":3621,"children":3622},{"style":136},[3623],{"type":50,"value":115},{"type":45,"tag":129,"props":3625,"children":3627},{"style":3626},"--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC",[3628],{"type":50,"value":3629}," true",{"type":45,"tag":129,"props":3631,"children":3632},{"style":136},[3633],{"type":50,"value":742},{"type":45,"tag":129,"props":3635,"children":3636},{"class":131,"line":1044},[3637,3642,3646,3650,3654,3658,3662,3666,3670,3674,3678,3682,3686,3690,3694,3699,3703],{"type":45,"tag":129,"props":3638,"children":3639},{"style":193},[3640],{"type":50,"value":3641},"      rotation",{"type":45,"tag":129,"props":3643,"children":3644},{"style":136},[3645],{"type":50,"value":115},{"type":45,"tag":129,"props":3647,"children":3648},{"style":839},[3649],{"type":50,"value":1366},{"type":45,"tag":129,"props":3651,"children":3652},{"style":246},[3653],{"type":50,"value":1371},{"type":45,"tag":129,"props":3655,"children":3656},{"style":136},[3657],{"type":50,"value":211},{"type":45,"tag":129,"props":3659,"children":3660},{"style":246},[3661],{"type":50,"value":1380},{"type":45,"tag":129,"props":3663,"children":3664},{"style":203},[3665],{"type":50,"value":1385},{"type":45,"tag":129,"props":3667,"children":3668},{"style":136},[3669],{"type":50,"value":211},{"type":45,"tag":129,"props":3671,"children":3672},{"style":203},[3673],{"type":50,"value":2192},{"type":45,"tag":129,"props":3675,"children":3676},{"style":246},[3677],{"type":50,"value":1420},{"type":45,"tag":129,"props":3679,"children":3680},{"style":136},[3681],{"type":50,"value":211},{"type":45,"tag":129,"props":3683,"children":3684},{"style":246},[3685],{"type":50,"value":1380},{"type":45,"tag":129,"props":3687,"children":3688},{"style":203},[3689],{"type":50,"value":1385},{"type":45,"tag":129,"props":3691,"children":3692},{"style":136},[3693],{"type":50,"value":211},{"type":45,"tag":129,"props":3695,"children":3696},{"style":203},[3697],{"type":50,"value":3698}," 180",{"type":45,"tag":129,"props":3700,"children":3701},{"style":246},[3702],{"type":50,"value":2197},{"type":45,"tag":129,"props":3704,"children":3705},{"style":136},[3706],{"type":50,"value":742},{"type":45,"tag":129,"props":3708,"children":3709},{"class":131,"line":1052},[3710,3714,3718],{"type":45,"tag":129,"props":3711,"children":3712},{"style":136},[3713],{"type":50,"value":1582},{"type":45,"tag":129,"props":3715,"children":3716},{"style":246},[3717],{"type":50,"value":1487},{"type":45,"tag":129,"props":3719,"children":3720},{"style":136},[3721],{"type":50,"value":742},{"type":45,"tag":129,"props":3723,"children":3724},{"class":131,"line":1060},[3725,3730],{"type":45,"tag":129,"props":3726,"children":3727},{"style":246},[3728],{"type":50,"value":3729},"  ]",{"type":45,"tag":129,"props":3731,"children":3732},{"style":136},[3733],{"type":50,"value":2835},{"type":45,"tag":129,"props":3735,"children":3736},{"class":131,"line":1692},[3737],{"type":45,"tag":129,"props":3738,"children":3739},{"style":136},[3740],{"type":50,"value":2115},{"type":45,"tag":129,"props":3742,"children":3743},{"class":131,"line":1748},[3744],{"type":45,"tag":129,"props":3745,"children":3746},{"emptyLinePlaceholder":928},[3747],{"type":50,"value":931},{"type":45,"tag":129,"props":3749,"children":3750},{"class":131,"line":1776},[3751,3755,3760,3764,3768,3772,3776,3780,3785,3790,3795],{"type":45,"tag":129,"props":3752,"children":3753},{"style":152},[3754],{"type":50,"value":827},{"type":45,"tag":129,"props":3756,"children":3757},{"style":246},[3758],{"type":50,"value":3759}," center ",{"type":45,"tag":129,"props":3761,"children":3762},{"style":136},[3763],{"type":50,"value":160},{"type":45,"tag":129,"props":3765,"children":3766},{"style":246},[3767],{"type":50,"value":1380},{"type":45,"tag":129,"props":3769,"children":3770},{"style":203},[3771],{"type":50,"value":3531},{"type":45,"tag":129,"props":3773,"children":3774},{"style":136},[3775],{"type":50,"value":211},{"type":45,"tag":129,"props":3777,"children":3778},{"style":203},[3779],{"type":50,"value":3540},{"type":45,"tag":129,"props":3781,"children":3782},{"style":246},[3783],{"type":50,"value":3784},"] ",{"type":45,"tag":129,"props":3786,"children":3787},{"style":868},[3788],{"type":50,"value":3789},"as",{"type":45,"tag":129,"props":3791,"children":3792},{"style":152},[3793],{"type":50,"value":3794}," const",{"type":45,"tag":129,"props":3796,"children":3797},{"style":136},[3798],{"type":50,"value":922},{"type":45,"tag":129,"props":3800,"children":3801},{"class":131,"line":1800},[3802,3806,3811,3815,3819,3823,3828],{"type":45,"tag":129,"props":3803,"children":3804},{"style":152},[3805],{"type":50,"value":827},{"type":45,"tag":129,"props":3807,"children":3808},{"style":246},[3809],{"type":50,"value":3810}," rotation ",{"type":45,"tag":129,"props":3812,"children":3813},{"style":136},[3814],{"type":50,"value":160},{"type":45,"tag":129,"props":3816,"children":3817},{"style":246},[3818],{"type":50,"value":1018},{"type":45,"tag":129,"props":3820,"children":3821},{"style":136},[3822],{"type":50,"value":1023},{"type":45,"tag":129,"props":3824,"children":3825},{"style":203},[3826],{"type":50,"value":3827}," 1.5",{"type":45,"tag":129,"props":3829,"children":3830},{"style":136},[3831],{"type":50,"value":922},{"type":45,"tag":129,"props":3833,"children":3834},{"class":131,"line":1816},[3835],{"type":45,"tag":129,"props":3836,"children":3837},{"emptyLinePlaceholder":928},[3838],{"type":50,"value":931},{"type":45,"tag":129,"props":3840,"children":3841},{"class":131,"line":1838},[3842,3846],{"type":45,"tag":129,"props":3843,"children":3844},{"style":136},[3845],{"type":50,"value":139},{"type":45,"tag":129,"props":3847,"children":3848},{"style":142},[3849],{"type":50,"value":3413},{"type":45,"tag":129,"props":3851,"children":3852},{"class":131,"line":1851},[3853,3857,3861,3865],{"type":45,"tag":129,"props":3854,"children":3855},{"style":152},[3856],{"type":50,"value":3421},{"type":45,"tag":129,"props":3858,"children":3859},{"style":136},[3860],{"type":50,"value":2825},{"type":45,"tag":129,"props":3862,"children":3863},{"style":246},[3864],{"type":50,"value":3430},{"type":45,"tag":129,"props":3866,"children":3867},{"style":136},[3868],{"type":50,"value":2835},{"type":45,"tag":129,"props":3870,"children":3871},{"class":131,"line":1883},[3872,3876,3880,3884],{"type":45,"tag":129,"props":3873,"children":3874},{"style":152},[3875],{"type":50,"value":3442},{"type":45,"tag":129,"props":3877,"children":3878},{"style":136},[3879],{"type":50,"value":2825},{"type":45,"tag":129,"props":3881,"children":3882},{"style":203},[3883],{"type":50,"value":3451},{"type":45,"tag":129,"props":3885,"children":3886},{"style":136},[3887],{"type":50,"value":2835},{"type":45,"tag":129,"props":3889,"children":3890},{"class":131,"line":1930},[3891,3895,3899,3903],{"type":45,"tag":129,"props":3892,"children":3893},{"style":152},[3894],{"type":50,"value":3463},{"type":45,"tag":129,"props":3896,"children":3897},{"style":136},[3898],{"type":50,"value":2825},{"type":45,"tag":129,"props":3900,"children":3901},{"style":203},[3902],{"type":50,"value":3472},{"type":45,"tag":129,"props":3904,"children":3905},{"style":136},[3906],{"type":50,"value":2835},{"type":45,"tag":129,"props":3908,"children":3909},{"class":131,"line":1939},[3910],{"type":45,"tag":129,"props":3911,"children":3912},{"style":297},[3913],{"type":50,"value":3914},"  \u002F\u002F ❌ Conditional effect is not animateable\n",{"type":45,"tag":129,"props":3916,"children":3917},{"class":131,"line":1996},[3918,3922,3926,3931,3936],{"type":45,"tag":129,"props":3919,"children":3920},{"style":152},[3921],{"type":50,"value":3484},{"type":45,"tag":129,"props":3923,"children":3924},{"style":136},[3925],{"type":50,"value":2825},{"type":45,"tag":129,"props":3927,"children":3928},{"style":246},[3929],{"type":50,"value":3930},"enabled ",{"type":45,"tag":129,"props":3932,"children":3933},{"style":136},[3934],{"type":50,"value":3935},"?",{"type":45,"tag":129,"props":3937,"children":3938},{"style":246},[3939],{"type":50,"value":3940}," [\n",{"type":45,"tag":129,"props":3942,"children":3943},{"class":131,"line":2025},[3944,3948,3952],{"type":45,"tag":129,"props":3945,"children":3946},{"style":839},[3947],{"type":50,"value":3501},{"type":45,"tag":129,"props":3949,"children":3950},{"style":246},[3951],{"type":50,"value":847},{"type":45,"tag":129,"props":3953,"children":3954},{"style":136},[3955],{"type":50,"value":3510},{"type":45,"tag":129,"props":3957,"children":3958},{"class":131,"line":2054},[3959],{"type":45,"tag":129,"props":3960,"children":3961},{"style":297},[3962],{"type":50,"value":3963},"      \u002F\u002F ❌ Not inline\n",{"type":45,"tag":129,"props":3965,"children":3966},{"class":131,"line":2079},[3967,3971],{"type":45,"tag":129,"props":3968,"children":3969},{"style":246},[3970],{"type":50,"value":3518},{"type":45,"tag":129,"props":3972,"children":3973},{"style":136},[3974],{"type":50,"value":742},{"type":45,"tag":129,"props":3976,"children":3977},{"class":131,"line":2088},[3978,3982],{"type":45,"tag":129,"props":3979,"children":3980},{"style":246},[3981],{"type":50,"value":3641},{"type":45,"tag":129,"props":3983,"children":3984},{"style":136},[3985],{"type":50,"value":742},{"type":45,"tag":129,"props":3987,"children":3988},{"class":131,"line":2101},[3989,3993,3997],{"type":45,"tag":129,"props":3990,"children":3991},{"style":136},[3992],{"type":50,"value":1582},{"type":45,"tag":129,"props":3994,"children":3995},{"style":246},[3996],{"type":50,"value":1487},{"type":45,"tag":129,"props":3998,"children":3999},{"style":136},[4000],{"type":50,"value":742},{"type":45,"tag":129,"props":4002,"children":4003},{"class":131,"line":2109},[4004,4009,4013,4018],{"type":45,"tag":129,"props":4005,"children":4006},{"style":246},[4007],{"type":50,"value":4008},"  ] ",{"type":45,"tag":129,"props":4010,"children":4011},{"style":136},[4012],{"type":50,"value":115},{"type":45,"tag":129,"props":4014,"children":4015},{"style":246},[4016],{"type":50,"value":4017}," []",{"type":45,"tag":129,"props":4019,"children":4020},{"style":136},[4021],{"type":50,"value":2835},{"type":45,"tag":129,"props":4023,"children":4025},{"class":131,"line":4024},33,[4026],{"type":45,"tag":129,"props":4027,"children":4028},{"style":136},[4029],{"type":50,"value":2115},{"type":45,"tag":46,"props":4031,"children":4032},{},[4033],{"type":50,"value":4034},"Render separate elements if one version should have effects and another should not.",{"type":45,"tag":83,"props":4036,"children":4038},{"id":4037},"making-your-own-component-interactive",[4039],{"type":50,"value":4040},"Making your own component interactive",{"type":45,"tag":46,"props":4042,"children":4043},{},[4044,4046],{"type":50,"value":4045},"To make a custom userland component interactive, use:\n",{"type":45,"tag":4047,"props":4048,"children":4052},"a",{"href":4049,"rel":4050},"https:\u002F\u002Fwww.remotion.dev\u002Fdocs\u002Fstudio\u002Fmake-component-interactive.md",[4051],"nofollow",[4053],{"type":50,"value":4054},"Make a component interactive",{"type":45,"tag":83,"props":4056,"children":4058},{"id":4057},"video-editing",[4059],{"type":50,"value":4060},"Video editing",{"type":45,"tag":46,"props":4062,"children":4063},{},[4064,4066,4071],{"type":50,"value":4065},"If a Remotion component mainly consists of video and audio clips, see ",{"type":45,"tag":4047,"props":4067,"children":4069},{"href":4068},"..\u002Fremotion-markup\u002Fvideo-editing.md",[4070],{"type":50,"value":4060},{"type":50,"value":4072}," for best practices on how to structure Remotion markup so the clips are interactively editable in the timeline.",{"type":45,"tag":688,"props":4074,"children":4075},{},[4076],{"type":50,"value":4077},"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":4079,"total":1003},[4080,4094,4101,4113,4129,4143,4155,4169,4182,4195,4210],{"slug":4081,"name":4081,"fn":4082,"description":4083,"org":4084,"tags":4085,"stars":24,"repoUrl":25,"updatedAt":4093},"remotion-best-practices","build programmatic videos with Remotion","Router for all Remotion skills",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[4086,4087,4088,4089,4092],{"name":19,"slug":20,"type":16},{"name":14,"slug":15,"type":16},{"name":9,"slug":8,"type":16},{"name":4090,"slug":4091,"type":16},"TypeScript","typescript",{"name":555,"slug":31,"type":16},"2026-07-27T06:08:28.310856",{"slug":4,"name":4,"fn":5,"description":6,"org":4095,"tags":4096,"stars":24,"repoUrl":25,"updatedAt":26},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[4097,4098,4099,4100],{"name":19,"slug":20,"type":16},{"name":22,"slug":23,"type":16},{"name":14,"slug":15,"type":16},{"name":9,"slug":8,"type":16},{"slug":4102,"name":4102,"fn":4103,"description":4104,"org":4105,"tags":4106,"stars":24,"repoUrl":25,"updatedAt":4112},"remotion-multimedia","interact with Mediabunny in Remotion","Interacting with Mediabunny",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[4107,4110,4111],{"name":4108,"slug":4109,"type":16},"Media","media",{"name":9,"slug":8,"type":16},{"name":555,"slug":31,"type":16},"2026-07-27T06:28:53.1297",{"slug":4114,"name":4114,"fn":4115,"description":4116,"org":4117,"tags":4118,"stars":24,"repoUrl":25,"updatedAt":4128},"remotion-saas","build Remotion-powered SaaS applications","Build an app with Remotion",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[4119,4120,4121,4124,4125],{"name":14,"slug":15,"type":16},{"name":9,"slug":8,"type":16},{"name":4122,"slug":4123,"type":16},"SaaS","saas",{"name":555,"slug":31,"type":16},{"name":4126,"slug":4127,"type":16},"Web Development","web-development","2026-07-27T06:08:27.300451",{"slug":4130,"name":4130,"fn":4131,"description":4132,"org":4133,"tags":4134,"stars":4140,"repoUrl":4141,"updatedAt":4142},"remotion-captions","manage video captions in Remotion","Transcribing, displaying and animating captions",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[4135,4136,4139],{"name":9,"slug":8,"type":16},{"name":4137,"slug":4138,"type":16},"Transcription","transcription",{"name":555,"slug":31,"type":16},4160,"https:\u002F\u002Fgithub.com\u002Fremotion-dev\u002Fskills","2026-07-30T05:25:30.695925",{"slug":4144,"name":4144,"fn":4145,"description":4146,"org":4147,"tags":4148,"stars":4140,"repoUrl":4141,"updatedAt":4154},"remotion-create","create new Remotion video projects","Create a new Remotion video",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[4149,4152,4153],{"name":4150,"slug":4151,"type":16},"Creative","creative",{"name":9,"slug":8,"type":16},{"name":555,"slug":31,"type":16},"2026-07-30T05:25:29.406181",{"slug":4156,"name":4156,"fn":4157,"description":4158,"org":4159,"tags":4160,"stars":4140,"repoUrl":4141,"updatedAt":4168},"remotion-docs","search Remotion documentation","Search Remotion documentation",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[4161,4164,4167],{"name":4162,"slug":4163,"type":16},"Documentation","documentation",{"name":4165,"slug":4166,"type":16},"Reference","reference",{"name":9,"slug":8,"type":16},"2026-07-30T05:25:32.714247",{"slug":4170,"name":4170,"fn":4171,"description":4172,"org":4173,"tags":4174,"stars":4140,"repoUrl":4141,"updatedAt":4181},"remotion-maps","animate maps using Remotion","Remotion Map animation knowledge",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[4175,4176,4179,4180],{"name":19,"slug":20,"type":16},{"name":4177,"slug":4178,"type":16},"Maps","maps",{"name":9,"slug":8,"type":16},{"name":555,"slug":31,"type":16},"2026-07-30T05:25:28.60293",{"slug":4183,"name":4183,"fn":4184,"description":4185,"org":4186,"tags":4187,"stars":4140,"repoUrl":4141,"updatedAt":4194},"remotion-markup","write Remotion React markup","Content, animation and effects best practices",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[4188,4191,4192,4193],{"name":4189,"slug":4190,"type":16},"Frontend","frontend",{"name":14,"slug":15,"type":16},{"name":9,"slug":8,"type":16},{"name":555,"slug":31,"type":16},"2026-07-30T05:25:33.787523",{"slug":4196,"name":4196,"fn":4197,"description":4198,"org":4199,"tags":4200,"stars":4140,"repoUrl":4141,"updatedAt":4209},"remotion-render","render videos with Remotion","Export a Remotion video",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[4201,4204,4207,4208],{"name":4202,"slug":4203,"type":16},"Deployment","deployment",{"name":4205,"slug":4206,"type":16},"Performance","performance",{"name":9,"slug":8,"type":16},{"name":555,"slug":31,"type":16},"2026-07-30T05:25:31.705328",{"slug":4211,"name":4211,"fn":4212,"description":4213,"org":4214,"tags":4215,"stars":4140,"repoUrl":4141,"updatedAt":4223},"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},[4216,4219,4222],{"name":4217,"slug":4218,"type":16},"Engineering","engineering",{"name":4220,"slug":4221,"type":16},"Migration","migration",{"name":9,"slug":8,"type":16},"2026-07-21T06:07:40.273712",{"items":4225,"total":233},[4226,4234,4241,4247],{"slug":4081,"name":4081,"fn":4082,"description":4083,"org":4227,"tags":4228,"stars":24,"repoUrl":25,"updatedAt":4093},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[4229,4230,4231,4232,4233],{"name":19,"slug":20,"type":16},{"name":14,"slug":15,"type":16},{"name":9,"slug":8,"type":16},{"name":4090,"slug":4091,"type":16},{"name":555,"slug":31,"type":16},{"slug":4,"name":4,"fn":5,"description":6,"org":4235,"tags":4236,"stars":24,"repoUrl":25,"updatedAt":26},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[4237,4238,4239,4240],{"name":19,"slug":20,"type":16},{"name":22,"slug":23,"type":16},{"name":14,"slug":15,"type":16},{"name":9,"slug":8,"type":16},{"slug":4102,"name":4102,"fn":4103,"description":4104,"org":4242,"tags":4243,"stars":24,"repoUrl":25,"updatedAt":4112},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[4244,4245,4246],{"name":4108,"slug":4109,"type":16},{"name":9,"slug":8,"type":16},{"name":555,"slug":31,"type":16},{"slug":4114,"name":4114,"fn":4115,"description":4116,"org":4248,"tags":4249,"stars":24,"repoUrl":25,"updatedAt":4128},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[4250,4251,4252,4253,4254],{"name":14,"slug":15,"type":16},{"name":9,"slug":8,"type":16},{"name":4122,"slug":4123,"type":16},{"name":555,"slug":31,"type":16},{"name":4126,"slug":4127,"type":16}]