ea6c69d2.68bf0fe98029.js

js remotion.dev collected 2026-10-02 05:33:13 UTC 822,852 bytes, 915 lines download raw bytes

1(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["1034"],{32975(e,t,n){"use strict";n.r(t),n.d(t,{metadata:()=>a,default:()=>m,frontMatter:()=>l,contentTitle:()=>p,toc:()=>d,assets:()=>c});var a=JSON.parse('{"id":"storytelling/polaroid-pictures/index","title":"Polaroid Pictures","description":"A staggered instant-photo montage with handwritten captions, paper shadows, and developing-photo accents.","source":"@site/elements/storytelling/polaroid-pictures/index.mdx","sourceDirName":"storytelling/polaroid-pictures","slug":"/storytelling/polaroid-pictures/","permalink":"/elements/storytelling/polaroid-pictures/","draft":false,"unlisted":false,"editUrl":"https://github.com/remotion-dev/remotion/edit/main/packages/docs/elements/storytelling/polaroid-pictures/index.mdx","tags":[],"version":"current","lastUpdatedAt":1790778889000,"frontMatter":{"title":"Polaroid Pictures","description":"A staggered instant-photo montage with handwritten captions, paper shadows, and developing-photo accents.","image":"https://remotion.media/elements/storytelling-polaroid-pictures-preview.png"},"sidebar":"elementsSidebar","previous":{"title":"On-Screen Messages","permalink":"/elements/storytelling/on-screen-messages/"},"next":{"title":"Speed Lines","permalink":"/elements/storytelling/speed-lines/"}}'),s=n(57825),o=n(29721),r=n(81734),i=n(21204);let l={title:"Polaroid Pictures",description:"A staggered instant-photo montage with handwritten captions, paper shadows, and developing-photo accents.",image:"https://remotion.media/elements/storytelling-polaroid-pictures-preview.png"},p="Polaroid Pictures",c={},d=[];function u(e){let t={div:"div",h1:"h1",header:"header",...(0,o.R)(),...e.components},{RawMarkdownCarrier:n}=t;return n||function(e,t){throw Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("RawMarkdownCarrier",!0),(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n,{raw:"---\ntitle: Polaroid Pictures\ndescription: A staggered instant-photo montage with handwritten captions, paper shadows, and developing-photo accents.\nimage: https://remotion.media/elements/storytelling-polaroid-pictures-preview.png\n---\n\nimport {getElementDefinition} from '@site/src/components/Elements/element-utils';\nimport {ElementPage} from '@site/src/components/Elements/ElementPage';\n\n# Polaroid Pictures\n\n<ElementPage definition={getElementDefinition('storytelling/polaroid-pictures')} sourceFile=\"./polaroid-pictures.tsx\" />\n\n```tsx twoslash title=\"polaroid-pictures.tsx\"\nimport {fontFamily, loadFont} from '@remotion/google-fonts/Caveat';\nimport {\n	Easing,\n	Img,\n	Interactive,\n	interpolate,\n	useCurrentFrame,\n	useVideoConfig,\n} from 'remotion';\n\nloadFont('normal', {\n	weights: ['600'],\n	subsets: ['latin'],\n});\n\nexport const PolaroidPictures = () => {\n	const frame = useCurrentFrame();\n	const {durationInFrames} = useVideoConfig();\n\n	return (\n		<div\n			style={{\n				color: '#2d2620',\n				height: 640,\n				position: 'relative',\n				scale: interpolate(frame, [58, durationInFrames - 32], [1, 1.035], {\n					easing: Easing.inOut(Easing.quad),\n					extrapolateLeft: 'clamp',\n					extrapolateRight: 'clamp',\n					output: 'perceptual-scale',\n				}),\n				translate: interpolate(\n					frame,\n					[58, durationInFrames - 32],\n					['0px 0px', '0px -18px'],\n					{\n						easing: Easing.inOut(Easing.quad),\n						extrapolateLeft: 'clamp',\n						extrapolateRight: 'clamp',\n					},\n				),\n				width: 1480,\n				willChange: 'transform',\n			}}\n		>\n			<Interactive.Div\n				name=\"Photo 1 card\"\n				style={{\n					backgroundColor: '#fffdfa',\n					boxShadow:\n						'0 24px 52px rgba(8, 5, 3, 0.16), 0 4px 12px rgba(8, 5, 3, 0.08), inset 0 0 0 1px rgba(80, 62, 46, 0.05)',\n					boxSizing: 'border-box',\n					height: 520,\n					left: 100,\n					opacity: interpolate(\n						frame,\n						[8, 16, durationInFrames - 30, durationInFrames - 1],\n						[0, 1, 1, 0],\n						{\n							easing: Easing.inOut(Easing.cubic),\n							extrapolateLeft: 'clamp',\n							extrapolateRight: 'clamp',\n						},\n					),\n					padding: '22px 22px 16px',\n					position: 'absolute',\n					rotate: interpolate(\n						frame,\n						[8, 34, durationInFrames - 30, durationInFrames - 1],\n						['-20deg', '-8deg', '-8deg', '-18deg'],\n						{\n							easing: [\n								Easing.bezier(0.16, 1, 0.3, 1),\n								Easing.spring({\n									damping: 200,\n									mass: 1,\n									stiffness: 100,\n									allowTail: true,\n									durationRestThreshold: 0.02,\n									overshootClamping: false,\n								}),\n								Easing.bezier(0.16, 1, 0.3, 1),\n							],\n							extrapolateLeft: 'clamp',\n							extrapolateRight: 'clamp',\n						},\n					),\n					scale: interpolate(\n						frame,\n						[durationInFrames - 30, durationInFrames - 1],\n						[1, 1.08],\n						{\n							easing: Easing.bezier(0.16, 1, 0.3, 1),\n							extrapolateLeft: 'clamp',\n							extrapolateRight: 'clamp',\n							output: 'perceptual-scale',\n						},\n					),\n					top: 85,\n					translate: interpolate(\n						frame,\n						[8, 34, durationInFrames - 30, durationInFrames - 1],\n						['-620px 260px', '0px 0px', '0px 0px', '-760px -120px'],\n						{\n							easing: [\n								Easing.bezier(0.16, 1, 0.3, 1),\n								Easing.spring({\n									damping: 200,\n									mass: 1,\n									stiffness: 100,\n									allowTail: true,\n									durationRestThreshold: 0.02,\n									overshootClamping: false,\n								}),\n								Easing.bezier(0.16, 1, 0.3, 1),\n							],\n							extrapolateLeft: 'clamp',\n							extrapolateRight: 'clamp',\n						},\n					),\n					width: 420,\n					willChange: 'opacity, transform',\n					zIndex: 1,\n				}}\n			>\n				<Interactive.Div\n					name=\"Photo 1 tape\"\n					style={{\n						backgroundColor: '#d9c58f',\n						boxShadow: '0 2px 8px rgba(67, 47, 29, 0.14)',\n						height: 48,\n						left: 135,\n						opacity: 0.68,\n						position: 'absolute',\n						rotate: '-5deg',\n						top: -21,\n						width: 150,\n						zIndex: 2,\n						translate: '-3.3px -12.3px',\n					}}\n				/>\n				<div\n					style={{\n						backgroundColor: '#d8cbb8',\n						height: 380,\n						overflow: 'hidden',\n						position: 'relative',\n						width: '100%',\n					}}\n				>\n					<Img\n						name=\"Photo 1\"\n						alt=\"\"\n						src=\"https://remotion.media/transition-bg-blue.jpg\"\n						style={{\n							height: '100%',\n							objectFit: 'cover',\n							width: '100%',\n						}}\n					/>\n					<div\n						style={{\n							alignItems: 'center',\n							color: 'white',\n							display: 'flex',\n							fontFamily: 'sans-serif',\n							fontSize: 160,\n							fontWeight: 900,\n							inset: 0,\n							justifyContent: 'center',\n							position: 'absolute',\n							textShadow: '0 4px 30px rgba(0, 0, 0, 0.55)',\n						}}\n					>\n						A\n					</div>\n				</div>\n				<Interactive.Div\n					name=\"Photo 1 caption\"\n					style={{\n						alignItems: 'center',\n						color: '#2d2620',\n						display: 'flex',\n						fontFamily,\n						fontSize: 44,\n						fontWeight: 600,\n						height: 84,\n						justifyContent: 'center',\n						lineHeight: 1,\n						marginTop: 8,\n						textAlign: 'center',\n					}}\n				>\n					scene A\n				</Interactive.Div>\n			</Interactive.Div>\n\n			<Interactive.Div\n				name=\"Photo 2 card\"\n				style={{\n					backgroundColor: '#fffdfa',\n					boxShadow:\n						'0 28px 58px rgba(8, 5, 3, 0.18), 0 5px 14px rgba(8, 5, 3, 0.08), inset 0 0 0 1px rgba(80, 62, 46, 0.05)',\n					boxSizing: 'border-box',\n					height: 520,\n					left: 530,\n					opacity: interpolate(\n						frame,\n						[20, 28, durationInFrames - 28, durationInFrames - 1],\n						[0, 1, 1, 0],\n						{\n							easing: Easing.inOut(Easing.cubic),\n							extrapolateLeft: 'clamp',\n							extrapolateRight: 'clamp',\n						},\n					),\n					padding: '22px 22px 16px',\n					position: 'absolute',\n					rotate: interpolate(\n						frame,\n						[20, 46, durationInFrames - 28, durationInFrames - 1],\n						['16deg', '6deg', '6deg', '15deg'],\n						{\n							easing: [\n								Easing.bezier(0.16, 1, 0.3, 1),\n								Easing.spring({\n									damping: 200,\n									mass: 1,\n									stiffness: 100,\n									allowTail: true,\n									durationRestThreshold: 0.02,\n									overshootClamping: false,\n								}),\n								Easing.bezier(0.16, 1, 0.3, 1),\n							],\n							extrapolateLeft: 'clamp',\n							extrapolateRight: 'clamp',\n						},\n					),\n					scale: interpolate(\n						frame,\n						[durationInFrames - 28, durationInFrames - 1],\n						[1, 1.1],\n						{\n							easing: Easing.bezier(0.16, 1, 0.3, 1),\n							extrapolateLeft: 'clamp',\n							extrapolateRight: 'clamp',\n							output: 'perceptual-scale',\n						},\n					),\n					top: 35,\n					translate: interpolate(\n						frame,\n						[20, 46, durationInFrames - 28, durationInFrames - 1],\n						['340px -620px', '0px 0px', '0px 0px', '280px -720px'],\n						{\n							easing: [\n								Easing.bezier(0.16, 1, 0.3, 1),\n								Easing.spring({\n									damping: 200,\n									mass: 1,\n									stiffness: 100,\n									allowTail: true,\n									durationRestThreshold: 0.02,\n									overshootClamping: false,\n								}),\n								Easing.bezier(0.16, 1, 0.3, 1),\n							],\n							extrapolateLeft: 'clamp',\n							extrapolateRight: 'clamp',\n						},\n					),\n					width: 420,\n					willChange: 'opacity, transform',\n					zIndex: 2,\n				}}\n			>\n				<Interactive.Div\n					name=\"Photo 2 tape\"\n					style={{\n						backgroundColor: '#d9c58f',\n						boxShadow: '0 2px 8px rgba(67, 47, 29, 0.14)',\n						height: 48,\n						left: 135,\n						opacity: 0.68,\n						position: 'absolute',\n						rotate: '4deg',\n						top: -21,\n						width: 150,\n						zIndex: 2,\n					}}\n				/>\n				<div\n					style={{\n						backgroundColor: '#d8cbb8',\n						height: 380,\n						overflow: 'hidden',\n						position: 'relative',\n						width: '100%',\n					}}\n				>\n					<Img\n						name=\"Photo 2\"\n						alt=\"\"\n						src=\"https://remotion.media/transition-bg-pink.jpg\"\n						style={{\n							height: '100%',\n							objectFit: 'cover',\n							width: '100%',\n						}}\n					/>\n					<div\n						style={{\n							alignItems: 'center',\n							color: 'white',\n							display: 'flex',\n							fontFamily: 'sans-serif',\n							fontSize: 160,\n							fontWeight: 900,\n							inset: 0,\n							justifyContent: 'center',\n							position: 'absolute',\n							textShadow: '0 4px 30px rgba(0, 0, 0, 0.55)',\n						}}\n					>\n						B\n					</div>\n				</div>\n				<Interactive.Div\n					name=\"Photo 2 caption\"\n					style={{\n						alignItems: 'center',\n						color: '#2d2620',\n						display: 'flex',\n						fontFamily,\n						fontSize: 46,\n						fontWeight: 600,\n						height: 84,\n						justifyContent: 'center',\n						lineHeight: 1,\n						marginTop: 8,\n						textAlign: 'center',\n					}}\n				>\n					scene B\n				</Interactive.Div>\n			</Interactive.Div>\n\n			<Interactive.Div\n				name=\"Photo 3 card\"\n				style={{\n					backgroundColor: '#fffdfa',\n					boxShadow:\n						'0 32px 64px rgba(8, 5, 3, 0.2), 0 6px 16px rgba(8, 5, 3, 0.09), inset 0 0 0 1px rgba(80, 62, 46, 0.05)',\n					boxSizing: 'border-box',\n					height: 520,\n					left: 960,\n					opacity: interpolate(\n						frame,\n						[32, 40, durationInFrames - 26, durationInFrames - 1],\n						[0, 1, 1, 0],\n						{\n							easing: Easing.inOut(Easing.cubic),\n							extrapolateLeft: 'clamp',\n							extrapolateRight: 'clamp',\n						},\n					),\n					padding: '22px 22px 16px',\n					position: 'absolute',\n					rotate: interpolate(\n						frame,\n						[32, 58, durationInFrames - 26, durationInFrames - 1],\n						['15deg', '-3deg', '-3deg', '10deg'],\n						{\n							easing: [\n								Easing.bezier(0.16, 1, 0.3, 1),\n								Easing.spring({\n									damping: 200,\n									mass: 1,\n									stiffness: 100,\n									allowTail: true,\n									durationRestThreshold: 0.02,\n									overshootClamping: false,\n								}),\n								Easing.bezier(0.16, 1, 0.3, 1),\n							],\n							extrapolateLeft: 'clamp',\n							extrapolateRight: 'clamp',\n						},\n					),\n					scale: interpolate(\n						frame,\n						[durationInFrames - 26, durationInFrames - 1],\n						[1, 1.12],\n						{\n							easing: Easing.bezier(0.16, 1, 0.3, 1),\n							extrapolateLeft: 'clamp',\n							extrapolateRight: 'clamp',\n							output: 'perceptual-scale',\n						},\n					),\n					top: 85,\n					translate: interpolate(\n						frame,\n						[32, 58, durationInFrames - 26, durationInFrames - 1],\n						['680px 380px', '0px 0px', '0px 0px', '820px 240px'],\n						{\n							easing: [\n								Easing.bezier(0.16, 1, 0.3, 1),\n								Easing.spring({\n									damping: 200,\n									mass: 1,\n									stiffness: 100,\n									allowTail: true,\n									durationRestThreshold: 0.02,\n									overshootClamping: false,\n								}),\n								Easing.bezier(0.16, 1, 0.3, 1),\n							],\n							extrapolateLeft: 'clamp',\n							extrapolateRight: 'clamp',\n						},\n					),\n					width: 420,\n					willChange: 'opacity, transform',\n					zIndex: 3,\n				}}\n			>\n				<Interactive.Div\n					name=\"Photo 3 tape\"\n					style={{\n						backgroundColor: '#d9c58f',\n						boxShadow: '0 2px 8px rgba(67, 47, 29, 0.14)',\n						height: 48,\n						left: 135,\n						opacity: 0.68,\n						position: 'absolute',\n						rotate: '-2deg',\n						top: -21,\n						width: 150,\n						zIndex: 2,\n					}}\n				/>\n				<div\n					style={{\n						backgroundColor: '#d8cbb8',\n						height: 380,\n						overflow: 'hidden',\n						position: 'relative',\n						width: '100%',\n					}}\n				>\n					<Img\n						name=\"Photo 3\"\n						alt=\"\"\n						src=\"https://remotion.media/transition-bg-blue.jpg\"\n						style={{\n							filter: 'hue-rotate(-65deg)',\n							height: '100%',\n							objectFit: 'cover',\n							width: '100%',\n						}}\n					/>\n					<div\n						style={{\n							alignItems: 'center',\n							color: 'white',\n							display: 'flex',\n							fontFamily: 'sans-serif',\n							fontSize: 160,\n							fontWeight: 900,\n							inset: 0,\n							justifyContent: 'center',\n							position: 'absolute',\n							textShadow: '0 4px 30px rgba(0, 0, 0, 0.55)',\n						}}\n					>\n						C\n					</div>\n				</div>\n				<Interactive.Div\n					name=\"Photo 3 caption\"\n					style={{\n						alignItems: 'center',\n						color: '#2d2620',\n						display: 'flex',\n						fontFamily,\n						fontSize: 44,\n						fontWeight: 600,\n						height: 84,\n						justifyContent: 'center',\n						lineHeight: 1,\n						marginTop: 8,\n						textAlign: 'center',\n					}}\n				>\n					scene C\n				</Interactive.Div>\n			</Interactive.Div>\n		</div>\n	);\n};\n```\n"}),"\n","\n",(0,s.jsx)(t.header,{children:(0,s.jsx)(t.h1,{id:"polaroid-pictures",children:"Polaroid Pictures"})}),"\n",(0,s.jsx)(i.G,{definition:(0,r.a2)("storytelling/polaroid-pictures"),sourceCode:"import {fontFamily, loadFont} from '@remotion/google-fonts/Caveat';\nimport {\n	Easing,\n	Img,\n	Interactive,\n	interpolate,\n	useCurrentFrame,\n	useVideoConfig,\n} from 'remotion';\n\nloadFont('normal', {\n	weights: ['600'],\n	subsets: ['latin'],\n});\n\nexport const PolaroidPictures = () => {\n	const frame = useCurrentFrame();\n	const {durationInFrames} = useVideoConfig();\n\n	return (\n		<div\n			style={{\n				color: '#2d2620',\n				height: 640,\n				position: 'relative',\n				scale: interpolate(frame, [58, durationInFrames - 32], [1, 1.035], {\n					easing: Easing.inOut(Easing.quad),\n					extrapolateLeft: 'clamp',\n					extrapolateRight: 'clamp',\n					output: 'perceptual-scale',\n				}),\n				translate: interpolate(\n					frame,\n					[58, durationInFrames - 32],\n					['0px 0px', '0px -18px'],\n					{\n						easing: Easing.inOut(Easing.quad),\n						extrapolateLeft: 'clamp',\n						extrapolateRight: 'clamp',\n					},\n				),\n				width: 1480,\n				willChange: 'transform',\n			}}\n		>\n			<Interactive.Div\n				name=\"Photo 1 card\"\n				style={{\n					backgroundColor: '#fffdfa',\n					boxShadow:\n						'0 24px 52px rgba(8, 5, 3, 0.16), 0 4px 12px rgba(8, 5, 3, 0.08), inset 0 0 0 1px rgba(80, 62, 46, 0.05)',\n					boxSizing: 'border-box',\n					height: 520,\n					left: 100,\n					opacity: interpolate(\n						frame,\n						[8, 16, durationInFrames - 30, durationInFrames - 1],\n						[0, 1, 1, 0],\n						{\n							easing: Easing.inOut(Easin

1g.cubic),\n							extrapolateLeft: 'clamp',\n							extrapolateRight: 'clamp',\n						},\n					),\n					padding: '22px 22px 16px',\n					position: 'absolute',\n					rotate: interpolate(\n						frame,\n						[8, 34, durationInFrames - 30, durationInFrames - 1],\n						['-20deg', '-8deg', '-8deg', '-18deg'],\n						{\n							easing: [\n								Easing.bezier(0.16, 1, 0.3, 1),\n								Easing.spring({\n									damping: 200,\n									mass: 1,\n									stiffness: 100,\n									allowTail: true,\n									durationRestThreshold: 0.02,\n									overshootClamping: false,\n								}),\n								Easing.bezier(0.16, 1, 0.3, 1),\n							],\n							extrapolateLeft: 'clamp',\n							extrapolateRight: 'clamp',\n						},\n					),\n					scale: interpolate(\n						frame,\n						[durationInFrames - 30, durationInFrames - 1],\n						[1, 1.08],\n						{\n							easing: Easing.bezier(0.16, 1, 0.3, 1),\n							extrapolateLeft: 'clamp',\n							extrapolateRight: 'clamp',\n							output: 'perceptual-scale',\n						},\n					),\n					top: 85,\n					translate: interpolate(\n						frame,\n						[8, 34, durationInFrames - 30, durationInFrames - 1],\n						['-620px 260px', '0px 0px', '0px 0px', '-760px -120px'],\n						{\n							easing: [\n								Easing.bezier(0.16, 1, 0.3, 1),\n								Easing.spring({\n									damping: 200,\n									mass: 1,\n									stiffness: 100,\n									allowTail: true,\n									durationRestThreshold: 0.02,\n									overshootClamping: false,\n								}),\n								Easing.bezier(0.16, 1, 0.3, 1),\n							],\n							extrapolateLeft: 'clamp',\n							extrapolateRight: 'clamp',\n						},\n					),\n					width: 420,\n					willChange: 'opacity, transform',\n					zIndex: 1,\n				}}\n			>\n				<Interactive.Div\n					name=\"Photo 1 tape\"\n					style={{\n						backgroundColor: '#d9c58f',\n						boxShadow: '0 2px 8px rgba(67, 47, 29, 0.14)',\n						height: 48,\n						left: 135,\n						opacity: 0.68,\n						position: 'absolute',\n						rotate: '-5deg',\n						top: -21,\n						width: 150,\n						zIndex: 2,\n						translate: '-3.3px -12.3px',\n					}}\n				/>\n				<div\n					style={{\n						backgroundColor: '#d8cbb8',\n						height: 380,\n						overflow: 'hidden',\n						position: 'relative',\n						width: '100%',\n					}}\n				>\n					<Img\n						name=\"Photo 1\"\n						alt=\"\"\n						src=\"https://remotion.media/transition-bg-blue.jpg\"\n						style={{\n							height: '100%',\n							objectFit: 'cover',\n							width: '100%',\n						}}\n					/>\n					<div\n						style={{\n							alignItems: 'center',\n							color: 'white',\n							display: 'flex',\n							fontFamily: 'sans-serif',\n							fontSize: 160,\n							fontWeight: 900,\n							inset: 0,\n							justifyContent: 'center',\n							position: 'absolute',\n							textShadow: '0 4px 30px rgba(0, 0, 0, 0.55)',\n						}}\n					>\n						A\n					</div>\n				</div>\n				<Interactive.Div\n					name=\"Photo 1 caption\"\n					style={{\n						alignItems: 'center',\n						color: '#2d2620',\n						display: 'flex',\n						fontFamily,\n						fontSize: 44,\n						fontWeight: 600,\n						height: 84,\n						justifyContent: 'center',\n						lineHeight: 1,\n						marginTop: 8,\n						textAlign: 'center',\n					}}\n				>\n					scene A\n				</Interactive.Div>\n			</Interactive.Div>\n\n			<Interactive.Div\n				name=\"Photo 2 card\"\n				style={{\n					backgroundColor: '#fffdfa',\n					boxShadow:\n						'0 28px 58px rgba(8, 5, 3, 0.18), 0 5px 14px rgba(8, 5, 3, 0.08), inset 0 0 0 1px rgba(80, 62, 46, 0.05)',\n					boxSizing: 'border-box',\n					height: 520,\n					left: 530,\n					opacity: interpolate(\n						frame,\n						[20, 28, durationInFrames - 28, durationInFrames - 1],\n						[0, 1, 1, 0],\n						{\n							easing: Easing.inOut(Easing.cubic),\n							extrapolateLeft: 'clamp',\n							extrapolateRight: 'clamp',\n						},\n					),\n					padding: '22px 22px 16px',\n					position: 'absolute',\n					rotate: interpolate(\n						frame,\n						[20, 46, durationInFrames - 28, durationInFrames - 1],\n						['16deg', '6deg', '6deg', '15deg'],\n						{\n							easing: [\n								Easing.bezier(0.16, 1, 0.3, 1),\n								Easing.spring({\n									damping: 200,\n									mass: 1,\n									stiffness: 100,\n									allowTail: true,\n									durationRestThreshold: 0.02,\n									overshootClamping: false,\n								}),\n								Easing.bezier(0.16, 1, 0.3, 1),\n							],\n							extrapolateLeft: 'clamp',\n							extrapolateRight: 'clamp',\n						},\n					),\n					scale: interpolate(\n						frame,\n						[durationInFrames - 28, durationInFrames - 1],\n						[1, 1.1],\n						{\n							easing: Easing.bezier(0.16, 1, 0.3, 1),\n							extrapolateLeft: 'clamp',\n							extrapolateRight: 'clamp',\n							output: 'perceptual-scale',\n						},\n					),\n					top: 35,\n					translate: interpolate(\n						frame,\n						[20, 46, durationInFrames - 28, durationInFrames - 1],\n						['340px -620px', '0px 0px', '0px 0px', '280px -720px'],\n						{\n							easing: [\n								Easing.bezier(0.16, 1, 0.3, 1),\n								Easing.spring({\n									damping: 200,\n									mass: 1,\n									stiffness: 100,\n									allowTail: true,\n									durationRestThreshold: 0.02,\n									overshootClamping: false,\n								}),\n								Easing.bezier(0.16, 1, 0.3, 1),\n							],\n							extrapolateLeft: 'clamp',\n							extrapolateRight: 'clamp',\n						},\n					),\n					width: 420,\n					willChange: 'opacity, transform',\n					zIndex: 2,\n				}}\n			>\n				<Interactive.Div\n					name=\"Photo 2 tape\"\n					style={{\n						backgroundColor: '#d9c58f',\n						boxShadow: '0 2px 8px rgba(67, 47, 29, 0.14)',\n						height: 48,\n						left: 135,\n						opacity: 0.68,\n						position: 'absolute',\n						rotate: '4deg',\n						top: -21,\n						width: 150,\n						zIndex: 2,\n					}}\n				/>\n				<div\n					style={{\n						backgroundColor: '#d8cbb8',\n						height: 380,\n						overflow: 'hidden',\n						position: 'relative',\n						width: '100%',\n					}}\n				>\n					<Img\n						name=\"Photo 2\"\n						alt=\"\"\n						src=\"https://remotion.media/transition-bg-pink.jpg\"\n						style={{\n							height: '100%',\n							objectFit: 'cover',\n							width: '100%',\n						}}\n					/>\n					<div\n						style={{\n							alignItems: 'center',\n							color: 'white',\n							display: 'flex',\n							fontFamily: 'sans-serif',\n							fontSize: 160,\n							fontWeight: 900,\n							inset: 0,\n							justifyContent: 'center',\n							position: 'absolute',\n							textShadow: '0 4px 30px rgba(0, 0, 0, 0.55)',\n						}}\n					>\n						B\n					</div>\n				</div>\n				<Interactive.Div\n					name=\"Photo 2 caption\"\n					style={{\n						alignItems: 'center',\n						color: '#2d2620',\n						display: 'flex',\n						fontFamily,\n						fontSize: 46,\n						fontWeight: 600,\n						height: 84,\n						justifyContent: 'center',\n						lineHeight: 1,\n						marginTop: 8,\n						textAlign: 'center',\n					}}\n				>\n					scene B\n				</Interactive.Div>\n			</Interactive.Div>\n\n			<Interactive.Div\n				name=\"Photo 3 card\"\n				style={{\n					backgroundColor: '#fffdfa',\n					boxShadow:\n						'0 32px 64px rgba(8, 5, 3, 0.2), 0 6px 16px rgba(8, 5, 3, 0.09), inset 0 0 0 1px rgba(80, 62, 46, 0.05)',\n					boxSizing: 'border-box',\n					height: 520,\n					left: 960,\n					opacity: interpolate(\n						frame,\n						[32, 40, durationInFrames - 26, durationInFrames - 1],\n						[0, 1, 1, 0],\n						{\n							easing: Easing.inOut(Easing.cubic),\n							extrapolateLeft: 'clamp',\n							extrapolateRight: 'clamp',\n						},\n					),\n					padding: '22px 22px 16px',\n					position: 'absolute',\n					rotate: interpolate(\n						frame,\n						[32, 58, durationInFrames - 26, durationInFrames - 1],\n						['15deg', '-3deg', '-3deg', '10deg'],\n						{\n							easing: [\n								Easing.bezier(0.16, 1, 0.3, 1),\n								Easing.spring({\n									damping: 200,\n									mass: 1,\n									stiffness: 100,\n									allowTail: true,\n									durationRestThreshold: 0.02,\n									overshootClamping: false,\n								}),\n								Easing.bezier(0.16, 1, 0.3, 1),\n							],\n							extrapolateLeft: 'clamp',\n							extrapolateRight: 'clamp',\n						},\n					),\n					scale: interpolate(\n						frame,\n						[durationInFrames - 26, durationInFrames - 1],\n						[1, 1.12],\n						{\n							easing: Easing.bezier(0.16, 1, 0.3, 1),\n							extrapolateLeft: 'clamp',\n							extrapolateRight: 'clamp',\n							output: 'perceptual-scale',\n						},\n					),\n					top: 85,\n					translate: interpolate(\n						frame,\n						[32, 58, durationInFrames - 26, durationInFrames - 1],\n						['680px 380px', '0px 0px', '0px 0px', '820px 240px'],\n						{\n							easing: [\n								Easing.bezier(0.16, 1, 0.3, 1),\n								Easing.spring({\n									damping: 200,\n									mass: 1,\n									stiffness: 100,\n									allowTail: true,\n									durationRestThreshold: 0.02,\n									overshootClamping: false,\n								}),\n								Easing.bezier(0.16, 1, 0.3, 1),\n							],\n							extrapolateLeft: 'clamp',\n							extrapolateRight: 'clamp',\n						},\n					),\n					width: 420,\n					willChange: 'opacity, transform',\n					zIndex: 3,\n				}}\n			>\n				<Interactive.Div\n					name=\"Photo 3 tape\"\n					style={{\n						backgroundColor: '#d9c58f',\n						boxShadow: '0 2px 8px rgba(67, 47, 29, 0.14)',\n						height: 48,\n						left: 135,\n						opacity: 0.68,\n						position: 'absolute',\n						rotate: '-2deg',\n						top: -21,\n						width: 150,\n						zIndex: 2,\n					}}\n				/>\n				<div\n					style={{\n						backgroundColor: '#d8cbb8',\n						height: 380,\n						overflow: 'hidden',\n						position: 'relative',\n						width: '100%',\n					}}\n				>\n					<Img\n						name=\"Photo 3\"\n						alt=\"\"\n						src=\"https://remotion.media/transition-bg-blue.jpg\"\n						style={{\n							filter: 'hue-rotate(-65deg)',\n							height: '100%',\n							objectFit: 'cover',\n							width: '100%',\n						}}\n					/>\n					<div\n						style={{\n							alignItems: 'center',\n							color: 'white',\n							display: 'flex',\n							fontFamily: 'sans-serif',\n							fontSize: 160,\n							fontWeight: 900,\n							inset: 0,\n							justifyContent: 'center',\n							position: 'absolute',\n							textShadow: '0 4px 30px rgba(0, 0, 0, 0.55)',\n						}}\n					>\n						C\n					</div>\n				</div>\n				<Interactive.Div\n					name=\"Photo 3 caption\"\n					style={{\n						alignItems: 'center',\n						color: '#2d2620',\n						display: 'flex',\n						fontFamily,\n						fontSize: 44,\n						fontWeight: 600,\n						height: 84,\n						justifyContent: 'center',\n						lineHeight: 1,\n						marginTop: 8,\n						textAlign: 'center',\n					}}\n				>\n					scene C\n				</Interactive.Div>\n			</Interactive.Div>\n		</div>\n	);\n};",children:(0,s.jsx)(t.div,{dangerouslySetInnerHTML:{__html:'<pre class="shiki with-title github-dark twoslash lsp" style="background-color:#24292e;color:#e1e4e8" tabindex="0"><div class="code-title">polaroid-pictures.tsx</div><code><span class="line"><span style="color:#F97583">

1import</span><span style="color:#E1E4E8"> {</span><span style="color:#E1E4E8"><data-lsp lsp="(alias) const fontFamily: &#x22;Caveat&#x22;\nimport fontFamily">fontFamily</data-lsp></span><span style="color:#E1E4E8">, </span><span style="color:#E1E4E8"><data-lsp lsp="(alias) const loadFont: <T extends &#x22;normal&#x22;>(style?: T | undefined, options?: {\n    weights?: Variants[T][&#x22;weights&#x22;][] | undefined;\n    subsets?: Variants[T][&#x22;subsets&#x22;][] | undefined;\n    document?: Document | undefined;\n    ignoreTooManyRequestsWarning?: boolean | undefined;\n} | undefined) => {\n    fontFamily: string;\n    fonts: Record<string, Record<string, Record<string, string>>>;\n    unicodeRanges: Record<string, string>;\n    waitUntilDone: () => Promise<undefined>;\n}\nimport loadFont">loadFont</data-lsp></span><span style="color:#E1E4E8">} </span><span style="color:#F97583">from</span><span style="color:#9ECBFF"> \'@remotion/google-fonts/Caveat\'</span><span style="color:#E1E4E8">;</span></span>\n<span class="line"><span style="color:#F97583">import</span><span style="color:#E1E4E8"> {</span></span>\n<span class="line"><span style="color:#E1E4E8">	</span><span style="color:#E1E4E8"><data-lsp lsp="(alias) class Easing\nimport Easing">Easing</data-lsp></span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">	</span><span style="color:#E1E4E8"><data-lsp lsp="(alias) const Img: React.ComponentType<NativeImgProps &#x26; {\n    readonly maxRetries?: number | undefined;\n    readonly pauseWhenLoading?: boolean | undefined;\n    readonly delayRenderRetries?: number | undefined;\n    readonly delayRenderTimeoutInMilliseconds?: number | undefined;\n    readonly onImageFrame?: ((imageElement: HTMLImageElement) => void) | undefined;\n    readonly onImageError?: ((error: Error) => void) | undefined;\n    readonly src: string;\n    readonly effects?: EffectsProp | undefined;\n    readonly showInTimeline?: boolean | undefined;\n    readonly name?: string | undefined;\n} &#x26; Omit<...> &#x26; InteractiveCropProps &#x26; InteractivePremountProps>\nimport Img">Img</data-lsp></span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">	</span><span style="color:#E1E4E8"><data-lsp lsp="(alias) const Interactive: {\n    baseSchema: {\n        readonly durationInFrames: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: undefined;\n            readonly min: 1;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly from: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: 0;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly trimBefore: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: 0;\n            readonly min: 0;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly playbackRate: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: 1;\n            readonly min: 0.01;\n            readonly step: 0.1;\n            readonly description: &#x22;Playback rate&#x22;;\n            readonly hiddenFromList: false;\n            readonly keyframable: false;\n        };\n        readonly freeze: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: null;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly hidden: import(&#x22;/vercel/path0/packages/core/dist/cjs/interactivity-schema&#x22;).BooleanFieldSchema;\n        readonly name: import(&#x22;/vercel/path0/packages/core/dist/cjs/interactivity-schema&#x22;).HiddenFieldSchema;\n        readonly showInTimeline: import(&#x22;/vercel/path0/packages/core/dist/cjs/interactivity-schema&#x22;).HiddenFieldSchema;\n    };\n    ... 47 more ...;\n    Ul: InteractiveElementComponent<...>;\n}\nimport Interactive">Interactive</data-lsp></span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">	</span><span style="color:#E1E4E8"><data-lsp lsp="(alias) function interpolate(input: number, inputRange: readonly number[], outputRange: readonly number[], options?: InterpolateOptions): number (+6 overloads)\nimport interpolate">interpolate</data-lsp></span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">	</span><span style="color:#E1E4E8"><data-lsp lsp="(alias) const useCurrentFrame: () => number\nimport useCurrentFrame">useCurrentFrame</data-lsp></span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">	</span><span style="color:#E1E4E8"><data-lsp lsp="(alias) const useVideoConfig: () => VideoConfig\nimport useVideoConfig">useVideoConfig</data-lsp></span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">}

1 </span><span style="color:#F97583">from</span><span style="color:#9ECBFF"> \'remotion\'</span><span style="color:#E1E4E8">;</span></span>\n<span class="line"></span>\n<span class="line"><span style="color:#B392F0"><data-lsp lsp="(alias) loadFont<&#x22;normal&#x22;>(style?: &#x22;normal&#x22; | undefined, options?: {\n    weights?: (&#x22;600&#x22; | &#x22;400&#x22; | &#x22;500&#x22; | &#x22;700&#x22;)[] | undefined;\n    subsets?: (&#x22;latin&#x22; | &#x22;cyrillic&#x22; | &#x22;cyrillic-ext&#x22; | &#x22;latin-ext&#x22;)[] | undefined;\n    document?: Document | undefined;\n    ignoreTooManyRequestsWarning?: boolean | undefined;\n} | undefined): {\n    fontFamily: string;\n    fonts: Record<string, Record<string, Record<string, string>>>;\n    unicodeRanges: Record<string, string>;\n    waitUntilDone: () => Promise<undefined>;\n}\nimport loadFont">loadFont</data-lsp></span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">\'normal\'</span><span style="color:#E1E4E8">, {</span></span>\n<span class="line"><span style="color:#E1E4E8">	</span><span style="color:#E1E4E8"><data-lsp lsp="(property) weights?: (&#x22;600&#x22; | &#x22;400&#x22; | &#x22;500&#x22; | &#x22;700&#x22;)[] | undefined">weights</data-lsp></span><span style="color:#E1E4E8">: [</span><span style="color:#9ECBFF">\'600\'</span><span style="color:#E1E4E8">],</span></span>\n<span class="line"><span style="color:#E1E4E8">	</span><span style="color:#E1E4E8"><data-lsp lsp="(property) subsets?: (&#x22;latin&#x22; | &#x22;cyrillic&#x22; | &#x22;cyrillic-ext&#x22; | &#x22;latin-ext&#x22;)[] | undefined">subsets</data-lsp></span><span style="color:#E1E4E8">: [</span><span style="color:#9ECBFF">\'latin\'</span><span style="color:#E1E4E8">],</span></span>\n<span class="line"><span style="color:#E1E4E8">});</span></span>\n<span class="line"></span>\n<span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> const</span><span style="color:#B392F0"> </span><span style="color:#B392F0"><data-lsp lsp="const PolaroidPictures: () => JSX.Element">PolaroidPictures</data-lsp></span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> () </span><span style="color:#F97583">=></span><span style="color:#E1E4E8"> {</span></span>\n<span class="line"><span style="color:#F97583">	const</span><span style="color:#79B8FF"> </span><span style="color:#79B8FF"><data-lsp lsp="const frame: number">frame</data-lsp></span><span style="color:#F97583"> =</span><span style="color:#B392F0"> </span><span style="color:#B392F0"><data-lsp lsp="(alias) useCurrentFrame(): number\nimport useCurrentFrame">useCurrentFrame</data-lsp></span><span style="color:#E1E4E8">();</span></span>\n<span class="line"><span style="color:#F97583">	const</span><span style="color:#E1E4E8"> {</span><span style="color:#79B8FF"><data-lsp lsp="const durationInFrames: number">durationInFrames</data-lsp></span><span style="color:#E1E4E8">} </span><span style="color:#F97583">=</span><span style="color:#B392F0"> </span><span style="color:#B392F0"><data-lsp lsp="(alias) useVideoConfig(): VideoConfig\nimport useVideoConfig">useVideoConfig</data-lsp></span><span style="color:#E1E4E8">();</span></span>\n<span class="line"></span>\n<span class="line"><span style="color:#F97583">	return</span><span style="color:#E1E4E8"> (</span></span>\n<span class="line"><span style="color:#E1E4E8">		&#x3C;</span><span style="color:#85E89D"><data-lsp lsp="(property) React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>">div</data-lsp></span></span>\n<span class="line"><span style="color:#B392F0">			</span><span style="color:#B392F0"><data-lsp lsp="(property) React.HTMLAttributes<HTMLDivElement>.style?: React.CSSProperties | undefined">style</data-lsp></span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{{</span></span>\n<span class="line"><span style="color:#E1E4E8">				</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.color?: Property.Color | undefined">color</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">

1\'#2d2620\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">				</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.height?: Property.Height<string | number> | undefined">height</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">640</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">				</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.position?: Property.Position | undefined">position</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'relative\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">				</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.scale?: Property.Scale | undefined">scale</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#B392F0"><data-lsp lsp="(alias) interpolate(input: number, inputRange: readonly number[], outputRange: readonly number[], options?: InterpolateOptions): number (+6 overloads)\nimport interpolate">interpolate</data-lsp></span><span style="color:#E1E4E8">(</span><span style="color:#E1E4E8"><data-lsp lsp="const frame: number">frame</data-lsp></span><span style="color:#E1E4E8">, [</span><span style="color:#79B8FF">58</span><span style="color:#E1E4E8">, </span><span style="color:#E1E4E8"><data-lsp lsp="const durationInFrames: number">durationInFrames</data-lsp></span><span style="color:#E1E4E8"> </span><span style="color:#F97583">-</span><span style="color:#79B8FF"> 32</span><span style="color:#E1E4E8">], [</span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">1.035</span><span style="color:#E1E4E8">], {</span></span>\n<span class="line"><span style="color:#E1E4E8">					</span><span style="color:#E1E4E8"><data-lsp lsp="(property) easing?: EasingFunction | readonly EasingFunction[] | undefined">easing</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#E1E4E8"><data-lsp lsp="(alias) class Easing\nimport Easing">Easing</data-lsp></span><span style="color:#E1E4E8">.</span><span style="color:#B392F0"><data-lsp lsp="(method) Easing.inOut(easing: (t: number) => number): (t: number) => number">inOut</data-lsp></span><span style="color:#E1E4E8">(</span><span style="color:#E1E4E8"><data-lsp lsp="(alias) class Easing\nimport Easing">Easing</data-lsp></span><span style="color:#E1E4E8">.</span><span style="color:#E1E4E8"><data-lsp lsp="(method) Easing.quad(t: number): number">quad</data-lsp></span><span style="color:#E1E4E8">),</span></span>\n<span class="line"><span style="color:#E1E4E8">					</span><span style="color:#E1E4E8"><data-lsp lsp="(property) extrapolateLeft?: ExtrapolateType | undefined">extrapolateLeft</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'clamp\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">					</span><span style="color:#E1E4E8"><data-lsp lsp="(property) extrapolateRight?: ExtrapolateType | undefined">extrapolateRight</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'clamp\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">					</span><span style="color:#E1E4E8"><data-lsp lsp="(property) output?: InterpolateOutputOption | undefined">output</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'perceptual-scale\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">				}),</span></span>\n<span class="line"><span style="color:#E1E4E8">				</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.translate?: Property.Translate<string | number> | undefined">translate</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#B392F0"><data-lsp lsp="(alias) interpolate(input: number, inputRange: readonly number[], outputRange: readonly string[], options?: InterpolateOptions): string (+6 overloads)\nimport interpolate">interpolate</data-lsp></span><span style="color:#E1E4E8">(</span></span>\n<span class="line"><span style="color:#E1E4E8">					</span><span style="color:#E1E4E8"><data-lsp lsp="const frame: number">frame</data-lsp></span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">					[</span><span style="color:#79B8FF">58</span><span style="color:#E1E4E8">, </span><span style="color:#E1E4E8"><data-lsp lsp="const durationInFrames: number">durationInFrames</data-lsp></span><span style="color:#E1E4E8"> </span><span style="color:#F97583">-</span><span style="color:#79B8FF"> 32</span><span style="color:#E1E4E8">],</span></span>\n<span class="line"><span style="color:#E1E4E8">					[</span><span style="color:#9ECBFF">

1\'0px 0px\'</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">\'0px -18px\'</span><span style="color:#E1E4E8">],</span></span>\n<span class="line"><span style="color:#E1E4E8">					{</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) easing?: EasingFunction | readonly EasingFunction[] | undefined">easing</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#E1E4E8"><data-lsp lsp="(alias) class Easing\nimport Easing">Easing</data-lsp></span><span style="color:#E1E4E8">.</span><span style="color:#B392F0"><data-lsp lsp="(method) Easing.inOut(easing: (t: number) => number): (t: number) => number">inOut</data-lsp></span><span style="color:#E1E4E8">(</span><span style="color:#E1E4E8"><data-lsp lsp="(alias) class Easing\nimport Easing">Easing</data-lsp></span><span style="color:#E1E4E8">.</span><span style="color:#E1E4E8"><data-lsp lsp="(method) Easing.quad(t: number): number">quad</data-lsp></span><span style="color:#E1E4E8">),</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) extrapolateLeft?: ExtrapolateType | undefined">extrapolateLeft</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'clamp\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) extrapolateRight?: ExtrapolateType | undefined">extrapolateRight</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'clamp\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">					},</span></span>\n<span class="line"><span style="color:#E1E4E8">				),</span></span>\n<span class="line"><span style="color:#E1E4E8">				</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.width?: Property.Width<string | number> | undefined">width</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">1480</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">				</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.willChange?: Property.WillChange | undefined">willChange</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'transform\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">			}}</span></span>\n<span class="line"><span style="color:#E1E4E8">		></span></span>\n<span class="line"><span style="color:#E1E4E8">			&#x3C;</span><span style="color:#79B8FF"><data-lsp lsp="(alias) const Interactive: {\n    baseSchema: {\n        readonly durationInFrames: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: undefined;\n            readonly min: 1;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly from: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: 0;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly trimBefore: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: 0;\n            readonly min: 0;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly playbackRate: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: 1;\n            readonly min: 0.01;\n            readonly step: 0.1;\n            readonly description: &#x22;Playback rate&#x22;;\n            readonly hiddenFromList: false;\n            readonly keyframable: false;\n        };\n        readonly freeze: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: null;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly hidden: import(&#x22;/vercel/path0/packages/core/dist/cjs/interactivity-schema&#x22;).BooleanFieldSchema;\n        readonly name: import(&#x22;/vercel/path0/packages/core/dist/cjs/interactivity-schema&#x22;).HiddenFieldSchema;\n        readonly showInTimeline: import(&#x22;/vercel/path0/packages/core/dist/cjs/interactivity-schema&#x22;).HiddenFieldSchema;\n    };\n    ... 47 more ...;\n    Ul: InteractiveElementComponent<...>;\n}\nimport Interactive">Interactive</data-lsp></span><span style="color:#79B8FF">.</span><span style="color:#79B8FF">

1<data-lsp lsp="(property) Div: InteractiveElementComponent<&#x22;div&#x22;>">Div</data-lsp></span></span>\n<span class="line"><span style="color:#B392F0">				</span><span style="color:#B392F0"><data-lsp lsp="(property) name?: string | undefined">name</data-lsp></span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"Photo 1 card"</span></span>\n<span class="line"><span style="color:#B392F0">				</span><span style="color:#B392F0"><data-lsp lsp="(property) style?: React.CSSProperties | undefined">style</data-lsp></span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{{</span></span>\n<span class="line"><span style="color:#E1E4E8">					</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.backgroundColor?: Property.BackgroundColor | undefined">backgroundColor</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'#fffdfa\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">					</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.boxShadow?: Property.BoxShadow | undefined">boxShadow</data-lsp></span><span style="color:#E1E4E8">:</span></span>\n<span class="line"><span style="color:#9ECBFF">						\'0 24px 52px rgba(8, 5, 3, 0.16), 0 4px 12px rgba(8, 5, 3, 0.08), inset 0 0 0 1px rgba(80, 62, 46, 0.05)\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">					</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.boxSizing?: Property.BoxSizing | undefined">boxSizing</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'border-box\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">					</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.height?: Property.Height<string | number> | undefined">height</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">520</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">					</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.left?: Property.Left<string | number> | undefined">left</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">100</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">					</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.opacity?: Property.Opacity | undefined">opacity</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#B392F0"><data-lsp lsp="(alias) interpolate(input: number, inputRange: readonly number[], outputRange: readonly number[], options?: InterpolateOptions): number (+6 overloads)\nimport interpolate">interpolate</data-lsp></span><span style="color:#E1E4E8">(</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="const frame: number">frame</data-lsp></span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						[</span><span style="color:#79B8FF">8</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">16</span><span style="color:#E1E4E8">, </span><span style="color:#E1E4E8"><data-lsp lsp="const durationInFrames: number">durationInFrames</data-lsp></span><span style="color:#E1E4E8"> </span><span style="color:#F97583">-</span><span style="color:#79B8FF"> 30</span><span style="color:#E1E4E8">, </span><span style="color:#E1E4E8"><data-lsp lsp="const durationInFrames: number">durationInFrames</data-lsp></span><span style="color:#E1E4E8"> </span><span style="color:#F97583">-</span><span style="color:#79B8FF"> 1</span><span style="color:#E1E4E8">],</span></span>\n<span class="line"><span style="color:#E1E4E8">						[</span><span style="color:#79B8FF">0</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">0</span><span style="color:#E1E4E8">],</span></span>\n<span class="line"><span style="color:#E1E4E8">						{</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) easing?: EasingFunction | readonly EasingFunction[] | undefined">

1easing</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#E1E4E8"><data-lsp lsp="(alias) class Easing\nimport Easing">Easing</data-lsp></span><span style="color:#E1E4E8">.</span><span style="color:#B392F0"><data-lsp lsp="(method) Easing.inOut(easing: (t: number) => number): (t: number) => number">inOut</data-lsp></span><span style="color:#E1E4E8">(</span><span style="color:#E1E4E8"><data-lsp lsp="(alias) class Easing\nimport Easing">Easing</data-lsp></span><span style="color:#E1E4E8">.</span><span style="color:#E1E4E8"><data-lsp lsp="(method) Easing.cubic(t: number): number">cubic</data-lsp></span><span style="color:#E1E4E8">),</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) extrapolateLeft?: ExtrapolateType | undefined">extrapolateLeft</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'clamp\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) extrapolateRight?: ExtrapolateType | undefined">extrapolateRight</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'clamp\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						},</span></span>\n<span class="line"><span style="color:#E1E4E8">					),</span></span>\n<span class="line"><span style="color:#E1E4E8">					</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardShorthandProperties<string | number, string &#x26; {}>.padding?: Property.Padding<string | number> | undefined">padding</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'22px 22px 16px\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">					</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.position?: Property.Position | undefined">position</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'absolute\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">					</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.rotate?: Property.Rotate | undefined">rotate</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#B392F0"><data-lsp lsp="(alias) interpolate(input: number, inputRange: readonly number[], outputRange: readonly string[], options?: InterpolateOptions): string (+6 overloads)\nimport interpolate">interpolate</data-lsp></span><span style="color:#E1E4E8">(</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="const frame: number">frame</data-lsp></span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						[</span><span style="color:#79B8FF">8</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">34</span><span style="color:#E1E4E8">, </span><span style="color:#E1E4E8"><data-lsp lsp="const durationInFrames: number">durationInFrames</data-lsp></span><span style="color:#E1E4E8"> </span><span style="color:#F97583">-</span><span style="color:#79B8FF"> 30</span><span style="color:#E1E4E8">, </span><span style="color:#E1E4E8"><data-lsp lsp="const durationInFrames: number">durationInFrames</data-lsp></span><span style="color:#E1E4E8"> </span><span style="color:#F97583">-</span><span style="color:#79B8FF"> 1</span><span style="color:#E1E4E8">],</span></span>\n<span class="line"><span style="color:#E1E4E8">						[</span><span style="color:#9ECBFF">\'-20deg\'</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">\'-8deg\'</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">\'-8deg\'</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">\'-18deg\'</span><span style="color:#E1E4E8">],</span></span>\n<span class="line"><span style="color:#E1E4E8">						{</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) easing?: EasingFunction | readonly EasingFunction[] | undefined">

1easing</data-lsp></span><span style="color:#E1E4E8">: [</span></span>\n<span class="line"><span style="color:#E1E4E8">								</span><span style="color:#E1E4E8"><data-lsp lsp="(alias) class Easing\nimport Easing">Easing</data-lsp></span><span style="color:#E1E4E8">.</span><span style="color:#B392F0"><data-lsp lsp="(method) Easing.bezier(x1: number, y1: number, x2: number, y2: number): (t: number) => number">bezier</data-lsp></span><span style="color:#E1E4E8">(</span><span style="color:#79B8FF">0.16</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">0.3</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">),</span></span>\n<span class="line"><span style="color:#E1E4E8">								</span><span style="color:#E1E4E8"><data-lsp lsp="(alias) class Easing\nimport Easing">Easing</data-lsp></span><span style="color:#E1E4E8">.</span><span style="color:#B392F0"><data-lsp lsp="(method) Easing.spring({ allowTail, durationRestThreshold, ...config }?: EasingSpringConfig): (t: number) => number">spring</data-lsp></span><span style="color:#E1E4E8">({</span></span>\n<span class="line"><span style="color:#E1E4E8">									</span><span style="color:#E1E4E8"><data-lsp lsp="(property) damping?: number | undefined">damping</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">200</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">									</span><span style="color:#E1E4E8"><data-lsp lsp="(property) mass?: number | undefined">mass</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">									</span><span style="color:#E1E4E8"><data-lsp lsp="(property) stiffness?: number | undefined">stiffness</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">100</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">									</span><span style="color:#E1E4E8"><data-lsp lsp="(property) allowTail?: boolean | undefined">allowTail</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">true</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">									</span><span style="color:#E1E4E8"><data-lsp lsp="(property) durationRestThreshold?: number | undefined">durationRestThreshold</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">0.02</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">									</span><span style="color:#E1E4E8"><data-lsp lsp="(property) overshootClamping?: boolean | undefined">overshootClamping</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">false</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">								}),</span></span>\n<span class="line"><span style="color:#E1E4E8">								</span><span style="color:#E1E4E8"><data-lsp lsp="(alias) class Easing\nimport Easing">Easing</data-lsp></span><span style="color:#E1E4E8">.</span><span style="color:#B392F0"><data-lsp lsp="(method) Easing.bezier(x1: number, y1: number, x2: number, y2: number): (t: number) => number">bezier</data-lsp></span><span style="color:#E1E4E8">(</span><span style="color:#79B8FF">0.16</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">0.3</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">),</span></span>\n<span class="line"><span style="color:#E1E4E8">							],</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) extrapolateLeft?: ExtrapolateType | undefined">extrapolateLeft</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'clamp\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) extrapolateRight?: ExtrapolateType | undefined">extrapolateRight</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'clamp\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						},</span></span>\n<span class="line"><span style="color:#E1E4E8">					),</span></span>\n<span class="line"><span style="color:#E1E4E8">					</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.scale?: Property.Scale | undefined">scale</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#B392F0"><data-lsp lsp="(alias) interpolate(input: number, inputRange: readonly number[], outputRange: readonly number[], options?: InterpolateOptions): number (+6 overloads)\nimport interpolate">interpolate</data-lsp></span><span style="color:#E1E4E8">(</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="const frame: number">frame</data-lsp></span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						[</span><span style="color:#E1E4E8"><data-lsp lsp="const durationInFrames: number">durationInFrames</data-lsp></span><span style="color:#E1E4E8"> </span><span style="color:#F97583">-</span><span style="color:#79B8FF"> 30</span><span style="color:#E1E4E8">, </span><span style="color:#E1E4E8"><data-lsp lsp="const durationInFrames: number">durationInFrames</data-lsp></span><span style="color:#E1E4E8"> </span><span style="color:#F97583">-</span><span style="color:#79B8FF"> 1</span><span style="color:#E1E4E8">],</span></span>\n<span class="line"><span style="color:#E1E4E8">						[</span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">1.08</span><span style="color:#E1E4E8">],</span></span>\n<span class="line"><span style="color:#E1E4E8">						{</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) easing?: EasingFunction | readonly EasingFunction[] | undefined">

1easing</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#E1E4E8"><data-lsp lsp="(alias) class Easing\nimport Easing">Easing</data-lsp></span><span style="color:#E1E4E8">.</span><span style="color:#B392F0"><data-lsp lsp="(method) Easing.bezier(x1: number, y1: number, x2: number, y2: number): (t: number) => number">bezier</data-lsp></span><span style="color:#E1E4E8">(</span><span style="color:#79B8FF">0.16</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">0.3</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">),</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) extrapolateLeft?: ExtrapolateType | undefined">extrapolateLeft</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'clamp\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) extrapolateRight?: ExtrapolateType | undefined">extrapolateRight</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'clamp\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) output?: InterpolateOutputOption | undefined">output</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'perceptual-scale\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						},</span></span>\n<span class="line"><span style="color:#E1E4E8">					),</span></span>\n<span class="line"><span style="color:#E1E4E8">					</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.top?: Property.Top<string | number> | undefined">top</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">85</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">					</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.translate?: Property.Translate<string | number> | undefined">translate</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#B392F0"><data-lsp lsp="(alias) interpolate(input: number, inputRange: readonly number[], outputRange: readonly string[], options?: InterpolateOptions): string (+6 overloads)\nimport interpolate">interpolate</data-lsp></span><span style="color:#E1E4E8">(</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="const frame: number">frame</data-lsp></span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						[</span><span style="color:#79B8FF">8</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">34</span><span style="color:#E1E4E8">, </span><span style="color:#E1E4E8"><data-lsp lsp="const durationInFrames: number">durationInFrames</data-lsp></span><span style="color:#E1E4E8"> </span><span style="color:#F97583">-</span><span style="color:#79B8FF"> 30</span><span style="color:#E1E4E8">, </span><span style="color:#E1E4E8"><data-lsp lsp="const durationInFrames: number">durationInFrames</data-lsp></span><span style="color:#E1E4E8"> </span><span style="color:#F97583">-</span><span style="color:#79B8FF"> 1</span><span style="color:#E1E4E8">],</span></span>\n<span class="line"><span style="color:#E1E4E8">						[</span><span style="color:#9ECBFF">\'-620px 260px\'</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">\'0px 0px\'</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">\'0px 0px\'</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">\'-760px -120px\'</span><span style="color:#E1E4E8">],</span></span>\n<span class="line"><span style="color:#E1E4E8">						{</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) easing?: EasingFunction | readonly EasingFunction[] | undefined">

1easing</data-lsp></span><span style="color:#E1E4E8">: [</span></span>\n<span class="line"><span style="color:#E1E4E8">								</span><span style="color:#E1E4E8"><data-lsp lsp="(alias) class Easing\nimport Easing">Easing</data-lsp></span><span style="color:#E1E4E8">.</span><span style="color:#B392F0"><data-lsp lsp="(method) Easing.bezier(x1: number, y1: number, x2: number, y2: number): (t: number) => number">bezier</data-lsp></span><span style="color:#E1E4E8">(</span><span style="color:#79B8FF">0.16</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">0.3</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">),</span></span>\n<span class="line"><span style="color:#E1E4E8">								</span><span style="color:#E1E4E8"><data-lsp lsp="(alias) class Easing\nimport Easing">Easing</data-lsp></span><span style="color:#E1E4E8">.</span><span style="color:#B392F0"><data-lsp lsp="(method) Easing.spring({ allowTail, durationRestThreshold, ...config }?: EasingSpringConfig): (t: number) => number">spring</data-lsp></span><span style="color:#E1E4E8">({</span></span>\n<span class="line"><span style="color:#E1E4E8">									</span><span style="color:#E1E4E8"><data-lsp lsp="(property) damping?: number | undefined">damping</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">200</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">									</span><span style="color:#E1E4E8"><data-lsp lsp="(property) mass?: number | undefined">mass</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">									</span><span style="color:#E1E4E8"><data-lsp lsp="(property) stiffness?: number | undefined">stiffness</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">100</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">									</span><span style="color:#E1E4E8"><data-lsp lsp="(property) allowTail?: boolean | undefined">allowTail</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">true</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">									</span><span style="color:#E1E4E8"><data-lsp lsp="(property) durationRestThreshold?: number | undefined">durationRestThreshold</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">0.02</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">									</span><span style="color:#E1E4E8"><data-lsp lsp="(property) overshootClamping?: boolean | undefined">overshootClamping</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">false</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">								}),</span></span>\n<span class="line"><span style="color:#E1E4E8">								</span><span style="color:#E1E4E8"><data-lsp lsp="(alias) class Easing\nimport Easing">Easing</data-lsp></span><span style="color:#E1E4E8">.</span><span style="color:#B392F0"><data-lsp lsp="(method) Easing.bezier(x1: number, y1: number, x2: number, y2: number): (t: number) => number">bezier</data-lsp></span><span style="color:#E1E4E8">(</span><span style="color:#79B8FF">0.16</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">0.3</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">),</span></span>\n<span class="line"><span style="color:#E1E4E8">							],</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) extrapolateLeft?: ExtrapolateType | undefined">extrapolateLeft</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'clamp\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) extrapolateRight?: ExtrapolateType | undefined">extrapolateRight</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'clamp\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						},</span></span>\n<span class="line"><span style="color:#E1E4E8">					),</span></span>\n<span class="line"><span style="color:#E1E4E8">					</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.width?: Property.Width<string | number> | undefined">width</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">420</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">					</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.willChange?: Property.WillChange | undefined">willChange</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'opacity, transform\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">					</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.zIndex?: Property.ZIndex | undefined">zIndex</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">				}}</span></span>\n<span class="line"><span style="color:#E1E4E8">			></span></span>\n<span class="line"><span style="color:#E1E4E8">				&#x3C;</span><span style="color:#79B8FF">

1<data-lsp lsp="(alias) const Interactive: {\n    baseSchema: {\n        readonly durationInFrames: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: undefined;\n            readonly min: 1;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly from: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: 0;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly trimBefore: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: 0;\n            readonly min: 0;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly playbackRate: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: 1;\n            readonly min: 0.01;\n            readonly step: 0.1;\n            readonly description: &#x22;Playback rate&#x22;;\n            readonly hiddenFromList: false;\n            readonly keyframable: false;\n        };\n        readonly freeze: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: null;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly hidden: import(&#x22;/vercel/path0/packages/core/dist/cjs/interactivity-schema&#x22;).BooleanFieldSchema;\n        readonly name: import(&#x22;/vercel/path0/packages/core/dist/cjs/interactivity-schema&#x22;).HiddenFieldSchema;\n        readonly showInTimeline: import(&#x22;/vercel/path0/packages/core/dist/cjs/interactivity-schema&#x22;).HiddenFieldSchema;\n    };\n    ... 47 more ...;\n    Ul: InteractiveElementComponent<...>;\n}\nimport Interactive">Interactive</data-lsp></span><span style="color:#79B8FF">.</span><span style="color:#79B8FF"><data-lsp lsp="(property) Div: InteractiveElementComponent<&#x22;div&#x22;>">Div</data-lsp></span></span>\n<span class="line"><span style="color:#B392F0">					</span><span style="color:#B392F0"><data-lsp lsp="(property) name?: string | undefined">name</data-lsp></span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"Photo 1 tape"</span></span>\n<span class="line"><span style="color:#B392F0">					</span><span style="color:#B392F0"><data-lsp lsp="(property) style?: React.CSSProperties | undefined">style</data-lsp></span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{{</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.backgroundColor?: Property.BackgroundColor | undefined">backgroundColor</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'#d9c58f\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.boxShadow?: Property.BoxShadow | undefined">boxShadow</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'0 2px 8px rgba(67, 47, 29, 0.14)\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.height?: Property.Height<string | number> | undefined">height</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">48</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.left?: Property.Left<string | number> | undefined">left</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">135</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.opacity?: Property.Opacity | undefined">opacity</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">0.68</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.position?: Property.Position | undefined">position</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'absolute\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.rotate?: Property.Rotate | undefined">rotate</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'-5deg\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.top?: Property.Top<string | number> | undefined">top</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#F97583">-</span><span style="color:#79B8FF">21</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.width?: Property.Width<string | number> | undefined">width</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">150</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.zIndex?: Property.ZIndex | undefined">zIndex</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">2</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.translate?: Property.Translate<string | number> | undefined">translate</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'-3.3px -12.3px\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">					}}</span></span>\n<span class="line"><span style="color:#E1E4E8">				/></span></span>\n<span class="line"><span style="color:#E1E4E8">				&#x3C;</span><span style="color:#85E89D"><data-lsp lsp="(property) React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>">div</data-lsp></span></span>\n<span class="line"><span style="color:#B392F0">					</span><span style="color:#B392F0"><data-lsp lsp="(property) React.HTMLAttributes<HTMLDivElement>.style?: React.CSSProperties | undefined">style</data-lsp></span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{{</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>

1.backgroundColor?: Property.BackgroundColor | undefined">backgroundColor</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'#d8cbb8\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.height?: Property.Height<string | number> | undefined">height</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">380</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardShorthandProperties<string | number, string &#x26; {}>.overflow?: Property.Overflow | undefined">overflow</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'hidden\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.position?: Property.Position | undefined">position</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'relative\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.width?: Property.Width<string | number> | undefined">width</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'100%\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">					}}</span></span>\n<span class="line"><span style="color:#E1E4E8">				></span></span>\n<span class="line"><span style="color:#E1E4E8">					&#x3C;</span><span style="color:#79B8FF"><data-lsp lsp="(alias) const Img: React.ComponentType<NativeImgProps &#x26; {\n    readonly maxRetries?: number | undefined;\n    readonly pauseWhenLoading?: boolean | undefined;\n    readonly delayRenderRetries?: number | undefined;\n    readonly delayRenderTimeoutInMilliseconds?: number | undefined;\n    readonly onImageFrame?: ((imageElement: HTMLImageElement) => void) | undefined;\n    readonly onImageError?: ((error: Error) => void) | undefined;\n    readonly src: string;\n    readonly effects?: EffectsProp | undefined;\n    readonly showInTimeline?: boolean | undefined;\n    readonly name?: string | undefined;\n} &#x26; Omit<...> &#x26; InteractiveCropProps &#x26; InteractivePremountProps>\nimport Img">Img</data-lsp></span></span>\n<span class="line"><span style="color:#B392F0">						</span><span style="color:#B392F0"><data-lsp lsp="(property) name?: string | undefined">name</data-lsp></span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"Photo 1"</span></span>\n<span class="line"><span style="color:#B392F0">						</span><span style="color:#B392F0"><data-lsp lsp="(property) alt?: string | undefined">alt</data-lsp></span><span style="color:#F97583">=</span><span style="color:#9ECBFF">""</span></span>\n<span class="line"><span style="color:#B392F0">						</span><span style="color:#B392F0"><data-lsp lsp="(property) src: string">src</data-lsp></span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"https://remotion.media/transition-bg-blue.jpg"</span></span>\n<span class="line"><span style="color:#B392F0">						</span><span style="color:#B392F0"><data-lsp lsp="(property) style?: React.CSSProperties | undefined">style</data-lsp></span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{{</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.height?: Property.Height<string | number> | undefined">height</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'100%\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.objectFit?: Property.ObjectFit | undefined">objectFit</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'cover\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.width?: Property.Width<string | number> | undefined">width</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'100%\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						}}</span></span>\n<span class="line"><span style="color:#E1E4E8">					/></span></span>\n<span class="line"><span style="color:#E1E4E8">					&#x3C;</span><span style="color:#85E89D"><data-lsp lsp="(property) React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>">div</data-lsp></span></span>\n<span class="line"><span style="color:#B392F0">						</span><span style="color:#B392F0"><data-lsp lsp="(property) React.HTMLAttributes<HTMLDivElement>.style?: React.CSSProperties | undefined">style</data-lsp></span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{{</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.alignItems?: Property.AlignItems | undefined">alignItems</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'center\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.color?: Property.Color | undefined">color</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'white\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.display?: Property.Display | undefined">display</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'flex\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.fontFamily?: Property.FontFamily | undefined">fontFamily</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'sans-serif\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.fontSize?: Property.FontSize<string | number> | undefined">fontSize</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">160</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.fontWeight?: Property.FontWeight | undefined">fontWeight</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">900</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardShorthandProperties<string | number, string &#x26; {}>.inset?: Property.Inset<string | number> | undefined">inset</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">0</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.justifyContent?: Property.JustifyContent | undefined">justifyContent</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'center\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.position?: Property.Position | undefined">position</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'absolute\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.textShadow?: Property.TextShadow | undefined">textShadow</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">

1\'0 4px 30px rgba(0, 0, 0, 0.55)\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						}}</span></span>\n<span class="line"><span style="color:#E1E4E8">					></span></span>\n<span class="line"><span style="color:#E1E4E8">						A</span></span>\n<span class="line"><span style="color:#E1E4E8">					&#x3C;/</span><span style="color:#85E89D"><data-lsp lsp="(property) React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>">div</data-lsp></span><span style="color:#E1E4E8">></span></span>\n<span class="line"><span style="color:#E1E4E8">				&#x3C;/</span><span style="color:#85E89D"><data-lsp lsp="(property) React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>">div</data-lsp></span><span style="color:#E1E4E8">></span></span>\n<span class="line"><span style="color:#E1E4E8">				&#x3C;</span><span style="color:#79B8FF"><data-lsp lsp="(alias) const Interactive: {\n    baseSchema: {\n        readonly durationInFrames: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: undefined;\n            readonly min: 1;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly from: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: 0;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly trimBefore: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: 0;\n            readonly min: 0;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly playbackRate: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: 1;\n            readonly min: 0.01;\n            readonly step: 0.1;\n            readonly description: &#x22;Playback rate&#x22;;\n            readonly hiddenFromList: false;\n            readonly keyframable: false;\n        };\n        readonly freeze: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: null;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly hidden: import(&#x22;/vercel/path0/packages/core/dist/cjs/interactivity-schema&#x22;).BooleanFieldSchema;\n        readonly name: import(&#x22;/vercel/path0/packages/core/dist/cjs/interactivity-schema&#x22;).HiddenFieldSchema;\n        readonly showInTimeline: import(&#x22;/vercel/path0/packages/core/dist/cjs/interactivity-schema&#x22;).HiddenFieldSchema;\n    };\n    ... 47 more ...;\n    Ul: InteractiveElementComponent<...>;\n}\nimport Interactive">Interactive</data-lsp></span><span style="color:#79B8FF">.</span><span style="color:#79B8FF"><data-lsp lsp="(property) Div: InteractiveElementComponent<&#x22;div&#x22;>">Div</data-lsp></span></span>\n<span class="line"><span style="color:#B392F0">					</span><span style="color:#B392F0"><data-lsp lsp="(property) name?: string | undefined">name</data-lsp></span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"Photo 1 caption"</span></span>\n<span class="line"><span style="color:#B392F0">					</span><span style="color:#B392F0"><data-lsp lsp="(property) style?: React.CSSProperties | undefined">style</data-lsp></span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{{</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.alignItems?: Property.AlignItems | undefined">alignItems</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'center\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.color?: Property.Color | undefined">color</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">

1\'#2d2620\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.display?: Property.Display | undefined">display</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'flex\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.fontFamily?: Property.FontFamily | undefined">fontFamily</data-lsp></span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.fontSize?: Property.FontSize<string | number> | undefined">fontSize</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">44</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.fontWeight?: Property.FontWeight | undefined">fontWeight</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">600</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.height?: Property.Height<string | number> | undefined">height</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">84</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.justifyContent?: Property.JustifyContent | undefined">justifyContent</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'center\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.lineHeight?: Property.LineHeight<string | number> | undefined">lineHeight</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.marginTop?: Property.MarginTop<string | number> | undefined">marginTop</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">8</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.textAlign?: Property.TextAlign | undefined">textAlign</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'center\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">					}}</span></span>\n<span class="line"><span style="color:#E1E4E8">				></span></span>\n<span class="line"><span style="color:#E1E4E8">					scene A</span></span>\n<span class="line"><span style="color:#E1E4E8">				&#x3C;/</span><span style="color:#79B8FF"><data-lsp lsp="(alias) const Interactive: {\n    baseSchema: {\n        readonly durationInFrames: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: undefined;\n            readonly min: 1;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly from: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: 0;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly trimBefore: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: 0;\n            readonly min: 0;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly playbackRate: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: 1;\n            readonly min: 0.01;\n            readonly step: 0.1;\n            readonly description: &#x22;Playback rate&#x22;;\n            readonly hiddenFromList: false;\n            readonly keyframable: false;\n        };

1\n        readonly freeze: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: null;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly hidden: import(&#x22;/vercel/path0/packages/core/dist/cjs/interactivity-schema&#x22;).BooleanFieldSchema;\n        readonly name: import(&#x22;/vercel/path0/packages/core/dist/cjs/interactivity-schema&#x22;).HiddenFieldSchema;\n        readonly showInTimeline: import(&#x22;/vercel/path0/packages/core/dist/cjs/interactivity-schema&#x22;).HiddenFieldSchema;\n    };\n    ... 47 more ...;\n    Ul: InteractiveElementComponent<...>;\n}\nimport Interactive">Interactive</data-lsp></span><span style="color:#79B8FF">.</span><span style="color:#79B8FF"><data-lsp lsp="(property) Div: InteractiveElementComponent<&#x22;div&#x22;>">Div</data-lsp></span><span style="color:#E1E4E8">></span></span>\n<span class="line"><span style="color:#E1E4E8">			&#x3C;/</span><span style="color:#79B8FF"><data-lsp lsp="(alias) const Interactive: {\n    baseSchema: {\n        readonly durationInFrames: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: undefined;\n            readonly min: 1;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly from: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: 0;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly trimBefore: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: 0;\n            readonly min: 0;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly playbackRate: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: 1;\n            readonly min: 0.01;\n            readonly step: 0.1;\n            readonly description: &#x22;Playback rate&#x22;;\n            readonly hiddenFromList: false;\n            readonly keyframable: false;\n        };\n        readonly freeze: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: null;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly hidden: import(&#x22;/vercel/path0/packages/core/dist/cjs/interactivity-schema&#x22;).BooleanFieldSchema;\n        readonly name: import(&#x22;/vercel/path0/packages/core/dist/cjs/interactivity-schema&#x22;).HiddenFieldSchema;\n        readonly showInTimeline: import(&#x22;/vercel/path0/packages/core/dist/cjs/interactivity-schema&#x22;).HiddenFieldSchema;\n    };\n    ... 47 more ...;\n    Ul: InteractiveElementComponent<...>;\n}\nimport Interactive">Interactive</data-lsp></span><span style="color:#79B8FF">.</span><span style="color:#79B8FF"><data-lsp lsp="(property) Div: InteractiveElementComponent<&#x22;div&#x22;>">Div</data-lsp></span><span style="color:#E1E4E8">></span></span>\n<span class="line"></span>\n<span class="line"><span style="color:#E1E4E8">			&#x3C;</span><span style="color:#79B8FF"><data-lsp lsp="(alias) const Interactive: {\n    baseSchema: {\n        readonly durationInFrames: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: undefined;\n            readonly min: 1;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly from: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: 0;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly trimBefore: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: 0;\n            readonly min: 0;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly playbackRate: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: 1;\n            readonly min: 0.01;\n            readonly step: 0.1;\n            readonly description: &#x22;Playback rate&#x22;;\n            readonly hiddenFromList: false;\n            readonly keyframable: false;\n        };

1\n        readonly freeze: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: null;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly hidden: import(&#x22;/vercel/path0/packages/core/dist/cjs/interactivity-schema&#x22;).BooleanFieldSchema;\n        readonly name: import(&#x22;/vercel/path0/packages/core/dist/cjs/interactivity-schema&#x22;).HiddenFieldSchema;\n        readonly showInTimeline: import(&#x22;/vercel/path0/packages/core/dist/cjs/interactivity-schema&#x22;).HiddenFieldSchema;\n    };\n    ... 47 more ...;\n    Ul: InteractiveElementComponent<...>;\n}\nimport Interactive">Interactive</data-lsp></span><span style="color:#79B8FF">.</span><span style="color:#79B8FF"><data-lsp lsp="(property) Div: InteractiveElementComponent<&#x22;div&#x22;>">Div</data-lsp></span></span>\n<span class="line"><span style="color:#B392F0">				</span><span style="color:#B392F0"><data-lsp lsp="(property) name?: string | undefined">name</data-lsp></span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"Photo 2 card"</span></span>\n<span class="line"><span style="color:#B392F0">				</span><span style="color:#B392F0"><data-lsp lsp="(property) style?: React.CSSProperties | undefined">style</data-lsp></span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{{</span></span>\n<span class="line"><span style="color:#E1E4E8">					</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.backgroundColor?: Property.BackgroundColor | undefined">backgroundColor</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'#fffdfa\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">					</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.boxShadow?: Property.BoxShadow | undefined">boxShadow</data-lsp></span><span style="color:#E1E4E8">:</span></span>\n<span class="line"><span style="color:#9ECBFF">						\'0 28px 58px rgba(8, 5, 3, 0.18), 0 5px 14px rgba(8, 5, 3, 0.08), inset 0 0 0 1px rgba(80, 62, 46, 0.05)\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">					</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.boxSizing?: Property.BoxSizing | undefined">boxSizing</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'border-box\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">					</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.height?: Property.Height<string | number> | undefined">height</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">520</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">					</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.left?: Property.Left<string | number> | undefined">left</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">530</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">					</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.opacity?: Property.Opacity | undefined">opacity</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#B392F0"><data-lsp lsp="(alias) interpolate(input: number, inputRange: readonly number[], outputRange: readonly number[], options?: InterpolateOptions): number (+6 overloads)\nimport interpolate">interpolate</data-lsp></span><span style="color:#E1E4E8">(</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="const frame: number">frame</data-lsp></span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						[</span><span style="color:#79B8FF">20</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">28</span><span style="color:#E1E4E8">, </span><span style="color:#E1E4E8"><data-lsp lsp="const durationInFrames: number">durationInFrames</data-lsp></span><span style="color:#E1E4E8"> </span><span style="color:#F97583">-</span><span style="color:#79B8FF"> 28</span><span style="color:#E1E4E8">, </span><span style="color:#E1E4E8"><data-lsp lsp="const durationInFrames: number">durationInFrames</data-lsp></span><span style="color:#E1E4E8"> </span><span style="color:#F97583">-</span><span style="color:#79B8FF"> 1</span><span style="color:#E1E4E8">],</span></span>\n<span class="line"><span style="color:#E1E4E8">						[</span><span style="color:#79B8FF">0</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">0</span><span style="color:#E1E4E8">],</span></span>\n<span class="line"><span style="color:#E1E4E8">						{</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) easing?: EasingFunction | readonly EasingFunction[] | undefined">

1easing</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#E1E4E8"><data-lsp lsp="(alias) class Easing\nimport Easing">Easing</data-lsp></span><span style="color:#E1E4E8">.</span><span style="color:#B392F0"><data-lsp lsp="(method) Easing.inOut(easing: (t: number) => number): (t: number) => number">inOut</data-lsp></span><span style="color:#E1E4E8">(</span><span style="color:#E1E4E8"><data-lsp lsp="(alias) class Easing\nimport Easing">Easing</data-lsp></span><span style="color:#E1E4E8">.</span><span style="color:#E1E4E8"><data-lsp lsp="(method) Easing.cubic(t: number): number">cubic</data-lsp></span><span style="color:#E1E4E8">),</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) extrapolateLeft?: ExtrapolateType | undefined">extrapolateLeft</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'clamp\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) extrapolateRight?: ExtrapolateType | undefined">extrapolateRight</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'clamp\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						},</span></span>\n<span class="line"><span style="color:#E1E4E8">					),</span></span>\n<span class="line"><span style="color:#E1E4E8">					</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardShorthandProperties<string | number, string &#x26; {}>.padding?: Property.Padding<string | number> | undefined">padding</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'22px 22px 16px\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">					</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.position?: Property.Position | undefined">position</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'absolute\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">					</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.rotate?: Property.Rotate | undefined">rotate</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#B392F0"><data-lsp lsp="(alias) interpolate(input: number, inputRange: readonly number[], outputRange: readonly string[], options?: InterpolateOptions): string (+6 overloads)\nimport interpolate">interpolate</data-lsp></span><span style="color:#E1E4E8">(</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="const frame: number">frame</data-lsp></span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						[</span><span style="color:#79B8FF">20</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">46</span><span style="color:#E1E4E8">, </span><span style="color:#E1E4E8"><data-lsp lsp="const durationInFrames: number">durationInFrames</data-lsp></span><span style="color:#E1E4E8"> </span><span style="color:#F97583">-</span><span style="color:#79B8FF"> 28</span><span style="color:#E1E4E8">, </span><span style="color:#E1E4E8"><data-lsp lsp="const durationInFrames: number">durationInFrames</data-lsp></span><span style="color:#E1E4E8"> </span><span style="color:#F97583">-</span><span style="color:#79B8FF"> 1</span><span style="color:#E1E4E8">],</span></span>\n<span class="line"><span style="color:#E1E4E8">						[</span><span style="color:#9ECBFF">\'16deg\'</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">\'6deg\'</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">\'6deg\'</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">\'15deg\'</span><span style="color:#E1E4E8">],</span></span>\n<span class="line"><span style="color:#E1E4E8">						{</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) easing?: EasingFunction | readonly EasingFunction[] | undefined">

1easing</data-lsp></span><span style="color:#E1E4E8">: [</span></span>\n<span class="line"><span style="color:#E1E4E8">								</span><span style="color:#E1E4E8"><data-lsp lsp="(alias) class Easing\nimport Easing">Easing</data-lsp></span><span style="color:#E1E4E8">.</span><span style="color:#B392F0"><data-lsp lsp="(method) Easing.bezier(x1: number, y1: number, x2: number, y2: number): (t: number) => number">bezier</data-lsp></span><span style="color:#E1E4E8">(</span><span style="color:#79B8FF">0.16</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">0.3</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">),</span></span>\n<span class="line"><span style="color:#E1E4E8">								</span><span style="color:#E1E4E8"><data-lsp lsp="(alias) class Easing\nimport Easing">Easing</data-lsp></span><span style="color:#E1E4E8">.</span><span style="color:#B392F0"><data-lsp lsp="(method) Easing.spring({ allowTail, durationRestThreshold, ...config }?: EasingSpringConfig): (t: number) => number">spring</data-lsp></span><span style="color:#E1E4E8">({</span></span>\n<span class="line"><span style="color:#E1E4E8">									</span><span style="color:#E1E4E8"><data-lsp lsp="(property) damping?: number | undefined">damping</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">200</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">									</span><span style="color:#E1E4E8"><data-lsp lsp="(property) mass?: number | undefined">mass</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">									</span><span style="color:#E1E4E8"><data-lsp lsp="(property) stiffness?: number | undefined">stiffness</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">100</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">									</span><span style="color:#E1E4E8"><data-lsp lsp="(property) allowTail?: boolean | undefined">allowTail</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">true</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">									</span><span style="color:#E1E4E8"><data-lsp lsp="(property) durationRestThreshold?: number | undefined">durationRestThreshold</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">0.02</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">									</span><span style="color:#E1E4E8"><data-lsp lsp="(property) overshootClamping?: boolean | undefined">overshootClamping</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">false</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">								}),</span></span>\n<span class="line"><span style="color:#E1E4E8">								</span><span style="color:#E1E4E8"><data-lsp lsp="(alias) class Easing\nimport Easing">Easing</data-lsp></span><span style="color:#E1E4E8">.</span><span style="color:#B392F0"><data-lsp lsp="(method) Easing.bezier(x1: number, y1: number, x2: number, y2: number): (t: number) => number">bezier</data-lsp></span><span style="color:#E1E4E8">(</span><span style="color:#79B8FF">0.16</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">0.3</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">),</span></span>\n<span class="line"><span style="color:#E1E4E8">							],</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) extrapolateLeft?: ExtrapolateType | undefined">extrapolateLeft</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'clamp\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) extrapolateRight?: ExtrapolateType | undefined">extrapolateRight</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'clamp\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						},</span></span>\n<span class="line"><span style="color:#E1E4E8">					),</span></span>\n<span class="line"><span style="color:#E1E4E8">					</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.scale?: Property.Scale | undefined">scale</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#B392F0"><data-lsp lsp="(alias) interpolate(input: number, inputRange: readonly number[], outputRange: readonly number[], options?: InterpolateOptions): number (+6 overloads)\nimport interpolate">interpolate</data-lsp></span><span style="color:#E1E4E8">(</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="const frame: number">frame</data-lsp></span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						[</span><span style="color:#E1E4E8"><data-lsp lsp="const durationInFrames: number">durationInFrames</data-lsp></span><span style="color:#E1E4E8"> </span><span style="color:#F97583">-</span><span style="color:#79B8FF"> 28</span><span style="color:#E1E4E8">, </span><span style="color:#E1E4E8"><data-lsp lsp="const durationInFrames: number">durationInFrames</data-lsp></span><span style="color:#E1E4E8"> </span><span style="color:#F97583">-</span><span style="color:#79B8FF"> 1</span><span style="color:#E1E4E8">],</span></span>\n<span class="line"><span style="color:#E1E4E8">						[</span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">1.1</span><span style="color:#E1E4E8">],</span></span>\n<span class="line"><span style="color:#E1E4E8">						{</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) easing?: EasingFunction | readonly EasingFunction[] | undefined">

1easing</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#E1E4E8"><data-lsp lsp="(alias) class Easing\nimport Easing">Easing</data-lsp></span><span style="color:#E1E4E8">.</span><span style="color:#B392F0"><data-lsp lsp="(method) Easing.bezier(x1: number, y1: number, x2: number, y2: number): (t: number) => number">bezier</data-lsp></span><span style="color:#E1E4E8">(</span><span style="color:#79B8FF">0.16</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">0.3</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">),</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) extrapolateLeft?: ExtrapolateType | undefined">extrapolateLeft</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'clamp\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) extrapolateRight?: ExtrapolateType | undefined">extrapolateRight</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'clamp\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) output?: InterpolateOutputOption | undefined">output</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'perceptual-scale\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						},</span></span>\n<span class="line"><span style="color:#E1E4E8">					),</span></span>\n<span class="line"><span style="color:#E1E4E8">					</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.top?: Property.Top<string | number> | undefined">top</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">35</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">					</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.translate?: Property.Translate<string | number> | undefined">translate</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#B392F0"><data-lsp lsp="(alias) interpolate(input: number, inputRange: readonly number[], outputRange: readonly string[], options?: InterpolateOptions): string (+6 overloads)\nimport interpolate">interpolate</data-lsp></span><span style="color:#E1E4E8">(</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="const frame: number">frame</data-lsp></span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						[</span><span style="color:#79B8FF">20</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">46</span><span style="color:#E1E4E8">, </span><span style="color:#E1E4E8"><data-lsp lsp="const durationInFrames: number">durationInFrames</data-lsp></span><span style="color:#E1E4E8"> </span><span style="color:#F97583">-</span><span style="color:#79B8FF"> 28</span><span style="color:#E1E4E8">, </span><span style="color:#E1E4E8"><data-lsp lsp="const durationInFrames: number">durationInFrames</data-lsp></span><span style="color:#E1E4E8"> </span><span style="color:#F97583">-</span><span style="color:#79B8FF"> 1</span><span style="color:#E1E4E8">],</span></span>\n<span class="line"><span style="color:#E1E4E8">						[</span><span style="color:#9ECBFF">\'340px -620px\'</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">\'0px 0px\'</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">\'0px 0px\'</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">\'280px -720px\'</span><span style="color:#E1E4E8">],</span></span>\n<span class="line"><span style="color:#E1E4E8">						{</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) easing?: EasingFunction | readonly EasingFunction[] | undefined">

1easing</data-lsp></span><span style="color:#E1E4E8">: [</span></span>\n<span class="line"><span style="color:#E1E4E8">								</span><span style="color:#E1E4E8"><data-lsp lsp="(alias) class Easing\nimport Easing">Easing</data-lsp></span><span style="color:#E1E4E8">.</span><span style="color:#B392F0"><data-lsp lsp="(method) Easing.bezier(x1: number, y1: number, x2: number, y2: number): (t: number) => number">bezier</data-lsp></span><span style="color:#E1E4E8">(</span><span style="color:#79B8FF">0.16</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">0.3</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">),</span></span>\n<span class="line"><span style="color:#E1E4E8">								</span><span style="color:#E1E4E8"><data-lsp lsp="(alias) class Easing\nimport Easing">Easing</data-lsp></span><span style="color:#E1E4E8">.</span><span style="color:#B392F0"><data-lsp lsp="(method) Easing.spring({ allowTail, durationRestThreshold, ...config }?: EasingSpringConfig): (t: number) => number">spring</data-lsp></span><span style="color:#E1E4E8">({</span></span>\n<span class="line"><span style="color:#E1E4E8">									</span><span style="color:#E1E4E8"><data-lsp lsp="(property) damping?: number | undefined">damping</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">200</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">									</span><span style="color:#E1E4E8"><data-lsp lsp="(property) mass?: number | undefined">mass</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">									</span><span style="color:#E1E4E8"><data-lsp lsp="(property) stiffness?: number | undefined">stiffness</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">100</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">									</span><span style="color:#E1E4E8"><data-lsp lsp="(property) allowTail?: boolean | undefined">allowTail</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">true</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">									</span><span style="color:#E1E4E8"><data-lsp lsp="(property) durationRestThreshold?: number | undefined">durationRestThreshold</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">0.02</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">									</span><span style="color:#E1E4E8"><data-lsp lsp="(property) overshootClamping?: boolean | undefined">overshootClamping</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">false</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">								}),</span></span>\n<span class="line"><span style="color:#E1E4E8">								</span><span style="color:#E1E4E8"><data-lsp lsp="(alias) class Easing\nimport Easing">Easing</data-lsp></span><span style="color:#E1E4E8">.</span><span style="color:#B392F0"><data-lsp lsp="(method) Easing.bezier(x1: number, y1: number, x2: number, y2: number): (t: number) => number">bezier</data-lsp></span><span style="color:#E1E4E8">(</span><span style="color:#79B8FF">0.16</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">0.3</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">),</span></span>\n<span class="line"><span style="color:#E1E4E8">							],</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) extrapolateLeft?: ExtrapolateType | undefined">extrapolateLeft</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'clamp\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) extrapolateRight?: ExtrapolateType | undefined">extrapolateRight</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'clamp\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						},</span></span>\n<span class="line"><span style="color:#E1E4E8">					),</span></span>\n<span class="line"><span style="color:#E1E4E8">					</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.width?: Property.Width<string | number> | undefined">width</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">420</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">					</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.willChange?: Property.WillChange | undefined">willChange</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'opacity, transform\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">					</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.zIndex?: Property.ZIndex | undefined">zIndex</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">2</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">				}}</span></span>\n<span class="line"><span style="color:#E1E4E8">			></span></span>\n<span class="line"><span style="color:#E1E4E8">				&#x3C;</span><span style="color:#79B8FF">

1<data-lsp lsp="(alias) const Interactive: {\n    baseSchema: {\n        readonly durationInFrames: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: undefined;\n            readonly min: 1;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly from: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: 0;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly trimBefore: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: 0;\n            readonly min: 0;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly playbackRate: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: 1;\n            readonly min: 0.01;\n            readonly step: 0.1;\n            readonly description: &#x22;Playback rate&#x22;;\n            readonly hiddenFromList: false;\n            readonly keyframable: false;\n        };\n        readonly freeze: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: null;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly hidden: import(&#x22;/vercel/path0/packages/core/dist/cjs/interactivity-schema&#x22;).BooleanFieldSchema;\n        readonly name: import(&#x22;/vercel/path0/packages/core/dist/cjs/interactivity-schema&#x22;).HiddenFieldSchema;\n        readonly showInTimeline: import(&#x22;/vercel/path0/packages/core/dist/cjs/interactivity-schema&#x22;).HiddenFieldSchema;\n    };\n    ... 47 more ...;\n    Ul: InteractiveElementComponent<...>;\n}\nimport Interactive">Interactive</data-lsp></span><span style="color:#79B8FF">.</span><span style="color:#79B8FF"><data-lsp lsp="(property) Div: InteractiveElementComponent<&#x22;div&#x22;>">Div</data-lsp></span></span>\n<span class="line"><span style="color:#B392F0">					</span><span style="color:#B392F0"><data-lsp lsp="(property) name?: string | undefined">name</data-lsp></span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"Photo 2 tape"</span></span>\n<span class="line"><span style="color:#B392F0">					</span><span style="color:#B392F0"><data-lsp lsp="(property) style?: React.CSSProperties | undefined">style</data-lsp></span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{{</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.backgroundColor?: Property.BackgroundColor | undefined">backgroundColor</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'#d9c58f\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.boxShadow?: Property.BoxShadow | undefined">boxShadow</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'0 2px 8px rgba(67, 47, 29, 0.14)\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.height?: Property.Height<string | number> | undefined">height</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">48</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.left?: Property.Left<string | number> | undefined">left</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">135</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.opacity?: Property.Opacity | undefined">opacity</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">0.68</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.position?: Property.Position | undefined">position</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'absolute\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.rotate?: Property.Rotate | undefined">rotate</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'4deg\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.top?: Property.Top<string | number> | undefined">top</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#F97583">-</span><span style="color:#79B8FF">21</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.width?: Property.Width<string | number> | undefined">width</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">150</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.zIndex?: Property.ZIndex | undefined">zIndex</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">2</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">					}}</span></span>\n<span class="line"><span style="color:#E1E4E8">				/></span></span>\n<span class="line"><span style="color:#E1E4E8">				&#x3C;</span><span style="color:#85E89D"><data-lsp lsp="(property) React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>">div</data-lsp></span></span>\n<span class="line"><span style="color:#B392F0">					</span><span style="color:#B392F0"><data-lsp lsp="(property) React.HTMLAttributes<HTMLDivElement>.style?: React.CSSProperties | undefined">style</data-lsp></span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{{</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>

1.backgroundColor?: Property.BackgroundColor | undefined">backgroundColor</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'#d8cbb8\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.height?: Property.Height<string | number> | undefined">height</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">380</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardShorthandProperties<string | number, string &#x26; {}>.overflow?: Property.Overflow | undefined">overflow</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'hidden\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.position?: Property.Position | undefined">position</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'relative\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.width?: Property.Width<string | number> | undefined">width</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'100%\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">					}}</span></span>\n<span class="line"><span style="color:#E1E4E8">				></span></span>\n<span class="line"><span style="color:#E1E4E8">					&#x3C;</span><span style="color:#79B8FF"><data-lsp lsp="(alias) const Img: React.ComponentType<NativeImgProps &#x26; {\n    readonly maxRetries?: number | undefined;\n    readonly pauseWhenLoading?: boolean | undefined;\n    readonly delayRenderRetries?: number | undefined;\n    readonly delayRenderTimeoutInMilliseconds?: number | undefined;\n    readonly onImageFrame?: ((imageElement: HTMLImageElement) => void) | undefined;\n    readonly onImageError?: ((error: Error) => void) | undefined;\n    readonly src: string;\n    readonly effects?: EffectsProp | undefined;\n    readonly showInTimeline?: boolean | undefined;\n    readonly name?: string | undefined;\n} &#x26; Omit<...> &#x26; InteractiveCropProps &#x26; InteractivePremountProps>\nimport Img">Img</data-lsp></span></span>\n<span class="line"><span style="color:#B392F0">						</span><span style="color:#B392F0"><data-lsp lsp="(property) name?: string | undefined">name</data-lsp></span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"Photo 2"</span></span>\n<span class="line"><span style="color:#B392F0">						</span><span style="color:#B392F0"><data-lsp lsp="(property) alt?: string | undefined">alt</data-lsp></span><span style="color:#F97583">=</span><span style="color:#9ECBFF">""</span></span>\n<span class="line"><span style="color:#B392F0">						</span><span style="color:#B392F0"><data-lsp lsp="(property) src: string">src</data-lsp></span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"https://remotion.media/transition-bg-pink.jpg"</span></span>\n<span class="line"><span style="color:#B392F0">						</span><span style="color:#B392F0"><data-lsp lsp="(property) style?: React.CSSProperties | undefined">style</data-lsp></span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{{</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.height?: Property.Height<string | number> | undefined">height</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'100%\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.objectFit?: Property.ObjectFit | undefined">objectFit</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'cover\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.width?: Property.Width<string | number> | undefined">width</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'100%\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						}}</span></span>\n<span class="line"><span style="color:#E1E4E8">					/></span></span>\n<span class="line"><span style="color:#E1E4E8">					&#x3C;</span><span style="color:#85E89D"><data-lsp lsp="(property) React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>">div</data-lsp></span></span>\n<span class="line"><span style="color:#B392F0">						</span><span style="color:#B392F0"><data-lsp lsp="(property) React.HTMLAttributes<HTMLDivElement>.style?: React.CSSProperties | undefined">style</data-lsp></span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{{</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.alignItems?: Property.AlignItems | undefined">alignItems</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'center\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.color?: Property.Color | undefined">color</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'white\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.display?: Property.Display | undefined">display</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'flex\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.fontFamily?: Property.FontFamily | undefined">fontFamily</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'sans-serif\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.fontSize?: Property.FontSize<string | number> | undefined">fontSize</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">160</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.fontWeight?: Property.FontWeight | undefined">fontWeight</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">900</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardShorthandProperties<string | number, string &#x26; {}>.inset?: Property.Inset<string | number> | undefined">inset</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">0</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.justifyContent?: Property.JustifyContent | undefined">justifyContent</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'center\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.position?: Property.Position | undefined">position</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'absolute\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.textShadow?: Property.TextShadow | undefined">textShadow</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">

1\'0 4px 30px rgba(0, 0, 0, 0.55)\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						}}</span></span>\n<span class="line"><span style="color:#E1E4E8">					></span></span>\n<span class="line"><span style="color:#E1E4E8">						B</span></span>\n<span class="line"><span style="color:#E1E4E8">					&#x3C;/</span><span style="color:#85E89D"><data-lsp lsp="(property) React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>">div</data-lsp></span><span style="color:#E1E4E8">></span></span>\n<span class="line"><span style="color:#E1E4E8">				&#x3C;/</span><span style="color:#85E89D"><data-lsp lsp="(property) React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>">div</data-lsp></span><span style="color:#E1E4E8">></span></span>\n<span class="line"><span style="color:#E1E4E8">				&#x3C;</span><span style="color:#79B8FF"><data-lsp lsp="(alias) const Interactive: {\n    baseSchema: {\n        readonly durationInFrames: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: undefined;\n            readonly min: 1;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly from: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: 0;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly trimBefore: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: 0;\n            readonly min: 0;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly playbackRate: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: 1;\n            readonly min: 0.01;\n            readonly step: 0.1;\n            readonly description: &#x22;Playback rate&#x22;;\n            readonly hiddenFromList: false;\n            readonly keyframable: false;\n        };\n        readonly freeze: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: null;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly hidden: import(&#x22;/vercel/path0/packages/core/dist/cjs/interactivity-schema&#x22;).BooleanFieldSchema;\n        readonly name: import(&#x22;/vercel/path0/packages/core/dist/cjs/interactivity-schema&#x22;).HiddenFieldSchema;\n        readonly showInTimeline: import(&#x22;/vercel/path0/packages/core/dist/cjs/interactivity-schema&#x22;).HiddenFieldSchema;\n    };\n    ... 47 more ...;\n    Ul: InteractiveElementComponent<...>;\n}\nimport Interactive">Interactive</data-lsp></span><span style="color:#79B8FF">.</span><span style="color:#79B8FF"><data-lsp lsp="(property) Div: InteractiveElementComponent<&#x22;div&#x22;>">Div</data-lsp></span></span>\n<span class="line"><span style="color:#B392F0">					</span><span style="color:#B392F0"><data-lsp lsp="(property) name?: string | undefined">name</data-lsp></span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"Photo 2 caption"</span></span>\n<span class="line"><span style="color:#B392F0">					</span><span style="color:#B392F0"><data-lsp lsp="(property) style?: React.CSSProperties | undefined">style</data-lsp></span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{{</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.alignItems?: Property.AlignItems | undefined">alignItems</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'center\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.color?: Property.Color | undefined">color</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">

1\'#2d2620\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.display?: Property.Display | undefined">display</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'flex\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.fontFamily?: Property.FontFamily | undefined">fontFamily</data-lsp></span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.fontSize?: Property.FontSize<string | number> | undefined">fontSize</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">46</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.fontWeight?: Property.FontWeight | undefined">fontWeight</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">600</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.height?: Property.Height<string | number> | undefined">height</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">84</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.justifyContent?: Property.JustifyContent | undefined">justifyContent</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'center\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.lineHeight?: Property.LineHeight<string | number> | undefined">lineHeight</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.marginTop?: Property.MarginTop<string | number> | undefined">marginTop</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">8</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.textAlign?: Property.TextAlign | undefined">textAlign</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'center\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">					}}</span></span>\n<span class="line"><span style="color:#E1E4E8">				></span></span>\n<span class="line"><span style="color:#E1E4E8">					scene B</span></span>\n<span class="line"><span style="color:#E1E4E8">				&#x3C;/</span><span style="color:#79B8FF"><data-lsp lsp="(alias) const Interactive: {\n    baseSchema: {\n        readonly durationInFrames: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: undefined;\n            readonly min: 1;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly from: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: 0;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly trimBefore: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: 0;\n            readonly min: 0;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly playbackRate: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: 1;\n            readonly min: 0.01;\n            readonly step: 0.1;\n            readonly description: &#x22;Playback rate&#x22;;\n            readonly hiddenFromList: false;\n            readonly keyframable: false;\n        };

1\n        readonly freeze: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: null;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly hidden: import(&#x22;/vercel/path0/packages/core/dist/cjs/interactivity-schema&#x22;).BooleanFieldSchema;\n        readonly name: import(&#x22;/vercel/path0/packages/core/dist/cjs/interactivity-schema&#x22;).HiddenFieldSchema;\n        readonly showInTimeline: import(&#x22;/vercel/path0/packages/core/dist/cjs/interactivity-schema&#x22;).HiddenFieldSchema;\n    };\n    ... 47 more ...;\n    Ul: InteractiveElementComponent<...>;\n}\nimport Interactive">Interactive</data-lsp></span><span style="color:#79B8FF">.</span><span style="color:#79B8FF"><data-lsp lsp="(property) Div: InteractiveElementComponent<&#x22;div&#x22;>">Div</data-lsp></span><span style="color:#E1E4E8">></span></span>\n<span class="line"><span style="color:#E1E4E8">			&#x3C;/</span><span style="color:#79B8FF"><data-lsp lsp="(alias) const Interactive: {\n    baseSchema: {\n        readonly durationInFrames: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: undefined;\n            readonly min: 1;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly from: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: 0;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly trimBefore: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: 0;\n            readonly min: 0;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly playbackRate: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: 1;\n            readonly min: 0.01;\n            readonly step: 0.1;\n            readonly description: &#x22;Playback rate&#x22;;\n            readonly hiddenFromList: false;\n            readonly keyframable: false;\n        };\n        readonly freeze: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: null;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly hidden: import(&#x22;/vercel/path0/packages/core/dist/cjs/interactivity-schema&#x22;).BooleanFieldSchema;\n        readonly name: import(&#x22;/vercel/path0/packages/core/dist/cjs/interactivity-schema&#x22;).HiddenFieldSchema;\n        readonly showInTimeline: import(&#x22;/vercel/path0/packages/core/dist/cjs/interactivity-schema&#x22;).HiddenFieldSchema;\n    };\n    ... 47 more ...;\n    Ul: InteractiveElementComponent<...>;\n}\nimport Interactive">Interactive</data-lsp></span><span style="color:#79B8FF">.</span><span style="color:#79B8FF"><data-lsp lsp="(property) Div: InteractiveElementComponent<&#x22;div&#x22;>">Div</data-lsp></span><span style="color:#E1E4E8">></span></span>\n<span class="line"></span>\n<span class="line"><span style="color:#E1E4E8">			&#x3C;</span><span style="color:#79B8FF"><data-lsp lsp="(alias) const Interactive: {\n    baseSchema: {\n        readonly durationInFrames: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: undefined;\n            readonly min: 1;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly from: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: 0;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly trimBefore: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: 0;\n            readonly min: 0;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly playbackRate: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: 1;\n            readonly min: 0.01;\n            readonly step: 0.1;\n            readonly description: &#x22;Playback rate&#x22;;\n            readonly hiddenFromList: false;\n            readonly keyframable: false;\n        };

1\n        readonly freeze: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: null;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly hidden: import(&#x22;/vercel/path0/packages/core/dist/cjs/interactivity-schema&#x22;).BooleanFieldSchema;\n        readonly name: import(&#x22;/vercel/path0/packages/core/dist/cjs/interactivity-schema&#x22;).HiddenFieldSchema;\n        readonly showInTimeline: import(&#x22;/vercel/path0/packages/core/dist/cjs/interactivity-schema&#x22;).HiddenFieldSchema;\n    };\n    ... 47 more ...;\n    Ul: InteractiveElementComponent<...>;\n}\nimport Interactive">Interactive</data-lsp></span><span style="color:#79B8FF">.</span><span style="color:#79B8FF"><data-lsp lsp="(property) Div: InteractiveElementComponent<&#x22;div&#x22;>">Div</data-lsp></span></span>\n<span class="line"><span style="color:#B392F0">				</span><span style="color:#B392F0"><data-lsp lsp="(property) name?: string | undefined">name</data-lsp></span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"Photo 3 card"</span></span>\n<span class="line"><span style="color:#B392F0">				</span><span style="color:#B392F0"><data-lsp lsp="(property) style?: React.CSSProperties | undefined">style</data-lsp></span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{{</span></span>\n<span class="line"><span style="color:#E1E4E8">					</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.backgroundColor?: Property.BackgroundColor | undefined">backgroundColor</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'#fffdfa\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">					</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.boxShadow?: Property.BoxShadow | undefined">boxShadow</data-lsp></span><span style="color:#E1E4E8">:</span></span>\n<span class="line"><span style="color:#9ECBFF">						\'0 32px 64px rgba(8, 5, 3, 0.2), 0 6px 16px rgba(8, 5, 3, 0.09), inset 0 0 0 1px rgba(80, 62, 46, 0.05)\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">					</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.boxSizing?: Property.BoxSizing | undefined">boxSizing</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'border-box\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">					</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.height?: Property.Height<string | number> | undefined">height</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">520</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">					</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.left?: Property.Left<string | number> | undefined">left</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">960</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">					</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.opacity?: Property.Opacity | undefined">opacity</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#B392F0"><data-lsp lsp="(alias) interpolate(input: number, inputRange: readonly number[], outputRange: readonly number[], options?: InterpolateOptions): number (+6 overloads)\nimport interpolate">interpolate</data-lsp></span><span style="color:#E1E4E8">(</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="const frame: number">frame</data-lsp></span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						[</span><span style="color:#79B8FF">32</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">40</span><span style="color:#E1E4E8">, </span><span style="color:#E1E4E8"><data-lsp lsp="const durationInFrames: number">durationInFrames</data-lsp></span><span style="color:#E1E4E8"> </span><span style="color:#F97583">-</span><span style="color:#79B8FF"> 26</span><span style="color:#E1E4E8">, </span><span style="color:#E1E4E8"><data-lsp lsp="const durationInFrames: number">durationInFrames</data-lsp></span><span style="color:#E1E4E8"> </span><span style="color:#F97583">-</span><span style="color:#79B8FF"> 1</span><span style="color:#E1E4E8">],</span></span>\n<span class="line"><span style="color:#E1E4E8">						[</span><span style="color:#79B8FF">0</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">0</span><span style="color:#E1E4E8">],</span></span>\n<span class="line"><span style="color:#E1E4E8">						{</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) easing?: EasingFunction | readonly EasingFunction[] | undefined">

1easing</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#E1E4E8"><data-lsp lsp="(alias) class Easing\nimport Easing">Easing</data-lsp></span><span style="color:#E1E4E8">.</span><span style="color:#B392F0"><data-lsp lsp="(method) Easing.inOut(easing: (t: number) => number): (t: number) => number">inOut</data-lsp></span><span style="color:#E1E4E8">(</span><span style="color:#E1E4E8"><data-lsp lsp="(alias) class Easing\nimport Easing">Easing</data-lsp></span><span style="color:#E1E4E8">.</span><span style="color:#E1E4E8"><data-lsp lsp="(method) Easing.cubic(t: number): number">cubic</data-lsp></span><span style="color:#E1E4E8">),</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) extrapolateLeft?: ExtrapolateType | undefined">extrapolateLeft</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'clamp\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) extrapolateRight?: ExtrapolateType | undefined">extrapolateRight</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'clamp\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						},</span></span>\n<span class="line"><span style="color:#E1E4E8">					),</span></span>\n<span class="line"><span style="color:#E1E4E8">					</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardShorthandProperties<string | number, string &#x26; {}>.padding?: Property.Padding<string | number> | undefined">padding</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'22px 22px 16px\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">					</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.position?: Property.Position | undefined">position</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'absolute\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">					</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.rotate?: Property.Rotate | undefined">rotate</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#B392F0"><data-lsp lsp="(alias) interpolate(input: number, inputRange: readonly number[], outputRange: readonly string[], options?: InterpolateOptions): string (+6 overloads)\nimport interpolate">interpolate</data-lsp></span><span style="color:#E1E4E8">(</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="const frame: number">frame</data-lsp></span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						[</span><span style="color:#79B8FF">32</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">58</span><span style="color:#E1E4E8">, </span><span style="color:#E1E4E8"><data-lsp lsp="const durationInFrames: number">durationInFrames</data-lsp></span><span style="color:#E1E4E8"> </span><span style="color:#F97583">-</span><span style="color:#79B8FF"> 26</span><span style="color:#E1E4E8">, </span><span style="color:#E1E4E8"><data-lsp lsp="const durationInFrames: number">durationInFrames</data-lsp></span><span style="color:#E1E4E8"> </span><span style="color:#F97583">-</span><span style="color:#79B8FF"> 1</span><span style="color:#E1E4E8">],</span></span>\n<span class="line"><span style="color:#E1E4E8">						[</span><span style="color:#9ECBFF">\'15deg\'</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">\'-3deg\'</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">\'-3deg\'</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">\'10deg\'</span><span style="color:#E1E4E8">],</span></span>\n<span class="line"><span style="color:#E1E4E8">						{</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) easing?: EasingFunction | readonly EasingFunction[] | undefined">

1easing</data-lsp></span><span style="color:#E1E4E8">: [</span></span>\n<span class="line"><span style="color:#E1E4E8">								</span><span style="color:#E1E4E8"><data-lsp lsp="(alias) class Easing\nimport Easing">Easing</data-lsp></span><span style="color:#E1E4E8">.</span><span style="color:#B392F0"><data-lsp lsp="(method) Easing.bezier(x1: number, y1: number, x2: number, y2: number): (t: number) => number">bezier</data-lsp></span><span style="color:#E1E4E8">(</span><span style="color:#79B8FF">0.16</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">0.3</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">),</span></span>\n<span class="line"><span style="color:#E1E4E8">								</span><span style="color:#E1E4E8"><data-lsp lsp="(alias) class Easing\nimport Easing">Easing</data-lsp></span><span style="color:#E1E4E8">.</span><span style="color:#B392F0"><data-lsp lsp="(method) Easing.spring({ allowTail, durationRestThreshold, ...config }?: EasingSpringConfig): (t: number) => number">spring</data-lsp></span><span style="color:#E1E4E8">({</span></span>\n<span class="line"><span style="color:#E1E4E8">									</span><span style="color:#E1E4E8"><data-lsp lsp="(property) damping?: number | undefined">damping</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">200</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">									</span><span style="color:#E1E4E8"><data-lsp lsp="(property) mass?: number | undefined">mass</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">									</span><span style="color:#E1E4E8"><data-lsp lsp="(property) stiffness?: number | undefined">stiffness</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">100</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">									</span><span style="color:#E1E4E8"><data-lsp lsp="(property) allowTail?: boolean | undefined">allowTail</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">true</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">									</span><span style="color:#E1E4E8"><data-lsp lsp="(property) durationRestThreshold?: number | undefined">durationRestThreshold</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">0.02</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">									</span><span style="color:#E1E4E8"><data-lsp lsp="(property) overshootClamping?: boolean | undefined">overshootClamping</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">false</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">								}),</span></span>\n<span class="line"><span style="color:#E1E4E8">								</span><span style="color:#E1E4E8"><data-lsp lsp="(alias) class Easing\nimport Easing">Easing</data-lsp></span><span style="color:#E1E4E8">.</span><span style="color:#B392F0"><data-lsp lsp="(method) Easing.bezier(x1: number, y1: number, x2: number, y2: number): (t: number) => number">bezier</data-lsp></span><span style="color:#E1E4E8">(</span><span style="color:#79B8FF">0.16</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">0.3</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">),</span></span>\n<span class="line"><span style="color:#E1E4E8">							],</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) extrapolateLeft?: ExtrapolateType | undefined">extrapolateLeft</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'clamp\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) extrapolateRight?: ExtrapolateType | undefined">extrapolateRight</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'clamp\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						},</span></span>\n<span class="line"><span style="color:#E1E4E8">					),</span></span>\n<span class="line"><span style="color:#E1E4E8">					</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.scale?: Property.Scale | undefined">scale</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#B392F0"><data-lsp lsp="(alias) interpolate(input: number, inputRange: readonly number[], outputRange: readonly number[], options?: InterpolateOptions): number (+6 overloads)\nimport interpolate">interpolate</data-lsp></span><span style="color:#E1E4E8">(</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="const frame: number">frame</data-lsp></span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						[</span><span style="color:#E1E4E8"><data-lsp lsp="const durationInFrames: number">durationInFrames</data-lsp></span><span style="color:#E1E4E8"> </span><span style="color:#F97583">-</span><span style="color:#79B8FF"> 26</span><span style="color:#E1E4E8">, </span><span style="color:#E1E4E8"><data-lsp lsp="const durationInFrames: number">durationInFrames</data-lsp></span><span style="color:#E1E4E8"> </span><span style="color:#F97583">-</span><span style="color:#79B8FF"> 1</span><span style="color:#E1E4E8">],</span></span>\n<span class="line"><span style="color:#E1E4E8">						[</span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">1.12</span><span style="color:#E1E4E8">],</span></span>\n<span class="line"><span style="color:#E1E4E8">						{</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) easing?: EasingFunction | readonly EasingFunction[] | undefined">

1easing</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#E1E4E8"><data-lsp lsp="(alias) class Easing\nimport Easing">Easing</data-lsp></span><span style="color:#E1E4E8">.</span><span style="color:#B392F0"><data-lsp lsp="(method) Easing.bezier(x1: number, y1: number, x2: number, y2: number): (t: number) => number">bezier</data-lsp></span><span style="color:#E1E4E8">(</span><span style="color:#79B8FF">0.16</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">0.3</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">),</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) extrapolateLeft?: ExtrapolateType | undefined">extrapolateLeft</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'clamp\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) extrapolateRight?: ExtrapolateType | undefined">extrapolateRight</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'clamp\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) output?: InterpolateOutputOption | undefined">output</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'perceptual-scale\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						},</span></span>\n<span class="line"><span style="color:#E1E4E8">					),</span></span>\n<span class="line"><span style="color:#E1E4E8">					</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.top?: Property.Top<string | number> | undefined">top</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">85</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">					</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.translate?: Property.Translate<string | number> | undefined">translate</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#B392F0"><data-lsp lsp="(alias) interpolate(input: number, inputRange: readonly number[], outputRange: readonly string[], options?: InterpolateOptions): string (+6 overloads)\nimport interpolate">interpolate</data-lsp></span><span style="color:#E1E4E8">(</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="const frame: number">frame</data-lsp></span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						[</span><span style="color:#79B8FF">32</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">58</span><span style="color:#E1E4E8">, </span><span style="color:#E1E4E8"><data-lsp lsp="const durationInFrames: number">durationInFrames</data-lsp></span><span style="color:#E1E4E8"> </span><span style="color:#F97583">-</span><span style="color:#79B8FF"> 26</span><span style="color:#E1E4E8">, </span><span style="color:#E1E4E8"><data-lsp lsp="const durationInFrames: number">durationInFrames</data-lsp></span><span style="color:#E1E4E8"> </span><span style="color:#F97583">-</span><span style="color:#79B8FF"> 1</span><span style="color:#E1E4E8">],</span></span>\n<span class="line"><span style="color:#E1E4E8">						[</span><span style="color:#9ECBFF">\'680px 380px\'</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">\'0px 0px\'</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">\'0px 0px\'</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">\'820px 240px\'</span><span style="color:#E1E4E8">],</span></span>\n<span class="line"><span style="color:#E1E4E8">						{</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) easing?: EasingFunction | readonly EasingFunction[] | undefined">

1easing</data-lsp></span><span style="color:#E1E4E8">: [</span></span>\n<span class="line"><span style="color:#E1E4E8">								</span><span style="color:#E1E4E8"><data-lsp lsp="(alias) class Easing\nimport Easing">Easing</data-lsp></span><span style="color:#E1E4E8">.</span><span style="color:#B392F0"><data-lsp lsp="(method) Easing.bezier(x1: number, y1: number, x2: number, y2: number): (t: number) => number">bezier</data-lsp></span><span style="color:#E1E4E8">(</span><span style="color:#79B8FF">0.16</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">0.3</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">),</span></span>\n<span class="line"><span style="color:#E1E4E8">								</span><span style="color:#E1E4E8"><data-lsp lsp="(alias) class Easing\nimport Easing">Easing</data-lsp></span><span style="color:#E1E4E8">.</span><span style="color:#B392F0"><data-lsp lsp="(method) Easing.spring({ allowTail, durationRestThreshold, ...config }?: EasingSpringConfig): (t: number) => number">spring</data-lsp></span><span style="color:#E1E4E8">({</span></span>\n<span class="line"><span style="color:#E1E4E8">									</span><span style="color:#E1E4E8"><data-lsp lsp="(property) damping?: number | undefined">damping</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">200</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">									</span><span style="color:#E1E4E8"><data-lsp lsp="(property) mass?: number | undefined">mass</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">									</span><span style="color:#E1E4E8"><data-lsp lsp="(property) stiffness?: number | undefined">stiffness</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">100</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">									</span><span style="color:#E1E4E8"><data-lsp lsp="(property) allowTail?: boolean | undefined">allowTail</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">true</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">									</span><span style="color:#E1E4E8"><data-lsp lsp="(property) durationRestThreshold?: number | undefined">durationRestThreshold</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">0.02</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">									</span><span style="color:#E1E4E8"><data-lsp lsp="(property) overshootClamping?: boolean | undefined">overshootClamping</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">false</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">								}),</span></span>\n<span class="line"><span style="color:#E1E4E8">								</span><span style="color:#E1E4E8"><data-lsp lsp="(alias) class Easing\nimport Easing">Easing</data-lsp></span><span style="color:#E1E4E8">.</span><span style="color:#B392F0"><data-lsp lsp="(method) Easing.bezier(x1: number, y1: number, x2: number, y2: number): (t: number) => number">bezier</data-lsp></span><span style="color:#E1E4E8">(</span><span style="color:#79B8FF">0.16</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">0.3</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">),</span></span>\n<span class="line"><span style="color:#E1E4E8">							],</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) extrapolateLeft?: ExtrapolateType | undefined">extrapolateLeft</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'clamp\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) extrapolateRight?: ExtrapolateType | undefined">extrapolateRight</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'clamp\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						},</span></span>\n<span class="line"><span style="color:#E1E4E8">					),</span></span>\n<span class="line"><span style="color:#E1E4E8">					</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.width?: Property.Width<string | number> | undefined">width</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">420</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">					</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.willChange?: Property.WillChange | undefined">willChange</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'opacity, transform\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">					</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.zIndex?: Property.ZIndex | undefined">zIndex</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">3</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">				}}</span></span>\n<span class="line"><span style="color:#E1E4E8">			></span></span>\n<span class="line"><span style="color:#E1E4E8">				&#x3C;</span><span style="color:#79B8FF">

1<data-lsp lsp="(alias) const Interactive: {\n    baseSchema: {\n        readonly durationInFrames: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: undefined;\n            readonly min: 1;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly from: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: 0;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly trimBefore: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: 0;\n            readonly min: 0;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly playbackRate: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: 1;\n            readonly min: 0.01;\n            readonly step: 0.1;\n            readonly description: &#x22;Playback rate&#x22;;\n            readonly hiddenFromList: false;\n            readonly keyframable: false;\n        };\n        readonly freeze: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: null;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly hidden: import(&#x22;/vercel/path0/packages/core/dist/cjs/interactivity-schema&#x22;).BooleanFieldSchema;\n        readonly name: import(&#x22;/vercel/path0/packages/core/dist/cjs/interactivity-schema&#x22;).HiddenFieldSchema;\n        readonly showInTimeline: import(&#x22;/vercel/path0/packages/core/dist/cjs/interactivity-schema&#x22;).HiddenFieldSchema;\n    };\n    ... 47 more ...;\n    Ul: InteractiveElementComponent<...>;\n}\nimport Interactive">Interactive</data-lsp></span><span style="color:#79B8FF">.</span><span style="color:#79B8FF"><data-lsp lsp="(property) Div: InteractiveElementComponent<&#x22;div&#x22;>">Div</data-lsp></span></span>\n<span class="line"><span style="color:#B392F0">					</span><span style="color:#B392F0"><data-lsp lsp="(property) name?: string | undefined">name</data-lsp></span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"Photo 3 tape"</span></span>\n<span class="line"><span style="color:#B392F0">					</span><span style="color:#B392F0"><data-lsp lsp="(property) style?: React.CSSProperties | undefined">style</data-lsp></span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{{</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.backgroundColor?: Property.BackgroundColor | undefined">backgroundColor</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'#d9c58f\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.boxShadow?: Property.BoxShadow | undefined">boxShadow</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'0 2px 8px rgba(67, 47, 29, 0.14)\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.height?: Property.Height<string | number> | undefined">height</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">48</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.left?: Property.Left<string | number> | undefined">left</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">135</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.opacity?: Property.Opacity | undefined">opacity</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">0.68</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.position?: Property.Position | undefined">position</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'absolute\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.rotate?: Property.Rotate | undefined">rotate</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'-2deg\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.top?: Property.Top<string | number> | undefined">top</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#F97583">-</span><span style="color:#79B8FF">21</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.width?: Property.Width<string | number> | undefined">width</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">150</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.zIndex?: Property.ZIndex | undefined">zIndex</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">2</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">					}}</span></span>\n<span class="line"><span style="color:#E1E4E8">				/></span></span>\n<span class="line"><span style="color:#E1E4E8">				&#x3C;</span><span style="color:#85E89D"><data-lsp lsp="(property) React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>">div</data-lsp></span></span>\n<span class="line"><span style="color:#B392F0">					</span><span style="color:#B392F0"><data-lsp lsp="(property) React.HTMLAttributes<HTMLDivElement>.style?: React.CSSProperties | undefined">style</data-lsp></span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{{</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>

1.backgroundColor?: Property.BackgroundColor | undefined">backgroundColor</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'#d8cbb8\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.height?: Property.Height<string | number> | undefined">height</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">380</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardShorthandProperties<string | number, string &#x26; {}>.overflow?: Property.Overflow | undefined">overflow</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'hidden\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.position?: Property.Position | undefined">position</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'relative\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.width?: Property.Width<string | number> | undefined">width</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'100%\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">					}}</span></span>\n<span class="line"><span style="color:#E1E4E8">				></span></span>\n<span class="line"><span style="color:#E1E4E8">					&#x3C;</span><span style="color:#79B8FF"><data-lsp lsp="(alias) const Img: React.ComponentType<NativeImgProps &#x26; {\n    readonly maxRetries?: number | undefined;\n    readonly pauseWhenLoading?: boolean | undefined;\n    readonly delayRenderRetries?: number | undefined;\n    readonly delayRenderTimeoutInMilliseconds?: number | undefined;\n    readonly onImageFrame?: ((imageElement: HTMLImageElement) => void) | undefined;\n    readonly onImageError?: ((error: Error) => void) | undefined;\n    readonly src: string;\n    readonly effects?: EffectsProp | undefined;\n    readonly showInTimeline?: boolean | undefined;\n    readonly name?: string | undefined;\n} &#x26; Omit<...> &#x26; InteractiveCropProps &#x26; InteractivePremountProps>\nimport Img">Img</data-lsp></span></span>\n<span class="line"><span style="color:#B392F0">						</span><span style="color:#B392F0"><data-lsp lsp="(property) name?: string | undefined">name</data-lsp></span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"Photo 3"</span></span>\n<span class="line"><span style="color:#B392F0">						</span><span style="color:#B392F0"><data-lsp lsp="(property) alt?: string | undefined">alt</data-lsp></span><span style="color:#F97583">=</span><span style="color:#9ECBFF">""</span></span>\n<span class="line"><span style="color:#B392F0">						</span><span style="color:#B392F0"><data-lsp lsp="(property) src: string">src</data-lsp></span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"https://remotion.media/transition-bg-blue.jpg"</span></span>\n<span class="line"><span style="color:#B392F0">						</span><span style="color:#B392F0"><data-lsp lsp="(property) style?: React.CSSProperties | undefined">style</data-lsp></span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{{</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.filter?: Property.Filter | undefined">filter</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'hue-rotate(-65deg)\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.height?: Property.Height<string | number> | undefined">height</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'100%\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.objectFit?: Property.ObjectFit | undefined">objectFit</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'cover\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.width?: Property.Width<string | number> | undefined">width</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'100%\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						}}</span></span>\n<span class="line"><span style="color:#E1E4E8">					/></span></span>\n<span class="line"><span style="color:#E1E4E8">					&#x3C;</span><span style="color:#85E89D"><data-lsp lsp="(property) React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>">div</data-lsp></span></span>\n<span class="line"><span style="color:#B392F0">						</span><span style="color:#B392F0"><data-lsp lsp="(property) React.HTMLAttributes<HTMLDivElement>.style?: React.CSSProperties | undefined">style</data-lsp></span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{{</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.alignItems?: Property.AlignItems | undefined">alignItems</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'center\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.color?: Property.Color | undefined">color</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'white\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.display?: Property.Display | undefined">display</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'flex\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.fontFamily?: Property.FontFamily | undefined">fontFamily</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'sans-serif\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.fontSize?: Property.FontSize<string | number> | undefined">fontSize</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">160</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.fontWeight?: Property.FontWeight | undefined">fontWeight</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">900</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardShorthandProperties<string | number, string &#x26; {}>.inset?: Property.Inset<string | number> | undefined">inset</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">0</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.justifyContent?: Property.JustifyContent | undefined">justifyContent</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'center\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.position?: Property.Position | undefined">position</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'absolute\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">							</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.textShadow?: Property.TextShadow | undefined">textShadow</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">

1\'0 4px 30px rgba(0, 0, 0, 0.55)\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						}}</span></span>\n<span class="line"><span style="color:#E1E4E8">					></span></span>\n<span class="line"><span style="color:#E1E4E8">						C</span></span>\n<span class="line"><span style="color:#E1E4E8">					&#x3C;/</span><span style="color:#85E89D"><data-lsp lsp="(property) React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>">div</data-lsp></span><span style="color:#E1E4E8">></span></span>\n<span class="line"><span style="color:#E1E4E8">				&#x3C;/</span><span style="color:#85E89D"><data-lsp lsp="(property) React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>">div</data-lsp></span><span style="color:#E1E4E8">></span></span>\n<span class="line"><span style="color:#E1E4E8">				&#x3C;</span><span style="color:#79B8FF"><data-lsp lsp="(alias) const Interactive: {\n    baseSchema: {\n        readonly durationInFrames: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: undefined;\n            readonly min: 1;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly from: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: 0;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly trimBefore: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: 0;\n            readonly min: 0;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly playbackRate: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: 1;\n            readonly min: 0.01;\n            readonly step: 0.1;\n            readonly description: &#x22;Playback rate&#x22;;\n            readonly hiddenFromList: false;\n            readonly keyframable: false;\n        };\n        readonly freeze: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: null;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly hidden: import(&#x22;/vercel/path0/packages/core/dist/cjs/interactivity-schema&#x22;).BooleanFieldSchema;\n        readonly name: import(&#x22;/vercel/path0/packages/core/dist/cjs/interactivity-schema&#x22;).HiddenFieldSchema;\n        readonly showInTimeline: import(&#x22;/vercel/path0/packages/core/dist/cjs/interactivity-schema&#x22;).HiddenFieldSchema;\n    };\n    ... 47 more ...;\n    Ul: InteractiveElementComponent<...>;\n}\nimport Interactive">Interactive</data-lsp></span><span style="color:#79B8FF">.</span><span style="color:#79B8FF"><data-lsp lsp="(property) Div: InteractiveElementComponent<&#x22;div&#x22;>">Div</data-lsp></span></span>\n<span class="line"><span style="color:#B392F0">					</span><span style="color:#B392F0"><data-lsp lsp="(property) name?: string | undefined">name</data-lsp></span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"Photo 3 caption"</span></span>\n<span class="line"><span style="color:#B392F0">					</span><span style="color:#B392F0"><data-lsp lsp="(property) style?: React.CSSProperties | undefined">style</data-lsp></span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{{</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.alignItems?: Property.AlignItems | undefined">alignItems</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'center\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.color?: Property.Color | undefined">color</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">

1\'#2d2620\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.display?: Property.Display | undefined">display</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'flex\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.fontFamily?: Property.FontFamily | undefined">fontFamily</data-lsp></span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.fontSize?: Property.FontSize<string | number> | undefined">fontSize</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">44</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.fontWeight?: Property.FontWeight | undefined">fontWeight</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">600</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.height?: Property.Height<string | number> | undefined">height</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">84</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.justifyContent?: Property.JustifyContent | undefined">justifyContent</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'center\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.lineHeight?: Property.LineHeight<string | number> | undefined">lineHeight</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.marginTop?: Property.MarginTop<string | number> | undefined">marginTop</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">8</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">						</span><span style="color:#E1E4E8"><data-lsp lsp="(property) StandardLonghandProperties<string | number, string &#x26; {}>.textAlign?: Property.TextAlign | undefined">textAlign</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">\'center\'</span><span style="color:#E1E4E8">,</span></span>\n<span class="line"><span style="color:#E1E4E8">					}}</span></span>\n<span class="line"><span style="color:#E1E4E8">				></span></span>\n<span class="line"><span style="color:#E1E4E8">					scene C</span></span>\n<span class="line"><span style="color:#E1E4E8">				&#x3C;/</span><span style="color:#79B8FF"><data-lsp lsp="(alias) const Interactive: {\n    baseSchema: {\n        readonly durationInFrames: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: undefined;\n            readonly min: 1;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly from: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: 0;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly trimBefore: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: 0;\n            readonly min: 0;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly playbackRate: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: 1;\n            readonly min: 0.01;\n            readonly step: 0.1;\n            readonly description: &#x22;Playback rate&#x22;;\n            readonly hiddenFromList: false;\n            readonly keyframable: false;\n        };

1\n        readonly freeze: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: null;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly hidden: import(&#x22;/vercel/path0/packages/core/dist/cjs/interactivity-schema&#x22;).BooleanFieldSchema;\n        readonly name: import(&#x22;/vercel/path0/packages/core/dist/cjs/interactivity-schema&#x22;).HiddenFieldSchema;\n        readonly showInTimeline: import(&#x22;/vercel/path0/packages/core/dist/cjs/interactivity-schema&#x22;).HiddenFieldSchema;\n    };\n    ... 47 more ...;\n    Ul: InteractiveElementComponent<...>;\n}\nimport Interactive">Interactive</data-lsp></span><span style="color:#79B8FF">.</span><span style="color:#79B8FF"><data-lsp lsp="(property) Div: InteractiveElementComponent<&#x22;div&#x22;>">Div</data-lsp></span><span style="color:#E1E4E8">></span></span>\n<span class="line"><span style="color:#E1E4E8">			&#x3C;/</span><span style="color:#79B8FF"><data-lsp lsp="(alias) const Interactive: {\n    baseSchema: {\n        readonly durationInFrames: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: undefined;\n            readonly min: 1;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly from: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: 0;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly trimBefore: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: 0;\n            readonly min: 0;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly playbackRate: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: 1;\n            readonly min: 0.01;\n            readonly step: 0.1;\n            readonly description: &#x22;Playback rate&#x22;;\n            readonly hiddenFromList: false;\n            readonly keyframable: false;\n        };\n        readonly freeze: {\n            readonly type: &#x22;number&#x22;;\n            readonly default: null;\n            readonly step: 1;\n            readonly hiddenFromList: true;\n        };\n        readonly hidden: import(&#x22;/vercel/path0/packages/core/dist/cjs/interactivity-schema&#x22;).BooleanFieldSchema;\n        readonly name: import(&#x22;/vercel/path0/packages/core/dist/cjs/interactivity-schema&#x22;).HiddenFieldSchema;\n        readonly showInTimeline: import(&#x22;/vercel/path0/packages/core/dist/cjs/interactivity-schema&#x22;).HiddenFieldSchema;\n    };\n    ... 47 more ...;\n    Ul: InteractiveElementComponent<...>;\n}\nimport Interactive">Interactive</data-lsp></span><span style="color:#79B8FF">.</span><span style="color:#79B8FF"><data-lsp lsp="(property) Div: InteractiveElementComponent<&#x22;div&#x22;>">Div</data-lsp></span><span style="color:#E1E4E8">></span></span>\n<span class="line"><span style="color:#E1E4E8">		&#x3C;/</span><span style="color:#85E89D"><data-lsp lsp="(property) React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>">div</data-lsp></span><span style="color:#E1E4E8">></span></span>\n<span class="line"><span style="color:#E1E4E8">	);</span></span>\n<span class="line"><span style="color:#E1E4E8">};</span></span></code><button class="copy-button" aria-label="Copy code to clipboard">Copy</button></pre>'}})})]})}function m(e={}){let{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(u,{...e})}):u(e)}},95895(e){function t(e){var t=Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}t.keys=()=>[],t.resolve=t,t.id=95895,e.exports=t},23774(e,t,n){"use strict";n.d(t,{I:()=>r,Tc:()=>o,pn:()=>i});var a=n(57825);n(67781);var s=n(31598);let o=({children:e,error:t})=>(0,a.jsx)("div",{style:{backgroundColor:t?s.UH:"var(--ifm-color-primary)",height:"1em",width:"1em",borderRadius:"50%",padding:6,fontSize:"0.7em",lineHeight:"1",display:"inline-flex",color:"white",justifyContent:"center",alignItems:"center",fontWeight:"bold",fontFeatureSettings:'"ss03" on',boxSizing:"content-box",marginRight:8},children:e}),r=({children:e,error:t,style:n})=>(0,a.jsx)("div",{style:{backgroundColor:t?s.UH:"var(--ifm-color-primary)",height:24,width:24,display:"inline-flex",color:"white",justifyContent:"center",alignItems:"center",borderRadius:12,fontSize:13,fontWeight:"bold",verticalAlign:"top",fontFeatureSettings:'"ss03" on',...n??{}},children:e}),i=({children:e,error:t})=>(0,a.jsxs)("a",{id:e.toString(),style:{marginRight:7,display:"inline-block",position:"relative",marginTop:4,marginBottom:4,cursor:"pointer",textDecoration:"none",color:"white"},href:`#${e.toString()}`,children:[(0,a.jsx)(r,{error:t,children:e})," "]})}

1,41315(e,t,n){"use strict";n.d(t,{A:()=>i});var a=n(67781),s=n(39372);let o=()=>{if("u">typeof OffscreenCanvas)return new OffscreenCanvas(1,1);if("u">typeof document){let e=document.createElement("canvas");return e.width=1,e.height=1,e}return null},r=async()=>{if("u"<typeof navigator)return!1;let{gpu:e}=navigator;if(!e)return!1;let t=o();if(!t)return!1;try{if(!t.getContext("webgpu"))return!1;return!!await e.requestAdapter()}catch{return!1}},i=(e="html-in-canvas")=>{let[t,n]=(0,a.useState)("pending");return(0,a.useEffect)(()=>{let t=!1;return(async()=>{let a=await (e=>{if(!s.jC.isSupported())return!1;if("html-in-canvas"===e)return!0;if("webgl2"===e){let e=o();if(!e)return!1;try{let t=e.getContext("webgl2",{alpha:!0,premultipliedAlpha:!0,antialias:!1});if(!t)return!1;return t.getExtension("WEBGL_lose_context")?.loseContext(),!0}catch{return!1}}return r()})(e);t||n(a?"live":"fallback")})(),()=>{t=!0}},[e]),t}},70956(e,t,n){"use strict";n.d(t,{n9:()=>o,$n:()=>s,pH:()=>r});var a=n(57825);n(67781),n(31598);let s=e=>{let{children:t,loading:n,hoverColor:s,fullWidth:o,color:r,size:i,className:l,disabled:p,...c}=e,d=p||n;return(0,a.jsxs)("button",{type:"button",className:`buttoncontainer_omE9 ${"sm"===i?"buttonSmall_NXdn":""}${l?` ${l}`:""}`,disabled:d,...c,"aria-busy":n,style:{...e.style??{},padding:e.style?.padding??("sm"===e.size?"10px 16px":"16px 22px"),color:e.color,cursor:d?"default":e.style?.cursor??"pointer",backgroundColor:e.background,"--hover-color":e.hoverColor??e.background,...e.fullWidth?{width:"100%"}:{},opacity:p?.7:1},children:[(0,a.jsx)("span",{className:`buttonContent_wS2b ${n?"buttonContentLoading_mOLb":""}`,children:t}),n?(0,a.jsx)("span",{"aria-hidden":"true",className:"spinnerOverlay_fENg",children:(0,a.jsx)("svg",{className:"spinner_I6qw",focusable:"false",viewBox:"0 0 100 100",children:[0,45,90,135,180,225,270,315].map(e=>(0,a.jsx)("path",{d:"M 44 0 L 50 0 a 6 6 0 0 1 6 6 L 56 26 a 6 6 0 0 1 -6 6 L 50 32 a 6 6 0 0 1 -6 -6 L 44 6 a 6 6 0 0 1 6 -6 Z",fill:"currentColor",transform:`rotate(${e} 50 50)`,children:(0,a.jsx)("animate",{attributeName:"opacity",begin:`${e/360}s`,dur:"1s",from:"1",repeatCount:"indefinite",to:"0.15"})},e))})}):null]})},o=e=>(0,a.jsx)(s,{...e,background:"var(--blue-underlay)",color:"white"}),r=e=>(0,a.jsx)(s,{...e,background:"var(--plain-button)",color:"var(--text-color)"})},31598(e,t,n){"use strict";n.d(t,{Ab:()=>s,UH:()=>o});var a=n(5868);let s={BOX_STROKE:"var(--box-stroke)",TEXT_COLOR:"var(--text-color)",BORDER_COLOR:"var(--border-color)",BRAND:"var(--ifm-color-primary)"};(0,a.No)(.85,"#42e9f5");let o="#e74c3c";(0,a.No)(.9,o),(0,a.e$)(.3,"#42e9f5")},21204(e,t,n){"use strict";n.d(t,{G:()=>U});var a=n(57825),s=n(25686),o=n(18916),r=n(67781),i=n(23774),l=n(70956),p=n(70973),c=n(21906),d=n(81734),u=n(7913),m=n(11682),f=n(39372),h=n(41315),y=n(86256);let g={light:"conic-gradient(rgba(0, 0, 0, 0.1) 25%, transparent 0 50%, rgba(0, 0, 0, 0.1) 0 75%, transparent 0)",dark:"conic-gradient(rgba(255, 255, 255, 0.08) 25%, transparent 0 50%, rgba(255, 255, 255, 0.08) 0 75%, transparent 0)"},E=({component:e,fallbackVideoUrl:t})=>{let n=(0,h.A)("webgl2");return"pending"===n?(0,a.jsx)(f.H1,{}):"fallback"===n?(0,a.jsx)(f.H1,{children:(0,a.jsx)(u.Ce,{muted:!0,objectFit:"contain",src:t,style:{height:"100%",width:"100%"}})}):(0,a.jsx)(e,{})},x=({backgroundTheme:e,component:t,durationInFrames:n,elementHeight:s,elementWidth:o,fps:i,htmlInCanvasFallbackVideoUrl:l,previewLayout:p,safeArea:c})=>{let[d,u]=(0,r.useState)(!0),f=(0,r.useMemo)(()=>null===l?t:()=>(0,a.jsx)(E,{component:t,fallbackVideoUrl:l}),[t,l]),h="dark"===e?y.cc:"#f5f6f7",x=d?{backgroundColor:"dark"===e?y.cc:"white",backgroundImage:g[e],backgroundSize:"32px 32px"}:{backgroundColor:h},b=x,F=null;if("vertical"===p){if(null===s||null===o)throw Error("A vertical Element preview requires fixed Element dimensions.");let e=Math.min(1,(1920-2*c)/o,(1080-2*c)/s);b={backgroundColor:"var(--ifm-background-surface-color)"},F={...x,height:`${s*e*100/1080}%`,left:"50%",position:"absolute",top:"50%",transform:"translate(-50%, -50%)",width:`${o*e*100/1920}%`}}let v=d?`Use ${e} preview background`:"Show transparency as checkerboard";return(0,a.jsx)("div",{style:{backgroundColor:h,overflow:"hidden"},children:(0,a.jsxs)("div",{style:{...b,aspectRatio:"1920 / 1080",position:"relative",width:"100%"},children:[null===F?null:(0,a.jsx)("div",{style:F}),(0,a.jsx)(m.ai,{acknowledgeRemotionLicense:!0,autoPlay:!0,component:f,durationInFrames:n,fps:i,compositionWidth:1920,compositionHeight:1080,controls:!0,initiallyMuted:!0,loop:!0,renderCustomControls:()=>(0,a.jsx)("button",{"aria-label":v,"aria-pressed":d,onClick:()=>u(e=>!e),style:{alignItems:"center",appearance:"none",backgroundColor:"transparent",border:"none",color:d?"#0b84f3":"white",cursor:"pointer",display:"inline-flex",height:37,marginRight:12,padding:"6px 0"},title:v,type:"button",children:(0,a.jsxs)("svg",{"aria-hidden":"true",fill:"none",focu

1sable:"false",height:18,viewBox:"0 0 512 512",width:18,children:[(0,a.jsx)("path",{d:"M256 48h184c13.3 0 24 10.7 24 24v184H256V48zM48 256h208v208H72c-13.3 0-24-10.7-24-24V256z",fill:"currentColor"}),(0,a.jsx)("rect",{height:"416",rx:"24",stroke:"currentColor",strokeWidth:"32",width:"416",x:"48",y:"48"}),(0,a.jsx)("path",{d:"M256 48v416M48 256h416",stroke:"currentColor",strokeWidth:"32"})]})}),style:{backgroundColor:"transparent",height:"100%",width:"100%"}})]})})};var b=n(3386);let F="studioGuidanceTitle_LvGI",v="studioGuidanceText_YipK",w="description_oOld",U=({children:e,definition:t,sourceCode:n})=>{let{contributors:u,description:m,durationInFrames:f,fps:h}=t,[g,E]=(0,r.useState)({type:"idle"}),[U,C]=(0,r.useState)(!1),[S,L]=(0,r.useState)(!1),[T,A]=(0,r.useState)(!1),[M,I]=(0,r.useState)(null),R=(0,r.useRef)(null),k=(0,r.useId)(),{height:P,width:B}=(0,y.C3)(t);(0,r.useLayoutEffect)(()=>{I((0,o.Z9)())},[]),(0,r.useEffect)(()=>{if("installing"!==g.type)return;let e=window.setTimeout(()=>{C(!0)},1e3);return()=>window.clearTimeout(e)},[g.type]),(0,r.useEffect)(()=>{let e=e=>{if(e.repeat||!e.altKey||!e.shiftKey||e.ctrlKey||e.metaKey||"KeyB"!==e.code)return;let{target:t}=e;t instanceof HTMLElement&&(t.isContentEditable||"INPUT"===t.tagName||"SELECT"===t.tagName||"TEXTAREA"===t.tagName)||(e.preventDefault(),A(!0))};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[]);let D=(0,r.useCallback)(async()=>{if(n){C(!1),E({type:"installing"});try{let e=await (0,c.rz)({definition:t,sourceCode:n});if(!e.success)return void E({type:"error",code:e.code,message:e.message});if(M)E({type:"idle"});else{let{target:t}=e;E({type:"success",message:`Sent to Remotion Studio${null===t.projectName?"":` (${t.projectName})`}. Confirm the installation destination in Studio.`})}"https://www.remotion.dev"===window.location.origin&&navigator.sendBeacon(`https://www.remotion.pro/api/track/element-install-request?slug=${encodeURIComponent(t.slug)}`)}catch{E({type:"error",code:null,message:"Could not connect to Remotion Studio. Please try again."})}}},[t,M,n]),j=(0,r.useCallback)(()=>{n&&o.fq.openInBrowserStudio({endpoint:null,payload:(0,c.W$)({definition:t,sourceCode:n,installAssets:!1})})},[t,n]),N=(0,r.useMemo)(()=>()=>(0,a.jsx)(y.XH,{definition:t}),[t]);return(0,a.jsxs)("div",{className:"workbench_XCgJ",children:[(0,a.jsx)("img",{ref:R,alt:"",decoding:"async",draggable:!1,hidden:!0,src:t.preview.posterUrl}),(0,a.jsx)(s.A,{children:p.G.renderVideo({height:P,url:t.preview.videoUrl,width:B})}),(0,a.jsx)("section",{"aria-label":"Preview",className:"previewColumn_jDH7",children:(0,a.jsxs)("div",{className:"previewAndSource_STCr",children:[(0,a.jsx)(x,{backgroundTheme:t.preview.backgroundTheme,component:N,durationInFrames:f,elementHeight:t.elementHeight,elementWidth:t.elementWidth,fps:h,htmlInCanvasFallbackVideoUrl:t.previewUsesHtmlInCanvas?t.preview.videoUrl:null,previewLayout:t.preview.previewLayout,safeArea:t.safeArea}),e?(0,a.jsxs)("div",{className:"sourceArea_ray0",children:[(0,a.jsx)("div",{"aria-label":"Element source code",className:`sourceViewport_BPCO ${S?"":"sourceViewportCollapsed_AiX3"}`,id:k,inert:!S,role:"region",children:e}),S?null:(0,a.jsx)("div",{className:"sourceReveal_Zkjj",children:(0,a.jsx)("button",{"aria-controls":k,"aria-expanded":S,className:"sourceToggle_ZKKj",onClick:()=>L(!0),type:"button",children:"View code"})})]}):null]})}),(0,a.jsx)("aside",{"aria-label":"Element details and actions",className:"actionsColumn_bzGa",children:(0,a.jsxs)("div",{children:[n?(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)("div",{className:"actionRow_k8NP",children:[(0,a.jsx)(b.v,{buttonLabel:"success"===g.type?"Sent to Studio":"Use",definition:t,loading:"installing"===g.type,onClick:D,posterRef:R,showDragHandle:!1===M||"error"===g.type&&"no-installable-target"===g.code,sourceCode:n,title:M?"Use this Element in Studio":"Install in the most recently focused Remotion Studio"}),T?(0,a.jsx)(l.pH,{fullWidth:!0,loading:!1,onClick:j,size:"sm",style:{padding:"7px 12px"},children:"Open in Browser Studio"}):null]}),"error"===g.type&&("no-compatible-studio"===g.code||"no-installable-target"===g.code)?(0,a.jsx)("div",{"aria-live":"polite",className:"studioGuidance_l0Ug",children:"no-installable-target"===g.code?(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("p",{className:F,children:"No installation destination found"}),(0,a.jsxs)("p",{className:v,children:["Drag the ",(0,a.jsx)("strong",{children:"Use"})," button above into your open ",(0,a.jsx)("a",{href:"/docs/studio",children:"Remotion Studio"})," instead."]}),(0,a.jsxs)("p",{className:v,children:["Or focus a destination in Studio, then click"," ",(0,a.jsx)("strong",{children:"Use"})," again."]})]}):(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("p",{className:F,children:"Connect to Remotion Studio"}),(0,a.jsxs)("ol",{className:"studioGuidanceSteps_pa9_",role:"list",children:[(0,a.jsxs)("li",{children:[(0,a.jsx)(i.I,{children:"1"}),(0,a.jsxs)("span",{children:["Open your Remotion project, or"," ",(0,a.jsx)("a",{href:"/docs/",children:"create a new one"}),", and"," ",(0,a.jsx)("a",{href:"/docs/studio",children:"start Studio"}),"."]})]}),(0,a.jsxs)("li",{children:[(0,a.jsx)(i.I,{children:"2"}),(0,a.jsxs)("span",{children:["Return here and click ",(0,a.jsx)("strong",{children:"Use"})," again."]})]})]})]})}):"idle"!==g.type&&("installing"!==g.type||U)?(0,a.jsx)("p",{"aria-live":"polite",className:"installing"===g.type?"installingStatus_zMD3":"success"===g.type?"successStatus_qP9t":"errorStatus_EH6j",children:"installing"===g.type?"If your browser prompts you, allow local network access so this page can find Remotion Studio.":g.message}):null]}):null,(0,a.jsxs)("div",{className:"details_JpqE",children:[(0,a.jsx)("p",{className:w,children:m}),"captions"===t.category?(0,a.jsx)("p",{className:w,style:{marginTop:8},children:(0,a.jsx)("a",{href:"/elements/captions/#importing-captions-into-studio",children:"How to use caption elements"})}):null,(0,a.jsxs)("dl",{className:"metadata_rJ3F",children:[(0,a.jsxs)("div",{children:[(0,a.jsx)("dt",{children:"Dimensions"}),(0,a.jsx)("dd",{children:(0,d.Y_)(t)})]}),(0,a.jsxs)("div",{children:[(0,a.jsx)("dt",{children:"Preview FPS"}),(0,a.jsx)("dd",{children:h})]}),(0,a.jsxs)("div",{children:[(0,a.jsx)("dt",{children:"Duration"}),(0,a.jsxs)("dd",{children:[(f/h).toFixed(2),"s"]})]}),(0,a.jsxs)("div",{className:"dependenciesMetadata_AbgO",children:[(0,a.jsx)("dt",{children:"Dependencies"}),(0,a.jsx)("dd",{children:0===t.dependencies.length?"None":(0,a.jsx)("ul",{className:"dependencyList_wtX2",children:t.dependencies.map(e=>(0,a.jsx)("li",{children:(0,a.jsx)("a",{href:`https://www.npmjs.com/package/${e.name}`,rel:"noopener noreferrer",target:"_blank",children:null===e.version?e.name:`${e.name}@${e.version}`})},e.name))})})]})]})]}),u.length?(0,a.jsxs)("div",{"aria-label":"Contributors",className:"contributors_LTd4",children:[(0,a.jsx)("span",{className:"contributorsLabel_W6gI",children:"Created by"}),(0,a.jsx)("div",{className:"contributorList_Mtxe",children:u.map(e=>(0,a.jsxs)("a",{className:"contributor_niS_",href:`https://github.com/${e.username}`,rel:"noopener noreferrer",target:"_blank",children:[(0,a.jsx)("img",{alt:"",className:"contributorAvatar_j16P",src:`https://github.com/${e.username}.png`}),(0,a.jsxs)("span",{className:"contributorText_dWMD",children:[(0,a.jsxs)("strong",{children:["@",e.username]}),"Author"===e.contribution?null:(0,a.jsx)("span",{children:e.contribution})]})]},e.username))})]}):null]})})]})}},86256(e,t,n){"use strict";n.d(t,{C3:()=>l,XH:()=>p,cc:()=>i,hU:()=>r});var a=n(57825),s=n(67781),o=n(39372);n(81734);let r="#eef1f4",i="#20262f",l=e=>{let t=null!==e.elementWidth&&null!==e.elementHeight;return{height:t&&e.safeArea>0?e.elementHeight+2*e.safeArea:e.height,width:t&&e.safeArea>0?e.elementWidth+2*e.safeArea:e.width}},p=({definition:e})=>{let{component:t,elementHeight:n,elementWidth:r,safeArea:i}=e,{height:l,width:p}=(0,o.Bk)(),c=null!==r&&null!==n,d=s.createElement(t,e.initialProps??{});if(!c&&e.width===p&&e.height===l)return d;let u=r??e.width,m=n??e.height,f=Math.min(1,(p-2*i)/u,(l-2*i)/m);return(0,a.jsx)(o.H1,{style:{alignItems:"center",justifyContent:"center"},showInTimeline:!1,children:(0,a.jsx)(o.gd,{height:m,layout:"none",width:u,children:(0,a.jsx)("div",{style:{height:m*f,position:"relative",width:u*f},children:(0,a.jsx)("div",{style:{height:m,left:0,position:"absolute",top:0,transform:`scale(${f})`,transformOrigin:"top left",width:u},children:d})})})})}},3386(e,t,n){"use strict";n.d(t,{v:()=>i});var a=n(57825),s=n(18916);n(67781);var o=n(70956),r=n(21906);let i=({buttonLabel:e,definition:t,loading:n,onClick:i,posterRef:l,showDragHandle:p,sourceCode:c,title:d})=>{let u=e=>{(0,s.j_)({dataTransfer:e.dataTransfer,payload:(0,r.W$)({definition:t,sourceCode:c,installAssets:!1})}),(0,r.q0)(e.dataTransfer,l.current)};return(0,a.jsxs)("div",{className:"studioAction_z3v2",children:[(0,a.jsx)(o.n9,{className:p?"buttonWithDragHandle_wiU8":void 0,draggable:p,fullWidth:!0,loading:n,onClick:i,onDragStart:p?u:void 0,size:"sm",style:{padding:"7px 12px"},title:d,children:e}),p?(0,a.jsx)("div",{"aria-label":"Drag into Studio",className:"dragHandle_Facz","data-tooltip":"Drag into Studio",draggable:!0,onDragStart:u,children:(0,a.jsx)("span",{"aria-hidden":"true",className:"dragHandleIcon_Inpe",children:"\u283F"})}):null]})}}

1,72081(e,t,n){"use strict";n.d(t,{H:()=>tl});var a="https://remotion.media/mouse-click.wav",s="https://remotion.media/ding.wav",o=n(18916),r=n(57825),i=n(7913),l=n(5337),p=n(67781),c=n(39372);let d=c.HG.withSchema({Component:({audioSrc:e="https://remotion.media/elements/remotion-made-this-picture-move.mp3",barColor:t="#2563eb",numberOfBars:n=65,sensitivity:a=1.5,style:s})=>{let o=(0,c.UC)(),{fps:p}=(0,c.Bk)(),{audioData:d,dataOffsetInSeconds:u}=(0,l.D3)({fps:p,frame:o,src:e,windowInSeconds:10}),m=Math.max(3,Math.min(127,Math.round(n))),f=Math.ceil(m/2),h=(d?(0,l.zr)({audioData:d,dataOffsetInSeconds:u,fps:p,frame:o,numberOfSamples:256,optimizeFor:"speed"}):[]).slice(0,f),y=[...h.slice(m%2).reverse(),...h];return(0,r.jsxs)("div",{style:{alignItems:"center",boxSizing:"border-box",display:"flex",gap:8,height:300,justifyContent:"center",width:900,...s},children:[(0,r.jsx)(i.fP,{showInTimeline:!1,src:e}),y.map((e,n)=>(0,r.jsx)("div",{style:{backgroundColor:t,borderRadius:999,flex:1,height:Math.max(4,Math.min(300,300*Math.sqrt(e)*a)),minWidth:2}},n))]})},componentName:"<MirroredAudioSpectrum>",schema:{audioSrc:{type:"asset",assetType:"audio",default:"https://remotion.media/elements/remotion-made-this-picture-move.mp3",description:"Audio source"},barColor:{type:"color",default:"#2563eb",description:"Bar color"},numberOfBars:{type:"number",min:3,max:127,step:2,default:65,description:"Number of bars",hiddenFromList:!1,keyframable:!1},sensitivity:{type:"number",min:.25,max:3,step:.05,default:1.5,description:"Sensitivity",hiddenFromList:!1}},wrapInSequence:!0}),u=c.HG.withSchema({Component:({amplitude:e=2,audioSrc:t="https://remotion.media/elements/remotion-made-this-picture-move.mp3",lineColor:n="#2563eb",lineWidth:a=6,style:s,windowInSeconds:o=.35})=>{let p=(0,c.UC)(),{fps:d}=(0,c.Bk)(),{audioData:u,dataOffsetInSeconds:m}=(0,l.D3)({fps:d,frame:p,src:t,windowInSeconds:10}),f=u?(0,l.h9)({audioData:u,channel:0,dataOffsetInSeconds:m,durationInSeconds:o,normalize:!1,numberOfSamples:64,outputRange:"minus-one-to-one",startTimeInSeconds:p/d-o/2}).map(e=>e.amplitude):[],h=(0,l.Ce)({points:f.map((t,n)=>({x:2*a+n/(f.length-1)*(900-4*a),y:150+150*t*e}))});return(0,r.jsxs)("div",{style:{boxSizing:"border-box",height:300,overflow:"hidden",width:900,...s},children:[(0,r.jsx)(i.fP,{showInTimeline:!1,src:t}),(0,r.jsxs)("svg",{height:300,viewBox:"0 0 900 300",width:900,children:[(0,r.jsx)("line",{x1:0,x2:900,y1:150,y2:150,stroke:n,strokeOpacity:.18,strokeWidth:1}),h?(0,r.jsx)("path",{d:h,fill:"none",stroke:n,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:a}):null]})]})},componentName:"<AudioOscilloscope>",schema:{audioSrc:{type:"asset",assetType:"audio",default:"https://remotion.media/elements/remotion-made-this-picture-move.mp3",description:"Audio source"},lineColor:{type:"color",default:"#2563eb",description:"Waveform color"},lineWidth:{type:"number",min:1,max:16,step:1,default:6,description:"Line width",hiddenFromList:!1},amplitude:{type:"number",min:.25,max:4,step:.05,default:2,description:"Amplitude",hiddenFromList:!1},windowInSeconds:{type:"number",min:.05,max:1,step:.05,default:.35,description:"Time window in seconds",hiddenFromList:!1}},wrapInSequence:!0}),m={path:"elements/audio-oscilloscope/remotion-made-this-picture-move.mp3",type:"url",url:"https://remotion.media/elements/remotion-made-this-picture-move.mp3"},f={audioSrc:m.url},h=({amplitude:e,audioSrc:t,barGap:n,numberOfBars:a,playedColor:s,unplayedColor:o})=>{let d=(0,c.UC)(),{durationInFrames:u,fps:m}=(0,c.Bk)(),f=u/m,{audioData:h,dataOffsetInSeconds:y}=(0,l.D3)({fps:m,frame:0,src:t,windowInSeconds:f}),g=`audio-waveform-progress-${(0,p.useId)().replaceAll(":","")}`,E=Math.max(12,Math.min(96,Math.round(a))),x=(0,p.useMemo)(()=>h?(0,l.h9)({audioData:h,dataOffsetInSeconds:y,durationInSeconds:f,numberOfSamples:E,startTimeInSeconds:0}):[],[h,y,f,E]),b=Math.max(0,Math.min(1,d/Math.max(1,u-1))),F=Math.max(0,Math.min(8,n)),v=(884-F*(E-1))/E;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(i.fP,{showInTimeline:!1,src:t}),(0,r.jsxs)("svg",{height:300,viewBox:"0 0 900 300",width:900,children:[(0,r.jsx)("defs",{children:(0,r.jsxs)("linearGradient",{id:g,gradientUnits:"userSpaceOnUse",x1:8,x2:892,y1:0,y2:0,children:[(0,r.jsx)("stop",{offset:"0%",stopColor:s}),(0,r.jsx)("stop",{offset:`${100*b}%`,stopColor:s}),(0,r.jsx)("stop",{offset:`${100*b}%`,stopColor:o}),(0,r.jsx)("stop",{offset:"100%",stopColor:o})]})}),x.map((t,n)=>{let a=Math.max(10,Math.min(210,210*Math.sqrt(t.amplitude)*e));return(0,r.jsx)("rect",{fill:`url(#${g})`,height:a,rx:Math.min(v/2,a/2),width:v,x:8+n*(v+F),y:150-a/2},t.index)})]})]})},y=c.HG.withSchema({Component:({amplitude:e=1,audioSrc:t="https://remotion.media/elements/remotion-made-this-picture-move.mp3",barGap:n=5,numberOfBars:a=64,playedColor:s="#2563eb",style:o,unplayedColor:i="#cbd5e1"})=>{let{durationInFrames:l}=(0,c.Bk)();return(0,r.jsx)("div",{style:{boxSizing:"border-box",height:300,width:900,...o},children:(0,r.jsx)(h,{amplitude:e,audioSrc:t,barGap:n,numberOfBars:a,playedColor:s,unplayedColor:i},`${t}-${l}`)})}

1,componentName:"<AudioWaveformProgress>",schema:{audioSrc:{type:"asset",assetType:"audio",default:"https://remotion.media/elements/remotion-made-this-picture-move.mp3",description:"Audio source"},playedColor:{type:"color",default:"#2563eb",description:"Played color"},unplayedColor:{type:"color",default:"#cbd5e1",description:"Unplayed color"},numberOfBars:{type:"number",min:12,max:96,step:1,default:64,description:"Number of bars",hiddenFromList:!1,keyframable:!1},barGap:{type:"number",min:0,max:8,step:1,default:5,description:"Gap between bars",hiddenFromList:!1,keyframable:!1},amplitude:{type:"number",min:.25,max:2,step:.05,default:1,description:"Amplitude",hiddenFromList:!1}},wrapInSequence:!0});var g=n(1723),E=n(80761),x=n(4297),b=n(57774),F=n(84293),v=n(27961),w=({captions:e,combineTokensWithinMilliseconds:t,breakOnSilenceAfterMilliseconds:n})=>{let a=[],s="",o=[],r=0,i=0,l=()=>{let e=s.endsWith(`
2`)?s.slice(0,-1):s;a.push({text:e.trimStart(),startMs:r,tokens:o,durationMs:1/0}),a.length>1&&(a[a.length-2].durationMs=r-a[a.length-2].startMs)};e.forEach((p,c)=>{let{text:d}=p,u=i-r>t,m=void 0!==n&&""!==s&&p.startMs-i>=n;d.startsWith(" ")&&(u||m)?(""!==s&&l(),s=d.trimStart(),o=[{text:d.trimStart(),fromMs:p.startMs,toMs:p.endMs,...p.pageBreakAfter?{pageBreakAfter:!0}:{}}].filter(e=>""!==e.text),r=p.startMs,i=p.endMs):(""===s&&(r=p.startMs),s+=d,s=s.trimStart(),""!==d.trim()&&o.push({text:0===o.length?s.trimStart():d,fromMs:p.startMs,toMs:p.endMs,...p.pageBreakAfter?{pageBreakAfter:!0}:{}}),i=p.endMs),p.pageBreakAfter&&""!==s&&(l(),s="",o=[]),c===e.length-1&&""!==s&&(l(),a[a.length-1].durationMs=i-a[a.length-1].startMs)});let p=a[a.length-1];return p&&p.durationMs===1/0&&(p.durationMs=i-p.startMs),{pages:a}};let U=2e3,C=900,S={...c.HG.captionsSchema,width:{type:"number",min:1,step:1,default:void 0,description:"Caption area width",hiddenFromList:!1},combineTokensWithinMilliseconds:{type:"number",min:0,step:50,default:U,description:"Time between caption pages",hiddenFromList:!1}},L=c.HG.withSchema({Component:({captions:e,combineTokensWithinMilliseconds:t=U,style:n,width:a=C})=>{let s=(0,c.UC)(),{fps:o}=(0,c.Bk)(),i=(0,p.useMemo)(()=>w({captions:e,combineTokensWithinMilliseconds:t}).pages,[e,t]),l=s/o*1e3,d=i.find(e=>l>=e.startMs&&l<e.startMs+e.durationMs);return(0,r.jsx)("div",{style:{alignItems:"center",display:"flex",justifyContent:"center",width:a,...n},children:d?(0,r.jsx)("div",{style:{backgroundColor:"rgba(64, 64, 64, 0.75)",color:"#ffffff",fontFamily:"Arial, Helvetica, sans-serif",fontSize:64,fontWeight:400,lineHeight:1.2,padding:"14px 22px",textAlign:"center",textWrap:"balance",whiteSpace:"pre-wrap"},children:d.text.trim()}):null})},componentName:"<BasicCaptions>",schema:S,wrapInSequence:!0});var T=n(60240),A=n(83309);let M="#ffffff",I=800,R=682,k={...c.HG.captionsSchema,width:{type:"number",min:1,step:1,default:void 0,description:"Caption area width",hiddenFromList:!1},combineTokensWithinMilliseconds:{type:"number",min:0,step:50,default:I,description:"Time between caption pages",hiddenFromList:!1}},{fontFamily:P,waitUntilDone:B}=(0,T.loadFont)("normal",{weights:["700"],subsets:["latin"]}),D=({captionAreaWidth:e,currentTimeMs:t,fps:n,page:a,pageIndex:s})=>{let o,{width:i}=(0,c.Bk)(),l=e??i,d=(0,p.useMemo)(()=>{let e=Math.max(1,l-24),t=a.tokens.map(e=>e.text.trim()).filter(Boolean).map(t=>(0,A.vY)({fontFamily:P,fontWeight:"700",text:t,validateFontIsLoaded:!0,withinWidth:e}).fontSize);return Math.min(80,(0,A.vY)({fontFamily:P,fontWeight:"700",text:a.text,validateFontIsLoaded:!0,withinWidth:l}).fontSize,...t)},[l,a.text,a.tokens]),u=(0,p.useRef)(null),m=(0,p.useRef)([]),[f,h]=(0,p.useState)([]);(0,p.useLayoutEffect)(()=>{let e=u.current;if(!e)return;let t=()=>{h(a.tokens.map((e,t)=>{let n=m.current[t];return n?{height:n.offsetHeight,left:n.offsetLeft,top:n.offsetTop,width:n.offsetWidth}:{height:0,left:0,top:0,width:0}}))};t();let n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[d,a.tokens]);let y=(o=a.tokens,o.reduce((e,n,a)=>n.fromMs<=t?a:e,-1)),g=(t-a.startMs)/1e3*n,E=a.tokens.reduce((e,t,s)=>{if(0===s)return e;let o=(t.fromMs-a.startMs)/1e3*n;return e+(0,c.oz)({config:{damping:100},delay:Math.max(0,o-2.5),durationInFrames:5,fps:n,frame:g})},0),x=f.length===a.tokens.length,b=Math.min(Math.max(E,0),Math.max(0,f.length-1)),F=f.map((e,t)=>Number(t)),v=e=>0===e.length?0:1===e.length?e[0]:(0,c.GW)(b,F,e),w=d+24,U=v(f.map(e=>e.left)),C=v(f.map(e=>

2e.top+(e.height-w)/2)),S=v(f.map(e=>e.width)),L=d/7;return(0,r.jsx)("div",{style:{alignItems:"center",display:"flex",height:"100%",justifyContent:"center",width:"100%"},children:(0,r.jsxs)("div",{ref:u,style:{color:M,fontFamily:P,fontSize:d,fontWeight:"700",lineHeight:1.5,paintOrder:"stroke fill",position:"relative",textAlign:"center",WebkitTextStroke:`${L}px #000000`,whiteSpace:"normal",width:"100%"},children:[x&&y>=0?(0,r.jsx)("div",{style:{backgroundColor:"#2563eb",borderRadius:10,height:w,left:U-12,position:"absolute",top:C,width:S+24}}):null,a.tokens.map((e,t)=>{let n=e.text.trim(),o=e.text.indexOf(n),i=n?e.text.slice(0,o):e.text,l=n?e.text.slice(o+n.length):"";return(0,r.jsxs)(p.Fragment,{children:[i,(0,r.jsx)("span",{ref:e=>{m.current[t]=e},style:{color:M,display:"inline-block",position:"relative",whiteSpace:"pre",zIndex:1},children:n}),l]},`${s}-${a.startMs}-${e.fromMs}-${t}`)})]})})},j=c.HG.withSchema({Component:({captions:e,combineTokensWithinMilliseconds:t=I,style:n,width:a=R})=>{let[s,o]=(0,p.useState)(!1);(0,p.useEffect)(()=>{B().then(()=>{o(!0)}).catch(e=>{(0,c.zo)(e instanceof Error?e:Error(String(e)))})},[]);let i=(0,c.UC)(),{fps:l}=(0,c.Bk)(),d=(0,p.useMemo)(()=>w({captions:e,combineTokensWithinMilliseconds:t}).pages,[e,t]),u=i/l*1e3,m=d.findIndex(e=>{let t,n;return t=e.startMs,n=e.startMs+e.durationMs,u>=t&&u<n}),f=d[m];return(0,r.jsx)("div",{style:{width:a,...n},children:s&&f?(0,r.jsx)(D,{captionAreaWidth:a??null,currentTimeMs:u,fps:l,page:f,pageIndex:m},`${m}-${f.startMs}`):null})},componentName:"<MovingPillCaptions>",schema:k,wrapInSequence:!0}),N="#ffffff",H=800,$=682,_={...c.HG.captionsSchema,width:{type:"number",min:1,step:1,default:void 0,description:"Caption area width",hiddenFromList:!1},combineTokensWithinMilliseconds:{type:"number",min:0,step:50,default:H,description:"Time between caption pages",hiddenFromList:!1}},{fontFamily:W,waitUntilDone:z}=(0,T.loadFont)("normal",{weights:["700"],subsets:["latin"]}),O=(e,t,n)=>e>=t&&e<n,G=({captionAreaWidth:e,currentTimeMs:t,fps:n,page:a,pageIndex:s})=>{let o,{width:i}=(0,c.Bk)(),l=e??i,d=(0,p.useMemo)(()=>{let e=Math.max(1,l/1.03),t=a.tokens.map(e=>e.text.trim()).filter(Boolean).map(t=>(0,A.vY)({fontFamily:W,fontWeight:"700",text:t,validateFontIsLoaded:!0,withinWidth:e}).fontSize);return Math.min(80,(0,A.vY)({fontFamily:W,fontWeight:"700",text:a.text,validateFontIsLoaded:!0,withinWidth:l}).fontSize,...t)},[l,a.text,a.tokens]),u=(o=a.tokens,o.findIndex(e=>O(t,e.fromMs,e.toMs))),m=d/7;return(0,r.jsx)("div",{style:{alignItems:"center",display:"flex",height:"100%",justifyContent:"center",width:"100%"},children:(0,r.jsx)("div",{style:{color:N,fontFamily:W,fontSize:d,fontWeight:"700",lineHeight:1.5,paintOrder:"stroke fill",textAlign:"center",WebkitTextStroke:`${m}px #000000`,whiteSpace:"normal",width:"100%"},children:a.tokens.map((e,o)=>{let i=e.text.trim(),l=e.text.indexOf(i),d=i?e.text.slice(0,l):e.text,m=i?e.text.slice(l+i.length):"";return(0,r.jsxs)(p.Fragment,{children:[d,(0,r.jsx)("span",{style:{color:o===u?"#2563eb":N,display:"inline-block",scale:(({currentTimeMs:e,fps:t,token:n})=>{if(!O(e,n.fromMs,n.toMs))return 1;let a=(n.toMs-n.fromMs)/1e3*t,s=(e-n.fromMs)/1e3*t,o=Math.min(4,a/2);return 1+Math.min((0,c.oz)({config:{damping:200},durationInFrames:o,fps:t,frame:s}),(0,c.GW)(s,[a-o,a],[1,0],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}))*(1.03-1)})({currentTimeMs:t,fps:n,token:e}),transformOrigin:"center bottom",whiteSpace:"pre"},children:i}),m]},`${s}-${a.startMs}-${e.fromMs}-${o}`)})})})},X=c.HG.withSchema({Component:({captions:e,combineTokensWithinMilliseconds:t=H,style:n,width:a=$})=>{let[s,o]=(0,p.useState)(!1);(0,p.useEffect)(()=>{z().then(()=>{o(!0)}).catch(e=>{(0,c.zo)(e instanceof Error?e:Error(String(e)))})},[]);let i=(0,c.UC)(),{fps:l}=(0,c.Bk)(),d=(0,p.useMemo)(()=>w({captions:e,combineTokensWithinMilliseconds:t}).pages,[e,t]),u=i/l*1e3,m=d.findIndex(e=>O(u,e.startMs,e.startMs+e.durationMs)),f=d[m];return(0,r.jsx)("div",{style:{width:a,...n},children:s&&f?(0,r.jsx)(G,{captionAreaWidth:a??null,currentTimeMs:u,fps:l,page:f,pageIndex:m},`${m}-${f.startMs}`):null})}

2,componentName:"<PoppingWordCaptions>",schema:_,wrapInSequence:!0});var K=n(93205),q=n(73260);let J=900,V={...c.HG.captionsSchema,width:{type:"number",min:45,step:1,default:void 0,description:"Caption area width",hiddenFromList:!1},combineTokensWithinMilliseconds:{type:"number",min:0,step:50,default:2e3,description:"Time between caption pages",hiddenFromList:!1}},{fontFamily:Y,waitUntilDone:Q}=(0,K.loadFont)("normal",{weights:["700"],subsets:["latin"]}),Z=c.HG.withSchema({Component:({captions:e,combineTokensWithinMilliseconds:t,style:n,width:a=J})=>{let[s,o]=(0,p.useState)(!1);(0,p.useEffect)(()=>{Q().then(()=>o(!0)).catch(e=>(0,c.zo)(e))},[]);let i=t??2e3,l=(0,c.UC)(),{fps:d}=(0,c.Bk)(),u=(0,p.useMemo)(()=>w({captions:e,combineTokensWithinMilliseconds:i}).pages,[e,i]),m=l/d*1e3,f=u.find(e=>m>=e.startMs&&m<e.startMs+e.durationMs),h=(0,p.useMemo)(()=>{if(!s||!f?.text.trim())return null;let e=f.text.trim().split(/\r?\n/).map(e=>e.trim()).filter(Boolean),t=Math.max(2,e.length),n=e.map(n=>(0,A.Vx)({text:n,maxLines:1===e.length?t:1,maxBoxWidth:Math.max(1,a-44),fontFamily:Y,fontWeight:"700",maxFontSize:64,validateFontIsLoaded:!0}));if(n.some(e=>0===e.lines.length))return null;let o=Math.min(...n.map(e=>e.fontSize)),r=n.flatMap(e=>e.lines),i=r.map(e=>(0,A.kD)({text:e,fontFamily:Y,fontSize:o,fontWeight:"700",additionalStyles:{lineHeight:1.5},validateFontIsLoaded:!0}));return{fontSize:o,lines:r,...(0,q.S)({textMeasurements:i,textAlign:"center",horizontalPadding:22,borderRadius:20})}},[s,f,a]);return(0,r.jsx)("div",{style:{alignItems:"center",display:"flex",justifyContent:"center",width:a,...n},children:h?(0,r.jsxs)("div",{style:{position:"relative",width:h.boundingBox.width,height:h.boundingBox.height,flexShrink:0},children:[(0,r.jsx)("svg",{viewBox:h.boundingBox.viewBox,style:{position:"absolute",left:0,top:0,width:h.boundingBox.width,height:h.boundingBox.height,overflow:"visible"},children:(0,r.jsx)("path",{fill:"#ffffff",d:h.d})}),(0,r.jsx)("div",{style:{position:"relative"},children:h.lines.map((e,t)=>(0,r.jsx)("div",{style:{color:"#000000",fontFamily:Y,fontSize:h.fontSize,fontWeight:"700",lineHeight:1.5,paddingInline:22,textAlign:"center",whiteSpace:"pre"},children:e},t))})]}):null})},componentName:"<RoundedCaptions>",schema:V,wrapInSequence:!0}),ee="#ffffff",et=800,en=682,ea={...c.HG.captionsSchema,width:{type:"number",min:1,step:1,default:void 0,description:"Caption area width",hiddenFromList:!1},combineTokensWithinMilliseconds:{type:"number",min:0,step:50,default:et,description:"Time between caption pages",hiddenFromList:!1}},{fontFamily:es,waitUntilDone:eo}=(0,T.loadFont)("normal",{weights:["700"],subsets:["latin"]}),er=(e,t,n)=>e>=t&&e<n,ei=({captionAreaWidth:e,currentTimeMs:t,page:n,pageIndex:a})=>{let s,{width:o}=(0,c.Bk)(),i=e??o,l=(0,p.useMemo)(()=>{let e=Math.max(1,i),t=n.tokens.map(e=>e.text.trim()).filter(Boolean).map(t=>(0,A.vY)({fontFamily:es,fontWeight:"700",text:t,validateFontIsLoaded:!0,withinWidth:e}).fontSize);return Math.min(80,(0,A.vY)({fontFamily:es,fontWeight:"700",text:n.text,validateFontIsLoaded:!0,withinWidth:i}).fontSize,...t)},[i,n.text,n.tokens]),d=(s=n.tokens,s.findIndex(e=>er(t,e.fromMs,e.toMs))),u=l/7;return(0,r.jsx)("div",{style:{alignItems:"center",display:"flex",height:"100%",justifyContent:"center",width:"100%"},children:(0,r.jsx)("div",{style:{color:ee,fontFamily:es,fontSize:l,fontWeight:"700",lineHeight:1.5,paintOrder:"stroke fill",textAlign:"center",WebkitTextStroke:`${u}px #000000`,whiteSpace:"normal",width:"100%"},children:n.tokens.map((e,t)=>{let s=e.text.trim(),o=e.text.indexOf(s),i=s?e.text.slice(0,o):e.text,l=s?e.text.slice(o+s.length):"";return(0,r.jsxs)(p.Fragment,{children:[i,(0,r.jsx)("span",{style:{color:t===d?"#2563eb":ee,display:"inline-block",whiteSpace:"pre"},children:s}),l]},`${a}-${n.startMs}-${e.fromMs}-${t}`)})})})},el=c.HG.withSchema({Component:({captions:e,combineTokensWithinMilliseconds:t=et,style:n,width:a=en})=>{let[s,o]=(0,p.useState)(!1);(0,p.useEffect)(()=>{eo().then(()=>{o(!0)}).catch(e=>{(0,c.zo)(e instanceof Error?e:Error(String(e)))})},[]);let i=(0,c.UC)(),{fps:l}=(0,c.Bk)(),d=(0,p.useMemo)(()=>w({captions:e,combineTokensWithinMilliseconds:t}).pages,[e,t]),u=i/l*1e3,m=d.findIndex(e=>er(u,e.startMs,e.startMs+e.durationMs)),f=d[m];return(0,r.jsx)("div",{style:{width:a,...n},children:s&&f?(0,r.jsx)(ei,{captionAreaWidth:a??null,currentTimeMs:u,page:f,pageIndex:m},`${m}-${f.startMs}`):null})}

2,componentName:"<WordHighlightCaptions>",schema:ea,wrapInSequence:!0});var ep=n(17601);(0,ep.loadFont)("normal",{subsets:["latin"],weights:["500","600","700"]});let ec=c.HG.withSchema({Component:({count:e,index:t,label:n,style:a})=>{let s=(0,c.UC)(),o=Math.max(0,e-1),i=(0,c.GW)(s,[24,122],[0,o],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),l=Math.min(Math.floor(i),Math.max(0,o-1)),p=(0,c.GW)(i-l,[.18,.82],[0,1],{easing:c.GS.inOut(c.GS.cubic),extrapolateLeft:"clamp",extrapolateRight:"clamp"}),d=t-(l+p),u=e<=2?d:((d+e/2)%e+e)%e-e/2,m=Math.abs(u),f=(0,c.GW)(m,[1.02,1.18],[1,0],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),h=8+5*Math.min(t,1),y=(0,c.GW)(s,[h,h+18],[0,1],{easing:c.GS.bezier(.16,1,.3,1),extrapolateLeft:"clamp",extrapolateRight:"clamp"}),g=36*Math.min(m,1.3)+(1-y)*180,E=(0,c.GW)(m,[0,1.5],[1.02,.84],{extrapolateLeft:"clamp",extrapolateRight:"clamp"});return(0,r.jsx)("div",{style:{height:560,left:300,top:40,opacity:f*y,position:"absolute",rotate:`${5.5*u}deg`,scale:E*(.86+.14*y),transform:"perspective(100px)",translate:`${270*u}px ${g}px`,width:300,willChange:"transform, opacity",zIndex:100-Math.round(20*m)},children:(0,r.jsx)("div",{style:{...a,backgroundColor:"#ffffff",borderRadius:6,boxShadow:"0 2px 6px rgba(29, 29, 25, 0.12)",boxSizing:"border-box",color:"#1d1d19",display:"flex",flexDirection:"column",height:"100%",overflow:"hidden",width:"100%"},children:(0,r.jsxs)(c.HG.Div,{name:"Card label",style:{alignItems:"center",color:"#ffffff",display:"flex",fontFamily:"sans-serif",fontSize:160,fontWeight:900,height:"100%",justifyContent:"center",letterSpacing:-8,overflow:"hidden",position:"relative",textShadow:"0 4px 30px rgba(0, 0, 0, 0.55)"},children:[(0,r.jsx)(c.E9,{alt:"",name:"Card background",showInTimeline:!1,src:1===t?"https://remotion.media/transition-bg-pink.jpg":"https://remotion.media/transition-bg-blue.jpg",style:{filter:2===t?"hue-rotate(-65deg)":"none",height:"100%",objectFit:"cover",position:"absolute",width:"100%"}}),(0,r.jsx)("div",{style:{position:"relative"},children:n})]})})})},componentName:"<ProductCard>",schema:{label:{type:"text-content",default:"A",description:"Card label"},count:{type:"hidden"},index:{type:"hidden"}},wrapInSequence:!0});var ed=n(83433);(0,ep.loadFont)("normal",{subsets:["latin"],weights:["500","600","700","800"]});var eu=n(2477),em=n(5786),ef=n(82749);let{fontFamily:eh}=(0,ep.loadFont)("normal",{subsets:["latin"],weights:["700","800"]}),ey=[{highlighted:!0,label:"Jonny",value:18},{highlighted:!1,label:"Igor",value:17},{highlighted:!1,label:"Mehmet",value:10}],eg=Math.round(500/ey.length),eE=Math.max(...ey.map(({value:e})=>e)),ex=({highlighted:e,label:t,value:n})=>{let a=(0,c.UC)();return(0,r.jsxs)(c.HG.Div,{cropRight:(0,c.GW)(a,[14,47],[1,0],{easing:[c.GS.bezier(0,0,.58,1)],extrapolateLeft:"clamp",extrapolateRight:"clamp"}),name:"Bar",style:{alignItems:"center",backgroundColor:e?"#2563eb":"#d1d5db",borderRadius:12,boxSizing:"border-box",color:e?"#ffffff":"#111827",display:"flex",height:"100%",justifyContent:"space-between",overflow:"hidden",padding:"0 34px",width:"100%"},children:[(0,r.jsx)(c.HG.Div,{name:"Label",style:{fontSize:40,fontWeight:700,lineHeight:1,opacity:(0,c.GW)(a,[26,32],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),whiteSpace:"nowrap"},children:t}),(0,r.jsx)(c.HG.Div,{name:"Value",style:{fontSize:48,fontWeight:800,letterSpacing:-1.6,lineHeight:1,opacity:(0,c.GW)(a,[32,38],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),whiteSpace:"nowrap"},children:n})]})},{fontFamily:eb}=(0,ep.loadFont)("normal",{subsets:["latin"],weights:["700","800"]}),eF=[{label:"Mar",value:24},{label:"Apr",value:32},{label:"May",value:29},{label:"Jun",value:45},{label:"Jul",value:51},{label:"Aug",value:63},{label:"Sep",value:74}],ev=[80,60,40,20],ew=c.GS.spring({damping:14.5,mass:.8,overshootClamping:!1,stiffness:100});(0,ep.loadFont)("normal",{subsets:["latin"],weights:["800"]});let{fontFamily:eU}=(0,ep.loadFont)("normal",{subsets:["latin"],weights:["700","800"]}),eC=[{color:"#2563eb",foreground:"#ffffff",label:"Focused work",value:42},{color:"#6b7280",foreground:"#ffffff",label:"Meetings",value:26},{color:"#9ca3af",foreground:"#111827",label:"Planning",value:18},{color:"#d1d5db",foreground:"#111827",label:"Admin",value:14}],eS=eC.reduce((e,t)=>

2e+t.value,0),eL=({color:e,foreground:t,label:n,value:a})=>{let s=(0,c.UC)();return(0,r.jsxs)(c.HG.Div,{name:`${n} legend item`,cropLeft:(0,c.GW)(s,[0,44],[1,0],{easing:c.GS.inOut(c.GS.cubic),extrapolateLeft:"clamp",extrapolateRight:"clamp"}),style:{alignItems:"center",backgroundColor:e,borderRadius:12,boxSizing:"border-box",color:t,display:"flex",height:104,justifyContent:"space-between",padding:"0 32px",width:"100%"},children:[(0,r.jsx)(c.HG.Div,{name:`${n} label`,style:{fontSize:38,fontWeight:700,letterSpacing:-1.2,lineHeight:1,opacity:(0,c.GW)(s,[32,44],[0,1],{easing:c.GS.inOut(c.GS.cubic),extrapolateLeft:"clamp",extrapolateRight:"clamp"}),whiteSpace:"nowrap"},children:n}),(0,r.jsxs)(c.HG.Div,{name:`${n} value`,style:{fontSize:46,fontWeight:800,letterSpacing:-1.6,lineHeight:1,opacity:(0,c.GW)(s,[6,18],[0,1],{easing:c.GS.inOut(c.GS.cubic),extrapolateLeft:"clamp",extrapolateRight:"clamp"}),whiteSpace:"nowrap"},children:[a,"%"]})]})},{fontFamily:eT}=(0,ep.loadFont)("normal",{subsets:["latin"],weights:["700","800"]}),eA=[{highlighted:!1,label:"Jonny",value:34},{highlighted:!1,label:"Igor",value:89},{highlighted:!0,label:"Mehmet",value:163}],eM=Math.max(...eA.map(({value:e})=>e)),eI=c.GS.spring({damping:14.5,mass:.8,overshootClamping:!1,stiffness:100}),eR=({animationDelay:e,highlighted:t,label:n,value:a})=>{let s=(0,c.UC)(),o=22+e,i=o+16+Math.round(a/eM*8),l=s>=i?1:(0,c.GW)(s,[o,i],[0,1],{easing:[eI],extrapolateLeft:"clamp",extrapolateRight:"clamp"}),p=i-8,d=i+2,u=(0,c.GW)(s,[p,d],[0,1],{easing:eI,extrapolateLeft:"clamp",extrapolateRight:"clamp"});return(0,r.jsxs)("div",{style:{display:"flex",flexDirection:"column",gap:20,height:"100%",margin:"0 auto",width:280},children:[(0,r.jsx)("div",{style:{alignItems:"flex-end",display:"flex",flex:1},children:(0,r.jsxs)("div",{style:{height:`${a/eM*90}%`,position:"relative",width:"100%"},children:[(0,r.jsx)("div",{style:{bottom:`calc(${100*l}% + 12px)`,left:0,overflow:s<d?"hidden":"visible",position:"absolute",visibility:s<=p?"hidden":"visible",width:"100%"},children:(0,r.jsx)("div",{style:{transform:"perspective(100px)",translate:`0 ${(1-u)*100}%`,willChange:"transform"},children:(0,r.jsx)(c.HG.Div,{name:"Value",style:{color:"#111827",fontSize:48,fontWeight:800,letterSpacing:-1.6,lineHeight:1,textAlign:"center",whiteSpace:"nowrap",width:"100%"},children:a})})}),(0,r.jsx)("div",{style:{bottom:0,height:`${100*l}%`,position:"absolute",width:"100%"},children:(0,r.jsx)(c.HG.Div,{name:"Bar",style:{backgroundColor:t?"#2563eb":"#b9c0ca",borderRadius:"12px 12px 0 0",height:"100%",width:"100%"}})})]})}),(0,r.jsx)("div",{style:{overflow:s<i?"hidden":"visible"},children:(0,r.jsx)("div",{style:{transform:"perspective(100px)",translate:`0 ${(1-l)*100}%`,willChange:"transform"},children:(0,r.jsx)(c.HG.Div,{name:"Label",style:{color:"#111827",fontSize:40,fontWeight:700,lineHeight:1.2,textAlign:"center",whiteSpace:"nowrap"},children:n})})})]})};var ek=n(39746),eP=n(14690),eB=n(23058),eD=n(69420),ej=n(27862);n(5906);let eN=(e,t)=>{let n=e;for(;n-t>180;)n-=360;for(;n-t<-180;)n+=360;return n},eH=c.HG.withSchema({Component:({destination:e=[139.6917,35.6895],destinationLabel:t="Tokyo",lineWidth:n=24,origin:a=[-.1276,51.5072],originLabel:s="London",routeColor:o="#ff5c4d",style:i})=>{let l=(0,c.UC)(),{height:d,width:u}=(0,c.Bk)(),{continueRender:m,delayRender:f}=(0,c.dB)(),{delayPlayback:h}=(0,c.Fx)(),y=(0,p.useRef)(null),g=(0,p.useRef)(null),[E,x]=(0,p.useState)(null),[b]=(0,p.useState)(()=>f("Loading MapLibre flyover")),F=(0,p.useMemo)(()=>[a[0],a[1]],[a]),v=(0,p.useMemo)(()=>[e[0],e[1]],[e]),w=(0,p.useMemo)(()=>((e,t)=>{if(1e-6>Math.abs(e[0]-t[0])&&1e-6>Math.abs(e[1]-t[1]))return ek.wi([e,[e[0]+1e-4,e[1]]]);let n=eP.G(e,t,{npoints:200}),a="LineString"===n.geometry.type?n.geometry.coordinates:n.geometry.coordinates.flat(),s=[];for(let e of a){let t=s.at(-1)?.[0]??e[0];s.push([eN(e[0],t),e[1]])}let o=eD.tt.fromLngLat({lng:s[0][0],lat:s[0][1]}),r=s[s.length-1],i=eD.tt.fromLngLat({lng:r[0],lat:r[1]});return ek.wi(s.map((e,t)=>{let n=t/(s.length-1),a=eD.tt.fromLngLat({lng:e[0],lat:e[1]}),r=o.x+(i.x-o.x)*n,l=o.y+(i.y-o.y)*n,p=new eD.tt(r+(a.x-r)*.5,l+(a.y-l)*.5).toLngLat();return[p.lng,p.lat]}))})(F,v),[v,F]),U=(0,p.useMemo)(()=>eB.B(w),[w]),C=(0,p.useMemo)(()=>(({height:e,route:t,routeDistance:n,width:a})=>{let s=t.geometry.coordinates.map(e=>eD.tt.fromLngLat({lng:e[0],lat:e[1]})),o=Math.min(...s.map(e=>e.x)),r=Math.max(...s.map(e=>e.x)),i=Math.min(...s.map(e=>e.y)),l=Math.max(...s.map(e=>e.y)),p=Math.max(1e-6,r-o),d=Math.max(1e-6,l-i),u=new eD.tt((o+r)/2,(i+l)/2).toLngLat(),m=Math.min(4096/a,4096/e),f=Math.floor(a*m),h=Math.floor(e*m),y=Math.min(Math.log2(.82*a/(512*p)),Math.log2(.72*e/(512*d)),(0,c.GW)(n,[100,1e4],[7,3],{extrapolateLeft:"clamp",extrapolateRight:"clamp"})),g=Math.min(Math.log2(Math.max(1,f-a)/(512*p)),Math.log2(Math.max(1,h-e)/(512*d))),E=y+Math.log2(Math.min(f/a,h/e));

2return{center:u,height:h,width:f,zoom:Math.max(y,Math.min(y+1.25,g,E))}})({height:d,route:w,routeDistance:U,width:u}),[d,w,U,u]),S=(0,p.useMemo)(()=>{let e,t,n;return e=0,t=null,{end:(n=w.geometry.coordinates.map(n=>{let a,s,o,r=(a=eD.tt.fromLngLat(C.center),s=eD.tt.fromLngLat({lng:n[0],lat:n[1]}),o=512*2**C.zoom,{x:(s.x-a.x)*o+C.width/2,y:(s.y-a.y)*o+C.height/2});return t&&(e+=Math.hypot(r.x-t.x,r.y-t.y)),t=r,{distance:e,...r}}))[n.length-1],pointAtProgress:t=>{let a=e*t,s=n.findIndex(e=>e.distance>=a),o=-1===s?n.length-1:Math.max(1,s),r=n[o],i=n[o-1],l=r.distance===i.distance?0:(a-i.distance)/(r.distance-i.distance);return{x:(0,c.GW)(l,[0,1],[i.x,r.x]),y:(0,c.GW)(l,[0,1],[i.y,r.y])}},routePath:n.map((e,t)=>`${0===t?"M":"L"} ${e.x} ${e.y}`).join(" "),start:n[0]}},[C,w]),L=(0,c.GW)(l,[0,205],[0,1],{easing:c.GS.inOut(c.GS.quad),extrapolateLeft:"clamp",extrapolateRight:"clamp"}),T=(0,c.GW)(l,[0,14],[1,0],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),A=Math.max(14,.8*n),M=.27*A,I=(0,c.GW)(l,[210,222],[n/2/A,1],{easing:c.GS.inOut(c.GS.cubic),extrapolateLeft:"clamp",extrapolateRight:"clamp"}),R=(0,c.GW)(l,[224,234],[0,1],{easing:c.GS.inOut(c.GS.cubic),extrapolateLeft:"clamp",extrapolateRight:"clamp"}),k=(0,c.GW)(l,[232,240],[0,1],{easing:c.GS.inOut(c.GS.quad),extrapolateLeft:"clamp",extrapolateRight:"clamp"}),P=S.pointAtProgress(L),B=`translate(${u/2-P.x}px, ${d/2-P.y}px)`;return(0,p.useLayoutEffect)(()=>{if(!E)return h().unblock},[h,E]),(0,p.useEffect)(()=>{if(!y.current||g.current)return;ej.QE(URL.createObjectURL(new Blob([`import "https://unpkg.com/maplibre-gl@${ej.HF()}/dist/maplibre-gl-worker.mjs";`],{type:"text/javascript"})));let e=new ej.T5({container:y.current,style:{version:8,sources:{"nasa-blue-marble":{type:"raster",tiles:["https://gibs.earthdata.nasa.gov/wmts/epsg3857/best/BlueMarble_NextGeneration/default/GoogleMapsCompatible_Level8/{z}/{y}/{x}.jpeg"],tileSize:256,maxzoom:8,attribution:"NASA EOSDIS / GIBS"}},layers:[{id:"nasa-blue-marble",type:"raster",source:"nasa-blue-marble",paint:{"raster-fade-duration":0}}]},center:C.center,zoom:C.zoom,interactive:!1,attributionControl:!1,fadeDuration:0,pixelRatio:1,renderWorldCopies:!0,canvasContextAttributes:{preserveDrawingBuffer:!0}});g.current=e,e.on("load",()=>{e.jumpTo({bearing:0,center:C.center,pitch:0,zoom:C.zoom}),e.once("idle",()=>{x(e),m(b)}),e.triggerRepaint()})},[m,b,C]),(0,p.useEffect)(()=>{if(!E)return;let e=f("Reframing MapLibre map plate");E.resize(),E.jumpTo({bearing:0,center:C.center,pitch:0,zoom:C.zoom}),E.once("idle",()=>m(e)),E.triggerRepaint()},[m,f,E,C.center,C.zoom]),(0,r.jsxs)("div",{style:{backgroundColor:"#dbe4e8",height:d,overflow:"hidden",position:"absolute",width:u,...i},children:[(0,r.jsx)("div",{ref:y,style:{height:C.height,opacity:+!!E,position:"absolute",transform:B,transformOrigin:"0 0",width:C.width,willChange:"transform"}}),(0,r.jsxs)("svg",{viewBox:`0 0 ${C.width} ${C.height}`,style:{height:C.height,opacity:+!!E,overflow:"visible",pointerEvents:"none",position:"absolute",transform:B,transformOrigin:"0 0",width:C.width,willChange:"transform"},children:[(0,r.jsx)("path",{d:S.routePath,fill:"none",pathLength:1,stroke:o,strokeDasharray:1,strokeDashoffset:1-L,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:n}),(0,r.jsx)("g",{transform:`translate(${S.start.x} ${S.start.y})`,children:(0,r.jsx)("circle",{fill:o,r:A})}),(0,r.jsx)("text",{x:S.start.x,y:S.start.y+A+26,fill:"#ffffff",fontFamily:"sans-serif",fontSize:26,fontWeight:600,opacity:T,style:{filter:"drop-shadow(0 2px 3px rgba(0, 0, 0, 0.9))"},textAnchor:"middle",children:s}),l>=210?(0,r.jsxs)("g",{transform:`translate(${S.end.x} ${S.end.y})`,children:[(0,r.jsx)("circle",{fill:o,r:A,transform:`scale(${I})`}),(0,r.jsx)("circle",{fill:"#ffffff",r:M,transform:`scale(${R})`})]}):null,(0,r.jsx)("text",{x:S.end.x,y:S.end.y+A+26,fill:"#ffffff",fontFamily:"sans-serif",fontSize:26,fontWeight:600,opacity:k,style:{filter:"drop-shadow(0 2px 3px rgba(0, 0, 0, 0.9))"},textAnchor:"middle",children:t})]}),(0,r.jsx)("div",{style:{background:"radial-gradient(circle, transparent 45%, rgba(10, 20, 28, 0.22) 130%)",inset:0,pointerEvents:"none",position:"absolute"}}),(0,r.jsx)("div",{style:{backgroundColor:"rgba(255, 255, 255, 0.8)",borderRadius:4,bottom:8,color:"#111827",fontFamily:"sans-serif",fontSize:12,padding:"3px 6px",position:"absolute",right:8},children:"NASA EOSDIS / GIBS"})]})}

2,componentName:"<MapFlyover>",schema:{origin:{type:"array",item:{type:"number",step:1e-4},default:[-.1276,51.5072],minLength:2,maxLength:2,newItemDefault:0,description:"Origin [longitude, latitude]"},destination:{type:"array",item:{type:"number",step:1e-4},default:[139.6917,35.6895],minLength:2,maxLength:2,newItemDefault:0,description:"Destination [longitude, latitude]"},originLabel:{type:"text-content",default:"London",description:"Origin label"},destinationLabel:{type:"text-content",default:"Tokyo",description:"Destination label"},routeColor:{type:"color",default:"#ff5c4d",description:"Route color"},lineWidth:{type:"number",min:2,max:24,step:1,default:24,description:"Route width",hiddenFromList:!1}},wrapInSequence:!0});var e$=n(76777);(0,e$.loadFont)("normal",{weights:["700"],subsets:["latin"]});let e_=(e,t)=>{let n=256*2**t,a=Math.max(-85.05112,Math.min(85.05112,e[1]))*Math.PI/180;return{x:(e[0]+180)/360*n,y:(.5-Math.log(Math.tan(Math.PI/4+a/2))/(2*Math.PI))*n}},eW=c.HG.withSchema({Component:({destination:e=[8.5417,47.3769],destinationLabel:t="Zurich",origin:n=[-118.2437,34.0522],originLabel:a="Los Angeles",routeColor:s="#ff0041",routeWidth:o=18,style:i})=>{let l=(0,c.UC)(),{fps:p,height:d,width:u}=(0,c.Bk)(),m=((e,t)=>{let n=Math.hypot(((t[0]-e[0]+540)%360+360)%360-180,t[1]-e[1])/7.5,a=0,s=1/0;for(let e=0;e<=18;e++){let t=Math.abs(360/2**e-n);t<s&&(s=t,a=e)}return a})(n,e),f=256*2**m,h=e_(n,m),y=e_(e,m),g=y.x;for(;g-h.x>f/2;)g-=f;for(;g-h.x<-f/2;)g+=f;let E=(0,c.GW)(l,[40,130],[0,1],{easing:c.GS.inOut(c.GS.ease),extrapolateLeft:"clamp",extrapolateRight:"clamp"}),x=(0,c.GW)(E,[0,1],[h.x,g]),b=Math.max(d/2,Math.min(f-d/2,(0,c.GW)(E,[0,1],[h.y,y.y]))),F=h.x-x+u/2,v=h.y-b+d/2,w=g-x+u/2,U=y.y-b+d/2,C=Math.min(400,.37*d,.35*Math.hypot(w-F,U-v)),S=`M ${F} ${v} Q ${(F+w)/2} ${(v+U)/2-C} ${w} ${U}`,L=1-(0,c.oz)({fps:p,frame:l-40,config:{damping:200},durationInFrames:20}),T=(0,c.oz)({fps:p,frame:l-133,config:{damping:200},durationInFrames:20}),A=(0,c.oz)({fps:p,frame:l-130,config:{damping:200},durationInFrames:20}),M=(({centerX:e,centerY:t,height:n,width:a,zoom:s})=>{let o=2**s,r=e-a/2,i=t-n/2,l=Math.floor(r/256),p=Math.floor((r+a)/256),c=Math.max(0,Math.floor(i/256)),d=Math.min(o-1,Math.floor((i+n)/256)),u=[];for(let e=l;e<=p;e++){let t=(e%o+o)%o;for(let n=c;n<=d;n++)u.push({key:`${s}/${e}/${n}`,left:256*e-r,src:`https://watercolormaps.collection.cooperhewitt.org/tile/watercolor/${s}/${t}/${n}.jpg`,top:256*n-i})}return u})({centerX:x,centerY:b,height:d,width:u,zoom:m}),I=v>120&&(v>d-120||n[1]>e[1]),R=U>120&&(U>d-120||e[1]>=n[1]);return(0,r.jsxs)("div",{style:{backgroundColor:"#e6ec88",height:d,overflow:"hidden",position:"absolute",width:u,...i},children:[M.map(e=>(0,r.jsx)(c.E9,{pauseWhenLoading:!0,showInTimeline:!1,src:e.src,style:{height:257,left:e.left,maxWidth:"none",position:"absolute",top:e.top,width:257}},e.key)),(0,r.jsxs)("svg",{viewBox:`0 0 ${u} ${d}`,style:{height:d,inset:0,overflow:"visible",pointerEvents:"none",position:"absolute",width:u},children:[(0,r.jsx)("path",{d:S,fill:"none",pathLength:1,stroke:"white",strokeDasharray:1,strokeDashoffset:1-E,strokeLinecap:"round",strokeWidth:o+24}),(0,r.jsx)("path",{d:S,fill:"none",pathLength:1,stroke:s,strokeDasharray:1,strokeDashoffset:1-E,strokeLinecap:"round",strokeWidth:o})]}),(0,r.jsx)("div",{style:{backgroundColor:s,border:"12px solid white",borderRadius:"50%",boxSizing:"border-box",height:60,left:F,position:"absolute",top:v,translate:"-50% -50%",width:60}}),(0,r.jsx)("div",{style:{backgroundColor:s,border:"12px solid white",borderRadius:"50%",boxSizing:"border-box",height:60,left:w,position:"absolute",scale:T,top:U,translate:"-50% -50%",width:60}}),(0,r.jsx)("div",{style:{backgroundColor:"white",borderRadius:32,boxShadow:"0 0 30px white",color:"#182026",fontFamily:e$.fontFamily,fontSize:40,fontWeight:700,left:F,opacity:L,padding:"14px 36px",pointerEvents:"none",position:"absolute",top:v,translate:`-50% ${I?"-145%":"45%"}`,whiteSpace:"nowrap"},children:a}),(0,r.jsx)("div",{style:{backgroundColor:"white",borderRadius:32,boxShadow:"0 0 30px white",color:"#182026",fontFamily:e$.fontFamily,fontSize:40,fontWeight:700,left:w,opacity:A,padding:"14px 36px",pointerEvents:"none",position:"absolute",top:U,translate:`-50% ${R?"-145%":"45%"}`,whiteSpace:"nowrap"},children:t}),(0,r.jsx)("div",{style:{backgroundColor:"rgba(255, 255, 255, 0.82)",borderRadius:4,bottom:8,color:"#182026",fontFamily:"sans-serif",fontSize:12,padding:"3px 6px",position:"absolute",right:8},children:"Map tiles by Stamen Design, under CC BY 3.0 \xb7 Data by OpenStreetMap, under CC BY-SA"})]})}

2,componentName:"<WatercolorMap>",schema:{origin:{type:"array",item:{type:"number",step:1e-4},default:[-118.2437,34.0522],minLength:2,maxLength:2,newItemDefault:0,description:"Origin [longitude, latitude]"},destination:{type:"array",item:{type:"number",step:1e-4},default:[8.5417,47.3769],minLength:2,maxLength:2,newItemDefault:0,description:"Destination [longitude, latitude]"},originLabel:{type:"text-content",default:"Los Angeles",description:"Origin label"},destinationLabel:{type:"text-content",default:"Zurich",description:"Destination label"},routeColor:{type:"color",default:"#ff0041",description:"Route color"},routeWidth:{type:"number",min:4,max:30,step:1,default:18,description:"Route width",hiddenFromList:!1}},wrapInSequence:!0});(0,ep.loadFont)("normal",{subsets:["latin"],weights:["500","700"]});let ez=c.HG.withSchema({Component:({platform:e="instagram",style:t})=>(0,r.jsxs)("div",{style:{...t,height:1920,left:0,pointerEvents:"none",position:"absolute",top:0,width:1080,zIndex:0x7fffffff},children:[(0,r.jsx)(c.wY,{"aria-hidden":"true",fit:"cover",height:1920,name:"Background",src:"https://remotion.media/elements/commerce-tear-a-graphic.png",style:{height:"100%",left:0,position:"absolute",top:0,width:"100%"},width:1080}),(0,r.jsx)(c.wY,{"aria-hidden":"true",fit:"contain",height:1920,showInTimeline:!1,src:"tiktok"===e?"https://remotion.media/elements/social-safe-zones/tiktok-interface.png":"https://remotion.media/elements/social-safe-zones/instagram-reels-interface-v3.png",style:{height:"100%",left:0,position:"absolute",top:0,width:"100%"},width:1080})]}),componentName:"<SocialSafeZones>",schema:{platform:{type:"enum",default:"instagram",description:"Platform",keyframable:!1,variants:{instagram:{},tiktok:{}}}},wrapInSequence:!0});(0,ep.loadFont)("normal",{subsets:["latin"],weights:["400"]});var eO=n(34613);(0,eO.loadFont)("normal",{weights:["600"],subsets:["latin"]});let eG=c.HG.withSchema({Component:({color:e="#ffffff",style:t})=>{let n=(0,c.UC)(),{width:a,height:s,durationInFrames:o}=(0,c.Bk)(),i=Math.floor(n/2),l=a/2,p=s/2,d=Math.hypot(a,s),u=Array(56).fill(!0).map((e,t)=>{let n=t/56*Math.PI*2+.08*(0,c.yT)(`angle-${t}-${i}`),o=.006+.014*(0,c.yT)(`spread-${t}-${i}`),r=.36+.22*(0,c.yT)(`inner-${t}-${i}`),u=l+Math.cos(n-o)*d,m=p+Math.sin(n-o)*d,f=l+Math.cos(n+o)*d,h=p+Math.sin(n+o)*d,y=l+Math.cos(n)*r*(a/2),g=p+Math.sin(n)*r*(s/2);return`M ${y} ${g} L ${u} ${m} L ${f} ${h} Z`});return(0,r.jsx)(c.H1,{style:t,showInTimeline:!1,children:(0,r.jsx)(c.H1,{name:"Speed lines fade",style:{opacity:(0,c.GW)(n,[0,3,o-5,o-1],[0,.85,.85,0],{extrapolateLeft:"clamp",extrapolateRight:"clamp"})},children:(0,r.jsx)("svg",{width:a,height:s,viewBox:`0 0 ${a} ${s}`,children:u.map((t,n)=>(0,r.jsx)("path",{d:t,fill:e},n))})})})},componentName:"<SpeedLines>",schema:{color:{type:"color",default:"#ffffff",description:"Color"}},wrapInSequence:!0});var eX=n(12135),eK=n(22693);let{fontFamily:eq}=(0,eX.loadFont)("normal",{weights:["700"],subsets:["latin"]}),{fontFamily:eJ}=(0,eX.loadFont)("normal",{weights:["700"],subsets:["latin"]}),eV=(e,t)=>{let n=31+29*t;return(0,c.GW)(e,[n,n+24],[0,1],{easing:[c.GS.spring({allowTail:!0,damping:200,durationRestThreshold:.02,mass:1,overshootClamping:!1,stiffness:100})],extrapolateLeft:"clamp",extrapolateRight:"clamp"})},eY=(e,t)=>(0,c.GW)(e,[t/2,(t+1)/2],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"});(0,n(74379).loadFont)("normal",{weights:["700"],subsets:["latin"]});let eQ={items:{type:"text-content",default:"Friday\nSaturday\nSunday\nMonday\nTuesday\nWednesday\nThursday",description:"Items (selected first, one per line)"},...c.HG.textSchema,"style.color":{...c.HG.textSchema["style.color"],default:"#182033"},"style.fontFamily":{...c.HG.textSchema["style.fontFamily"],default:"Mona Sans"},"style.fontSize":{...c.HG.textSchema["style.fontSize"],default:65},"style.fontWeight":{...c.HG.textSchema["style.fontWeight"],default:700},"style.lineHeight":{...c.HG.textSchema["style.lineHeight"],default:1}},eZ=c.HG.withSchema({Component:({items:e="Friday\nSaturday\nSunday\nMonday\nTuesday\nWednesday\nThursday",style:t})=>{let n=(0,c.UC)(),{fps:a}=(0,c.Bk)(),s=e.split("\n").map(e=>

2e.trim()).filter(Boolean),o=(0,c.oz)({fps:a,frame:n,config:{mass:10,damping:200,stiffness:200},durationInFrames:90,durationRestThreshold:1e-4}),i=(0,c.GW)(o,[0,1],[1,0]);return(0,r.jsx)("div",{style:{color:"#182033",fontFamily:"Mona Sans",fontSize:65,fontWeight:700,height:200,lineHeight:1,maskImage:"linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 1) 70%, transparent 100%)",overflow:"hidden",WebkitMaskImage:"linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 1) 70%, transparent 100%)",perspective:1e4,position:"relative",width:400,...t},children:s.map((e,t)=>{let n=t/s.length+i,a=n*Math.PI*2,l=360*n;return(0,r.jsx)("div",{style:{alignItems:"center",backfaceVisibility:"hidden",display:"flex",height:"100%",justifyContent:"center",left:0,opacity:0===t?(0,c.GW)(o,[.88,1],[.28,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}):.28,position:"absolute",top:0,perspective:1e3,transform:`translateZ(${100*Math.cos(a)}px) translateY(${100*Math.sin(a)}px) rotateX(${l}deg)`,width:"100%"},children:(0,r.jsx)("div",{style:{backfaceVisibility:"hidden",textAlign:"center",transform:`rotateX(${-l}deg)`,width:"100%"},children:e})},`${t}-${e}`)})})},componentName:"<SpinningTextWheel>",schema:eQ,wrapInSequence:!0}),{fontFamily:e0}=(0,eX.loadFont)("normal",{weights:["700"],subsets:["latin"]}),{fontFamily:e1}=(0,eX.loadFont)("normal",{weights:["700"],subsets:["latin"]});(0,ep.loadFont)("normal",{subsets:["latin"],weights:["500","600","700"]}),(0,ep.loadFont)("normal",{weights:["500"]});let e2=({height:e})=>(0,r.jsx)(c.HG.Svg,{name:"LinkedIn icon",height:e,viewBox:"0 0 448 512",style:{translate:"0 -4px"},children:(0,r.jsx)("path",{fill:"currentColor",d:"M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"})}),e4=({height:e})=>(0,r.jsx)(c.HG.Svg,{name:"X icon",height:e,viewBox:"0 0 512 512",children:(0,r.jsx)("path",{fill:"currentColor",d:"M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"})}),e8=({height:e})=>(0,r.jsx)(c.HG.Svg,{name:"Website icon",height:e,viewBox:"0 0 640 512",children:(0,r.jsx)("path",{fill:"currentColor",d:"M580.2 267.3c56.2-56.2 56.2-147.4 0-203.6S432.8 7.4 376.6 63.7L365.3 75l45.3 45.3 11.3-11.3c31.2-31.2 81.9-31.2 113.1 0s31.2 81.9 0 113.1L421.8 335.2c-31.2 31.2-81.9 31.2-113.1 0c-25.6-25.6-30.3-64.3-13.8-94.6c1.8-3.4 3.9-6.7 6.3-9.8l-51.2-38.4c-4.3 5.7-8.1 11.6-11.4 17.8c-29.5 54.6-21.3 124.2 24.9 170.3c56.2 56.2 147.4 56.2 203.6 0L580.2 267.3zM59.8 244.7c-56.2 56.2-56.2 147.4 0 203.6s147.4 56.2 203.6 0L274.7 437l-45.3-45.3-11.3 11.3c-31.2 31.2-81.9 31.2-113.1 0s-31.2-81.9 0-113.1L218.2 176.8c31.2-31.2 81.9-31.2 113.1 0c25.6 25.6 30.3 64.3 13.8 94.6c-1.8 3.4-3.9 6.7-6.3 9.8l51.2 38.4c4.3-5.7 8.1-11.6 11.4-17.8c29.5-54.6 21.3-124.2-24.9-170.3c-56.2-56.2-147.4-56.2-203.6 0L59.8 244.7z"})}),e3=({height:e})=>(0,r.jsx)(c.HG.Svg,{name:"Instagram icon",height:e,viewBox:"0 0 448 512",children:(0,r.jsx)("path",{fill:"currentColor",d:"M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7 2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"})}),e5=({children:e,icon:t,indexFromLast:n})=>{let a=(0,c.UC)();return(0,r.jsxs)("div",{style:{display:"flex",flexDirection:"row",alignItems:"center",paddingTop:20,paddingBottom:20,opacity:(0,c.GW)(a,[35+(n-1)/4*15,50+(n-1)/4*15],[0,1],{easing:c.GS.spring({damping:200}),extrapolateLeft:"clamp",extrapolateRight:"clamp"})},children:[(0,r.jsx)("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",height:60,width:140,translate:"0 4px"},children:t}),(0,r.jsx)("div",{style:{width:30}}),e]})},e6=()=>{let{fps:e}=(0,c.Bk)(),t=(0,c.UC)(),n=(0,c.oz)({fps:e,frame:t,config:{damping:200},delay:35,durationInFrames:15});return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("div",{style:{height:80}}),(0,r.jsxs)(c.HG.Div,{name:"Website row",style:{display:"flex",flexDirection:"row",alignItems:"center",paddingTop:20,paddingBottom:20,opacity:n},children:[(0,r.jsx)("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",height:60,width:140,translate:"0 4px"},children:(0,r.jsx)(e8,{height:60})}),(0,r.jsx)("div",{style:{width:30}}),(0,r.jsx)(c.HG.Div,{name:"Website",style:{fontSize:50,fontFamily:ep.fontFamily,fontWeight:500,marginLeft:20},children:"remotion.dev"})]})]})},e9=()=>(0,r.jsx)(c.HG.Div,{style:{height:140,borderRadius:70,width:400,backgroundColor:"black",color:"white",display:"flex",justifyContent:"center",alignItems:"center",fontSize:50,fontFamily:ep.fontFamily,fontWeight:500},name:"Subscribe button",children:"Subscribe"}),e7=()=>(0,r.jsx)(c.E9,{style:{height:140,width:140,borderRadius:"50%",boxShadow:"0px 0px 20px rgba(0, 0, 0, 0.2)"},src:"https://remotion.media/elements/social-endcard-remotion-logo.png"}),te=()=>(0,r.jsxs)("div",{style:{display:"inline-flex",alignItems:"center"},children:[(0,r.jsx)(e7,{}),(0,r.jsx)("div",{style:{width:30}}),(0,r.jsx)(e9,{})]}),tt=()=>{let e=(0,c.UC)();return(0,r.jsxs)(c.HG.Div,{style:{display:"flex",position:"absolute",height:"100%",flexDirection:"column",left:80,justifyContent:"center"},showInTimeline:!1,children:[(0,r.jsx)(c.HG.Div,{name:"Call to action",style:{display:"inline-block",translate:(0,c.GW)(e,[35,65],["0px 281px","0px 0px"],{easing:c.GS.spring({damping:200}),extrapolateLeft:"clamp",extrapolateRight:"clamp"})},children:(0,r.jsx)(te,{})}),(0,r.jsxs)("div",{style:{marginTop:80},children:[(0,r.jsx)(c.HG.Div,{name:"Instagram row",children:(0,r.jsx)(e5,{icon:(0,r.jsx)(e3,{height:70}),indexFromLast:4,children:(0,r.jsx)(c.HG.Div,{name:"Instagram handle",style:{fontSize:50,fontFamily:ep.fontFamily,fontWeight:500,marginLeft:20},children:"@remotion"})})}),(0,r.jsx)(c.HG.Div,{name:"LinkedIn row",children:(0,r.jsx)(e5,{icon:(0,r.jsx)(e2,{height:60}),indexFromLast:3,children:(0,r.jsx)(c.HG.Div,{name:"LinkedIn handle",style:{fontSize:50,fontFamily:ep.fontFamily,fontWeight:500,marginLeft:20},children:"Remotion"})})}),(0,r.jsx)(c.HG.Div,{name:"X row",children:(0,r.jsx)(e5,{icon:(0,r.jsx)(e4,{height:60}),indexFromLast:2,children:(0,r.jsx)(c.HG.Div,{name:"X handle",style:{fontSize:50,fontFamily:ep.fontFamily,fontWeight:500,marginLeft:20},children:"@remotion"})})}),(0,r.jsx)(e6,{})]})]})};(0,ep.loadFont)("normal",{subsets:["latin"],weights:["500","600","700","800"]});let tn={"audio/oscilloscope":{category:"audio",displayName:"Oscilloscope"},"audio/waveform-progress":{category:"audio",displayName:"Voice Note"},"audio/mirrored-spectrum":{category:"audio",displayName:"Mirrored Spectrum"},"backgrounds/liquid-contours":{category:"backgrounds",displayName:"Liquid Contours"},"backgrounds/moving-waves":{category:"backgrounds",displayName:"Moving Waves"},"backgrounds/moving-zigzags":{category:"backgrounds",displayName:"Moving Zigzags"},"backgrounds/notebook-paper":{category:"backgrounds",displayName:"Notebook Paper"},"backgrounds/paper-texture":{category:"backgrounds",displayName:"Paper Texture"},"backgrounds/rotating-starburst":{category:"backgrounds",displayName:"Rotating Starburst"},"captions/basic-captions":{category:"captions",displayName:"Basic Captions"},"captions/rounded-captions":{category:"captions",displayName:"Rounded Captions"},"captions/moving-pill-captions":{category:"captions",displayName:"Moving Pill Captions"},"captions/popping-word-captions":{category:"captions",displayName:"Popping Word Captions"},"captions/word-highlight-captions":{category:"captions",displayName:"Word Highlight Captions"},"commerce/product-collection":{category:"layouts",displayName:"Rotating Cards"},"commerce/product-discount-callout":{category:"commerce",displayName:"Wiggling Callout"},"commerce/shine":{category:"commerce",displayName:"Shine"},"commerce/tear":{category:"commerce",displayName:"Tear apart"},"data/horizontal-bar-chart":{category:"data",displayName:"Horizontal Bar Chart"},"data/line-chart":{category:"data",displayName:"Line Chart"}

2,"data/number-counter":{category:"data",displayName:"Number Counter"},"data/pie-chart":{category:"data",displayName:"Pie Chart"},"data/vertical-bar-chart":{category:"data",displayName:"Vertical Bar Chart"},"layouts/picture-in-picture-transition":{category:"layouts",displayName:"Picture in Picture Transition"},"layouts/slide-to-split-screen":{category:"layouts",displayName:"Slide to Split Screen"},"maps/map-flyover":{category:"maps",displayName:"A-to-B Map Flyover"},"maps/watercolor-map":{category:"maps",displayName:"Watercolor Map"},"overlays/location-lower-third":{category:"overlays",displayName:"Location Lower Third"},"overlays/name-lower-third":{category:"overlays",displayName:"Name Lower Third"},"overlays/social-safe-zones":{category:"overlays",displayName:"Social Safe Zones"},"storytelling/on-screen-messages":{category:"storytelling",displayName:"On-Screen Messages"},"storytelling/polaroid-pictures":{category:"storytelling",displayName:"Polaroid Pictures"},"storytelling/speed-lines":{category:"storytelling",displayName:"Speed Lines"},"text/news-article-highlight":{category:"storytelling",displayName:"News Article Highlight"},"text/circle-marker":{category:"text",displayName:"Circle Marker"},"text/crossed-off":{category:"text",displayName:"Crossed Off"},"text/spinning-text-wheel":{category:"text",displayName:"Spinning Text Wheel"},"text/strike-through":{category:"text",displayName:"Strike Through"},"text/text-marker":{category:"text",displayName:"Text Marker"},"youtube/youtube-comment-highlight":{category:"youtube",displayName:"YouTube Comment Highlight"},"youtube/youtube-end-card":{category:"youtube",displayName:"YouTube End Card"},"youtube/youtube-subscribe-nudge":{category:"youtube",displayName:"YouTube Subscribe Nudge"}},ta={path:"elements/youtube-subscribe-nudge/mouse-click.wav",type:"url",url:a},ts={path:"elements/youtube-subscribe-nudge/ding.wav",type:"url",url:s},to={path:"elements/youtube-subscribe-nudge/remotion-logo.png",type:"url",url:"https://remotion.media/elements/social-endcard-remotion-logo.png"},tr=[{slug:"audio/oscilloscope",assets:[m],installationProps:{audioSrc:(0,o.sU)(m.path)},component:u,contributors:[{username:"samohovets",contribution:"Author"}],description:"Suitable for visualizing speech.",dependencies:[{name:"@remotion/media",version:null},{name:"@remotion/media-utils",version:null}],durationInFrames:271,elementHeight:300,elementWidth:900,fps:30,height:1080,posterFrame:105,preview:{previewLayout:"composition",posterUrl:"https://remotion.media/elements/audio-oscilloscope-preview.png",backgroundTheme:"light",videoUrl:"https://remotion.media/elements/audio-oscilloscope-preview.mp4"},safeArea:120,initialProps:f,installationMode:"component-owned-sequence",width:1920},{slug:"audio/waveform-progress",assets:[m],installationProps:{audioSrc:(0,o.sU)(m.path)},component:y,contributors:[{username:"samohovets",contribution:"Author"}],description:"A static audio waveform with playback progress.",dependencies:[{name:"@remotion/media",version:null},{name:"@remotion/media-utils",version:null}],durationInFrames:271,elementHeight:300,elementWidth:900,fps:30,height:1080,posterFrame:105,preview:{previewLayout:"composition",posterUrl:"https://remotion.media/elements/audio-waveform-progress-preview.png",backgroundTheme:"light",videoUrl:"https://remotion.media/elements/audio-waveform-progress-preview.mp4"},safeArea:120,initialProps:{audioSrc:m.url},installationMode:"component-owned-sequence",width:1920},{slug:"audio/mirrored-spectrum",assets:[m],installationProps:{audioSrc:(0,o.sU)(m.path)},component:d,contributors:[{username:"JonnyBurger",contribution:"Author"}],description:"Suitable for both music and speech visualization.",dependencies:[{name:"@remotion/media",version:null},{name:"@remotion/media-utils",version:null}],durationInFrames:271,elementHeight:300,elementWidth:900,fps:30,height:1080,posterFrame:105,preview:{previewLayout:"composition",posterUrl:"https://remotion.media/elements/audio-mirrored-spectrum-preview.png",backgroundTheme:"light",videoUrl:"https://remotion.media/elements/audio-mirrored-spectrum-preview.mp4"},safeArea:120,initialProps:{audioSrc:m.url},installationMode:"component-owned-sequence",width:1920},{slug:"backgrounds/notebook-paper",assets:[],installationProps:null,component:()=>{let{height:e,width:t}=(0,c.Bk)();return(0,r.jsx)(c.mW,{color:"#ffffff",width:t,height:e,effects:[(0,F.F)({amount:.38,colorFront:"white",colorBack:"white",contrast:.18,roughness:.18,fiber:.28,crumples:.1,folds:.12,seed:24,scale:.8,drops:0}),(0,b.e)({gridSize:54,lineWidth:3.4,lineColor:"rgba(76, 101, 128, 0.16)"})]})},contributors:[],description:"A white paper background with subtle blue gridlines.",dependencies:[{name:"@remotion/effects",version:null}],durationInFrames:120,elementHeight:null,elementWidth:null,fps:30,height:1080,posterFrame:0,preview:{previewLayout:"composition",posterUrl:"https://remotion.media/elements/backgrounds-notebook-paper-preview.png",backgroundTheme:"light",videoUrl:"https://remotion.media/elements/backgrounds-notebook-paper-preview.mp4"},safeArea:0,initialProps:null,installationMode:"wrapped",width:1920},{slug:"backgrounds/paper-texture",assets:[],installationProps:null,component:()=>{let e=(0,c.UC)(),{height:t,width:n}=(0,c.Bk)();return(0,r.jsx)(c.mW,{color:"white",width:n,height:t,effects:[(0,F.F)({colorFront:"white",colorBack:"white",seed:(0,c.GW)(e,[0,120],[0,1e3],{extrapolateLeft:"clamp",extrapolateRight:"clamp",posterize:30})})]})},contributors:[],description:"A white paper texture background with a slowly changing posterized seed.",dependencies:[{name:"@remotion/effects",version:null}],durationInFrames:120,elementHeight:null,elementWidth:null,fps:30,height:1080,posterFrame:60,preview:{previewLayout:"composition",posterUrl:"https://remotion.media/elements/backgrounds-paper-texture-preview.png",backgroundTheme:"light",videoUrl:"https://remotion.media/elements/backgrounds-paper-texture-preview.mp4"},safeArea:0,initialProps:null,installationMode:"wrapped",width:1920},{slug:"backgrounds/rotating-starburst",assets:[],installationProps:null,component:()=>{let e=(0,c.UC)(),{height:t,width:n}=(0,c.Bk)();return(0,r.jsx)(c.mW,{color:"#dff4ff",width:n,height:t,effects:[(0,v.V)({rays:28,colors:["#dff4ff","#7cc6ff"],rotation:(0,c.GW)(e,[0,2e3],[0,360]),origin:[.5,.5]})]})},contributors:[],description:"A solid background with a slowly rotating starburst effect.",depen

2dencies:[{name:"@remotion/effects",version:null}],durationInFrames:240,elementHeight:null,elementWidth:null,fps:30,height:1080,posterFrame:120,preview:{previewLayout:"composition",posterUrl:"https://remotion.media/elements/backgrounds-rotating-starburst-preview.png",backgroundTheme:"light",videoUrl:"https://remotion.media/elements/backgrounds-rotating-starburst-preview.mp4"},safeArea:0,initialProps:null,installationMode:"wrapped",width:1920},{slug:"backgrounds/moving-waves",assets:[],installationProps:null,component:()=>{let e=(0,c.UC)(),{durationInFrames:t,height:n,width:a}=(0,c.Bk)();return(0,r.jsx)(c.mW,{color:"#dff4ff",width:a,height:n,effects:[(0,E.L)({colors:["#dff4ff","#7cc6ff"],direction:"horizontal",thickness:56,gap:0,angle:0,offset:e/t*448,amplitude:24,wavelength:160,phase:0})]})},contributors:[],description:"A seamless wave background that flows upward.",dependencies:[{name:"@remotion/effects",version:null}],durationInFrames:240,elementHeight:null,elementWidth:null,fps:30,height:1080,posterFrame:120,preview:{previewLayout:"composition",posterUrl:"https://remotion.media/elements/backgrounds-moving-waves-preview.png",backgroundTheme:"light",videoUrl:"https://remotion.media/elements/backgrounds-moving-waves-preview.mp4"},safeArea:0,initialProps:null,installationMode:"wrapped",width:1920},{slug:"backgrounds/moving-zigzags",assets:[],installationProps:null,component:()=>{let e=(0,c.UC)(),{durationInFrames:t,height:n,width:a}=(0,c.Bk)();return(0,r.jsx)(c.mW,{color:"#dff4ff",width:a,height:n,effects:[(0,x.z)({colors:["#dff4ff","#7cc6ff"],direction:"horizontal",thickness:40,gap:0,angle:0,offset:e/t*480,amplitude:40,wavelength:160})]})},contributors:[],description:"A seamless zigzag background that flows upward.",dependencies:[{name:"@remotion/effects",version:null}],durationInFrames:240,elementHeight:null,elementWidth:null,fps:30,height:1080,posterFrame:120,preview:{previewLayout:"composition",posterUrl:"https://remotion.media/elements/backgrounds-moving-zigzags-preview.png",backgroundTheme:"light",videoUrl:"https://remotion.media/elements/backgrounds-moving-zigzags-preview.mp4"},safeArea:0,initialProps:null,installationMode:"wrapped",width:1920},{slug:"backgrounds/liquid-contours",assets:[],installationProps:null,component:()=>{let e=(0,c.UC)(),{height:t,width:n}=(0,c.Bk)();return(0,r.jsx)(c.mW,{color:"#dff4ff",width:n,height:t,effects:[(0,g.U)({firstColor:"#dff4ff",secondColor:"#7cc6ff",phase:(0,c.GW)(e,[0,240],[3.23,4.23])})]})},contributors:[],description:"A flowing two-color background made from animated liquid contour bands.",dependencies:[{name:"@remotion/effects",version:null}],durationInFrames:240,elementHeight:null,elementWidth:null,fps:30,height:1080,posterFrame:120,preview:{previewLayout:"composition",posterUrl:"https://remotion.media/elements/backgrounds-liquid-contours-preview.png",backgroundTheme:"light",videoUrl:"https://remotion.media/elements/backgrounds-liquid-contours-preview.mp4"},safeArea:0,initialProps:null,installationMode:"wrapped",width:1920},{slug:"captions/basic-captions",assets:[],installationProps:null,component:L,contributors:[{username:"JonnyBurger",contribution:null}],description:"Simple synchronized captions with white text on a translucent gray background.",dependencies:[{name:"@remotion/captions",version:null}],durationInFrames:210,elementHeight:null,elementWidth:null,fps:30,height:300,posterFrame:75,preview:{previewLayout:"composition",posterUrl:"https://remotion.media/elements/captions-basic-captions-preview.png",backgroundTheme:"light",videoUrl:"https://remotion.media/elements/captions-basic-captions-preview.mp4"},safeArea:120,initialProps:{captions:[{text:"Simple captions,ready for every video.",startMs:0,endMs:2200,timestampMs:1100,confidence:null,pageBreakAfter:!0},{text:"No animation,\njust clear text.",startMs:2200,endMs:4400,timestampMs:3300,confidence:null,pageBreakAfter:!0},{text:"Easy to read,\nand easy to customize.",startMs:4400,endMs:7e3,timestampMs:5700,confidence:null}],combineTokensWithinMilliseconds:2e3,width:900},installationMode:"component-owned-sequence",width:900},{slug:"captions/rounded-captions",assets:[],installationProps:null,component:Z,contributors:[{username:"JonnyBurger",contribution:null}],description:"Static synchronized captions with a rounded background that follows each line.",depen

2dencies:[{name:"@remotion/captions",version:null},{name:"@remotion/google-fonts",version:null},{name:"@remotion/layout-utils",version:null},{name:"@remotion/rounded-text-box",version:null}],durationInFrames:210,elementHeight:null,elementWidth:null,fps:30,height:300,posterFrame:75,preview:{previewLayout:"composition",posterUrl:"https://remotion.media/elements/captions-rounded-captions-preview-694426c4-721c-484f-8a33-79f21d54da5d.png",backgroundTheme:"light",videoUrl:"https://remotion.media/elements/captions-rounded-captions-preview-694426c4-721c-484f-8a33-79f21d54da5d.mp4"},safeArea:120,initialProps:{captions:[{text:"Rounded captions,\nready for every video.",startMs:0,endMs:2200,timestampMs:1100,confidence:null,pageBreakAfter:!0},{text:"Clear text,\nwith a rounded background.",startMs:2200,endMs:4400,timestampMs:3300,confidence:null,pageBreakAfter:!0},{text:"Easy to read,\nand easy to customize.",startMs:4400,endMs:7e3,timestampMs:5700,confidence:null}],playbackRate:1,combineTokensWithinMilliseconds:2e3,width:900},installationMode:"component-owned-sequence",width:900},{slug:"captions/moving-pill-captions",assets:[],installationProps:null,component:j,contributors:[{username:"JonnyBurger",contribution:null}],description:"Synchronized captions with a pill that moves between spoken words.",dependencies:[{name:"@remotion/captions",version:null},{name:"@remotion/google-fonts",version:null},{name:"@remotion/layout-utils",version:null}],durationInFrames:210,elementHeight:null,elementWidth:null,fps:30,height:300,posterFrame:75,preview:{previewLayout:"composition",posterUrl:"https://remotion.media/elements/captions-moving-pill-captions-preview.png",backgroundTheme:"light",videoUrl:"https://remotion.media/elements/captions-moving-pill-captions-preview.mp4"},safeArea:120,initialProps:{captions:[{text:"Captions",startMs:0,endMs:800,timestampMs:400,confidence:null},{text:" can",startMs:800,endMs:1500,timestampMs:1150,confidence:null},{text:" move",startMs:1500,endMs:2300,timestampMs:1900,confidence:null},{text:" with",startMs:2300,endMs:3100,timestampMs:2700,confidence:null},{text:" every",startMs:3100,endMs:4e3,timestampMs:3550,confidence:null},{text:" spoken",startMs:4e3,endMs:5100,timestampMs:4550,confidence:null},{text:" word.",startMs:5100,endMs:6500,timestampMs:5800,confidence:null}],combineTokensWithinMilliseconds:800,width:682},installationMode:"component-owned-sequence",width:682},{slug:"captions/popping-word-captions",assets:[],installationProps:null,component:X,contributors:[{username:"JonnyBurger",contribution:null}],description:"Synchronized captions that pop each spoken word into focus.",dependencies:[{name:"@remotion/captions",version:null},{name:"@remotion/google-fonts",version:null},{name:"@remotion/layout-utils",version:null}],durationInFrames:210,elementHeight:null,elementWidth:null,fps:30,height:300,posterFrame:75,preview:{previewLayout:"composition",posterUrl:"https://remotion.media/elements/captions-popping-word-captions-preview.png",backgroundTheme:"light",videoUrl:"https://remotion.media/elements/captions-popping-word-captions-preview.mp4"},safeArea:120,initialProps:{captions:[{text:"Captions",startMs:0,endMs:800,timestampMs:400,confidence:null},{text:" can",startMs:800,endMs:1500,timestampMs:1150,confidence:null},{text:" move",startMs:1500,endMs:2300,timestampMs:1900,confidence:null},{text:" with",startMs:2300,endMs:3100,timestampMs:2700,confidence:null},{text:" every",startMs:3100,endMs:4e3,timestampMs:3550,confidence:null},{text:" spoken",startMs:4e3,endMs:5100,timestampMs:4550,confidence:null},{text:" word.",startMs:5100,endMs:6500,timestampMs:5800,confidence:null}],combineTokensWithinMilliseconds:800,width:682},installationMode:"component-owned-sequence",width:682},{slug:"captions/word-highlight-captions",assets:[],installationProps:null,component:el,contributors:[{username:"JonnyBurger",contribution:null}],description:"Synchronized captions that highlight each spoken word.",dependencies:[{name:"@remotion/captions",version:null},{name:"@remotion/google-fonts",version:null}

2,{name:"@remotion/layout-utils",version:null}],durationInFrames:210,elementHeight:null,elementWidth:null,fps:30,height:300,posterFrame:75,preview:{previewLayout:"composition",posterUrl:"https://remotion.media/elements/captions-word-highlight-captions-preview.png",backgroundTheme:"light",videoUrl:"https://remotion.media/elements/captions-word-highlight-captions-preview.mp4"},safeArea:120,initialProps:{captions:[{text:"Captions",startMs:0,endMs:800,timestampMs:400,confidence:null},{text:" can",startMs:800,endMs:1500,timestampMs:1150,confidence:null},{text:" move",startMs:1500,endMs:2300,timestampMs:1900,confidence:null},{text:" with",startMs:2300,endMs:3100,timestampMs:2700,confidence:null},{text:" every",startMs:3100,endMs:4e3,timestampMs:3550,confidence:null},{text:" spoken",startMs:4e3,endMs:5100,timestampMs:4550,confidence:null},{text:" word.",startMs:5100,endMs:6500,timestampMs:5800,confidence:null}],combineTokensWithinMilliseconds:800,width:682},installationMode:"component-owned-sequence",width:682},{slug:"commerce/product-collection",assets:[],installationProps:null,component:()=>{let e=(0,c.UC)();return(0,r.jsxs)(c.HG.Div,{name:"Container",style:{WebkitFontSmoothing:"antialiased",boxSizing:"border-box",color:"#1d1d19",fontFamily:"Inter",height:660,isolation:"isolate",left:60,opacity:(0,c.GW)(e,[0,10,142,149],[0,1,1,0],{easing:c.GS.bezier(.16,1,.3,1),extrapolateLeft:"clamp",extrapolateRight:"clamp"}),overflow:"hidden",position:"absolute",scale:(0,c.GW)(e,[0,16,142,149],[.97,1,1,.98],{easing:c.GS.bezier(.16,1,.3,1),extrapolateLeft:"clamp",extrapolateRight:"clamp",output:"perceptual-scale"}),top:180,transform:"perspective(100px)",translate:(0,c.GW)(e,[0,16,142,149],["0px 30px","0px 0px","0px 0px","0px -20px"],{easing:c.GS.bezier(.16,1,.3,1),extrapolateLeft:"clamp",extrapolateRight:"clamp"}),width:900,willChange:"transform, opacity"},children:[(0,r.jsx)(ec,{count:3,index:0,label:"A",name:"Card A",style:{translate:"0px 0px"}}),(0,r.jsx)(ec,{count:3,index:1,label:"B",name:"Card B",style:{translate:"0px 0px"}}),(0,r.jsx)(ec,{count:3,index:2,label:"C",name:"Card C",style:{translate:"0px 0px"}})]})},contributors:[],description:"Three cards which each take center once.",dependencies:[{name:"@remotion/google-fonts",version:null}],durationInFrames:150,elementHeight:1020,elementWidth:1020,fps:30,height:1080,posterFrame:73,preview:{previewLayout:"composition",posterUrl:"https://remotion.media/elements/commerce-product-collection-preview.png",backgroundTheme:"light",videoUrl:"https://remotion.media/elements/commerce-product-collection-preview.mp4"},safeArea:30,initialProps:null,installationMode:"wrapped",width:1080},{slug:"commerce/product-discount-callout",assets:[],installationProps:null,component:()=>{let e=(0,c.UC)(),t=(0,ed.vD)({width:600,height:300,pointerLength:70,pointerBaseWidth:130,pointerPosition:.5,pointerDirection:"down",cornerRadius:45});return(0,r.jsx)(c.HG.Div,{name:"Container",style:{WebkitFontSmoothing:"antialiased",fontFamily:"Inter",height:"100%",isolation:"isolate",overflow:"hidden",position:"relative",width:"100%"},children:(0,r.jsxs)(c.HG.Div,{name:"Discount callout",style:{height:370,left:80,position:"absolute",rotate:(0,c.GW)(e,[0,7,14,20,26],["0deg","10deg","-7deg","3deg","0deg"],{easing:c.GS.inOut(c.GS.quad),extrapolateLeft:"clamp",extrapolateRight:"clamp"}),top:195,transformOrigin:"50% 100%",width:600,willChange:"transform"},children:[(0,r.jsx)("svg",{style:{height:"100%",overflow:"visible",position:"absolute",width:"100%"},viewBox:`0 0 ${t.width} ${t.height}`,xmlns:"http://www.w3.org/2000/svg",children:(0,r.jsx)("path",{d:t.path,fill:"#2563eb"})}),(0,r.jsx)(c.HG.Div,{name:"Discount text",style:{alignItems:"center",color:"#ffffff",display:"flex",fontSize:180,fontWeight:800,height:300,justifyContent:"center",letterSpacing:-7,lineHeight:1,position:"relative"},children:"-20%"})]})})},contributors:[],description:"An attention-grabbing speech bubble.",dependencies:[{name:"@remotion/google-fonts",version:null},{name:"@remotion/shapes",version:null}],durationInFrames:120,elementHeight:760,elementWidth:760,fps:30,height:1080,posterFrame:57,preview:{previewLayout:"composition",posterUrl:"https://remotion.media/elements/commerce-product-discount-callout-preview.png",backgroundTheme:"light",videoUrl:"https://remotion.media/elements/commerce-product-discount-callout-preview.mp4"},safeArea:90,initialProps:null,installationMode:"wrapped",width:1080},{slug:"commerce/shine",assets:[],installationProps:null,component:()=>{let e=(0,c.UC)();return(0,r.jsx)(c.jC,{effects:[(0,eu.h)({scale:.75}),(0,em.q)({progress:(0,c.GW)(e,[0,44],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),angle:30,haloSigma:200,coreSigma:65,haloIntensity:.3,coreIntensity:.4})],height:720,name:"Shine",width:1280,children:(0,r.jsx)(c.wY,{fit:"cover",height:720,name:"A graphic",src:"https://remotion.media/elements/commerce-tear-a-graphic.png",width:1280})})},contributors:[],description:"Adds a diagonal shine sweep to any content.",depen

2dencies:[{name:"@remotion/effects",version:null}],durationInFrames:45,elementHeight:720,elementWidth:1280,fps:30,height:1080,posterFrame:22,preview:{previewLayout:"composition",posterUrl:"https://remotion.media/elements/commerce-shine-preview.png",backgroundTheme:"light",videoUrl:"https://remotion.media/elements/commerce-shine-preview.mp4"},safeArea:0,initialProps:null,installationMode:"wrapped",width:1920},{slug:"commerce/tear",assets:[],installationProps:null,component:()=>{let e=(0,c.UC)();return(0,r.jsx)(c.jC,{effects:[(0,eu.h)({scale:.75}),(0,ef.n)({jaggedness:24,progress:(0,c.GW)(e,[15,25],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:[c.GS.spring({damping:200,mass:1,stiffness:100,allowTail:!0,durationRestThreshold:.02,overshootClamping:!1})]}),rotation:(0,c.GW)(e,[15,25],[0,5],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:[c.GS.spring({damping:200,mass:1,stiffness:100,allowTail:!0,durationRestThreshold:.02,overshootClamping:!1})]})})],height:720,name:"Tear",width:1280,children:(0,r.jsx)(c.wY,{fit:"cover",height:720,name:"A graphic",src:"https://remotion.media/elements/commerce-tear-a-graphic.png",width:1280})})},contributors:[],description:"A tear effect that can be applied to any content.",dependencies:[{name:"@remotion/effects",version:null}],durationInFrames:45,elementHeight:720,elementWidth:1280,fps:30,height:1080,posterFrame:25,preview:{previewLayout:"composition",posterUrl:"https://remotion.media/elements/commerce-tear-preview.png",backgroundTheme:"light",videoUrl:"https://remotion.media/elements/commerce-tear-preview.mp4"},safeArea:0,initialProps:null,installationMode:"wrapped",width:1920},{slug:"data/horizontal-bar-chart",assets:[],installationProps:null,component:()=>(0,r.jsx)(c.HG.Div,{name:"Background",style:{alignItems:"center",backgroundColor:"#f5f6f7",boxSizing:"border-box",display:"flex",height:"100%",justifyContent:"center",padding:56,width:"100%"},children:(0,r.jsx)(c.HG.Div,{name:"Chart",style:{display:"flex",flexDirection:"column",fontFamily:eh,fontVariantNumeric:"tabular-nums",gap:32,height:"100%",justifyContent:"center",width:"100%"},children:ey.map(({highlighted:e,label:t,value:n},a)=>(0,r.jsx)("div",{style:{height:eg},children:(0,r.jsx)(c.HG.Div,{from:8+6*a,style:{width:`${n/eE*100}%`,height:"100%"},showInTimeline:!1,children:(0,r.jsx)(ex,{highlighted:e,label:t,value:n})})},t))})}),contributors:[],description:"A bold bar chart with three directly labeled data points.",dependencies:[{name:"@remotion/google-fonts",version:null}],durationInFrames:120,elementHeight:null,elementWidth:null,fps:30,height:1080,posterFrame:70,preview:{previewLayout:"composition",posterUrl:"https://remotion.media/elements/data-horizontal-bar-chart-preview.png",backgroundTheme:"light",videoUrl:"https://remotion.media/elements/data-horizontal-bar-chart-preview.mp4"},safeArea:0,initialProps:null,installationMode:"wrapped",width:1920},{slug:"data/line-chart",assets:[],installationProps:null,component:()=>{let e=(0,c.UC)(),t=e>=70?1:(0,c.GW)(e,[58,70],[0,1],{easing:ew,extrapolateLeft:"clamp",extrapolateRight:"clamp"}),n=eF.map(({label:e,value:t},n)=>({label:e,value:t,x:16+n/(eF.length-1)*1568,y:(80-t)/60*640})),a=n.reduce((e,{x:t,y:n},a)=>0===a?`M ${t} ${n}`:`${e} L ${t} ${n}`,""),s=n[n.length-1];return(0,r.jsx)(c.HG.Div,{name:"Background",style:{alignItems:"center",backgroundColor:"#f5f6f7",boxSizing:"border-box",display:"flex",height:"100%",justifyContent:"center",padding:160,width:"100%"},children:(0,r.jsx)(c.HG.Div,{name:"Chart",style:{color:"#111827",display:"flex",flexDirection:"column",fontFamily:eb,fontVariantNumeric:"tabular-nums",height:"100%",justifyContent:"center",width:"100%"},children:(0,r.jsxs)(c.HG.Div,{name:"Plot area",style:{height:640,marginBottom:64,position:"relative"},children:[(0,r.jsxs)("svg",{viewBox:"0 0 1600 640",preserveAspectRatio:"none",style:{height:"100%",overflow:"visible",position:"absolute",width:"100%"},children:[(0,r.jsx)(c.HG.G,{name:"Grid lines",fill:"none",stroke:"#d1d5db",strokeWidth:2,children:ev.map(e=>{let t=(80-e)/60*640;return(0,r.jsx)("line",{x1:16,x2:1584,y1:t,y2:t},e)})}),(0,r.jsx)(c.HG.Path,{name:"Trend line",d:a,fill:"none",pathLength:1,stroke:"#2563eb",strokeDasharray:"1 1",strokeDashoffset:(0,c.GW)(e,[14,58],[1,0],{easing:c.GS.bezier(0,0,.58,1),extrapolateLeft:"clamp",extrapolateRight:"clamp"}),strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:12}),(0,r.jsx)(c.HG.G,{name:"Data points",fill:"#ffffff",stroke:"#2563eb",strokeWidth:8,children:n.map(({label:t,x:n,y:a},s)=>(0,r.jsx)("circle",{cx:n,cy:a,r:(0,c.GW)(e,[0===s?7:14+7*s,0===s?15:22+7*s],[0,11],{easing:c.GS.bezier(.34,1.56,.64,1),extrapolateLeft:"clamp",extrapolateRight:"clamp"})},t))})]}),(0,r.jsx)("div",{style:{color:"#4b5563",fontSize:40,fontWeight:700,height:48,left:0,position:"absolute",right:0,top:"calc(100% + 64px)"},children:eF.map(({label:e},t)=>t%2==0?(0,r.jsx)("div",{style:{left:`${(16+t/(eF.length-1)*1568)/1600*100}%`,position:"absolute",top:0,transform:"translateX(-50%)"},children:(0,r.jsx)(c.HG.Div,{name:"X-axis label",style:{translate:"0px 0px"},children:e})},e):null)}),(0,r.jsx)("div",{style:{left:`${s.x/1600*100}%`,position:"absolute",top:`${s.y/640*100}%`,translate:"-50% -140%"},children:(0,r.jsxs)(c.HG.Div,{name:"Latest value",style:{backgroundColor:"#2563eb",borderRadius:12,color:"#ffffff",fontSize:44,fontWeight:800,lineHeight:1,padding:"18px 24px",scale:`${t}`,transformOrigin:"bottom center",visibility:e<=58?"hidden":"visible",whiteSpace:"nowrap",willChange:"transform"},children:[s.value,"K"]})})]})})})},contributors:[],description:"A bold animated line chart with a directly labeled trend.",dependencies:[{name:"@remotion/google-fonts",version:null}],durationInFrames:120,elementHeight:null,elementWidth:null,fps:30,height:1080,posterFrame:70,preview:{previewLayout:"composition",posterUrl:"https://remotion.media/elements/data-line-chart-preview.png",backgroundTheme:"light",videoUrl:"https://remotion.media/elements/data-line-chart-preview.mp4"},safeArea:0,initialProps:null,installationMode:"wrapped",width:1920},{slug:"data/number-counter",assets:[],installationProps:null,component:()=>{let e=(0,c.UC)(),t=Math.round(24813*(0,c.GW)(e,[0,90],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:c.GS.out(c.G

2S.exp)}));return(0,r.jsx)(c.HG.Div,{name:"Container",style:{display:"flex",width:"100%",height:"100%",alignItems:"center",justifyContent:"center",fontFamily:"Inter",fontSize:150,fontWeight:800,color:"#171717",fontVariantNumeric:"tabular-nums",letterSpacing:"-0.03em",lineHeight:1},children:t.toLocaleString("en-US")})},contributors:[{username:"KapishDima",contribution:"Author"}],description:"A simple animated counter that smoothly counts from a start value to an end value.",dependencies:[{name:"@remotion/google-fonts",version:null}],durationInFrames:120,elementHeight:200,elementWidth:640,fps:30,height:1080,posterFrame:60,preview:{previewLayout:"composition",posterUrl:"https://remotion.media/elements/data-number-counter-preview.png",backgroundTheme:"light",videoUrl:"https://remotion.media/elements/data-number-counter-preview.mp4"},safeArea:120,initialProps:null,installationMode:"wrapped",width:1920},{slug:"data/pie-chart",assets:[],installationProps:null,component:()=>{let e=(0,c.UC)(),t=(0,c.GW)(e,[8,60],[0,360],{easing:c.GS.inOut(c.GS.cubic),extrapolateLeft:"clamp",extrapolateRight:"clamp"}),n=0;return(0,r.jsx)(c.HG.Div,{name:"Background",style:{alignItems:"center",backgroundColor:"#f5f6f7",boxSizing:"border-box",display:"flex",height:"100%",justifyContent:"center",padding:56,width:"100%"},children:(0,r.jsx)(c.HG.Div,{name:"Chart",style:{display:"flex",flexDirection:"column",fontFamily:eU,fontVariantNumeric:"tabular-nums",height:"100%",justifyContent:"center",width:"100%"},children:(0,r.jsxs)("div",{style:{alignItems:"center",display:"flex",flex:1,gap:72,minHeight:0},children:[(0,r.jsxs)(c.HG.Svg,{name:"Pie chart",viewBox:"0 0 600 600",style:{flex:"0 0 680px",height:680,overflow:"visible",scale:(0,c.GW)(e,[8,40],[.96,1],{easing:c.GS.inOut(c.GS.cubic),extrapolateLeft:"clamp",extrapolateRight:"clamp",output:"perceptual-scale"}),width:680},children:[(0,r.jsx)(c.HG.Circle,{name:"Chart background",cx:300,cy:300,fill:"#e5e7eb",opacity:(0,c.GW)(e,[0,8],[0,1],{easing:c.GS.inOut(c.GS.cubic),extrapolateLeft:"clamp",extrapolateRight:"clamp"}),r:284}),eC.map(({color:e,label:a,value:s})=>{let o=n,i=n+s/eS*360;return n=i,(0,r.jsx)(c.HG.Path,{name:`${a} slice`,d:(({center:e,endAngle:t,radius:n,startAngle:a})=>{if(t<=a)return`M ${e} ${e}`;let s=(a-90)*Math.PI/180,o=(t-90)*Math.PI/180,r=e+n*Math.cos(s),i=e+n*Math.sin(s),l=e+n*Math.cos(o),p=e+n*Math.sin(o);return`M ${e} ${e} L ${r} ${i} A ${n} ${n} 0 ${+(t-a>180)} 1 ${l} ${p} Z`})({center:300,endAngle:Math.min(i,t),radius:284,startAngle:o}),fill:e},a)})]}),(0,r.jsx)("div",{style:{display:"flex",flex:1,flexDirection:"column",gap:18,justifyContent:"center"},children:eC.map(({color:e,foreground:t,label:n,value:a})=>(0,r.jsx)(c.HG.Div,{from:8,showInTimeline:!1,children:(0,r.jsx)(eL,{color:e,foreground:t,label:n,value:a})},n))})]})})})},contributors:[],description:"A bold animated pie chart with four directly labeled data points.",dependencies:[{name:"@remotion/google-fonts",version:null}],durationInFrames:120,elementHeight:null,elementWidth:null,fps:30,height:1080,posterFrame:70,preview:{previewLayout:"composition",posterUrl:"https://remotion.media/elements/data-pie-chart-preview.png",backgroundTheme:"light",videoUrl:"https://remotion.media/elements/data-pie-chart-preview.mp4"},safeArea:0,initialProps:null,installationMode:"wrapped",width:1920},{slug:"data/vertical-bar-chart",assets:[],installationProps:null,component:()=>(0,r.jsx)(c.HG.Div,{name:"Background",style:{alignItems:"center",backgroundColor:"#f5f6f7",boxSizing:"border-box",display:"flex",height:"100%",justifyContent:"center",padding:56,width:"100%"},children:(0,r.jsx)(c.HG.Div,{name:"Chart",style:{display:"flex",flexDirection:"column",fontFamily:eT,fontVariantNumeric:"tabular-nums",height:"100%",justifyContent:"center",width:"100%"},children:(0,r.jsxs)("div",{style:{alignSelf:"center",display:"flex",flex:1,justifyContent:"space-between",minHeight:0,position:"relative",width:1080},children:[(0,r.jsx)("div",{style:{bottom:68,left:"50%",position:"absolute",transform:"translate(-50%, 50%)",width:"100%",zIndex:1},children:(0,r.jsx)(c.HG.Div,{name:"Baseline",style:{backgroundColor:"#c5cad2",height:3,translate:"0px 0px",width:"100%"}})}),eA.map(({highlighted:e,label:t,value:n},a)=>

2(0,r.jsx)("div",{style:{flex:"0 0 280px",height:"100%"},children:(0,r.jsx)(eR,{animationDelay:24*a,highlighted:e,label:t,value:n})},t))]})})}),contributors:[],description:"A bold vertical bar chart with three directly labeled data points.",dependencies:[{name:"@remotion/google-fonts",version:null}],durationInFrames:120,elementHeight:null,elementWidth:null,fps:30,height:1080,posterFrame:115,preview:{previewLayout:"composition",posterUrl:"https://remotion.media/elements/data-vertical-bar-chart-preview.png",backgroundTheme:"light",videoUrl:"https://remotion.media/elements/data-vertical-bar-chart-preview.mp4"},safeArea:0,initialProps:null,installationMode:"wrapped",width:1920},{slug:"layouts/picture-in-picture-transition",assets:[],installationProps:null,component:()=>{let e=(0,c.UC)();return(0,r.jsxs)(c.H1,{style:{overflow:"hidden"},children:[(0,r.jsxs)(c.HG.Div,{name:"Scene B",style:{alignItems:"center",color:"#ffffff",display:"flex",fontFamily:"sans-serif",fontSize:240,fontWeight:900,inset:0,justifyContent:"center",position:"absolute",textShadow:"0 4px 30px rgba(0, 0, 0, 0.55)"},children:[(0,r.jsx)(c.E9,{alt:"",name:"Scene B background",src:"https://remotion.media/transition-bg-pink.jpg",style:{height:"100%",objectFit:"cover",position:"absolute",width:"100%"}}),(0,r.jsx)("div",{style:{position:"relative"},children:"B"})]}),(0,r.jsxs)(c.HG.Div,{cropBottom:(0,c.GW)(e,[15,50],[0,.06],{easing:[c.GS.spring({damping:200,mass:1,stiffness:100,allowTail:!0,durationRestThreshold:.02,overshootClamping:!1})],extrapolateLeft:"clamp",extrapolateRight:"clamp"}),cropLeft:(0,c.GW)(e,[15,50],[0,.302],{easing:[c.GS.spring({damping:200,mass:1,stiffness:100,allowTail:!0,durationRestThreshold:.02,overshootClamping:!1})],extrapolateLeft:"clamp",extrapolateRight:"clamp"}),cropRight:(0,c.GW)(e,[15,50],[0,.302],{easing:[c.GS.spring({damping:200,mass:1,stiffness:100,allowTail:!0,durationRestThreshold:.02,overshootClamping:!1})],extrapolateLeft:"clamp",extrapolateRight:"clamp"}),cropTop:(0,c.GW)(e,[15,50],[0,.06],{easing:[c.GS.spring({damping:200,mass:1,stiffness:100,allowTail:!0,durationRestThreshold:.02,overshootClamping:!1})],extrapolateLeft:"clamp",extrapolateRight:"clamp"}),name:"Scene A",style:{alignItems:"center",borderRadius:(0,c.GW)(e,[15,50],[0,48],{easing:[c.GS.spring({damping:200,mass:1,stiffness:100,allowTail:!0,durationRestThreshold:.02,overshootClamping:!1})],extrapolateLeft:"clamp",extrapolateRight:"clamp"}),color:"#ffffff",display:"flex",fontFamily:"sans-serif",fontSize:240,fontWeight:900,height:"100%",justifyContent:"center",overflow:"hidden",position:"absolute",scale:(0,c.GW)(e,[15,50],[1,.38],{easing:[c.GS.spring({damping:200,mass:1,stiffness:100,allowTail:!0,durationRestThreshold:.02,overshootClamping:!1})],extrapolateLeft:"clamp",extrapolateRight:"clamp"}),textShadow:"0 4px 30px rgba(0, 0, 0, 0.55)",transformOrigin:"top left",translate:(0,c.GW)(e,[15,50],["0px 0px","1363px 23px"],{easing:[c.GS.spring({damping:200,mass:1,stiffness:100,allowTail:!0,durationRestThreshold:.02,overshootClamping:!1})],extrapolateLeft:"clamp",extrapolateRight:"clamp"}),width:"100%",willChange:"transform"},children:[(0,r.jsx)(c.E9,{alt:"",name:"Scene A background",src:"https://remotion.media/transition-bg-blue.jpg",style:{height:"100%",objectFit:"cover",position:"absolute",width:"100%"}}),(0,r.jsx)("div",{style:{position:"relative"},children:"A"})]})]})},contributors:[],description:"Animates an element from being fullscreen to being displayed in a box.",dependencies:[],durationInFrames:150,elementHeight:null,elementWidth:null,fps:30,height:1080,posterFrame:75,preview:{previewLayout:"composition",posterUrl:"https://remotion.media/elements/layouts-picture-in-picture-transition-preview.png",backgroundTheme:"light",videoUrl:"https://remotion.media/elements/layouts-picture-in-picture-transition-preview.mp4"},safeArea:0,initialProps:null,installationMode:"wrapped",width:1920},{slug:"layouts/slide-to-split-screen",assets:[],installationProps:null,component:()=>{let e=(0,c.UC)(),{height:t,width:n}=(0,c.Bk)(),a=.4*n,s=n-a-15,o=(n-s)/2,i=(0,c.GW)(e,[20,52,98,130],[0,1,1,0],{easing:[c.GS.bezier(.65,0,.35,1),c.GS.linear,c.GS.bezier(.65,0,.35,1)],extrapolateLeft:"clamp",extrapolateRight:"clamp"});return(0,r.jsxs)(c.H1,{style:{overflow:"hidden"},children:[(0,r.jsx)("div",{style:{height:t,overflow:"hidden",position:"absolute",width:(0,c.GW)(i,[0,1],[n,s])},children:(0,r.jsxs)(c.HG.Div,{name:"Scene A",style:{alignItems:"center",color:"#ffffff",display:"flex",fontFamily:"sans-serif",fontSize:240,fontWeight:900,height:t,justifyContent:"center",position:"absolute",textShadow:"0 4px 30px rgba(0, 0, 0, 0.55)",translate:`${-o*i}px 0px`,width:n,willChange:"transform"},children:[(0,r.jsx)(c.E9,{alt:"",name:"Scene A background",src:"https://remotion.media/transition-bg-blue.jpg",style:{height:"100%",objectFit:"cover",position:"absolute",width:"100%"}}),(0,r.jsx)("div",{style:{position:"relative"},children:"A"})]})}),(0,r.jsxs)("div",{style:{display:"flex",height:t,position:"absolute",right:0,translate:`${(1-i)*(a+15)}px 0px`,width:a+15,willChange:"transform"},children:[(0,r.jsx)(c.HG.Div,{name:"Divider",style:{backgroundColor:"#ffffff",flex:"0 0 15px",height:"100%"}}),(0,r.jsxs)(c.HG.Div,{name:"Scene B",style:{alignItems:"center",color:"#ffffff",display:"flex",fontFamily:"sans-serif",fontSize:240,fontWeight:900,height:t,justifyContent:"center",position:"relative",textShadow:"0 4px 30px rgba(0, 0, 0, 0.55)",width:a},children:[(0,r.jsx)(c.E9,{alt:"",name:"Scene B background",src:"https://remotion.media/transition-bg-pink.jpg",style:{height:"100%",objectFit:"cover",position:"absolute",width:"100%"}}),(0,r.jsx)("div",{style:{position:"relative"},children:"B"})]})]})]})},contributors:[],description:"A fullscreen scene that opens into a 60/40 split-screen layout.",depen

2dencies:[],durationInFrames:150,elementHeight:null,elementWidth:null,fps:30,height:1080,posterFrame:75,preview:{previewLayout:"composition",posterUrl:"https://remotion.media/elements/layouts-slide-to-split-screen-preview.png",backgroundTheme:"light",videoUrl:"https://remotion.media/elements/layouts-slide-to-split-screen-preview.mp4"},safeArea:0,initialProps:null,installationMode:"wrapped",width:1920},{slug:"maps/map-flyover",assets:[],installationProps:null,component:eH,contributors:[],description:"An animated map flyover from point A to point B, with editable coordinates, location labels, and a camera that follows the route.",dependencies:[{name:"@turf/turf",version:"7.3.2"},{name:"maplibre-gl",version:"6.4.1"}],durationInFrames:285,elementHeight:null,elementWidth:null,fps:30,height:1080,posterFrame:240,preview:{previewLayout:"composition",posterUrl:"https://remotion.media/elements/maps-map-flyover-preview.png",backgroundTheme:"light",videoUrl:"https://remotion.media/elements/maps-map-flyover-preview.mp4"},safeArea:0,initialProps:null,installationMode:"component-owned-sequence",width:1920},{slug:"maps/watercolor-map",assets:[],installationProps:null,component:eW,contributors:[{username:"JonnyBurger",contribution:"Author"},{username:"MehmetAdemi",contribution:"Author"}],description:"A watercolor map journey between two editable locations, with animated labels, markers, and a hand-drawn route.",dependencies:[{name:"@remotion/google-fonts",version:null}],durationInFrames:200,elementHeight:null,elementWidth:null,fps:30,height:1080,posterFrame:145,preview:{previewLayout:"composition",posterUrl:"https://remotion.media/elements/maps-watercolor-map-preview.png",backgroundTheme:"light",videoUrl:"https://remotion.media/elements/maps-watercolor-map-preview.mp4"},safeArea:0,initialProps:null,installationMode:"component-owned-sequence",width:1920},{slug:"overlays/location-lower-third",assets:[],installationProps:null,component:()=>{let e=(0,c.UC)();return(0,r.jsxs)(c.HG.Div,{name:"Container",style:{position:"relative",width:680,height:138,boxSizing:"border-box",fontFamily:"Arial, Helvetica, sans-serif"},children:[(0,r.jsxs)(c.HG.Svg,{name:"Location pin",viewBox:"0 0 64 80",style:{position:"absolute",left:56,top:4,width:104,height:130,overflow:"visible",filter:"drop-shadow(0 6px 8px rgba(24, 24, 27, 0.14))",opacity:(0,c.GW)(e,[0,9,108,119],[0,1,1,0],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),translate:(0,c.GW)(e,[0,16,106,119],["0px -10px","0px 0px","0px 0px","0px -8px"],{easing:c.GS.out(c.GS.cubic),extrapolateLeft:"clamp",extrapolateRight:"clamp"}),scale:(0,c.GW)(e,[0,16,106,119],[.88,1,1,.92],{easing:c.GS.out(c.GS.cubic),extrapolateLeft:"clamp",extrapolateRight:"clamp"}),transformOrigin:"52px 126px"},children:[(0,r.jsx)("path",{d:"M32 3C15.4 3 4 15.4 4 31C4 50.8 22.1 69.6 29.3 76.2C30.8 77.6 33.2 77.6 34.7 76.2C41.9 69.6 60 50.8 60 31C60 15.4 48.6 3 32 3Z",pathLength:"1",fill:"#2563eb",fillOpacity:(0,c.GW)(e,[5,18,105,114],[0,1,1,0],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),stroke:"#2563eb",strokeDasharray:"1",strokeDashoffset:(0,c.GW)(e,[0,16,105,116],[1,0,0,1],{easing:c.GS.out(c.GS.cubic),extrapolateLeft:"clamp",extrapolateRight:"clamp"}),strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2.5"}),(0,r.jsx)("circle",{cx:"32",cy:"30",r:(0,c.GW)(e,[10,21,102,112],[0,9,9,0],{easing:c.GS.out(c.GS.cubic),extrapolateLeft:"clamp",extrapolateRight:"clamp"}),fill:"#eff6ff"})]}),(0,r.jsx)("div",{style:{position:"absolute",left:184,top:3,width:440,height:132,display:"flex",flexDirection:"column",justifyContent:"center"},children:(0,r.jsx)("div",{style:{height:82,display:"flex",alignItems:"center"},children:(0,r.jsx)(c.HG.Div,{cropRight:(0,c.GW)(e,[14,38,88,108],[1,0,0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:[c.GS.spring({damping:200,mass:1,stiffness:100,allowTail:!0,durationRestThreshold:.02,overshootClamping:!1}),c.GS.linear,c.GS.spring({damping:200,mass:1,stiffness:100,allowTail:!0,durationRestThreshold:.02,overshootClamping:!1})]}),name:"Location",dir:"auto",style:{minWidth:0,color:"#18181b",fontSize:54,fontWeight:700,letterSpacing:-1,textOverflow:"ellipsis",whiteSpace:"nowrap",o

2pacity:(0,c.GW)(e,[14,22,98,110],[0,1,1,0],{extrapolateLeft:"clamp",extrapolateRight:"clamp"})},children:"Berlin, Germany"})})})]})},contributors:[],description:"An animated lower third for an event location and venue.",dependencies:[],durationInFrames:120,elementHeight:138,elementWidth:680,fps:30,height:1080,posterFrame:60,preview:{previewLayout:"composition",posterUrl:"https://remotion.media/elements/overlays-location-lower-third-preview.png",backgroundTheme:"light",videoUrl:"https://remotion.media/elements/overlays-location-lower-third-preview.mp4"},safeArea:300,initialProps:null,installationMode:"wrapped",width:1920},{slug:"overlays/name-lower-third",assets:[],installationProps:null,component:()=>{let e=(0,c.UC)();return(0,r.jsxs)(c.HG.Div,{name:"Container",style:{display:"flex",flexDirection:"column",alignItems:"flex-start",width:534,height:132,boxSizing:"border-box",fontFamily:"Inter"},children:[(0,r.jsx)(c.HG.Div,{cropRight:(0,c.GW)(e,[0,20,96,116],[1,0,0,1],{easing:[c.GS.bezier(.65,0,.35,1),c.GS.linear,c.GS.bezier(.65,0,.35,1)],extrapolateLeft:"clamp",extrapolateRight:"clamp"}),name:"Name bar",style:{display:"flex",alignItems:"center",height:66,boxSizing:"border-box",padding:"0 24px",overflow:"hidden",backgroundColor:"#2563eb",color:"#ffffff",fontSize:34,fontWeight:700,letterSpacing:1,lineHeight:1,whiteSpace:"nowrap"},children:"Alex Morgan"}),(0,r.jsx)(c.HG.Div,{cropRight:(0,c.GW)(e,[4,24,92,112],[1,0,0,1],{easing:[c.GS.bezier(.65,0,.35,1),c.GS.linear,c.GS.bezier(.65,0,.35,1)],extrapolateLeft:"clamp",extrapolateRight:"clamp"}),name:"Title bar",style:{display:"flex",alignItems:"center",height:66,boxSizing:"border-box",padding:"0 24px",overflow:"hidden",backgroundColor:"#18181b",color:"#ffffff",fontSize:34,fontWeight:700,letterSpacing:1,lineHeight:1,whiteSpace:"nowrap"},children:"Creative Developer"})]})},contributors:[],description:"A clean animated lower third for introducing a speaker, guest, or host.",depen

2dencies:[{name:"@remotion/google-fonts",version:null}],durationInFrames:120,elementHeight:132,elementWidth:534,fps:30,height:1080,posterFrame:60,preview:{previewLayout:"composition",posterUrl:"https://remotion.media/elements/overlays-name-lower-third-preview.png",backgroundTheme:"light",videoUrl:"https://remotion.media/elements/overlays-name-lower-third-preview.mp4"},safeArea:300,initialProps:null,installationMode:"wrapped",width:1920},{slug:"overlays/social-safe-zones",assets:[],installationProps:null,component:ez,contributors:[],description:"Preview TikTok and Instagram Reels interfaces to keep important content visible.",dependencies:[],durationInFrames:120,elementHeight:1920,elementWidth:1080,fps:30,height:1920,posterFrame:0,preview:{previewLayout:"vertical",posterUrl:"https://remotion.media/elements/overlays-social-safe-zones-preview.png",backgroundTheme:"light",videoUrl:"https://remotion.media/elements/overlays-social-safe-zones-preview.mp4"},safeArea:0,initialProps:{platform:"tiktok"},installationMode:"component-owned-sequence",width:1080},{slug:"text/news-article-highlight",assets:[],installationProps:null,component:()=>{let e=(0,c.UC)(),t=eV(e,0),n=eV(e,1);return(0,r.jsx)(c.H1,{style:{alignItems:"center",display:"flex",justifyContent:"center",overflow:"hidden"},children:(0,r.jsx)(c.HG.Div,{name:"Container",style:{height:458,opacity:(0,c.GW)(e,[125,149],[1,0],{easing:c.GS.in(c.GS.cubic),extrapolateLeft:"clamp",extrapolateRight:"clamp"}),width:1420,willChange:"opacity"},children:(0,r.jsxs)("article",{style:{boxSizing:"border-box",color:"#181816",display:"flex",flexDirection:"column",height:"100%",padding:"54px 84px 0",width:"100%"},children:[(0,r.jsx)(c.HG.Div,{name:"Article category",style:{color:"#a0432d",fontFamily:"Arial, Helvetica, sans-serif",fontSize:15,fontWeight:700,letterSpacing:2.6,textTransform:"uppercase"},children:"Politics"}),(0,r.jsxs)("h1",{style:{fontFamily:"Georgia, 'Times New Roman', serif",fontSize:70,fontWeight:700,letterSpacing:-2.8,lineHeight:1.04,margin:"14px 0 18px",overflowWrap:"break-word",textWrap:"balance"},children:[(0,r.jsx)(c.HG.Span,{name:"Headline opening",children:"Markets brace for a"})," ",(0,r.jsx)(eK.f4,{name:"Highlight 1 \xb7 word 1",progress:eY(t,0),bowing:0,color:"rgba(255, 224, 76, 0.62)",maxRandomnessOffset:7,padding:{left:4,right:4},roughness:2.1,seed:1,children:"government"})," ",(0,r.jsx)(eK.f4,{name:"Highlight 1 \xb7 word 2",progress:eY(t,1),bowing:0,color:"rgba(255, 224, 76, 0.62)",maxRandomnessOffset:7,padding:{left:4,right:4},roughness:2.1,seed:2,children:"shutdown"})," ",(0,r.jsx)(c.HG.Span,{name:"Headline middle",children:"as Congress confronts fresh"})," ",(0,r.jsx)(eK.f4,{name:"Highlight 2 \xb7 word 1",progress:eY(n,0),bowing:0,color:"rgba(255, 224, 76, 0.62)",maxRandomnessOffset:7,padding:{left:4,right:4},roughness:2.1,seed:11,children:"funding"})," ",(0,r.jsx)(eK.f4,{name:"Highlight 2 \xb7 word 2",progress:eY(n,1),bowing:0,color:"rgba(255, 224, 76, 0.62)",maxRandomnessOffset:7,padding:{left:4,right:4},roughness:2.1,seed:12,children:"lapses"})]}),(0,r.jsx)(c.HG.P,{name:"Summary",style:{color:"#4c4c48",fontFamily:"Georgia, 'Times New Roman', serif",fontSize:25,lineHeight:1.42,margin:0,maxWidth:1080},children:"Negotiators returned to the Capitol with the deadline\napproaching, but leaders remained divided over a short-term spending agreement."})]})})})},contributors:[],description:"A centered news headline with animated passage highlights.",dependencies:[{name:"@remotion/rough-notation",version:null}],durationInFrames:150,elementHeight:null,elementWidth:null,fps:30,height:1080,posterFrame:100,preview:{previewLayout:"composition",posterUrl:"https://remotion.media/elements/text-news-article-highlight-preview.png",backgroundTheme:"light",videoUrl:"https://remotion.media/elements/text-news-article-highlight-preview.mp4"},safeArea:0,initialProps:null,installationMode:"wrapped",width:1920},{slug:"storytelling/speed-lines",assets:[],installationProps:null,component:eG,contributors:[],description:"A burst of animated radial speed lines around a subject.",dependencies:[],durationInFrames:45,elementHeight:null,elementWidth:null,fps:30,height:1080,posterFrame:15,preview:{backgroundTheme:"dark",previewLayout:"composition",posterUrl:"https://remotion.media/elements/storytelling-speed-lines-preview-589e0765-d9d0-4d46-bcff-86e7bcf79c05.png",videoUrl:"https://remotion.media/elements/storytelling-speed-lines-preview-589e0765-d9d0-4d46-bcff-86e7bcf79c05.mp4"},safeArea:0,initialProps:{color:"#ffffff"},installationMode:"component-owned-sequence",width:1920},{slug:"storytelling/on-screen-messages",assets:[],installationProps:null,component:()=>{let e=(0,c.UC)();return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("style",{children:`
3				.on-screen-message-from-them::after,
4				.on-screen-message-from-me::after {
5					bottom: 0;
6					content: '';
7					height: 32px;
8					position: absolute;
9					width: 32px;
10				}
11
12				.on-screen-message-from-them::after {
13					background-color: #e5e5ea;

14					clip-path: path('M32 0H12v16c0 8-4 13-12 16 18 0 32-7 32-16Z');
15					left: -12px;
16				}
17
18				.on-screen-message-from-me::after {
19					background-color: #248bf5;
20					clip-path: path('M0 0h20v16c0 8 4 13 12 16C14 32 0 25 0 16Z');
21					right: -12px;
22				}
23			`}),(0,r.jsxs)(c.HG.Div,{name:"Container",style:{boxSizing:"border-box",color:"#f8fafc",display:"flex",flexDirection:"column",fontFamily:ep.fontFamily,gap:32,height:680,isolation:"isolate",paddingTop:90,position:"relative",width:1260},children:[(0,r.jsx)(c.HG.Div,{className:"on-screen-message-from-them",name:"Message 1",style:{alignSelf:"flex-start",backgroundColor:"#e5e5ea",borderRadius:37,boxSizing:"border-box",color:"#000000",fontSize:40,fontWeight:400,lineHeight:1.25,marginLeft:70,maxWidth:"75%",opacity:(0,c.GW)(e,[2,10],[0,1],{easing:c.GS.bezier(.16,1,.3,1),extrapolateLeft:"clamp",extrapolateRight:"clamp"}),padding:"16px 28px",position:"relative",translate:(0,c.GW)(e,[2,10],["0px 32px","0px 0px"],{easing:c.GS.bezier(.16,1,.3,1),extrapolateLeft:"clamp",extrapolateRight:"clamp"}),width:"fit-content",willChange:"opacity, transform",wordWrap:"break-word"},children:"I just saw you at the station."}),(0,r.jsx)(c.HG.Div,{className:"on-screen-message-from-me",name:"Message 2",style:{alignSelf:"flex-end",backgroundColor:"#248bf5",borderRadius:37,boxSizing:"border-box",color:"#ffffff",fontSize:40,fontWeight:400,lineHeight:1.25,marginRight:70,maxWidth:"75%",opacity:(0,c.GW)(e,[27,35],[0,1],{easing:c.GS.bezier(.16,1,.3,1),extrapolateLeft:"clamp",extrapolateRight:"clamp"}),padding:"16px 28px",position:"relative",translate:(0,c.GW)(e,[27,35],["0px 32px","0px 0px"],{easing:c.GS.bezier(.16,1,.3,1),extrapolateLeft:"clamp",extrapolateRight:"clamp"}),width:"fit-content",willChange:"opacity, transform",wordWrap:"break-word"},children:"I\u2019m still in Berlin."}),(0,r.jsx)(c.HG.Div,{className:"on-screen-message-from-them",name:"Message 3",style:{alignSelf:"flex-start",backgroundColor:"#e5e5ea",borderRadius:37,boxSizing:"border-box",color:"#000000",fontSize:40,fontWeight:400,lineHeight:1.25,marginLeft:70,maxWidth:"75%",opacity:(0,c.GW)(e,[52,59],[0,1],{easing:c.GS.bezier(.16,1,.3,1),extrapolateLeft:"clamp",extrapolateRight:"clamp"}),padding:"16px 28px",position:"relative",translate:(0,c.GW)(e,[52,59],["0px 32px","0px 0px"],{easing:c.GS.bezier(.16,1,.3,1),extrapolateLeft:"clamp",extrapolateRight:"clamp"}),width:"fit-content",willChange:"opacity, transform",wordWrap:"break-word"},children:"Then who waved back?"})]})]})},contributors:[],description:"An iMessage-inspired text exchange with staggered reveals and familiar blue and gray chat bubbles.",dependencies:[{name:"@remotion/google-fonts",version:null}],durationInFrames:162,elementHeight:680,elementWidth:1260,fps:30,height:1080,posterFrame:114,preview:{previewLayout:"composition",posterUrl:"https://remotion.media/elements/storytelling-on-screen-messages-preview.png",backgroundTheme:"light",videoUrl:"https://remotion.media/elements/storytelling-on-screen-messages-preview.mp4"},safeArea:180,initialProps:null,installationMode:"wrapped",width:1920},{slug:"storytelling/polaroid-pictures",assets:[],installationProps:null,component:()=>{let e=(0,c.UC)(),{durationInFrames:t}=(0,c.Bk)();return(0,r.jsxs)("div",{style:{color:"#2d2620",height:640,position:"relative",scale:(0,c.GW)(e,[58,t-32],[1,1.035],{easing:c.GS.inOut(c.GS.quad),extrapolateLeft:"clamp",extrapolateRight:"clamp",output:"perceptual-scale"}),translate:(0,c.GW)(e,[58,t-32],["0px 0px","0px -18px"],{easing:c.GS.inOut(c.GS.quad),extrapolateLeft:"clamp",extrapolateRight:"clamp"}),width:1480,willChange:"transform"},children:[(0,r.jsxs)(c.HG.Div,{name:"Photo 1 card",style:{backgroundColor:"#fffdfa",boxShadow:"0 24px 52px rgba(8, 5, 3, 0.16), 0 4px 12px rgba(8, 5, 3, 0.08), inset 0 0 0 1px rgba(80, 62, 46, 0.05)",boxSizing:"border-box",height:520,left

23:100,opacity:(0,c.GW)(e,[8,16,t-30,t-1],[0,1,1,0],{easing:c.GS.inOut(c.GS.cubic),extrapolateLeft:"clamp",extrapolateRight:"clamp"}),padding:"22px 22px 16px",position:"absolute",rotate:(0,c.GW)(e,[8,34,t-30,t-1],["-20deg","-8deg","-8deg","-18deg"],{easing:[c.GS.bezier(.16,1,.3,1),c.GS.spring({damping:200,mass:1,stiffness:100,allowTail:!0,durationRestThreshold:.02,overshootClamping:!1}),c.GS.bezier(.16,1,.3,1)],extrapolateLeft:"clamp",extrapolateRight:"clamp"}),scale:(0,c.GW)(e,[t-30,t-1],[1,1.08],{easing:c.GS.bezier(.16,1,.3,1),extrapolateLeft:"clamp",extrapolateRight:"clamp",output:"perceptual-scale"}),top:85,translate:(0,c.GW)(e,[8,34,t-30,t-1],["-620px 260px","0px 0px","0px 0px","-760px -120px"],{easing:[c.GS.bezier(.16,1,.3,1),c.GS.spring({damping:200,mass:1,stiffness:100,allowTail:!0,durationRestThreshold:.02,overshootClamping:!1}),c.GS.bezier(.16,1,.3,1)],extrapolateLeft:"clamp",extrapolateRight:"clamp"}),width:420,willChange:"opacity, transform",zIndex:1},children:[(0,r.jsx)(c.HG.Div,{name:"Photo 1 tape",style:{backgroundColor:"#d9c58f",boxShadow:"0 2px 8px rgba(67, 47, 29, 0.14)",height:48,left:135,opacity:.68,position:"absolute",rotate:"-5deg",top:-21,width:150,zIndex:2,translate:"-3.3px -12.3px"}}),(0,r.jsxs)("div",{style:{backgroundColor:"#d8cbb8",height:380,overflow:"hidden",position:"relative",width:"100%"},children:[(0,r.jsx)(c.E9,{name:"Photo 1",alt:"",src:"https://remotion.media/transition-bg-blue.jpg",style:{height:"100%",objectFit:"cover",width:"100%"}}),(0,r.jsx)("div",{style:{alignItems:"center",color:"white",display:"flex",fontFamily:"sans-serif",fontSize:160,fontWeight:900,inset:0,justifyContent:"center",position:"absolute",textShadow:"0 4px 30px rgba(0, 0, 0, 0.55)"},children:"A"})]}),(0,r.jsx)(c.HG.Div,{name:"Photo 1 caption",style:{alignItems:"center",color:"#2d2620",display:"flex",fontFamily:eO.fontFamily,fontSize:44,fontWeight:600,height:84,justifyContent:"center",lineHeight:1,marginTop:8,textAlign:"center"},children:"scene A"})]}),(0,r.jsxs)(c.HG.Div,{name:"Photo 2 card",style:{backgroundColor:"#fffdfa",boxShadow:"0 28px 58px rgba(8, 5, 3, 0.18), 0 5px 14px rgba(8, 5, 3, 0.08), inset 0 0 0 1px rgba(80, 62, 46, 0.05)",boxSizing:"border-box",height:520,left

23:530,opacity:(0,c.GW)(e,[20,28,t-28,t-1],[0,1,1,0],{easing:c.GS.inOut(c.GS.cubic),extrapolateLeft:"clamp",extrapolateRight:"clamp"}),padding:"22px 22px 16px",position:"absolute",rotate:(0,c.GW)(e,[20,46,t-28,t-1],["16deg","6deg","6deg","15deg"],{easing:[c.GS.bezier(.16,1,.3,1),c.GS.spring({damping:200,mass:1,stiffness:100,allowTail:!0,durationRestThreshold:.02,overshootClamping:!1}),c.GS.bezier(.16,1,.3,1)],extrapolateLeft:"clamp",extrapolateRight:"clamp"}),scale:(0,c.GW)(e,[t-28,t-1],[1,1.1],{easing:c.GS.bezier(.16,1,.3,1),extrapolateLeft:"clamp",extrapolateRight:"clamp",output:"perceptual-scale"}),top:35,translate:(0,c.GW)(e,[20,46,t-28,t-1],["340px -620px","0px 0px","0px 0px","280px -720px"],{easing:[c.GS.bezier(.16,1,.3,1),c.GS.spring({damping:200,mass:1,stiffness:100,allowTail:!0,durationRestThreshold:.02,overshootClamping:!1}),c.GS.bezier(.16,1,.3,1)],extrapolateLeft:"clamp",extrapolateRight:"clamp"}),width:420,willChange:"opacity, transform",zIndex:2},children:[(0,r.jsx)(c.HG.Div,{name:"Photo 2 tape",style:{backgroundColor:"#d9c58f",boxShadow:"0 2px 8px rgba(67, 47, 29, 0.14)",height:48,left:135,opacity:.68,position:"absolute",rotate:"4deg",top:-21,width:150,zIndex:2}}),(0,r.jsxs)("div",{style:{backgroundColor:"#d8cbb8",height:380,overflow:"hidden",position:"relative",width:"100%"},children:[(0,r.jsx)(c.E9,{name:"Photo 2",alt:"",src:"https://remotion.media/transition-bg-pink.jpg",style:{height:"100%",objectFit:"cover",width:"100%"}}),(0,r.jsx)("div",{style:{alignItems:"center",color:"white",display:"flex",fontFamily:"sans-serif",fontSize:160,fontWeight:900,inset:0,justifyContent:"center",position:"absolute",textShadow:"0 4px 30px rgba(0, 0, 0, 0.55)"},children:"B"})]}),(0,r.jsx)(c.HG.Div,{name:"Photo 2 caption",style:{alignItems:"center",color:"#2d2620",display:"flex",fontFamily:eO.fontFamily,fontSize:46,fontWeight:600,height:84,justifyContent:"center",lineHeight:1,marginTop:8,textAlign:"center"},children:"scene B"})]}),(0,r.jsxs)(c.HG.Div,{name:"Photo 3 card",style:{backgroundColor:"#fffdfa",boxShadow:"0 32px 64px rgba(8, 5, 3, 0.2), 0 6px 16px rgba(8, 5, 3, 0.09), inset 0 0 0 1px rgba(80, 62, 46, 0.05)",boxSizing:"border-box",height:520,left

23:960,opacity:(0,c.GW)(e,[32,40,t-26,t-1],[0,1,1,0],{easing:c.GS.inOut(c.GS.cubic),extrapolateLeft:"clamp",extrapolateRight:"clamp"}),padding:"22px 22px 16px",position:"absolute",rotate:(0,c.GW)(e,[32,58,t-26,t-1],["15deg","-3deg","-3deg","10deg"],{easing:[c.GS.bezier(.16,1,.3,1),c.GS.spring({damping:200,mass:1,stiffness:100,allowTail:!0,durationRestThreshold:.02,overshootClamping:!1}),c.GS.bezier(.16,1,.3,1)],extrapolateLeft:"clamp",extrapolateRight:"clamp"}),scale:(0,c.GW)(e,[t-26,t-1],[1,1.12],{easing:c.GS.bezier(.16,1,.3,1),extrapolateLeft:"clamp",extrapolateRight:"clamp",output:"perceptual-scale"}),top:85,translate:(0,c.GW)(e,[32,58,t-26,t-1],["680px 380px","0px 0px","0px 0px","820px 240px"],{easing:[c.GS.bezier(.16,1,.3,1),c.GS.spring({damping:200,mass:1,stiffness:100,allowTail:!0,durationRestThreshold:.02,overshootClamping:!1}),c.GS.bezier(.16,1,.3,1)],extrapolateLeft:"clamp",extrapolateRight:"clamp"}),width:420,willChange:"opacity, transform",zIndex:3},children:[(0,r.jsx)(c.HG.Div,{name:"Photo 3 tape",style:{backgroundColor:"#d9c58f",boxShadow:"0 2px 8px rgba(67, 47, 29, 0.14)",height:48,left:135,opacity:.68,position:"absolute",rotate:"-2deg",top:-21,width:150,zIndex:2}}),(0,r.jsxs)("div",{style:{backgroundColor:"#d8cbb8",height:380,overflow:"hidden",position:"relative",width:"100%"},children:[(0,r.jsx)(c.E9,{name:"Photo 3",alt:"",src:"https://remotion.media/transition-bg-blue.jpg",style:{filter:"hue-rotate(-65deg)",height:"100%",objectFit:"cover",width:"100%"}}),(0,r.jsx)("div",{style:{alignItems:"center",color:"white",display:"flex",fontFamily:"sans-serif",fontSize:160,fontWeight:900,inset:0,justifyContent:"center",position:"absolute",textShadow:"0 4px 30px rgba(0, 0, 0, 0.55)"},children:"C"})]}),(0,r.jsx)(c.HG.Div,{name:"Photo 3 caption",style:{alignItems:"center",color:"#2d2620",display:"flex",fontFamily:eO.fontFamily,fontSize:44,fontWeight:600,height:84,justifyContent:"center",lineHeight:1,marginTop:8,textAlign:"center"},children:"scene C"})]})]})},contributors:[],description:"A staggered instant-photo montage with handwritten captions, paper shadows, and developing-photo accents.",dependencies:[{name:"@remotion/google-fonts",version:null}],durationInFrames:150,elementHeight:640,elementWidth:1480,fps:30,height:1080,posterFrame:82,preview:{previewLayout:"composition",posterUrl:"https://remotion.media/elements/storytelling-polaroid-pictures-preview.png",backgroundTheme:"light",videoUrl:"https://remotion.media/elements/storytelling-polaroid-pictures-preview.mp4"},safeArea:220,initialProps:null,installationMode:"wrapped",width:1920},{slug:"text/circle-marker",assets:[],installationProps:null,component:()=>{let e=(0,c.UC)();return(0,r.jsxs)(c.HG.Div,{name:"Container",style:{fontSize:80,fontWeight:700,lineHeight:1.1,color:"#171717",fontFamily:eq,width:800},children:[(0,r.jsx)(c.HG.Span,{children:"How much "}),(0,r.jsx)(eK.jl,{name:"Circle annotation",progress:(0,c.GW)(e,[0,43],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:[c.GS.bezier(.42,0,.58,1)],posterize:4}),seed:(0,c.GW)(e,[0,89],[1,90],{extrapolateLeft:"clamp",extrapolateRight:"clamp",posterize:4}),roughness:1.8,strokeWidth:12,color:"#2563eb",padding:{left:10,right:10,top:10,bottom:10},box:"inside",children:"circular"})," ",(0,r.jsx)(c.HG.Span,{children:"financing is in AI?"})]})},contributors:[],description:"An animated hand-drawn circle with posterized drawing progress and shape changes.",dependencies:[{name:"@remotion/google-fonts",version:null},{name:"@remotion/rough-notation",version:null}],durationInFrames:120,elementHeight:220,elementWidth:900,fps:30,height:1080,posterFrame:60,preview:{previewLayout:"composition",posterUrl:"https://remotion.media/elements/text-circle-marker-preview.png",backgroundTheme:"light",videoUrl:"https://remotion.media/elements/text-circle-marker-preview.mp4"},safeArea:120,initialProps:null,installationMode:"wrapped",width:1920},{slug:"text/crossed-off",assets:[],installationProps:null,component:()=>{let e=(0,c.UC)();return(0,r.jsx)(c.HG.Div,{name:"Container",style:{display:"flex",alignItems:"center",justifyContent:"center",height:"100%",fontSize:80,fontWeight:700,lineHeight:1.1,color:"#171717",fontFamily:eJ},children:(0,r.jsxs)("div",{children:[(0,r.jsx)(c.HG.Span,{children:"Please "}),(0,r.jsx)(eK.fG,{name:"Crossed off annotation",progress:(0,c.GW)(e,[18,39],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),color:"#eb2525",strokeWidth:6,iterations:10,roughness:2,children:"remove"})," ",(0,r.jsx)(c.HG.Span,{children:"this"})]})})},contributors:[],description:"An animated hand-drawn cross for removing a word or phrase with emphasis.",dependencies:[{name:"@remotion/google-fonts",version:null},{name:"@remotion/rough-notation",version:null}],durationInFrames:120,elementHeight:220,elementWidth:900,fps:30,height:1080,posterFrame:60,preview:{previewLayout:"composition",posterUrl:"https://remotion.media/elements/text-crossed-off-preview.png",backgroundTheme:"light",videoUrl:"https://remotion.media/elements/text-crossed-off-preview.mp4"},safeArea:120,initialProps:null,installationMode:"wrapped",width:1920},{slug:"text/spinning-text-wheel",assets:[],installationProps:null,component:eZ,

23contributors:[{username:"JonnyBurger",contribution:null}],description:"A 3D text wheel that spins through options and decelerates onto a highlighted selection.",dependencies:[{name:"@remotion/google-fonts",version:null}],durationInFrames:120,elementHeight:200,elementWidth:400,fps:30,height:1080,posterFrame:105,preview:{previewLayout:"composition",posterUrl:"https://remotion.media/elements/text-spinning-text-wheel-preview.png",backgroundTheme:"light",videoUrl:"https://remotion.media/elements/text-spinning-text-wheel-preview.mp4"},safeArea:120,initialProps:null,installationMode:"component-owned-sequence",width:1920},{slug:"text/strike-through",assets:[],installationProps:null,component:()=>{let e=(0,c.UC)();return(0,r.jsx)(c.HG.Div,{name:"Container",style:{display:"flex",alignItems:"center",justifyContent:"center",height:"100%",fontSize:80,fontWeight:700,lineHeight:1.1,color:"#171717",fontFamily:e0},children:(0,r.jsxs)("div",{children:[(0,r.jsx)(c.HG.Span,{children:"The "}),(0,r.jsx)(eK.Ih,{name:"Strike-through annotation",progress:(0,c.GW)(e,[10,25],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),color:"#f11515",strokeWidth:14,children:"forbidden"})," ",(0,r.jsx)(c.HG.Span,{children:"fruit"})]})})},contributors:[],description:"An animated hand-drawn line for striking through a word or phrase.",dependencies:[{name:"@remotion/google-fonts",version:null},{name:"@remotion/rough-notation",version:null}],durationInFrames:120,elementHeight:220,elementWidth:900,fps:30,height:1080,posterFrame:60,preview:{previewLayout:"composition",posterUrl:"https://remotion.media/elements/text-strike-through-preview.png",backgroundTheme:"light",videoUrl:"https://remotion.media/elements/text-strike-through-preview.mp4"},safeArea:120,initialProps:null,installationMode:"wrapped",width:1920},{slug:"text/text-marker",assets:[],installationProps:null,component:()=>{let e=(0,c.UC)();return(0,r.jsxs)(c.HG.Div,{name:"Container",style:{fontSize:80,fontWeight:700,lineHeight:1.1,color:"#171717",fontFamily:e1,width:800},children:[(0,r.jsx)(c.HG.Span,{children:"A truly "}),(0,r.jsx)(eK.f4,{name:"Highlight annotation",progress:(0,c.GW)(e,[0,25],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:[c.GS.spring({damping:200,mass:1,stiffness:100,allowTail:!0,durationRestThreshold:.02,overshootClamping:!1})]}),color:"rgba(255, 236, 79, 0.62)",maxRandomnessOffset:10,roughness:2.3,padding:{left:20,right:20},bowing:0,children:"remarkable"})," ",(0,r.jsx)(c.HG.Span,{children:"end to the World cup"})]})},contributors:[],description:"A hand-drawn animated text marker for calling attention to one phrase.",dependencies:[{name:"@remotion/google-fonts",version:null},{name:"@remotion/rough-notation",version:null}],durationInFrames:120,elementHeight:220,elementWidth:900,fps:30,height:1080,posterFrame:60,preview:{previewLayout:"composition",posterUrl:"https://remotion.media/elements/text-text-marker-preview.png",backgroundTheme:"light",videoUrl:"https://remotion.media/elements/text-text-marker-preview.mp4"},safeArea:120,initialProps:null,installationMode:"wrapped",width:1920},{slug:"youtube/youtube-comment-highlight",assets:[],installationProps:null,component:()=>{let e=(0,c.UC)();return(0,r.jsx)("div",{style:{height:360,perspective:1500,perspectiveOrigin:"50% 50%",position:"relative",width:1120},children:(0,r.jsx)("div",{style:{backfaceVisibility:"hidden",height:300,left:0,position:"absolute",rotate:(0,c.GW)(e,[0,90,180,270],["y -10deg","y 5deg","y -5deg","y 5deg"],{easing:c.GS.inOut(c.GS.sin),extrapolateLeft:"clamp",extrapolateRight:"clamp"}),top:30,transformOrigin:"50% 50%",translate:(0,c.GW)(e,[0,48,131,179],["0px 760px","0px 0px","0px 0px","0px 760px"],{easing:[c.GS.spring({allowTail:!0,damping:14,durationRestThreshold:.01,mass:.8,overshootClamping:!1,stiffness:110}),c.GS.linear,c.GS.out(c.GS.spring({damping:14,mass:.8,overshootClamping:!1,stiffness:110}))],extrapolateLeft:"clamp",extrapolateRight:"clamp"}),width:1120},children:(0,r.jsx)(c.HG.Div,{name:"Container",style:{alignContent:"center",backgroundColor:"#15161a",border:"1px solid rgba(255, 255, 255, 0.09)",borderRadius:26,boxSh

23adow:"0 18px 40px rgba(0, 0, 0, 0.26)",boxSizing:"border-box",columnGap:18,display:"grid",gridTemplateColumns:"88px minmax(0, 1fr)",height:"100%",padding:"24px 40px",translate:"0px 0px",width:"100%"},children:(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(c.wY,{fit:"cover",height:88,name:"Author avatar",src:"https://images.unsplash.com/photo-1500648767791-00dcc994a43e?fit=crop&w=176&h=176&q=80&fm=jpg",style:{backgroundColor:"#2a2b31",border:"1px solid rgba(255, 255, 255, 0.12)",borderRadius:999,boxSizing:"border-box",display:"block",gridColumn:1,gridRow:1,height:88,width:88},width:88}),(0,r.jsxs)("div",{style:{gridColumn:2,gridRow:1,minWidth:0},children:[(0,r.jsx)("div",{style:{alignItems:"baseline",display:"flex",gap:12},children:(0,r.jsx)(c.HG.Span,{name:"Author handle",style:{color:"#ffffff",fontFamily:"Inter",fontSize:26,fontWeight:700,lineHeight:1.1},children:"@alexrenders"})}),(0,r.jsx)(c.HG.Div,{name:"Comment",style:{color:"#f4f4f5",fontFamily:"Inter",fontSize:32,fontWeight:500,letterSpacing:-.35,lineHeight:1.3,marginTop:8,overflowWrap:"anywhere"},children:"This breakdown made the whole process click. Would love to see how you plan the animation timing in a future video!"}),(0,r.jsxs)("div",{style:{alignItems:"center",color:"#a9abb3",display:"flex",fontFamily:"Inter",fontSize:22,fontWeight:600,gap:22,lineHeight:1,marginTop:14},children:[(0,r.jsxs)("div",{style:{alignItems:"center",display:"flex",gap:8},children:[(0,r.jsx)("svg",{"aria-hidden":"true",height:"28",viewBox:"0 0 24 24",width:"28",children:(0,r.jsx)("path",{d:"M7 10v11H4V10Zm2 11V10l4-7c1.4.2 2.2 1.5 1.8 2.8L14 9h4.5c1.3 0 2.3 1.2 2 2.5l-1.7 7A3.3 3.3 0 0 1 15.6 21Z",fill:"none",stroke:"currentColor",strokeLinejoin:"round",strokeWidth:"1.8"})}),(0,r.jsx)(c.HG.Span,{name:"Like count",children:"2.4K"})]}),(0,r.jsx)("svg",{"aria-hidden":"true",height:"28",style:{rotate:"180deg"},viewBox:"0 0 24 24",width:"28",children:(0,r.jsx)("path",{d:"M7 10v11H4V10Zm2 11V10l4-7c1.4.2 2.2 1.5 1.8 2.8L14 9h4.5c1.3 0 2.3 1.2 2 2.5l-1.7 7A3.3 3.3 0 0 1 15.6 21Z",fill:"none",stroke:"currentColor",strokeLinejoin:"round",strokeWidth:"1.8"})})]})]})]})})})})},contributors:[],description:"A YouTube-style card for featuring a viewer comment.",dependencies:[{name:"@remotion/google-fonts",version:null}],durationInFrames:180,elementHeight:360,elementWidth:1120,fps:30,height:1080,posterFrame:135,preview:{previewLayout:"composition",posterUrl:"https://remotion.media/elements/youtube-youtube-comment-highlight-preview.png",backgroundTheme:"light",videoUrl:"https://remotion.media/elements/youtube-youtube-comment-highlight-preview.mp4"},safeArea:200,initialProps:null,installationMode:"wrapped",width:1920},{slug:"youtube/youtube-end-card",assets:[],installationProps:null,component:()=>(0,r.jsxs)(c.H1,{style:{backgroundColor:"#FAFAFA",color:"black"},name:"Container",children:[(0,r.jsx)(tt,{}),(0,r.jsx)(c.HG.Div,{name:"Top thumbnail",style:{position:"absolute",top:135,right:100,width:631,height:361,border:"6px solid black"}}),(0,r.jsx)(c.HG.Div,{name:"Bottom thumbnail",style:{position:"absolute",right:100,bottom:155,width:631,height:361,border:"6px solid black"}})]}),contributors:[],description:"A clean YouTube endcard with social links and space for recommended videos.",dependencies:[{name:"@remotion/google-fonts",version:null}],durationInFrames:150,elementHeight:null,elementWidth:null,fps:30,height:1080,posterFrame:75,preview:{previewLayout:"composition",posterUrl:"https://remotion.media/elements/overlays-social-endcard-preview.png",backgroundTheme:"light",videoUrl:"https://remotion.media/elements/overlays-social-endcard-preview.mp4"},safeArea:0,initialProps:null,installationMode:"wrapped",width:1920},{slug:"youtube/youtube-subscribe-nudge",assets:[ta,ts,to],installationProps:{clickSrc:(0,o.sU)(ta.path),dingSrc:(0,o.sU)(ts.path),avatarSrc:(0,o.sU)(to.path)},component:({clickSrc:e=a,dingSrc:t=s,avatarSrc:n="https://remotion.media/elements/social-endcard-remotion-logo.png"})=>{let o=(0,c.UC)();return(0,r.jsxs)("div",{style:{height:240,position:"relative",width:760},children:[(0,r.jsx)(i.fP,{durationInFrames:12,from:61,name:"Subscribe click",

23src:e,trimBefore:3,volume:.5}),(0,r.jsx)(i.fP,{durationInFrames:39,from:81,name:"Bell chime",src:t,trimBefore:4,volume:.24}),(0,r.jsxs)("div",{style:{height:240,opacity:(0,c.GW)(o,[0,24,104,119],[0,1,1,0],{easing:[c.GS.bezier(.65,0,.35,1),c.GS.linear,c.GS.bezier(.7,0,.84,0)],extrapolateLeft:"clamp",extrapolateRight:"clamp"}),position:"relative",scale:(0,c.GW)(o,[0,24,104,119],[.98,1,1,.97],{easing:[c.GS.bezier(.65,0,.35,1),c.GS.linear,c.GS.bezier(.7,0,.84,0)],extrapolateLeft:"clamp",extrapolateRight:"clamp",output:"perceptual-scale"}),transformOrigin:"50% 50%",translate:(0,c.GW)(o,[0,24,104,119],["0px 14px","0px 0px","0px 0px","0px 20px"],{easing:[c.GS.bezier(.65,0,.35,1),c.GS.linear,c.GS.bezier(.7,0,.84,0)],extrapolateLeft:"clamp",extrapolateRight:"clamp"}),width:760},children:[(0,r.jsxs)(c.HG.Div,{name:"Card",style:{alignItems:"center",backgroundColor:"#15161a",border:"1px solid rgba(255, 255, 255, 0.09)",borderRadius:26,boxShadow:"0 18px 40px rgba(0, 0, 0, 0.26)",boxSizing:"border-box",display:"flex",height:144,left:0,padding:"0 24px",position:"absolute",top:48,width:760},children:[(0,r.jsx)(c.wY,{fit:"cover",height:88,name:"Avatar",src:n,style:{backgroundColor:"#ffffff",border:"1px solid rgba(255, 255, 255, 0.12)",borderRadius:999,boxSizing:"border-box",display:"block",flex:"0 0 auto",height:88,marginRight:18,width:88},width:88}),(0,r.jsxs)("div",{style:{flex:"1 1 auto",marginRight:32,minWidth:0},children:[(0,r.jsx)(c.HG.Div,{name:"Channel name",style:{color:"#ffffff",fontFamily:"Inter",fontSize:34,fontWeight:800,lineHeight:1.1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:"Remotion"}),(0,r.jsx)(c.HG.Div,{name:"Channel handle",style:{color:"#a9abb3",fontFamily:"Inter",fontSize:21,fontWeight:600,lineHeight:1.15,marginTop:6,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:"@remotion"})]}),(0,r.jsxs)("div",{style:{flex:"0 0 auto",height:62,marginRight:16,position:"relative",scale:(0,c.GW)(o,[58,61,68],[1,.94,1],{easing:[c.GS.bezier(.4,0,1,1),c.GS.spring({damping:9,mass:.45,overshootClamping:!1,stiffness:180})],extrapolateLeft:"clamp",extrapolateRight:"clamp",output:"perceptual-scale"}),width:200},children:[(0,r.jsx)(c.HG.Div,{name:"Subscribe button",style:{alignItems:"center",backgroundColor:"#ff1744",borderRadius:14,color:"#ffffff",display:"flex",fontFamily:"Inter",fontSize:26,fontWeight:700,height:62,justifyContent:"center",left:0,letterSpacing:-.25,opacity:(0,c.GW)(o,[63,64],[1,0],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),pointerEvents:o<64?"auto":"none",position:"absolute",top:0,width:200},children:"Subscribe"}),(0,r.jsxs)(c.HG.Div,{name:"Subscribed button",style:{alignItems:"center",backgroundColor:"#2a2b31",border:"1px solid rgba(255, 255, 255, 0.1)",borderRadius:14,boxSizing:"border-box",color:"#ffffff",display:"flex",fontFamily:"Inter",fontSize:26,fontWeight:700,gap:10,height:62,justifyContent:"center",left:0,letterSpacing:-.25,opacity:(0,c.GW)(o,[63,64],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),pointerEvents:o<64?"none":"auto",position:"absolute",top:0,width:200},children:[(0,r.jsx)(c.HG.Svg,{"aria-hidden":"true",height:"26",name:"Subscribed checkmark",style:{color:"#ffffff",flex:"0 0 auto",translate:"0px 1px"},viewBox:"0 0 24 24",width:"26",children:(0,r.jsx)("path",{d:"m4 12.5 5 4.8L20 7",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"3"})}),"Subscribed"]})]}),(0,r.jsx)(c.HG.Div,{name:"Notification bell",style:{alignItems:"center",backgroundColor:o>=81?"#303137":"#24252b",border:"1px solid rgba(255, 255, 255, 0.12)",borderRadius:999,boxSizing:"border-box",display:"flex",flex:"0 0 auto",height:64,justifyContent:"center",position:"relative",scale:(0,c.GW)(o,[78,81,93],[1,.9,1],{easing:[c.GS.bezier(.4,0,1,1),c.GS.spring({damping:7,mass:.55,overshootClamping:!1,stiffness:160})],extrapolateLeft:"clamp",extrapolateRight:"clamp",output:"perceptual-scale"}),transformOrigin:"50% 50%",width:64},children:(0,r.jsx)(c.HG.Svg,{"aria-hidden":"true",height:"36",name:"Bell icon",style:{color:"#f4f4f5",overflow:"visible",rotate:(0,c.GW)(o,[81,85,89,93,97,101],["0deg","-18deg","16deg","-11deg","7deg","0deg"],{easing:c.GS.inOut(c.GS.cubic),extrapolateLeft:"clamp",extrapolateRight:"clamp"}),transformOrigin:"50% 20%"},viewBox:"0 0 24 24",width:"36",children:o<84?(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("path",{d:"M5.5 17h13c-1.7-1.9-2.2-3.9-2.2-7 0-2.8-1.7-5-4.3-5s-4.3 2.2-4.3 5c0 3.1-.5 5.1-2.2 7Z",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.8"}),(0,r.jsx)("path",{d:"M9.8 20c.5 1 1.2 1.5 2.2 1.5s1.7-.5 2.2-1.5",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeWidth:"1.8"})]}):(0,r.jsx)("path",{d:"M19.395 1.196a1 1 0 0 0-.199 1.4A9 9 0 0 1 21 8a1 1 0 0 0 2 0 11 11 0 0 0-2.205-6.605 1 1 0 0 0-1.4-.199Zm-16.192.2A11 11 0 0 0 1 8a1 1 0 0 0 2 0 9 9 0 0 1 1.803-5.404 1 1 0 0 0-1.6-1.2ZM12 1a7 7 0 0 0-7 7v4.446a1 1 0 0 1-.144.515L3.05 15.972C2.25 17.305 3.21 19 4.766 19H8a4 4 0 1 0 8 0h3.233c1.555 0 2.515-1.695 1.715-3.029l-1.805-3.01a1 1 0 0 1-.143-.515V8a7 7 0 0 0-7-7Zm0 2a5 5 0 0 1 5 5v4.445a3 3 0 0 0 .428 1.545L19.233 17H4.766l1.806-3.01c.28-.466.428-1 .428-1.544V8a5 5 0 0 1 5-5Zm-2 16h4a2 2 0 0 1-4 0Z",fill:"currentColor"})})})]}),(0,r.jsx)(c.HG.Svg,{"aria-hidden":"true",height:"54",name:"Cursor",style:{filter:"drop-shadow(0 4px 5px rgba(0, 0, 0, 0.26))",left:(0,c.GW)(o,[40,60,66,78],[690,620,620,699],{easing:[c.GS.bezier(.16,1,.3,1),c.GS.linear,c.GS.bezier(.65,0,.35,1)],extrapolateLeft:"clamp",extrapolateRight:"clamp"}),opacity:(0,c.GW)(o,[38,43,84,91],[0,1,1,0],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),position:"absolute",top:(0,c.GW)(o,[40,60,66,78],[202,124,124,117],{easing:[c.GS.bezier(.16,1,.3,1),c.GS.linear,c.GS.bezier(.65,0,.35,1)],extrapolateLeft:"clamp",extrapolateRight:"clamp"})}

23,viewBox:"0 0 48 54",width:"48",children:(0,r.jsx)("path",{d:"M5 3 39 35l-16 2 9 13-8 5-9-14L5 50Z",fill:"#ffffff",stroke:"#111217",strokeLinejoin:"round",strokeWidth:"3"})})]})]})},contributors:[],description:"An animated creator-branded subscribe prompt with a subscribed-state confirmation.",dependencies:[{name:"@remotion/google-fonts",version:null},{name:"@remotion/media",version:null},{name:"@remotion/sfx",version:null}],durationInFrames:120,elementHeight:240,elementWidth:760,fps:30,height:1080,posterFrame:50,preview:{previewLayout:"composition",posterUrl:"https://remotion.media/elements/youtube-youtube-subscribe-nudge-preview.png",backgroundTheme:"light",videoUrl:"https://remotion.media/elements/youtube-youtube-subscribe-nudge-preview.mp4"},safeArea:240,initialProps:{clickSrc:ta.url,dingSrc:ts.url,avatarSrc:to.url},installationMode:"wrapped",width:1920}],ti=new Set(["commerce/shine","commerce/tear"]),tl=tr.map(e=>({...tn[e.slug],...e,previewUsesHtmlInCanvas:ti.has(e.slug)}))},21906(e,t,n){"use strict";n.d(t,{W$:()=>s,q0:()=>r,rz:()=>o});var a=n(18916);let s=({definition:e,sourceCode:t,installAssets:n})=>{let s=null!==e.elementWidth&&null!==e.elementHeight?{width:e.elementWidth,height:e.elementHeight}:null;return(0,a.NX)({assets:n?e.assets:[],dependencies:e.dependencies,dimensions:s,displayName:e.displayName,durationInFrames:e.durationInFrames,initialProps:n&&null!==e.installationProps?{...e.initialProps,...e.installationProps}:e.initialProps,installationMode:e.installationMode,slug:e.slug,sourceCode:t})},o=({definition:e,sourceCode:t})=>{let n=s({definition:e,sourceCode:t,installAssets:!1});return 0===e.assets.length?(0,a.ts)({payload:n}):(0,a.ts)({payload:s({definition:e,sourceCode:t,installAssets:!0}),fallbackPayload:n})},r=(e,t)=>{if(!t?.complete||0===t.naturalWidth||0===t.naturalHeight)return;let n=Math.min(1,132/t.naturalWidth,88/t.naturalHeight),a=t.naturalWidth*n,s=t.naturalHeight*n,o=document.createElement("div");o.style.position="fixed",o.style.top="-1000px",o.style.left="-1000px",o.style.width=`${a}px`,o.style.height=`${s}px`;let r=document.createElement("img");r.src=t.currentSrc||t.src,r.style.display="block",r.style.width="100%",r.style.height="100%",o.appendChild(r),document.body.appendChild(o),e.setDragImage(o,a/2,s/2),requestAnimationFrame(()=>o.remove())}},81734(e,t,n){"use strict";n.d(t,{Y_:()=>s,a2:()=>o});var a=n(72081);let s=e=>null===e.elementWidth||null===e.elementHeight?"Flexible":`${e.elementWidth} \xd7 ${e.elementHeight}px`,o=e=>{let t=a.H.find(t=>t.slug===e);if(!t)throw Error(`No Element definition found for ${e}`);return t}},70973(e,t,n){"use strict";n.d(t,{G:()=>s});var a=n(57825);n(67781);let s={renderTitle:e=>[(0,a.jsx)("title",{children:e},"title1"),(0,a.jsx)("meta",{property:"og:title",content:e},"title2")],renderDescription:e=>[(0,a.jsx)("meta",{name:"description",content:e},"desc"),(0,a.jsx)("meta",{property:"og:description",content:e},"desc2")],renderImage:(e,t)=>{let n=new URL(e,t).href;return[(0,a.jsx)("meta",{property:"og:image",content:n},"img1"),(0,a.jsx)("meta",{name:"twitter:image",content:n},"img2")]},renderVideo:({height:e,url:t,width:n})=>[(0,a.jsx)("meta",{property:"og:video",content:t},"video1"),(0,a.jsx)("meta",{property:"og:video:secure_url",content:t},"video2"),(0,a.jsx)("meta",{property:"og:video:type",content:"video/mp4"},"video3"),(0,a.jsx)("meta",{property:"og:video:width",content:String(n)},"video4"),(0,a.jsx)("meta",{property:"og:video:height",content:String(e)},"video5")]}},66205(){},57774(e,t,n){"use strict";n.d(t,{e:()=>g});var a=n(39372),s=(e,t)=>{if(void 0!==e&&("string"!=typeof e||0===e.length))throw TypeError(`"${t}" must be a non-empty string, but got ${JSON.stringify(e)}`)},o=(e,t)=>{if(void 0!==e&&("number"!=typeof e||!Number.isFinite(e)))throw TypeError(`"${t}" must be a finite number, but got ${JSON.stringify(e)}`)},r=(e,t)=>{e.clearRect(0,0,1,1),e.fillStyle=t,e.fillRect(0,0,1,1);let{data:n}=e.getImageData(0,0,1,1);return[n[0],n[1],n[2],n[3]]},{createEffect:i,createWebGL2ContextError:l}=a.Xp,p="#ffffff",c="transparent",d=e=>({gridSize:e.gridSize??64,lineWidth:e.lineWidth??2,lineColor:e.lineColor??p,backgroundColor:e.backgroundColor??c,rotation:e.rotation??0,rotationX:e.rotationX??0,rotationY:e.rotationY??0,perspective:e.perspective??0,offsetX:e.offsetX??0,offsetY:e.offsetY??0,maskToSourceAlpha:e.maskToSourceAlpha??!1}),u=(e,t)=>

23{if(e<0)throw TypeError(`"${t}" must be greater than or equal to 0, but got ${JSON.stringify(e)}`)},m=`#version 300 es
24in vec2 aPos;
25in vec2 aUv;
26out vec2 vUv;
27
28void main() {
29	vUv = aUv;
30	gl_Position = vec4(aPos, 0.0, 1.0);
31}
32`,f=`#version 300 es
33precision highp float;
34
35in vec2 vUv;
36out vec4 fragColor;
37
38uniform sampler2D uSource;
39uniform vec2 uResolution;
40uniform float uGridSize;
41uniform float uLineWidth;
42uniform vec4 uLineColor;
43uniform vec4 uBackgroundColor;
44uniform float uRotation;
45uniform float uRotationX;
46uniform float uRotationY;
47uniform float uPerspective;
48uniform vec2 uOffset;
49uniform bool uMaskToSourceAlpha;
50
51vec4 sourceOver(vec4 backdrop, vec4 overlay) {
52	return overlay + backdrop * (1.0 - overlay.a);
53}
54
55vec4 sourceAtop(vec4 backdrop, vec4 overlay) {
56	return vec4(
57		overlay.rgb * backdrop.a + backdrop.rgb * (1.0 - overlay.a),
58		backdrop.a
59	);
60}
61
62mat3 rotationMatrix(float rotationX, float rotationY, float rotationZ) {
63	float sx = sin(rotationX);
64	float cx = cos(rotationX);
65	float sy = sin(rotationY);
66	float cy = cos(rotationY);
67	float sz = sin(rotationZ);
68	float cz = cos(rotationZ);
69
70	mat3 rx = mat3(
71		1.0, 0.0, 0.0,
72		0.0, cx, sx,
73		0.0, -sx, cx
74	);
75	mat3 ry = mat3(
76		cy, 0.0, -sy,
77		0.0, 1.0, 0.0,
78		sy, 0.0, cy
79	);
80	mat3 rz = mat3(
81		cz, sz, 0.0,
82		-sz, cz, 0.0,
83		0.0, 0.0, 1.0
84	);
85
86	return rz * ry * rx;
87}
88
89void main() {
90	vec4 texColor = texture(uSource, vUv);
91	vec2 centered = vUv * uResolution - uResolution * 0.5;
92	mat3 rotation = rotationMatrix(uRotationX, uRotationY, uRotation);
93	vec2 gridCoord;
94
95	if (uPerspective <= 0.0) {
96		vec3 rotated = rotation * vec3(centered, 0.0);
97		gridCoord = rotated.xy + uOffset;
98	} else {
99		vec3 camera = vec3(0.0, 0.0, uPerspective);
100		vec3 ray = normalize(vec3(centered, -uPerspective));
101		vec3 normal = rotation * vec3(0.0, 0.0, 1.0);
102		float denominator = dot(ray, normal);
103		float t = -dot(camera, normal) / denominator;
104
105		if (abs(denominator) < 0.0001 || t <= 0.0) {
106			fragColor = sourceOver(texColor, uBackgroundColor);
107			return;
108		}
109
110		vec3 worldPosition = camera + ray * t;
111		vec3 localPosition = transpose(rotation) * worldPosition;
112		gridCoord = localPosition.xy + uOffset;
113	}
114
115	float gridSize = max(uGridSize, 0.001);
116	vec2 cell = abs(fract(gridCoord / gridSize + 0.5) - 0.5) * gridSize;
117	float halfLineWidth = uLineWidth * 0.5;
118	vec2 gridUnitsPerPixel = max(fwidth(gridCoord), vec2(0.001));
119	vec2 halfWidthInGridUnits = halfLineWidth * gridUnitsPerPixel;
120	vec2 antialiasInGridUnits = gridUnitsPerPixel;
121	vec2 projectedCellSize = gridSize / gridUnitsPerPixel;
122	vec2 densityFade = smoothstep(
123		vec2(max(uLineWidth * 1.5, 1.0)),
124		vec2(max(uLineWidth * 4.0, 2.0)),
125		projectedCellSize
126	);
127	vec2 lineCoverage = halfLineWidth <= 0.001
128		? vec2(0.0)
129		: 1.0 - smoothstep(
130			halfWidthInGridUnits - antialiasInGridUnits,
131			halfWidthInGridUnits + antialiasInGridUnits,
132			cell
133		);
134	lineCoverage *= densityFade;
135	float coverage = max(lineCoverage.x, lineCoverage.y);
136
137	vec4 background = uBackgroundColor;
138	vec4 line = uLineColor * coverage;
139
140	if (uMaskToSourceAlpha) {
141		fragColor = sourceAtop(sourceAtop(texColor, background), line);
142		return;
143	}
144
145	fragColor = sourceOver(sourceOver(texColor, background), line);
146}
147`,h=(e,t,n)=>{let a=e.createShader(t);if(!a)throw Error("Failed to create WebGL shader");if(e.shaderSource(a,n),e.compileShader(a),!e.getShaderParameter(a,e.COMPILE_STATUS)){let t=e.getShaderInfoLog(a);throw e.deleteShader(a),Error(`Gridlines shader compile failed: ${t??"(no log)"}`)}return a},y=e=>{let[t,n,a,s]=e,o=s/255;return[t/255*o,n/255*o,a/255*o,o]},g=i({type:"remotion/gridlines",label:"gridlines()",documentationLink:"https://www.remotion.dev/docs/effects/gridlines",backend:"webgl2",calculateKey:e=>{let t=d(e),n=t.maskToSourceAlpha?"-mask-to-source-alpha":"";return`gridlines-${t.gridSize}-${t.lineWidth}-${t.lineColor}-${t.backgroundColor}-${t.rotation}-${t.rotationX}-${t.rotationY}-${t.perspective}-${t.offsetX}-${t.offsetY}${n}`},setup:e=>{let t=e.getContext("webgl2",{premultipliedAlpha:!0,alpha:!0,preserveDrawingBuffer:!0});if(!t)throw l("gridlines effect");t.pixelStorei(t.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0);let n=h(t,t.VERTEX_SHADER,m),a=h(t,t.FRAGMENT_SHADER,f),s=((e,t,n)=>{let a=e.createProgram();if(!a)throw Error("Failed to create WebGL program");if(e.attachShader(a,t),e.attachShader(a,n),e.linkProgram(a),!e.getProgramParameter(a,e.LINK_STATUS)){let t=e.getProgramInfoLog(a);throw e.deleteProgram(a),Error(`Gridlines program link failed: ${t??"(no log)"}`)}return a})(t,n,a);t.deleteShader(n),t.deleteShader(a);let o=t.createVertexArray();if(!o)throw Error("Failed to create WebGL vertex array");t.bindVertexArray(o);let r=new Float32Array([-1,-1,0,0,1,-1,1,0,-1,1,0,1,1,1,1,1]),i=t.createBuffer();if(!i)throw Error("Failed to create WebGL buffer");t.bindBuffer(t.ARRAY_BUFFER,i),t.bufferData(t.ARRAY_BUFFER,r,t.STATIC_DRAW);let p=t.getAttribLocation(s,"aPos"),c=t.getAttribLocation(s,"aUv");t.enableVertexAttribArray(p),t.vertexAttribPointer(p,2,t.FLOAT,!1,16,0),t.enableVertexAttribArray(c),t.vertexAttribPointer(c,2,t.FLOAT,!1,16,8),t.bindVertexArray(null);let d=t.createTexture();if(!d)throw Error("Failed to create WebGL texture");t.bindTexture(t.TEXTURE_2D,d),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.bindTexture(t.TEXTURE_2D,null);let u=document.createElement("canvas");u.width=1,u.height=1;let y=u.getContext("2d",{willReadFrequently:!0});if(!y)throw Error("Failed to acquire 2D context for color parsing");return{gl:t,program:s,vao:o,vbo:i,texture:d,uniforms:{uSource:t.getUniformLocation(s,"uSource"),uResolution:t.getUniformLocation(s,"uResolution"),uGridSize:t.getUniformLocation(s,"uGridSize"),uLineWidth:t.getUniformLocation(s,"uLineWidth"),uLineColor:t.getUniformLocation(s,"uLineColor"),uBackgroun

147dColor:t.getUniformLocation(s,"uBackgroundColor"),uRotation:t.getUniformLocation(s,"uRotation"),uRotationX:t.getUniformLocation(s,"uRotationX"),uRotationY:t.getUniformLocation(s,"uRotationY"),uPerspective:t.getUniformLocation(s,"uPerspective"),uOffset:t.getUniformLocation(s,"uOffset"),uMaskToSourceAlpha:t.getUniformLocation(s,"uMaskToSourceAlpha")},colorCtx:y,cachedLineColorStr:"",cachedLineColorRgba:[255,255,255,255],cachedBackgroundColorStr:"",cachedBackgroundColorRgba:[0,0,0,0]}},apply:({source:e,width:t,height:n,params:a,state:s,flipSourceY:o})=>{let i=d(a),{gl:l,program:p,vao:c,texture:u,uniforms:m}=s;s.cachedLineColorStr!==i.lineColor&&(s.cachedLineColorStr=i.lineColor,s.cachedLineColorRgba=r(s.colorCtx,i.lineColor)),s.cachedBackgroundColorStr!==i.backgroundColor&&(s.cachedBackgroundColorStr=i.backgroundColor,s.cachedBackgroundColorRgba=r(s.colorCtx,i.backgroundColor));let[f,h,g,E]=y(s.cachedLineColorRgba),[x,b,F,v]=y(s.cachedBackgroundColorRgba);l.viewport(0,0,t,n),l.bindFramebuffer(l.FRAMEBUFFER,null),l.clearColor(0,0,0,0),l.clear(l.COLOR_BUFFER_BIT),l.useProgram(p),l.bindVertexArray(c),l.activeTexture(l.TEXTURE0),l.bindTexture(l.TEXTURE_2D,u),l.pixelStorei(l.UNPACK_FLIP_Y_WEBGL,o),l.texImage2D(l.TEXTURE_2D,0,l.RGBA,l.RGBA,l.UNSIGNED_BYTE,e),m.uSource&&l.uniform1i(m.uSource,0),m.uResolution&&l.uniform2f(m.uResolution,t,n),m.uGridSize&&l.uniform1f(m.uGridSize,i.gridSize),m.uLineWidth&&l.uniform1f(m.uLineWidth,i.lineWidth),m.uLineColor&&l.uniform4f(m.uLineColor,f,h,g,E),m.uBackgroundColor&&l.uniform4f(m.uBackgroundColor,x,b,F,v),m.uRotation&&l.uniform1f(m.uRotation,i.rotation*Math.PI/180),m.uRotationX&&l.uniform1f(m.uRotationX,i.rotationX*Math.PI/180),m.uRotationY&&l.uniform1f(m.uRotationY,i.rotationY*Math.PI/180),m.uPerspective&&l.uniform1f(m.uPerspective,i.perspective),m.uOffset&&l.uniform2f(m.uOffset,i.offsetX,i.offsetY),m.uMaskToSourceAlpha&&l.uniform1i(m.uMaskToSourceAlpha,+!!i.maskToSourceAlpha),l.drawArrays(l.TRIANGLE_STRIP,0,4),l.bindVertexArray(null),l.bindTexture(l.TEXTURE_2D,null),l.useProgram(null)},cleanup:({gl:e,program:t,vao:n,vbo:a,texture:s})=>{e.deleteBuffer(a),e.deleteProgram(t),e.deleteVertexArray(n),e.deleteTexture(s)},schema:{gridSize:{type:"number",min:1,max:400,step:1,default:64,description:"Grid size",hiddenFromList:!1},lineWidth:{type:"number",min:0,max:100,step:.1,default:2,description:"Line width",hiddenFromList:!1},lineColor:{type:"color",default:p,description:"Line color"},backgroundColor:{type:"color",default:c,description:"Background color"},rotation:{type:"rotation-degrees",min:-180,max:180,step:1,default:0,description:"Rotation"},rotationX:{type:"rotation-degrees",min:-180,max:180,step:.1,default:0,description:"Rotation X"},rotationY:{type:"rotation-degrees",min:-180,max:180,step:.1,default:0,description:"Rotation Y"},perspective:{type:"number",min:0,max:4e3,step:1,default:0,description:"Perspective",hiddenFromList:!1},offsetX:{type:"number",min:-400,max:400,step:.1,default:0,description:"Offset X",hiddenFromList:!1},offsetY:{type:"number",min:-400,max:400,step:.1,default:0,description:"Offset Y",hiddenFromList:!1},maskToSourceAlpha:{type:"boolean",default:!1,description:"Mask to source alpha"}},validateParams:e=>{if(null===e||"object"!=typeof e)throw TypeError(`Gridlines effect requires a parameters object, but got ${JSON.stringify(e)}`);o(e.gridSize,"gridSize"),o(e.lineWidth,"lineWidth"),o(e.rotation,"rotation"),o(e.rotationX,"rotationX"),o(e.rotationY,"rotationY"),o(e.perspective,"perspective"),o(e.offsetX,"offsetX"),o(e.offsetY,"offsetY"),s(e.lineColor,"lineColor"),s(e.backgroundColor,"backgroundColor");var t=e.maskToSourceAlpha;if(void 0!==t&&"boolean"!=typeof t)throw TypeError(`"maskToSourceAlpha" must be a boolean, but got ${JSON.stringify(t)}`);var n=e.gridSize??64;if(n<=0)throw TypeError(`"gridSize" must be greater than 0, but got ${JSON.stringify(n)}`);u(e.lineWidth??2,"lineWidth"),u(e.perspective??0,"perspective")}})},1723(e,t,n){"use strict";n.d(t,{U:()=>E});var a=n(39372),s=(e,t)=>{if(void 0!==e&&("string"!=typeof e||0===e.length))throw TypeError(`"${t}" must be a non-empty string, but got ${JSON.stringify(e)}`)},o=(e,t)=>{if(void 0!==e&&("number"!=typeof e||!Number.isFinite(e)))throw TypeError(`"${t}" must be a finite number, but got ${JSON.stringify(e)}`)},r=(e,t)=>{if(e<0)throw TypeError(`"${t}" must be >= 0, but got ${JSON.stringify(e)}`);

147if(e>1)throw TypeError(`"${t}" must be <= 1, but got ${JSON.stringify(e)}`)},i=(e,t)=>{e.clearRect(0,0,1,1),e.fillStyle=t,e.fillRect(0,0,1,1);let{data:n}=e.getImageData(0,0,1,1);return[n[0],n[1],n[2],n[3]]},{createEffect:l,createWebGL2ContextError:p}=a.Xp,c="#ff1a0a",d="#050505",u=e=>({firstColor:e.firstColor??c,secondColor:e.secondColor??d,spacing:e.spacing??62,scale:e.scale??300,complexity:e.complexity??0,smoothness:e.smoothness??1,seed:e.seed??4,offsetX:e.offsetX??13.4,offsetY:e.offsetY??0,phase:e.phase??3.23}),m=(e,t)=>{if(e<=0)throw TypeError(`"${t}" must be greater than 0, but got ${JSON.stringify(e)}`)},f=`#version 300 es
148in vec2 aPos;
149in vec2 aUv;
150out vec2 vUv;
151
152void main() {
153	vUv = aUv;
154	gl_Position = vec4(aPos, 0.0, 1.0);
155}
156`,h=`#version 300 es
157precision highp float;
158
159in vec2 vUv;
160out vec4 fragColor;
161
162uniform vec2 uResolution;
163uniform vec4 uFirstColor;
164uniform vec4 uSecondColor;
165uniform float uSpacing;
166uniform float uScale;
167uniform float uComplexity;
168uniform float uSmoothness;
169uniform float uSeed;
170uniform vec2 uOffset;
171uniform float uPhase;
172
173float hash(vec2 p) {
174	vec3 p3 = fract(vec3(p.xyx) * 0.1031);
175	p3 += dot(p3, p3.yzx + 33.33 + uSeed * 0.013);
176	return fract((p3.x + p3.y) * p3.z);
177}
178
179float valueNoise(vec2 p) {
180	vec2 i = floor(p);
181	vec2 f = fract(p);
182	vec2 u = f * f * f * (f * (f * 6.0 - 15.0) + 10.0);
183	return mix(
184		mix(hash(i), hash(i + vec2(1.0, 0.0)), u.x),
185		mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0)), u.x),
186		u.y
187	);
188}
189
190float fbm(vec2 p) {
191	float value = 0.0;
192	float amplitude = 0.5;
193	float total = 0.0;
194	float persistence = mix(0.2, 0.58, uComplexity);
195	mat2 rotate = mat2(0.80, 0.60, -0.60, 0.80);
196
197	for (int i = 0; i < 5; i++) {
198		float octave = float(i) / 4.0;
199		float detail = mix(0.45, 1.0, uComplexity);
200		float octaveWeight = mix(1.0, 1.0 - smoothstep(0.4, 1.0, octave), 1.0 - detail);
201		value += amplitude * octaveWeight * valueNoise(p);
202		total += amplitude * octaveWeight;
203		p = rotate * p * 2.03 + vec2(13.17, 7.31);
204		amplitude *= persistence;
205	}
206
207	return value / total;
208}
209
210void main() {
211	vec2 position = vUv * uResolution + uOffset;
212	vec2 p = position / max(uScale, 0.001) + vec2(uSeed * 0.137, uSeed * 0.193);
213	vec2 warp = vec2(fbm(p + vec2(5.2, 1.3)), fbm(p + vec2(1.7, 9.2))) - 0.5;
214	mat2 roundRotation = mat2(0.7071, 0.7071, -0.7071, 0.7071);
215	float roundedField = mix(
216		valueNoise(p * 0.9),
217		valueNoise(roundRotation * p * 0.78 + vec2(8.3, 2.7)),
218		0.45
219	);
220	float detailedField = fbm(p + warp * mix(0.35, 1.8, uComplexity));
221	float detailMix = smoothstep(0.0, 1.0, uComplexity);
222	float field = mix(roundedField, detailedField, detailMix);
223	float levels = max(max(uResolution.x, uResolution.y) / max(uSpacing, 0.001), 1.0);
224	float wave = sin((field * levels + uPhase) * 6.28318530718);
225	float edgeWidth = fwidth(wave) * mix(0.15, 1.4, uSmoothness);
226	float selector = smoothstep(-edgeWidth, edgeWidth, wave);
227	vec4 color = mix(uFirstColor, uSecondColor, selector);
228	fragColor = vec4(color.rgb * color.a, color.a);
229}
230`,y=(e,t,n)=>{let a=e.createShader(t);if(!a)throw Error("Failed to create WebGL shader");if(e.shaderSource(a,n),e.compileShader(a),!e.getShaderParameter(a,e.COMPILE_STATUS)){let t=e.getShaderInfoLog(a);throw e.deleteShader(a),Error(`Liquid contours shader compile failed: ${t??"(no log)"}`)}return a},g=e=>[e[0]/255,e[1]/255,e[2]/255,e[3]/255],E=l({type:"dev.remotion.effects.liquidContours",label:"liquidContours()",documentationLink:"https://www.remotion.dev/docs/effects/liquid-contours",backend:"webgl2",calculateKey:e=>{let t=u(e);return`liquid-contours-${t.firstColor}-${t.secondColor}-${t.spacing}-${t.scale}-${t.complexity}-${t.smoothness}-${t.seed}-${t.offsetX}-${t.offsetY}-${t.phase}`},setup:e=>{let t=e.getContext("webgl2",{premultipliedAlpha:!0,alpha:!0,preserveDrawingBuffer:!0});if(!t)throw p("liquid contours effect");let n=(e=>{let t=y(e,e.VERTEX_SHADER,f),n=y(e,e.FRAGMENT_SHADER,h),a=e.createProgram();if(!a)throw Error("Failed to create WebGL program");if(e.attachShader(a,t),e.attachShader(a,n),e.linkProgram(a),e.deleteShader(t),e.deleteShader(n),!e.getProgramParameter(a,e.LINK_STATUS)){let t=e.getProgramInfoLog(a);throw e.deleteProgram(a),Error(`Liquid contours program link failed: ${t??"(no log)"}`)}return a})(t),a=t.createVertexArray();if(!a)throw Error("Failed to create WebGL vertex array");t.bindVertexArray(a);let s=t.createBuffer();if(!s)throw Error("Failed to create WebGL buffer");t.bindBuffer(t.ARRAY_BUFFER,s),t.bufferData(t.ARRAY_BUFFER,new Float32Array([-1,-1,0,0,1,-1,1,0,-1,1,0,1,1,1,1,1]),t.STATIC_DRAW);let o=t.getAttribLocation(n,"aPos"),r=t.getAttribLocation(n,"aUv");t.enableVertexAttribArray(o),t.vertexAttribPointer(o,2,t.FLOAT,!1,16,0),t.enableVertexAttribArray(r),t.vertexAttribPointer(r,2,t.FLOAT,!1,16,8),t.bindVertexArray(null);let i=document.createElement("canvas");i.width=1,i.height=1;let l=i.getContext("2d",{willReadFrequently:!0});if(!l)throw Error("Failed to acquire 2D context for color parsing");return{gl:t,program:n,vao:a,vbo:s,colorCtx:l,uniforms:{uResolution:t.getUniformLocation(n,"uResolution"),uFirstColor:t.getUniformLocation(n,"uFirstColor"),uSecondColor:t.getUniformLocation(n,"uSecondColor"),uSpacing:t.getUniformLocation(n,"uSpacing"),uScale:t.getUniformLocation(n,"uScale"),uComplexity:t.getUniformLocation(n,"uC

230omplexity"),uSmoothness:t.getUniformLocation(n,"uSmoothness"),uSeed:t.getUniformLocation(n,"uSeed"),uOffset:t.getUniformLocation(n,"uOffset"),uPhase:t.getUniformLocation(n,"uPhase")},cachedFirstColor:"",cachedFirstColorRgba:[255,26,10,255],cachedSecondColor:"",cachedSecondColorRgba:[5,5,5,255]}},apply:({width:e,height:t,params:n,state:a})=>{let s=u(n);a.cachedFirstColor!==s.firstColor&&(a.cachedFirstColor=s.firstColor,a.cachedFirstColorRgba=i(a.colorCtx,s.firstColor)),a.cachedSecondColor!==s.secondColor&&(a.cachedSecondColor=s.secondColor,a.cachedSecondColorRgba=i(a.colorCtx,s.secondColor));let o=g(a.cachedFirstColorRgba),r=g(a.cachedSecondColorRgba),{gl:l,program:p,vao:c,uniforms:d}=a;l.viewport(0,0,e,t),l.bindFramebuffer(l.FRAMEBUFFER,null),l.clearColor(0,0,0,0),l.clear(l.COLOR_BUFFER_BIT),l.useProgram(p),d.uResolution&&l.uniform2f(d.uResolution,e,t),d.uFirstColor&&l.uniform4f(d.uFirstColor,...o),d.uSecondColor&&l.uniform4f(d.uSecondColor,...r),d.uSpacing&&l.uniform1f(d.uSpacing,s.spacing),d.uScale&&l.uniform1f(d.uScale,s.scale),d.uComplexity&&l.uniform1f(d.uComplexity,s.complexity),d.uSmoothness&&l.uniform1f(d.uSmoothness,s.smoothness),d.uSeed&&l.uniform1f(d.uSeed,s.seed),d.uOffset&&l.uniform2f(d.uOffset,s.offsetX,s.offsetY),d.uPhase&&l.uniform1f(d.uPhase,s.phase),l.bindVertexArray(c),l.drawArrays(l.TRIANGLE_STRIP,0,4),l.bindVertexArray(null),l.useProgram(null)},cleanup:({gl:e,program:t,vao:n,vbo:a})=>{e.deleteBuffer(a),e.deleteProgram(t),e.deleteVertexArray(n)},schema:{firstColor:{type:"color",default:c,description:"First color"},secondColor:{type:"color",default:d,description:"Second color"},spacing:{type:"number",min:2,max:300,step:1,default:62,description:"Spacing",hiddenFromList:!1},scale:{type:"number",min:20,max:1e3,step:1,default:300,description:"Scale",hiddenFromList:!1},complexity:{type:"number",min:0,max:1,step:.01,default:0,description:"Complexity",hiddenFromList:!1},smoothness:{type:"number",min:0,max:1,step:.01,default:1,description:"Edge smoothness",hiddenFromList:!1},seed:{type:"number",step:1,default:4,description:"Seed",hiddenFromList:!1},offsetX:{type:"number",step:.1,default:13.4,description:"Offset X",hiddenFromList:!1},offsetY:{type:"number",step:.1,default:0,description:"Offset Y",hiddenFromList:!1},phase:{type:"number",step:.01,default:3.23,description:"Phase",hiddenFromList:!1}},validateParams:e=>{if(null===e||"object"!=typeof e)throw TypeError(`Liquid contours effect requires a parameters object, but got ${JSON.stringify(e)}`);s(e.firstColor,"firstColor"),s(e.secondColor,"secondColor"),o(e.spacing,"spacing"),o(e.scale,"scale"),o(e.complexity,"complexity"),o(e.smoothness,"smoothness"),o(e.seed,"seed"),o(e.offsetX,"offsetX"),o(e.offsetY,"offsetY"),o(e.phase,"phase");let t=u(e);m(t.spacing,"spacing"),m(t.scale,"scale"),r(t.complexity,"complexity"),r(t.smoothness,"smoothness")}})},84293(e,t,n){"use strict";n.d(t,{F:()=>v});var a=n(39372),s=(e,t)=>{if(void 0!==e&&("string"!=typeof e||0===e.length))throw TypeError(`"${t}" must be a non-empty string, but got ${JSON.stringify(e)}`)},o=(e,t)=>{if(void 0!==e&&("number"!=typeof e||!Number.isFinite(e)))throw TypeError(`"${t}" must be a finite number, but got ${JSON.stringify(e)}`)},r=(e,t)=>{if(e<0)throw TypeError(`"${t}" must be >= 0, but got ${JSON.stringify(e)}`);if(e>1)throw TypeError(`"${t}" must be <= 1, but got ${JSON.stringify(e)}`)},i=(e,t)=>{if(e<0)throw TypeError(`"${t}" must be >= 0, but got ${JSON.stringify(e)}`)},l=(e,t)=>{e.clearRect(0,0,1,1),e.fillStyle=t,e.fillRect(0,0,1,1);let{data:n}=e.getImageData(0,0,1,1);return[n[0],n[1],n[2],n[3]]},{createEffect:p,createWebGL2ContextError:c}=a.Xp,d="#9fadbc",u="#ffffff",m=e=>({amount:e.amount??1,colorFront:e.colorFront??d,colorBack:e.colorBack??u,contrast:e.contrast??.3,roughness:e.roughness??.4,fiber:e.fiber??.3,fiberSize:e.fiberSize??.2,crumples:e.crumples??.3,crumpleSize:e.crumpleSize??.35,folds:e.folds??.65,foldCount:e.foldCount??5,drops:e.drops??.2,fade:e.fade??0,seed:e.seed??6,scale:e.scale??.6}),f=(e,t,n)=>{if(e>t)throw TypeError(`"${n}" must be <= ${t}, but got ${JSON.stringify(e)}`)},h=(e,t)=>{if(e<=0)throw TypeError(`"${t}" must be greater than 0, but got ${JSON.stringify(e)}`);f(e,1,t)},y=`#version 300 es
231in vec2 aPos;
232in vec2 aUv;
233out vec2 vUv;
234
235void main() {
236	vUv = aUv;
237	gl_Position = vec4(aPos, 0.0, 1.0);
238}
239`,g=`#version 300 es
240precision highp float;
241
242in vec2 vUv;
243out vec4 fragColor;
244
245uniform sampler2D uSource;
246uniform vec2 uResolution;
247uniform float uImageAspectRatio;
248
249uniform vec4 uColorFront;
250uniform vec4 uColorBack;
251uniform float uAmount;
252uniform float uContrast;
253uniform float uRoughness;
254uniform float uFiber;
255uniform float uFiberSize;
256uniform float uCrumples;
257uniform float uCrumpleSize;
258uniform float uFolds;
259uniform float uFoldCount;
260uniform float uDrops;
261uniform float uFade;
262uniform float uSeed;
263uniform float uScale;
264uniform sampler2D uNoiseTexture;
265
266#define TWO_PI 6.28318530718
267#define PI 3.14159265358979323846
268
269float getUvFrame(vec2 uv) {
270	float aax = 2.0 * fwidth(uv.x);
271	float aay = 2.0 * fwidth(uv.y);
272
273	float left = smoothstep(0.0, aax, uv.x);
274	float right = 1.0 - smoothstep(1.0 - aax, 1.0, uv.x);
275	float bottom = smoothstep(0.0, aay, uv.y);
276	float top = 1.0 - smoothstep(1.0 - aay, 1.0, uv.y);
277
278	return left * right * bottom * top;
279}
280
281vec2 rotate(vec2 uv, float th) {
282	return mat2(cos(th), sin(th), -sin(th), cos(th)) * uv;
283}
284
285vec2 seedOffset(float salt) {
286	float seeded = uSeed + salt;
287	return fract(
288		sin(
289			vec2(

290				seeded * 12.9898 + 78.233,
291				seeded * 39.3468 + 11.135
292			)
293		) * 43758.5453
294	);
295}
296
297float randomR(vec2 p) {
298	vec2 uv = floor(p) / 100.0 + 0.5;
299	return texture(uNoiseTexture, fract(uv)).r;
300}
301
302float valueNoise(vec2 st) {
303	vec2 i = floor(st);
304	vec2 f = fract(st);
305	float a = randomR(i);
306	float b = randomR(i + vec2(1.0, 0.0));
307	float c = randomR(i + vec2(0.0, 1.0));
308	float d = randomR(i + vec2(1.0, 1.0));
309	vec2 u = f * f * (3.0 - 2.0 * f);
310	float x1 = mix(a, b, u.x);
311	float x2 = mix(c, d, u.x);
312	return mix(x1, x2, u.y);
313}
314
315float fbm(vec2 n) {
316	float total = 0.0;
317	float amplitude = 0.4;
318	for (int i = 0; i < 3; i++) {
319		total += valueNoise(n) * amplitude;
320		n *= 1.99;
321		amplitude *= 0.65;
322	}
323	return total;
324}
325
326float randomG(vec2 p) {
327	vec2 uv = floor(p) / 50.0 + 0.5;
328	return texture(uNoiseTexture, fract(uv)).g;
329}
330
331float roughnessNoise(vec2 p) {
332	p *= 0.1;
333	float o = 0.0;
334	for (float i = 0.0; ++i < 4.0; p *= 2.1) {
335		vec4 w = vec4(floor(p), ceil(p));
336		vec2 f = fract(p);
337		o += mix(
338			mix(randomG(w.xy), randomG(w.xw), f.y),
339			mix(randomG(w.zy), randomG(w.zw), f.y),
340			f.x
341		);
342		o += 0.2 / exp(2.0 * abs(sin(0.2 * p.x + 0.5 * p.y)));
343	}
344	return o / 3.0;
345}
346
347float fiberRandom(vec2 p) {
348	vec2 uv = floor(p) / 100.0;
349	return texture(uNoiseTexture, fract(uv)).b;
350}
351
352float fiberValueNoise(vec2 st) {
353	vec2 i = floor(st);
354	vec2 f = fract(st);
355	float a = fiberRandom(i);
356	float b = fiberRandom(i + vec2(1.0, 0.0));
357	float c = fiberRandom(i + vec2(0.0, 1.0));
358	float d = fiberRandom(i + vec2(1.0, 1.0));
359	vec2 u = f * f * (3.0 - 2.0 * f);
360	float x1 = mix(a, b, u.x);
361	float x2 = mix(c, d, u.x);
362	return mix(x1, x2, u.y);
363}
364
365float fiberNoiseFbm(in vec2 n, vec2 seedOffset) {
366	float total = 0.0;
367	float amplitude = 1.0;
368	for (int i = 0; i < 4; i++) {
369		n = rotate(n, 0.7);
370		total += fiberValueNoise(n + seedOffset) * amplitude;
371		n *= 2.0;
372		amplitude *= 0.6;
373	}
374	return total;
375}
376
377float fiberNoise(vec2 uv, vec2 seedOffset) {
378	float epsilon = 0.001;
379	float n1 = fiberNoiseFbm(uv + vec2(epsilon, 0.0), seedOffset);
380	float n2 = fiberNoiseFbm(uv - vec2(epsilon, 0.0), seedOffset);
381	float n3 = fiberNoiseFbm(uv + vec2(0.0, epsilon), seedOffset);
382	float n4 = fiberNoiseFbm(uv - vec2(0.0, epsilon), seedOffset);
383	return length(vec2(n1 - n2, n3 - n4)) / (2.0 * epsilon);
384}
385
386vec2 randomGB(vec2 p) {
387	vec2 uv = floor(p) / 50.0 + 0.5;
388	return texture(uNoiseTexture, fract(uv)).gb;
389}
390
391float crumpledNoise(vec2 t, float pw) {
392	vec2 p = floor(t);
393	float wsum = 0.0;
394	float cl = 0.0;
395	for (int y = -1; y < 2; y += 1) {
396		for (int x = -1; x < 2; x += 1) {
397			vec2 b = vec2(float(x), float(y));
398			vec2 q = b + p;
399			vec2 q2 = q - floor(q / 8.0) * 8.0;
400			vec2 c = q + randomGB(q2);
401			vec2 r = c - t;
402			float w =
403				pow(smoothstep(0.0, 1.0, 1.0 - abs(r.x)), pw) *
404				pow(smoothstep(0.0, 1.0, 1.0 - abs(r.y)), pw);
405			cl += (0.5 + 0.5 * sin((q2.x + q2.y * 5.0) * 8.0)) * w;
406			wsum += w;
407		}
408	}
409	return pow(wsum != 0.0 ? cl / wsum : 0.0, 0.5) * 2.0;
410}
411
412float crumplesShape(vec2 uv) {
413	return crumpledNoise(uv * 0.25, 16.0) * crumpledNoise(uv * 0.5, 2.0);
414}
415
416vec2 folds(vec2 uv) {
417	vec3 pp = vec3(0.0);
418	float l = 9.0;
419	for (float i = 0.0; i < 15.0; i++) {
420		if (i >= uFoldCount) {
421			break;
422		}
423		vec2 rand = randomGB(vec2(i, i * uSeed));
424		float an = rand.x * TWO_PI;
425		vec2 p = vec2(cos(an), sin(an)) * rand.y;
426		float dist = distance(uv, p);
427		l = min(l, dist);
428
429		if (l == dist) {
430			pp.xy = uv - p.xy;
431			pp.z = dist;
432		}
433	}
434	return mix(pp.xy, vec2(0.0), pow(pp.z, 0.25));
435}
436
437float drops(vec2 uv) {
438	vec2 iDropsUV = floor(uv);
439	vec2 fDropsUV = fract(uv);
440	float dropsMinDist = 1.0;
441	for (int j = -1; j <= 1; j++) {
442		for (int i = -1; i <= 1; i++) {
443			vec2 neighbor = vec2(float(i), float(j));
444			vec2 offset = randomGB(iDropsUV + neighbor);
445			offset = 0.5 + 0.5 * sin(10.0 * uSeed + TWO_PI * offset);
446			vec2 pos = neighbor + offset - fDropsUV;
447			float dist = length(pos);
448			dropsMinDist = min(dropsMinDist, dropsMinDist * dist);
449		}
450	}
451	return 1.0 - smoothstep(0.05, 0.09, pow(dropsMinDist, 0.5));
452}
453
454void main() {
455	vec4 source = texture(uSource, vUv);
456	float sourceAlpha = source.a;
457
458	if (sourceAlpha <= 0.001 || uAmount <= 0.0) {
459		fragColor = source;
460		return;
461	}
462
463	vec3 sourceRgb = source.rgb / sourceAlpha;
464	vec2 imageUV = vUv;
465	vec2 patternUV = vUv - 0.5;
466	patternUV /= max(uScale, 0.001);
467	patternUV = 5.0 * (patternUV * vec2(uImageAspectRatio, 1.0));
468
469	vec2 roughnessUv =
470		1.5 * (gl_FragCoord.xy - 0.5 * uResolution) +
471		128.0 * seedOffset(1.0);
472	float roughness =
473		roughnessNoise(roughnessUv + vec2(1.0, 0.0)) -
474		roughnessNoise(roughnessUv - vec2(1.0, 0.0));
475
476	vec2 crumplesUV =
477		fract(patternUV * 0.02 / max(uCrumpleSize, 0.001) - uSeed) * 32.0;
478	float crumples =
479		uCrumples *
480		(crumplesShape(crumplesUV + vec2(0.05, 0.0)) -
481			crumplesShape(crumplesUV));
482

483	vec2 fiberUV = 2.0 / max(uFiberSize, 0.001) * patternUV;
484	float fiber = fiberNoise(fiberUV, 64.0 * seedOffset(2.0));
485	fiber = 0.5 * uFiber * (fiber - 1.0);
486
487	vec2 normal = vec2(0.0);
488	vec2 normalImage = vec2(0.0);
489
490	vec2 foldsUV = patternUV * 0.12;
491	foldsUV = rotate(foldsUV, 4.0 * uSeed);
492	vec2 w = folds(foldsUV);
493	foldsUV = rotate(foldsUV + 0.007 * cos(uSeed), 0.01 * sin(uSeed));
494	vec2 w2 = folds(foldsUV);
495
496	float dropPattern = uDrops * drops(patternUV * 2.0);
497
498	float fade = uFade * fbm(0.17 * patternUV + 10.0 * uSeed);
499	fade = clamp(8.0 * fade * fade * fade, 0.0, 1.0);
500
501	w = mix(w, vec2(0.0), fade);
502	w2 = mix(w2, vec2(0.0), fade);
503	crumples = mix(crumples, 0.0, fade);
504	dropPattern = mix(dropPattern, 0.0, fade);
505	fiber *= mix(1.0, 0.5, fade);
506	roughness *= mix(1.0, 0.5, fade);
507
508	normal.xy += uFolds * min(5.0 * uContrast, 1.0) * 4.0 * max(vec2(0.0), w + w2);
509	normalImage.xy += uFolds * 2.0 * w;
510	normal.xy += crumples;
511	normalImage.xy += 1.5 * crumples;
512	normal.xy += 3.0 * dropPattern;
513	normalImage.xy += 0.2 * dropPattern;
514	normal.xy += uRoughness * 1.5 * roughness;
515	normal.xy += fiber;
516	normalImage += uRoughness * 0.75 * roughness;
517	normalImage += 0.2 * fiber;
518
519	vec3 lightPos = vec3(1.0, 2.0, 1.0);
520	float res = dot(
521		normalize(vec3(normal, 9.5 - 9.0 * pow(uContrast, 0.1))),
522		normalize(lightPos)
523	);
524
525	imageUV += 0.02 * normalImage;
526	float frame = getUvFrame(imageUV);
527	vec4 displacedSource = texture(uSource, clamp(imageUV, vec2(0.0), vec2(1.0)));
528	vec3 displacedRgb = displacedSource.a > 0.001
529		? displacedSource.rgb / displacedSource.a
530		: sourceRgb;
531	displacedRgb += 0.6 * pow(uContrast, 0.4) * (res - 0.7);
532
533	vec3 frontRgb = mix(vec3(1.0), uColorFront.rgb, uColorFront.a);
534	vec3 backRgb = mix(vec3(1.0), uColorBack.rgb, uColorBack.a);
535	vec3 paperTone = mix(backRgb, frontRgb, clamp(res, 0.0, 1.0));
536	vec3 texturedRgb = displacedRgb * (0.72 + 0.42 * res);
537	texturedRgb = mix(texturedRgb, texturedRgb * paperTone, 0.65);
538	texturedRgb -= 0.007 * dropPattern;
539	texturedRgb = mix(sourceRgb, texturedRgb, frame);
540
541	vec3 finalRgb = mix(sourceRgb, clamp(texturedRgb, 0.0, 1.0), uAmount);
542	fragColor = vec4(finalRgb * sourceAlpha, sourceAlpha);
543}
544`,E=(e,t,n)=>{let a=e.createShader(t);if(!a)throw Error("Failed to create WebGL shader");if(e.shaderSource(a,n),e.compileShader(a),!e.getShaderParameter(a,e.COMPILE_STATUS)){let t=e.getShaderInfoLog(a);throw e.deleteShader(a),Error(`Paper shader compile failed: ${t??"(no log)"}`)}return a},x=e=>{let t=e;return t^=t<<13,t^=t>>>17,(t^=t<<5)>>>0},b=(e,t,n)=>{let a=(e=>{let t,n=new Uint8Array(262144),a=0==(t=(0x9e3779b9^Math.imul(Math.round(1e3*e),0x85ebca6b))>>>0)?0x9e3779b9:t;for(let e=0;e<n.length;e+=4)a=x(a),n[e]=255&a,a=x(a),n[e+1]=255&a,a=x(a),n[e+2]=255&a,n[e+3]=255;return n})(n);e.bindTexture(e.TEXTURE_2D,t),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!1),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,256,256,0,e.RGBA,e.UNSIGNED_BYTE,a)},F=e=>[e[0]/255,e[1]/255,e[2]/255,e[3]/255],v=p({type:"dev.remotion.effects.paper",label:"paper()",documentationLink:"https://www.remotion.dev/docs/effects/paper",backend:"webgl2",calculateKey:e=>{let t=m(e);return`paper-${t.amount}-${t.colorFront}-${t.colorBack}-${t.contrast}-${t.roughness}-${t.fiber}-${t.fiberSize}-${t.crumples}-${t.crumpleSize}-${t.folds}-${t.foldCount}-${t.drops}-${t.fade}-${t.seed}-${t.scale}`},setup:e=>(e=>{let t=e.getContext("webgl2",{premultipliedAlpha:!0,alpha:!0,preserveDrawingBuffer:!0});if(!t)throw c("paper effect");let n=E(t,t.VERTEX_SHADER,y),a=E(t,t.FRAGMENT_SHADER,g),s=((e,t,n)=>{let a=e.createProgram();if(!a)throw Error("Failed to create WebGL program");if(e.attachShader(a,t),e.attachShader(a,n),e.linkProgram(a),!e.getProgramParameter(a,e.LINK_STATUS)){let t=e.getProgramInfoLog(a);throw e.deleteProgram(a),Error(`Paper program link failed: ${t??"(no log)"}`)}return a})(t,n,a);t.deleteShader(n),t.deleteShader(a);let o=t.createVertexArray();if(!o)throw Error("Failed to create WebGL vertex array");t.bindVertexArray(o);let r=new Float32Array([-1,-1,0,0,1,-1,1,0,-1,1,0,1,1,1,1,1]),i=t.createBuffer();if(!i)throw Error("Failed to create WebGL buffer");t.bindBuffer(t.ARRAY_BUFFER,i),t.bufferData(t.ARRAY_BUFFER,r,t.STATIC_DRAW);let l=t.getAttribLocation(s,"aPos"),p=t.getAttribLocation(s,"aUv");t.enableVertexAttribArray(l),t.vertexAttribPointer(l,2,t.FLOAT,!1,16,0),t.enableVertexAttribArray(p),t.vertexAttribPointer(p,2,t.FLOAT,!1,16,8),t.bindVertexArray(null);let d=(e=>{let t=e.createTexture();if(!t)throw Error("Failed to create WebGL texture");return e.bindTexture(e.TEXTURE_2D,t),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null),t})(t),u=(e=>{let t=e.createTexture();if(!t)throw Error("Failed to create WebGL noise texture");return b(e,t,6),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.NEAREST),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.NEAREST),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),e.bindTexture(e.TEXTURE_2D,null),t})(t);t.pixelStorei(t.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0);let m=document.createElement("canvas");m.width=1,m.height=1;let f=m.getContext("2d",{willReadFrequently:!0});if(!f)throw Error("Failed to acquire 2D context for color parsing");return{gl:t,program:s,vao:o,vbo:i,sourceTexture:d,noiseTexture:u,uSource:t.getUniformLocation(s,"uSource"),uResolution:t.getUniformLocation(s,"uResolution"),uImageAspectRatio:t.getUniformLocation(s,"uImageAspectRatio"),uColorFront:t.getUniformLocation(s,"uC

544olorFront"),uColorBack:t.getUniformLocation(s,"uColorBack"),uAmount:t.getUniformLocation(s,"uAmount"),uContrast:t.getUniformLocation(s,"uContrast"),uRoughness:t.getUniformLocation(s,"uRoughness"),uFiber:t.getUniformLocation(s,"uFiber"),uFiberSize:t.getUniformLocation(s,"uFiberSize"),uCrumples:t.getUniformLocation(s,"uCrumples"),uCrumpleSize:t.getUniformLocation(s,"uCrumpleSize"),uFolds:t.getUniformLocation(s,"uFolds"),uFoldCount:t.getUniformLocation(s,"uFoldCount"),uDrops:t.getUniformLocation(s,"uDrops"),uFade:t.getUniformLocation(s,"uFade"),uSeed:t.getUniformLocation(s,"uSeed"),uScale:t.getUniformLocation(s,"uScale"),uNoiseTexture:t.getUniformLocation(s,"uNoiseTexture"),colorCtx:f,cachedColorFront:"",cachedColorFrontRgba:[159,173,188,255],cachedColorBack:"",cachedColorBackRgba:[255,255,255,255],cachedNoiseSeed:6}})(e),apply:({source:e,width:t,height:n,params:a,state:s,flipSourceY:o})=>{let r=m(a),{gl:i,program:p,vao:c,sourceTexture:d,noiseTexture:u}=s;s.cachedColorFront!==r.colorFront&&(s.cachedColorFront=r.colorFront,s.cachedColorFrontRgba=l(s.colorCtx,r.colorFront)),s.cachedColorBack!==r.colorBack&&(s.cachedColorBack=r.colorBack,s.cachedColorBackRgba=l(s.colorCtx,r.colorBack));let[f,h,y,g]=F(s.cachedColorFrontRgba),[E,x,v,w]=F(s.cachedColorBackRgba);i.viewport(0,0,t,n),i.bindFramebuffer(i.FRAMEBUFFER,null),i.clearColor(0,0,0,0),i.clear(i.COLOR_BUFFER_BIT),i.useProgram(p),i.bindVertexArray(c),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,d),i.pixelStorei(i.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),i.pixelStorei(i.UNPACK_FLIP_Y_WEBGL,o),i.texImage2D(i.TEXTURE_2D,0,i.RGBA,i.RGBA,i.UNSIGNED_BYTE,e),i.activeTexture(i.TEXTURE1),i.bindTexture(i.TEXTURE_2D,u),s.cachedNoiseSeed!==r.seed&&(b(i,u,r.seed),s.cachedNoiseSeed=r.seed),s.uSource&&i.uniform1i(s.uSource,0),s.uResolution&&i.uniform2f(s.uResolution,t,n),s.uImageAspectRatio&&i.uniform1f(s.uImageAspectRatio,t/n),s.uColorFront&&i.uniform4f(s.uColorFront,f,h,y,g),s.uColorBack&&i.uniform4f(s.uColorBack,E,x,v,w),s.uAmount&&i.uniform1f(s.uAmount,r.amount),s.uContrast&&i.uniform1f(s.uContrast,r.contrast),s.uRoughness&&i.uniform1f(s.uRoughness,r.roughness),s.uFiber&&i.uniform1f(s.uFiber,r.fiber),s.uFiberSize&&i.uniform1f(s.uFiberSize,r.fiberSize),s.uCrumples&&i.uniform1f(s.uCrumples,r.crumples),s.uCrumpleSize&&i.uniform1f(s.uCrumpleSize,r.crumpleSize),s.uFolds&&i.uniform1f(s.uFolds,r.folds),s.uFoldCount&&i.uniform1f(s.uFoldCount,r.foldCount),s.uDrops&&i.uniform1f(s.uDrops,r.drops),s.uFade&&i.uniform1f(s.uFade,r.fade),s.uSeed&&i.uniform1f(s.uSeed,r.seed),s.uScale&&i.uniform1f(s.uScale,r.scale),s.uNoiseTexture&&i.uniform1i(s.uNoiseTexture,1),i.drawArrays(i.TRIANGLE_STRIP,0,4),i.bindVertexArray(null),i.activeTexture(i.TEXTURE1),i.bindTexture(i.TEXTURE_2D,null),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,null),i.useProgram(null)},cleanup:({gl:e,program:t,vao:n,vbo:a,sourceTexture:s,noiseTexture:o})=>{e.deleteTexture(s),e.deleteTexture(o),e.deleteBuffer(a),e.deleteProgram(t),e.deleteVertexArray(n)},schema:{amount:{type:"number",min:0,max:1,step:.01,default:1,description:"Amount",hiddenFromList:!1},colorFront:{type:"color",default:d,description:"Front color"},colorBack:{type:"color",default:u,description:"Back color"},contrast:{type:"number",min:0,max:1,step:.01,default:.3,description:"Contrast",hiddenFromList:!1},roughness:{type:"number",min:0,max:1,step:.01,default:.4,description:"Roughness",hiddenFromList:!1},fiber:{type:"number",min:0,max:1,step:.01,default:.3,description:"Fiber",hiddenFromList:!1},fiberSize:{type:"number",min:.01,max:1,step:.01,default:.2,description:"Fiber size",hiddenFromList:!1},crumples:{type:"number",min:0,max:1,step:.01,default:.3,description:"Crumples",hiddenFromList:!1},crumpleSize:{type:"number",min:.01,max:1,step:.01,default:.35,description:"Crumple size",hiddenFromList:!1},folds:{type:"number",min:0,max:1,step:.01,default:.65,description:"Folds",hiddenFromList:!1},foldCount:{type:"number",min:0,max:15,step:1,default:5,description:"Fold count",hiddenFromList:!1},drops:{type:"number",min:0,max:1,step:.01,default:.2,description:"Drops",hiddenFromList:!1}

544,fade:{type:"number",min:0,max:1,step:.01,default:0,description:"Fade",hiddenFromList:!1},seed:{type:"number",min:0,max:1e3,step:.01,default:6,description:"Seed",hiddenFromList:!1},scale:{type:"number",min:.01,max:4,step:.01,default:.6,description:"Scale",hiddenFromList:!1}},validateParams:e=>{if(null===e||"object"!=typeof e)throw TypeError(`Paper effect requires a parameters object, but got ${JSON.stringify(e)}`);o(e.amount,"amount"),s(e.colorFront,"colorFront"),s(e.colorBack,"colorBack"),o(e.contrast,"contrast"),o(e.roughness,"roughness"),o(e.fiber,"fiber"),o(e.fiberSize,"fiberSize"),o(e.crumples,"crumples"),o(e.crumpleSize,"crumpleSize"),o(e.folds,"folds"),o(e.foldCount,"foldCount"),o(e.drops,"drops"),o(e.fade,"fade"),o(e.seed,"seed"),o(e.scale,"scale");let t=m(e);if(r(t.amount,"amount"),r(t.contrast,"contrast"),r(t.roughness,"roughness"),r(t.fiber,"fiber"),h(t.fiberSize,"fiberSize"),r(t.crumples,"crumples"),h(t.crumpleSize,"crumpleSize"),r(t.folds,"folds"),i(t.foldCount,"foldCount"),f(t.foldCount,15,"foldCount"),r(t.drops,"drops"),r(t.fade,"fade"),i(t.seed,"seed"),f(t.seed,1e3,"seed"),t.scale<=0)throw TypeError(`"scale" must be greater than 0, but got ${JSON.stringify(t.scale)}`);f(t.scale,4,"scale")}})},2477(e,t,n){"use strict";n.d(t,{h:()=>o});var{createEffect:a}=n(39372).Xp,s=e=>({scale:e.scale,horizontal:e.horizontal??!0,vertical:e.vertical??!0}),o=a({type:"dev.remotion.effects.scale",label:"scale()",documentationLink:"https://www.remotion.dev/docs/effects/scale",backend:"2d",calculateKey:e=>{let t=s(e);return`scale-${t.scale}-${t.horizontal}-${t.vertical}`},setup:()=>null,apply:({source:e,target:t,width:n,height:a,params:o})=>{let r=t.getContext("2d");if(!r)throw Error("Failed to acquire 2D context for scale effect. The canvas may have been assigned a different context type.");let i=s(o),l=i.horizontal?i.scale:1,p=i.vertical?i.scale:1;if(1===l&&1===p){r.clearRect(0,0,n,a),r.drawImage(e,0,0,n,a);return}r.clearRect(0,0,n,a),r.save();let c=n/2,d=a/2;r.translate(c,d),r.scale(l,p),r.translate(-c,-d),r.drawImage(e,0,0,n,a),r.restore()},cleanup:()=>{},schema:{scale:{type:"number",min:.1,max:10,step:.1,default:1,description:"Factor",hiddenFromList:!1,defaultKeyframeOutput:"perceptual-scale"},horizontal:{type:"boolean",default:!0,description:"Horizontal"},vertical:{type:"boolean",default:!0,description:"Vertical"}},validateParams:e=>{if(null===e||"object"!=typeof e)throw TypeError(`Scale effect requires a parameters object, but got ${JSON.stringify(e)}`);var t=e.scale;if("number"!=typeof t||!Number.isFinite(t))throw TypeError(`"scale" must be a finite number, but got ${JSON.stringify(t)}`);if(void 0!==e.horizontal&&"boolean"!=typeof e.horizontal)throw TypeError(`"horizontal" must be a boolean, but got ${JSON.stringify(e.horizontal)}`);if(void 0!==e.vertical&&"boolean"!=typeof e.vertical)throw TypeError(`"vertical" must be a boolean, but got ${JSON.stringify(e.vertical)}`);let n=s(e);if(n.scale<=0)throw TypeError(`"scale" must be greater than 0, but got ${JSON.stringify(n.scale)}`)}})},5786(e,t,n){"use strict";n.d(t,{q:()=>m});var a=n(39372),s=(e,t)=>{if(void 0!==e&&("number"!=typeof e||!Number.isFinite(e)))throw TypeError(`"${t}" must be a finite number, but got ${JSON.stringify(e)}`)},o=(e,t)=>{if(e<0)throw TypeError(`"${t}" must be >= 0, but got ${JSON.stringify(e)}`);if(e>1)throw TypeError(`"${t}" must be <= 1, but got ${JSON.stringify(e)}`)},{createEffect:r,createWebGL2ContextError:i}=a.Xp,l=e=>({progress:e.progress??.5,angle:e.angle??30,haloSigma:e.haloSigma??200,coreSigma:e.coreSigma??65,haloIntensity:e.haloIntensity??.3,coreIntensity:e.coreIntensity??.4}),p=(e,t)=>{if(e<=0)throw TypeError(`"${t}" must be greater than 0, but got ${JSON.stringify(e)}`)},c=`#version 300 es
545in vec2 aPos;
546in vec2 aUv;
547out vec2 vUv;
548
549void main() {
550	vUv = aUv;
551	gl_Position = vec4(aPos, 0.0, 1.0);
552}
553`,d=`#version 300 es
554precision highp float;
555
556in vec2 vUv;
557out vec4 fragColor;
558
559uniform sampler2D uSource;
560uniform vec2 uResolution;
561uniform vec2 uBandNormal;
562uniform float uBandT;
563uniform float uHaloSigma;
564uniform float uCoreSigma;
565uniform float uHaloIntensity;
566uniform float uCoreIntensity;
567
568void main() {
569	vec4 source = texture(uSource, vUv);
570	vec2 px = vec2(vUv.x * uResolution.x, (1.0 - vUv.y) * uResolution.y);
571	vec2 center = uResolution * 0.5;
572
573	float dist = dot(px - center, uBandNormal) - uBandT;
574	float halo = exp(-(dist * dist) / (uHaloSigma * uHaloSigma)) * uHaloIntensity;
575	float core = exp(-(dist * dist) / (uCoreSigma * uCoreSigma)) * uCoreIntensity;
576	float intensity = clamp(halo + core, 0.0, 1.0);
577
578	vec3 finalPremult = source.rgb * (1.0 - intensity) + intensity * source.a;
579	fragColor = vec4(finalPremult, source.a);
580}

581`,u=(e,t,n)=>{let a=e.createShader(t);if(!a)throw Error("Failed to create WebGL shader");if(e.shaderSource(a,n),e.compileShader(a),!e.getShaderParameter(a,e.COMPILE_STATUS)){let t=e.getShaderInfoLog(a);throw e.deleteShader(a),Error(`Shine shader compile failed: ${t??"(no log)"}`)}return a},m=r({type:"dev.remotion.effects.shine",label:"shine()",documentationLink:"https://www.remotion.dev/docs/effects/shine",backend:"webgl2",calculateKey:e=>{let t=l(e);return`shine-${t.progress}-${t.angle}-${t.haloSigma}-${t.coreSigma}-${t.haloIntensity}-${t.coreIntensity}`},setup:e=>{let t=e.getContext("webgl2",{premultipliedAlpha:!0,alpha:!0,preserveDrawingBuffer:!0});if(!t)throw i("shine effect");t.pixelStorei(t.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0);let n=u(t,t.VERTEX_SHADER,c),a=u(t,t.FRAGMENT_SHADER,d),s=((e,t,n)=>{let a=e.createProgram();if(!a)throw Error("Failed to create WebGL program");if(e.attachShader(a,t),e.attachShader(a,n),e.linkProgram(a),!e.getProgramParameter(a,e.LINK_STATUS)){let t=e.getProgramInfoLog(a);throw e.deleteProgram(a),Error(`Shine program link failed: ${t??"(no log)"}`)}return a})(t,n,a);t.deleteShader(n),t.deleteShader(a);let o=t.createVertexArray();if(!o)throw Error("Failed to create WebGL vertex array");t.bindVertexArray(o);let r=new Float32Array([-1,-1,0,0,1,-1,1,0,-1,1,0,1,1,1,1,1]),l=t.createBuffer();if(!l)throw Error("Failed to create WebGL buffer");t.bindBuffer(t.ARRAY_BUFFER,l),t.bufferData(t.ARRAY_BUFFER,r,t.STATIC_DRAW);let p=t.getAttribLocation(s,"aPos"),m=t.getAttribLocation(s,"aUv");t.enableVertexAttribArray(p),t.vertexAttribPointer(p,2,t.FLOAT,!1,16,0),t.enableVertexAttribArray(m),t.vertexAttribPointer(m,2,t.FLOAT,!1,16,8),t.bindVertexArray(null);let f=t.createTexture();if(!f)throw Error("Failed to create WebGL texture");return t.bindTexture(t.TEXTURE_2D,f),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),t.bindTexture(t.TEXTURE_2D,null),{gl:t,program:s,vao:o,vbo:l,texture:f,uSource:t.getUniformLocation(s,"uSource"),uResolution:t.getUniformLocation(s,"uResolution"),uBandNormal:t.getUniformLocation(s,"uBandNormal"),uBandT:t.getUniformLocation(s,"uBandT"),uHaloSigma:t.getUniformLocation(s,"uHaloSigma"),uCoreSigma:t.getUniformLocation(s,"uCoreSigma"),uHaloIntensity:t.getUniformLocation(s,"uHaloIntensity"),uCoreIntensity:t.getUniformLocation(s,"uCoreIntensity")}},apply:({source:e,width:t,height:n,params:a,state:s,flipSourceY:o})=>{let r=l(a),i=r.angle*Math.PI/180,p=Math.cos(i),c=-Math.sin(i),d=(Math.abs(p)*t+Math.abs(c)*n)/2+3*r.haloSigma,u=-d+r.progress*d*2,{gl:m,program:f,vao:h,texture:y}=s;m.viewport(0,0,t,n),m.bindFramebuffer(m.FRAMEBUFFER,null),m.clearColor(0,0,0,0),m.clear(m.COLOR_BUFFER_BIT),m.activeTexture(m.TEXTURE0),m.bindTexture(m.TEXTURE_2D,y),m.pixelStorei(m.UNPACK_FLIP_Y_WEBGL,o),m.texImage2D(m.TEXTURE_2D,0,m.RGBA,m.RGBA,m.UNSIGNED_BYTE,e),m.useProgram(f),s.uSource&&m.uniform1i(s.uSource,0),s.uResolution&&m.uniform2f(s.uResolution,t,n),s.uBandNormal&&m.uniform2f(s.uBandNormal,p,c),s.uBandT&&m.uniform1f(s.uBandT,u),s.uHaloSigma&&m.uniform1f(s.uHaloSigma,r.haloSigma),s.uCoreSigma&&m.uniform1f(s.uCoreSigma,r.coreSigma),s.uHaloIntensity&&m.uniform1f(s.uHaloIntensity,r.haloIntensity),s.uCoreIntensity&&m.uniform1f(s.uCoreIntensity,r.coreIntensity),m.bindVertexArray(h),m.drawArrays(m.TRIANGLE_STRIP,0,4),m.bindVertexArray(null),m.bindTexture(m.TEXTURE_2D,null),m.useProgram(null)},cleanup:({gl:e,program:t,vao:n,vbo:a,texture:s})=>{e.deleteTexture(s),e.deleteBuffer(a),e.deleteProgram(t),e.deleteVertexArray(n)},schema:{progress:{type:"number",min:0,max:1,step:.01,default:.5,description:"Progress",hiddenFromList:!1},angle:{type:"rotation-degrees",step:1,default:30,description:"Angle"},haloSigma:{type:"number",min:1,max:500,step:1,default:200,description:"Halo sigma",hiddenFromList:!1},coreSigma:{type:"number",min:1,max:500,step:1,default:65,description:"Core sigma",hiddenFromList:!1}

581,haloIntensity:{type:"number",min:0,max:1,step:.01,default:.3,description:"Halo intensity",hiddenFromList:!1},coreIntensity:{type:"number",min:0,max:1,step:.01,default:.4,description:"Core intensity",hiddenFromList:!1}},validateParams:e=>{if(null===e||"object"!=typeof e)throw TypeError(`Shine effect requires a parameters object, but got ${JSON.stringify(e)}`);s(e.progress,"progress"),s(e.angle,"angle"),s(e.haloSigma,"haloSigma"),s(e.coreSigma,"coreSigma"),s(e.haloIntensity,"haloIntensity"),s(e.coreIntensity,"coreIntensity");let t=l(e);o(t.progress,"progress"),p(t.haloSigma,"haloSigma"),p(t.coreSigma,"coreSigma"),o(t.haloIntensity,"haloIntensity"),o(t.coreIntensity,"coreIntensity")}})},27961(e,t,n){"use strict";n.d(t,{V:()=>m});var a=n(39372),s=n(64831),{createEffect:o,createWebGL2ContextError:r}=a.Xp,i=e=>{let t=s.NoReactInternals.processColor(e);return[t>>>16&255,t>>>8&255,255&t]},l=[.5,.5],p=e=>({rays:e.rays,colors:e.colors,rotation:e.rotation??0,smoothness:e.smoothness??0,origin:e.origin??l}),c=`#version 300 es
582in vec2 aPos;
583in vec2 aUv;
584out vec2 vUv;
585void main() {
586	vUv = aUv;
587	gl_Position = vec4(aPos, 0.0, 1.0);
588}
589`,d=`#version 300 es
590precision highp float;
591
592uniform sampler2D colorPalette;
593uniform float numRays;
594uniform float rotationOffset;
595uniform float smoothEdge;
596uniform vec2 resolution;
597uniform float numColors;
598uniform vec2 origin;
599
600in vec2 vUv;
601out vec4 fragColor;
602
603const float Pi = 3.14159265359;
604
605void main() {
606	vec2 uv = vUv;
607	vec2 center = uv - origin;
608	center.x *= resolution.x / resolution.y;
609
610	float angle = atan(center.y, center.x) + rotationOffset;
611	float normalizedAngle = (angle + Pi) / (2.0 * Pi);
612	float sector = normalizedAngle * numRays;
613	float rayIndex = mod(floor(sector), numRays);
614
615	float colorIndex = mod(rayIndex, numColors);
616	float texCoord = (colorIndex + 0.5) / numColors;
617	vec3 col = texture(colorPalette, vec2(texCoord, 0.5)).rgb;
618
619	float fractSector = fract(sector);
620	float edgeSmooth = smoothEdge * 0.5;
621	float nextColorIndex = mod(rayIndex + 1.0, numColors);
622	float nextTexCoord = (nextColorIndex + 0.5) / numColors;
623	vec3 nextCol = texture(colorPalette, vec2(nextTexCoord, 0.5)).rgb;
624
625	float blend = smoothstep(1.0 - edgeSmooth, 1.0, fractSector);
626	col = mix(col, nextCol, blend);
627	float blendStart = smoothstep(edgeSmooth, 0.0, fractSector);
628	float prevColorIndex = mod(rayIndex - 1.0 + numColors, numColors);
629	float prevTexCoord = (prevColorIndex + 0.5) / numColors;
630	vec3 prevCol = texture(colorPalette, vec2(prevTexCoord, 0.5)).rgb;
631	col = mix(col, prevCol, blendStart);
632
633	fragColor = vec4(col, 1.0);
634}

635`,u=(e,t,n)=>{let a=e.createShader(t);if(!a)throw Error("Failed to create WebGL shader");if(e.shaderSource(a,n),e.compileShader(a),!e.getShaderParameter(a,e.COMPILE_STATUS)){let t=e.getShaderInfoLog(a);throw e.deleteShader(a),Error(`Starburst shader compile failed: ${t??"(no log)"}`)}return a},m=o({type:"remotion/starburst",label:"starburst()",documentationLink:"https://www.remotion.dev/docs/effects/starburst",backend:"webgl2",calculateKey:e=>{let t=p(e);return`starburst-${t.rays}-${t.colors.join("|")}-${t.rotation}-${t.smoothness}-${t.origin.join(":")}`},setup:e=>{let t=e.getContext("webgl2",{premultipliedAlpha:!0,alpha:!0,preserveDrawingBuffer:!0});if(!t)throw r("starburst effect");t.pixelStorei(t.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0);let n=u(t,t.VERTEX_SHADER,c),a=u(t,t.FRAGMENT_SHADER,d),s=((e,t,n)=>{let a=e.createProgram();if(!a)throw Error("Failed to create WebGL program");if(e.attachShader(a,t),e.attachShader(a,n),e.linkProgram(a),!e.getProgramParameter(a,e.LINK_STATUS)){let t=e.getProgramInfoLog(a);throw e.deleteProgram(a),Error(`Starburst program link failed: ${t??"(no log)"}`)}return a})(t,n,a);t.deleteShader(n),t.deleteShader(a);let o=t.createVertexArray();if(!o)throw Error("Failed to create WebGL vertex array");t.bindVertexArray(o);let i=new Float32Array([-1,-1,0,0,1,-1,1,0,-1,1,0,1,1,1,1,1]),l=t.createBuffer();if(!l)throw Error("Failed to create WebGL buffer");t.bindBuffer(t.ARRAY_BUFFER,l),t.bufferData(t.ARRAY_BUFFER,i,t.STATIC_DRAW);let p=t.getAttribLocation(s,"aPos"),m=t.getAttribLocation(s,"aUv");t.enableVertexAttribArray(p),t.vertexAttribPointer(p,2,t.FLOAT,!1,16,0),t.enableVertexAttribArray(m),t.vertexAttribPointer(m,2,t.FLOAT,!1,16,8),t.bindVertexArray(null);let f=t.createTexture();if(!f)throw Error("Failed to create WebGL palette texture");return t.bindTexture(t.TEXTURE_2D,f),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.NEAREST),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.NEAREST),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),t.bindTexture(t.TEXTURE_2D,null),{gl:t,program:s,vao:o,vbo:l,paletteTexture:f,uColorPalette:t.getUniformLocation(s,"colorPalette"),uNumRays:t.getUniformLocation(s,"numRays"),uRotationOffset:t.getUniformLocation(s,"rotationOffset"),uSmoothEdge:t.getUniformLocation(s,"smoothEdge"),uResolution:t.getUniformLocation(s,"resolution"),uNumColors:t.getUniformLocation(s,"numColors"),uOrigin:t.getUniformLocation(s,"origin"),cachedPaletteKey:"",palettePixelData:new Uint8Array(0)}},apply:({width:e,height:t,params:n,state:a})=>{let s=p(n),{gl:o,program:r,vao:l,paletteTexture:c,uColorPalette:d,uNumRays:u,uRotationOffset:m,uSmoothEdge:f,uResolution:h,uNumColors:y,uOrigin:g}=a,E=s.rotation*Math.PI/180,x=s.colors.join("|"),b=a.cachedPaletteKey!==x;if(b){a.cachedPaletteKey=x;let e=4*s.colors.length;a.palettePixelData.length!==e&&(a.palettePixelData=new Uint8Array(e));let{palettePixelData:t}=a;for(let e=0;e<s.colors.length;e++){let n=i(s.colors[e]);t[4*e]=n[0],t[4*e+1]=n[1],t[4*e+2]=n[2],t[4*e+3]=255}}o.viewport(0,0,e,t),o.clearColor(0,0,0,0),o.clear(o.COLOR_BUFFER_BIT),o.useProgram(r),o.bindVertexArray(l),o.activeTexture(o.TEXTURE0),o.bindTexture(o.TEXTURE_2D,c),b&&o.texImage2D(o.TEXTURE_2D,0,o.RGBA,s.colors.length,1,0,o.RGBA,o.UNSIGNED_BYTE,a.palettePixelData),d&&o.uniform1i(d,0),u&&o.uniform1f(u,s.rays),y&&o.uniform1f(y,s.colors.length),m&&o.uniform1f(m,E),f&&o.uniform1f(f,s.smoothness),g&&o.uniform2f(g,s.origin[0],1-s.origin[1]),h&&o.uniform2f(h,e,t),o.drawArrays(o.TRIANGLE_STRIP,0,4),o.bindVertexArray(null),o.bindTexture(o.TEXTURE_2D,null),o.useProgram(null)},cleanup:({gl:e,program:t,vao:n,vbo:a,paletteTexture:s})=>{e.deleteBuffer(a),e.deleteProgram(t),e.deleteVertexArray(n),e.deleteTexture(s)},schema:{rays:{type:"number",min:2,max:100,step:1,default:void 0,description:"Number of Rays",hiddenFromList:!1},colors:{type:"array",item:{type:"color"},default:void 0,minLength:2,newItemDefault:"#ff0000",description:"Colors",keyframable:!1},rotation:{type:"number",min:0,max:360,step:1,default:0,description:"Rotation",hiddenFromList:!1}

635,smoothness:{type:"number",min:0,max:1,step:.01,default:0,description:"Edge Smoothness",hiddenFromList:!1},origin:{type:"uv-coordinate",min:0,max:1,step:.01,default:l,description:"Origin"}},validateParams:e=>{if(null===e||"object"!=typeof e)throw TypeError(`Starburst effect requires a parameters object, but got ${JSON.stringify(e)}`);let{rays:t,colors:n}=e;if("number"!=typeof t||!Number.isFinite(t))throw TypeError(`"rays" must be a finite number, but got ${JSON.stringify(t)}`);if(t<2||t>100)throw RangeError(`"rays" must be between 2 and 100, but got ${t}`);if(!Array.isArray(n)||n.length<2)throw TypeError(`"colors" must be an array with at least 2 colors, but got ${JSON.stringify(n)}`);let a=p(e);if("number"!=typeof a.rotation||!Number.isFinite(a.rotation))throw TypeError(`"rotation" must be a finite number, but got ${JSON.stringify(e.rotation)}`);if("number"!=typeof a.smoothness||!Number.isFinite(a.smoothness))throw TypeError(`"smoothness" must be a finite number, but got ${JSON.stringify(e.smoothness)}`);if(a.smoothness<0||a.smoothness>1)throw RangeError(`"smoothness" must be between 0 and 1, but got ${a.smoothness}`);if(!Array.isArray(a.origin)||2!==a.origin.length||a.origin.some(e=>"number"!=typeof e||!Number.isFinite(e)))throw TypeError('"origin" must be a [number, number] tuple');if(a.origin.some(e=>e<0||e>1))throw RangeError(`"origin" must contain coordinates between 0 and 1, but got ${JSON.stringify(a.origin)}`);for(let e of a.colors)i(e)}})},82749(e,t,n){"use strict";n.d(t,{n:()=>d});var a=n(39372),s=(e,t)=>{if(void 0!==e&&("number"!=typeof e||!Number.isFinite(e)))throw TypeError(`"${t}" must be a finite number, but got ${JSON.stringify(e)}`)},{createEffect:o,createWebGL2ContextError:r}=a.Xp,i=e=>({progress:e.progress??.5,angle:e.angle??0,rotation:e.rotation??20,jaggedness:e.jaggedness??20}),l=`#version 300 es
636in vec2 aPos;
637out vec2 vUv;
638uniform vec2 uResolution;
639uniform float uAngle;
640uniform float uProgress;
641uniform float uRotation;
642uniform float uJaggedness;
643uniform float uSide;
644
645float seam(float y, float width) {
646	// Six zigzags, with matching edges on both pieces. Limit the amplitude
647	// to keep the tear inside the source, even on very narrow canvases.
648	float zigzag = 1.0 - 4.0 * abs(fract(y * 6.0 + 0.25) - 0.5);
649	return width * 0.5 + zigzag * min(uJaggedness, width * 0.45);
650}
651
652void main() {
653	// Work in a rectangle aligned with the rip, large enough to cover the
654	// original canvas at every angle. Rotate UVs back to the source so the
655	// image itself keeps its orientation.
656	float direction = radians(uAngle);
657	float dc = cos(direction);
658	float ds = sin(direction);
659	mat2 toCanvas = mat2(dc, -ds, ds, dc);
660	vec2 extent = vec2(
661		abs(dc) * uResolution.x + abs(ds) * uResolution.y,
662		abs(ds) * uResolution.x + abs(dc) * uResolution.y
663	);
664	float outerEdge = uSide < 0.0 ? 0.0 : extent.x;
665	vec2 source = vec2(mix(outerEdge, seam(aPos.y, extent.x), aPos.x), aPos.y * extent.y);
666	vec2 sourceCanvas = toCanvas * (source - extent * 0.5) + uResolution * 0.5;
667	vUv = vec2(sourceCanvas.x / uResolution.x, 1.0 - sourceCanvas.y / uResolution.y);
668
669	float tearProgress = min(uProgress, 1.0);
670	float tipY = tearProgress * extent.y;
671	// Keep the motion independent of the jagged edge. Following the seam
672	// with the pivot would rock the entire image at every zigzag.
673	vec2 pivot = vec2(extent.x * 0.5, tipY);
674	// The short bend near the tip joins the rotating portion continuously
675	// to the untouched area below it. Work in pixels to preserve angles
676	// at different aspect ratios.
677	float fullAngle = radians(uRotation) * tearProgress;
678	// Widen the bend for larger rotations / wider sheets so neighboring
679	// rows cannot fold over each other at the outside edges.
680	float bendHeight = max(extent.y * 0.15, fullAngle * extent.x * 1.5);
681	float bend = smoothstep(0.0, bendHeight, tipY - source.y);
682	float angle = uSide * fullAngle * bend;
683	float c = cos(angle);
684	float s = sin(angle);
685	vec2 delta = source - pivot;
686	vec2 position = pivot + vec2(c * delta.x - s * delta.y, s * delta.x + c * delta.y);
687	// After the tear reaches the bottom, keep the rotation stable and
688	// move each piece outward by half a canvas width per unit of progress.
689	position.x += uSide * max(uProgress - 1.0, 0.0) * extent.x * 0.5;
690	position = toCanvas * (position - extent * 0.5) + uResolution * 0.5;
691	gl_Position = vec4(position.x / uResolution.x * 2.0 - 1.0, 1.0 - position.y / uResolution.y * 2.0, 0.0, 1.0);
692}
693`,p=`#version 300 es
694precision highp float;
695in vec2 vUv;
696out vec4 fragColor;
697uniform sampler2D uSource;
698
699void main() {
700	// The rotated mesh extends beyond the original image. Those parts
701	// must remain transparent instead of smearing clamped border pixels.
702	if (any(lessThan(vUv, vec2(0.0))) || any(greaterThan(vUv, vec2(1.0)))) {
703		discard;
704	}
705	fragColor = texture(uSource, vUv);
706}
707`,c=(e,t,n)=>{let a=e.createShader(t);if(!a)throw Error("Failed to create WebGL shader");if(e.shaderSource(a,n),e.compileShader(a),!e.getShaderParameter(a,e.COMPILE_STATUS)){let t=e.getShaderInfoLog(a);throw e.deleteShader(a),Error(`Tear shader compile failed: ${t??"(no log)"}`)}return a},d=o({type:"dev.remotion.effects.tear",label:"tear()",documentationLink:"https://www.remotion.dev/docs/effects/tear",backend:"webgl2",calculateKey:e=>{let t=i(e);return`tear-${t.progress}-${t.rotation}-${t.jaggedness}-${t.angle}`},setup:e=>{let t=e.getContext("webgl2",{premultipliedAlpha:!0,alpha:!0,preserveDrawingBuffer:!0});if(!t)throw r("tear effect");return(e=>{let t=c(e,e.VERTEX_SHADER,l),n=c(e,e.FRAGMENT_SHADER,p),a=((e,t,n)=>{let a=e.createProgram();if(!a)throw Error("Failed to create WebGL program");if(e.attachShader(a,t),e.attachShader(a,n),e.linkProgram(a),!e.getProgramParameter(a,e.LINK_STATUS)){let t=e.getProgramInfoLog(a);throw e.deleteProgram(a),Error(`Tear program link failed: ${t??"(no log)"}`)}return a})(e,t,n);e.deleteShader(t),e.deleteShader(n);let s=e.createVertexArray();if(!s)throw Error("Failed to create WebGL vertex array");e.bindVertexArray(s);let o=new Float32Array(772);for(let e=0;e<=192;e++)o.set([0,e/192,1,e/192],4*e);let r=e.createBuffer();if(!r)throw Error("Failed to create WebGL buffer");e.bindBuffer(e.ARRAY_BUFFER,r),e.bufferData(e.ARRAY_BUFFER,o,e.STATIC_DRAW);let i=e.getAttribLocation(a,"aPos");e.enableVertexAttribArray(i),e.vertexAttribPointer(i,2,e.FLOAT,!1,8,0),e.bindVertexArray(null);let d=e.createTexture();if(!d)throw Error("Failed to create WebGL texture");return e.bindTexture(e.TEXTURE_2D,d),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.bindTexture(e.TEXTURE_2D,null),{gl:e,program:a,vao:s,vbo:r,texture:d,uSource:e.getUniformLocation(a,"uSource"),uResolution:e.getUniformLocation(a,"uResolution"),uAngle:e.getUniformLocation(a,"uAngle"),uProgress:e.getUniformLocation(a,"uProgress"),uRotation:e.getUniformLocation(a,"uRotation"),uJaggedness:e.getUniformLocation(a,"uJaggedness"),uSide:e.getUniformLocation(a,"uSide")}})(t)},apply:({source:e,width:t,height:n,params:a,state:s,flipSourceY:o})=>{let r=i(a);for(let a of(s.gl.viewport(0,0,t,n),s.gl.bindFramebuffer(s.gl.FRAMEBUFFER,null),s.gl.clearColor(0,0,0,0),s.gl.clear(s.gl.COLOR_BUFFER_BIT),s.gl.useProgram(s.program),s.gl.bindVertexArray(s.vao),s.gl.activeTexture(s.gl.TEXTURE0),s.gl.bindTexture(s.gl.TEXTURE_2D,s.texture),s.gl.pixelStorei(s.gl.UNPACK_FLIP_Y_WEBGL,o),s.gl.pixelStorei(s.gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),s.gl.texImage2D(s.gl.TEXTURE_2D,0,s.gl.RGBA,s.gl.RGBA,s.gl.UNSIGNED_BYTE,e),s.uSource&&s.gl.uniform1i(s.uSource,0),s.uAngle&&s.gl.uniform1f(s.uAngle,r.angle%360),s.uProgress&&s.gl.uniform1f(s.uProgress,r.progress),s.uRotation&&s.gl.uniform1f(s.uRotation,r.rotation),s.uJaggedness&&s.gl.uniform1f(s.uJaggedness,r.jaggedness),s.uResolution&&s.gl.uniform2f(s.uResolution,t,n),[-1,1]))s.uSide&&s.gl.uniform1f(s.uSide,a),s.gl.drawArrays(s.gl.TRIANGLE_STRIP,0,386);s.gl.bindVertexArray(null),s.gl.bindTexture(s.gl.TEXTURE_2D,null),s.gl.useProgram(null)},cleanup:({gl:e,program:t,vao:n,vbo:a,texture:s})=>{e.deleteTexture(s),e.deleteBuffer(a),e.deleteProgram(t),e.deleteVertexArray(n)}

707,schema:{progress:{type:"number",min:0,step:.01,default:.5,description:"Progress",hiddenFromList:!1},angle:{type:"number",step:1,default:0,description:"Angle",hiddenFromList:!1},rotation:{type:"number",min:0,max:90,step:1,default:20,description:"Rotation",hiddenFromList:!1},jaggedness:{type:"number",min:0,max:100,step:1,default:20,description:"Jaggedness",hiddenFromList:!1}},validateParams:e=>{if(null===e||"object"!=typeof e)throw TypeError(`Tear effect requires a parameters object, but got ${JSON.stringify(e)}`);s(e.progress,"progress"),s(e.angle,"angle"),s(e.rotation,"rotation"),s(e.jaggedness,"jaggedness");let t=i(e);if(t.progress<0)throw Error('"progress" must be >= 0');if(t.rotation<0||t.rotation>90)throw Error('"rotation" must be between 0 and 90');if(t.jaggedness<0)throw Error('"jaggedness" must be >= 0')}})},80761(e,t,n){"use strict";n.d(t,{L:()=>x});var a=n(39372),s=(e,t)=>{if("string"!=typeof e||0===e.length)throw TypeError(`"${t}" must be a non-empty string, but got ${JSON.stringify(e)}`)},o=(e,t)=>{if(void 0!==e&&("number"!=typeof e||!Number.isFinite(e)))throw TypeError(`"${t}" must be a finite number, but got ${JSON.stringify(e)}`)},r=(e,t)=>{e.clearRect(0,0,1,1),e.fillStyle=t,e.fillRect(0,0,1,1);let{data:n}=e.getImageData(0,0,1,1);return[n[0],n[1],n[2],n[3]]},{createEffect:i,createWebGL2ContextError:l}=a.Xp,p=["horizontal","vertical"],c=["#dff4ff","#7cc6ff"],d="horizontal",u=e=>{let t=e.thickness??40,n=e.gap??0;return{colors:e.colors??c,direction:e.direction??d,thickness:t,spacing:t+n,angle:e.angle??0,offset:e.offset??0,amplitude:e.amplitude??24,wavelength:e.wavelength??160,phase:e.phase??0,maskToSourceAlpha:e.maskToSourceAlpha??!1}},m=(e,t)=>{if(e<=0)throw TypeError(`"${t}" must be greater than 0, but got ${JSON.stringify(e)}`)},f=(e,t)=>{if(e<0)throw TypeError(`"${t}" must be greater than or equal to 0, but got ${JSON.stringify(e)}`)},h=`#version 300 es
708in vec2 aPos;
709in vec2 aUv;
710out vec2 vUv;
711
712void main() {
713	vUv = aUv;
714	gl_Position = vec4(aPos, 0.0, 1.0);
715}
716`,y=`#version 300 es
717precision highp float;
718
719in vec2 vUv;
720out vec4 fragColor;
721
722uniform sampler2D uSource;
723uniform sampler2D uPalette;
724uniform vec2 uResolution;
725uniform float uNumColors;
726uniform int uDirection;
727uniform float uThickness;
728uniform float uSpacing;
729uniform float uAngle;
730uniform float uOffset;
731uniform float uAmplitude;
732uniform float uWavelength;
733uniform float uPhase;
734uniform bool uMaskToSourceAlpha;
735
736void main() {
737	vec4 texColor = texture(uSource, vUv);
738	float thickness = max(uThickness, 0.001);
739	float spacing = max(uSpacing, 0.001);
740	float cycle = spacing * uNumColors;
741	vec2 centered = vUv * uResolution - uResolution * 0.5;
742	float s = sin(uAngle);
743	float c = cos(uAngle);
744	vec2 rotated = vec2(
745		centered.x * c - centered.y * s,
746		centered.x * s + centered.y * c
747	);
748	float baseAxis = uDirection == 0 ? rotated.y : rotated.x;
749	float waveAxis = uDirection == 0 ? rotated.x : rotated.y;
750	float waveOffset =
751		sin((waveAxis / max(uWavelength, 0.001)) * 6.283185307179586 + uPhase) *
752		uAmplitude;
753	float position = mod(baseAxis + waveOffset + uOffset, cycle);
754	if (position < 0.0) {
755		position += cycle;
756	}
757
758	float colorIndex = floor(position / spacing);
759	float inStripe = mod(position, spacing);
760	if (inStripe > thickness) {
761		fragColor = texColor;
762		return;
763	}
764
765	float texCoord = (colorIndex + 0.5) / uNumColors;
766	vec4 lineColor = texture(uPalette, vec2(texCoord, 0.5));
767	float lineAlpha = lineColor.a;
768	vec3 premultipliedLine = lineColor.rgb * lineAlpha;
769
770	if (uMaskToSourceAlpha) {
771		fragColor = vec4(
772			premultipliedLine * texColor.a + texColor.rgb * (1.0 - lineAlpha),
773			texColor.a
774		);
775		return;
776	}
777
778	fragColor = vec4(
779		premultipliedLine + texColor.rgb * (1.0 - lineAlpha),
780		lineAlpha + texColor.a * (1.0 - lineAlpha)
781	);
782}
783`,g=(e,t,n)=>{let a=e.createShader(t);if(!a)throw Error("Failed to create WebGL shader");if(e.shaderSource(a,n),e.compileShader(a),!e.getShaderParameter(a,e.COMPILE_STATUS)){let t=e.getShaderInfoLog(a);throw e.deleteShader(a),Error(`Waves shader compile failed: ${t??"(no log)"}`)}return a},E=(e,t)=>{let n=e.createTexture();if(!n)throw Error("Failed to create WebGL texture");return e.bindTexture(e.TEXTURE_2D,n),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,t),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,t),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null),n},x=i({type:"dev.remotion.effects.waves",label:"waves()",documentationLink:"https://www.remotion.dev/docs/effects/waves",backend:"webgl2",calculateKey:e=>{let t=u(e),n=t.maskToSourceAlpha?"-mask-to-source-alpha":"";return`waves-${t.colors.join("|")}-${t.direction}-${t.thickness}-${t.spacing}-${t.angle}-${t.offset}-${t.amplitude}-${t.wavelength}-${t.phase}${n}`},setup:e=>(e=>{let t,n,a,s=e.getContext("webgl2",{premultipliedAlpha:!0,alpha:!0,preserveDrawingBuffer:!0});

783if(!s)throw l("waves effect");s.pixelStorei(s.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0);let o=(t=g(s,s.VERTEX_SHADER,h),n=g(s,s.FRAGMENT_SHADER,y),a=((e,t,n)=>{let a=e.createProgram();if(!a)throw Error("Failed to create WebGL program");if(e.attachShader(a,t),e.attachShader(a,n),e.linkProgram(a),!e.getProgramParameter(a,e.LINK_STATUS)){let t=e.getProgramInfoLog(a);throw e.deleteProgram(a),Error(`Waves program link failed: ${t??"(no log)"}`)}return a})(s,t,n),s.deleteShader(t),s.deleteShader(n),a),r=s.createVertexArray();if(!r)throw Error("Failed to create WebGL vertex array");s.bindVertexArray(r);let i=new Float32Array([-1,-1,0,0,1,-1,1,0,-1,1,0,1,1,1,1,1]),p=s.createBuffer();if(!p)throw Error("Failed to create WebGL buffer");s.bindBuffer(s.ARRAY_BUFFER,p),s.bufferData(s.ARRAY_BUFFER,i,s.STATIC_DRAW);let c=s.getAttribLocation(o,"aPos"),d=s.getAttribLocation(o,"aUv");s.enableVertexAttribArray(c),s.vertexAttribPointer(c,2,s.FLOAT,!1,16,0),s.enableVertexAttribArray(d),s.vertexAttribPointer(d,2,s.FLOAT,!1,16,8),s.bindVertexArray(null);let u=document.createElement("canvas");u.width=1,u.height=1;let m=u.getContext("2d",{willReadFrequently:!0});if(!m)throw Error("Failed to acquire 2D context for color parsing");return{gl:s,program:o,vao:r,vbo:p,sourceTexture:E(s,s.LINEAR),paletteTexture:E(s,s.NEAREST),colorCtx:m,uniforms:{uSource:s.getUniformLocation(o,"uSource"),uPalette:s.getUniformLocation(o,"uPalette"),uResolution:s.getUniformLocation(o,"uResolution"),uNumColors:s.getUniformLocation(o,"uNumColors"),uDirection:s.getUniformLocation(o,"uDirection"),uThickness:s.getUniformLocation(o,"uThickness"),uSpacing:s.getUniformLocation(o,"uSpacing"),uAngle:s.getUniformLocation(o,"uAngle"),uOffset:s.getUniformLocation(o,"uOffset"),uAmplitude:s.getUniformLocation(o,"uAmplitude"),uWavelength:s.getUniformLocation(o,"uWavelength"),uPhase:s.getUniformLocation(o,"uPhase"),uMaskToSourceAlpha:s.getUniformLocation(o,"uMaskToSourceAlpha")},cachedPaletteKey:"",palettePixelData:new Uint8Array(0)}})(e),apply:({source:e,width:t,height:n,params:a,state:s,flipSourceY:o})=>{let i=u(a),l=((e,t)=>{let n=t.join("|");if(e.cachedPaletteKey===n)return!1;e.cachedPaletteKey=n;let a=4*t.length;e.palettePixelData.length!==a&&(e.palettePixelData=new Uint8Array(a));let{palettePixelData:s}=e;for(let n=0;n<t.length;n++){let a=r(e.colorCtx,t[n]);s[4*n]=a[0],s[4*n+1]=a[1],s[4*n+2]=a[2],s[4*n+3]=a[3]}return!0})(s,i.colors),{gl:p,program:c,sourceTexture:d,paletteTexture:m,uniforms:f,vao:h}=s;p.viewport(0,0,t,n),p.bindFramebuffer(p.FRAMEBUFFER,null),p.clearColor(0,0,0,0),p.clear(p.COLOR_BUFFER_BIT),p.activeTexture(p.TEXTURE0),p.bindTexture(p.TEXTURE_2D,d),p.pixelStorei(p.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),p.pixelStorei(p.UNPACK_FLIP_Y_WEBGL,o),p.texImage2D(p.TEXTURE_2D,0,p.RGBA,p.RGBA,p.UNSIGNED_BYTE,e),p.activeTexture(p.TEXTURE1),p.bindTexture(p.TEXTURE_2D,m),l&&(p.pixelStorei(p.UNPACK_FLIP_Y_WEBGL,!1),p.pixelStorei(p.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!1),p.texImage2D(p.TEXTURE_2D,0,p.RGBA,i.colors.length,1,0,p.RGBA,p.UNSIGNED_BYTE,s.palettePixelData),p.pixelStorei(p.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0)),p.useProgram(c),f.uSource&&p.uniform1i(f.uSource,0),f.uPalette&&p.uniform1i(f.uPalette,1),f.uResolution&&p.uniform2f(f.uResolution,t,n),f.uNumColors&&p.uniform1f(f.uNumColors,i.colors.length),f.uDirection&&p.uniform1i(f.uDirection,+("horizontal"!==i.direction)),f.uThickness&&p.uniform1f(f.uThickness,i.thickness),f.uSpacing&&p.uniform1f(f.uSpacing,i.spacing),f.uAngle&&p.uniform1f(f.uAngle,i.angle*Math.PI/180),f.uOffset&&p.uniform1f(f.uOff

783set,i.offset),f.uAmplitude&&p.uniform1f(f.uAmplitude,i.amplitude),f.uWavelength&&p.uniform1f(f.uWavelength,i.wavelength),f.uPhase&&p.uniform1f(f.uPhase,i.phase*Math.PI/180),f.uMaskToSourceAlpha&&p.uniform1i(f.uMaskToSourceAlpha,+!!i.maskToSourceAlpha),p.bindVertexArray(h),p.drawArrays(p.TRIANGLE_STRIP,0,4),p.bindVertexArray(null),p.bindTexture(p.TEXTURE_2D,null),p.useProgram(null)},cleanup:({gl:e,program:t,vao:n,vbo:a,sourceTexture:s,paletteTexture:o})=>{e.deleteTexture(s),e.deleteTexture(o),e.deleteBuffer(a),e.deleteProgram(t),e.deleteVertexArray(n)},schema:{colors:{type:"array",item:{type:"color"},default:c,minLength:2,newItemDefault:"#ff0000",description:"Colors",keyframable:!1},direction:{type:"enum",variants:{horizontal:{},vertical:{}},default:d,description:"Direction"},thickness:{type:"number",min:.1,max:400,step:.1,default:40,description:"Thickness",hiddenFromList:!1},gap:{type:"number",min:0,max:400,step:.1,default:0,description:"Gap",hiddenFromList:!1},angle:{type:"rotation-degrees",step:1,default:0,description:"Angle"},offset:{type:"number",step:.1,default:0,description:"Offset",hiddenFromList:!1},amplitude:{type:"number",min:0,max:500,step:.1,default:24,description:"Amplitude",hiddenFromList:!1},wavelength:{type:"number",min:1,max:2e3,step:1,default:160,description:"Wavelength",hiddenFromList:!1},phase:{type:"number",min:-360,max:360,step:1,default:0,description:"Phase",hiddenFromList:!1},maskToSourceAlpha:{type:"boolean",default:!1,description:"Mask to source alpha"}},validateParams:e=>{if(null===e||"object"!=typeof e)throw TypeError(`Waves effect requires a parameters object, but got ${JSON.stringify(e)}`);var t=e.colors;if(void 0!==t){if(!Array.isArray(t)||t.length<2)throw TypeError(`"colors" must be an array with at least 2 colors, but got ${JSON.stringify(t)}`);for(let e=0;e<t.length;e++)s(t[e],`colors[${e}]`)}var n=e.direction;if(void 0!==n&&("string"!=typeof n||!p.includes(n)))throw TypeError(`"direction" must be ${2===p.length?`"${p[0]}" or "${p[1]}"`:`${p.slice(0,-1).map(e=>`"${e}"`).join(", ")} or "${p[p.length-1]}"`}, but got ${JSON.stringify(n)}`);o(e.thickness,"thickness"),o(e.gap,"gap"),o(e.angle,"angle"),o(e.offset,"offset"),o(e.amplitude,"amplitude"),o(e.wavelength,"wavelength"),o(e.phase,"phase");var a=e.maskToSourceAlpha;if(void 0!==a&&"boolean"!=typeof a)throw TypeError(`"maskToSourceAlpha" must be a boolean, but got ${JSON.stringify(a)}`);let r=e.thickness??40,i=e.gap??0,l=e.amplitude??24,c=e.wavelength??160;m(r,"thickness"),f(i,"gap"),f(l,"amplitude"),m(c,"wavelength")}})},4297(e,t,n){"use strict";n.d(t,{z:()=>x});var a=n(39372),s=(e,t)=>{if("string"!=typeof e||0===e.length)throw TypeError(`"${t}" must be a non-empty string, but got ${JSON.stringify(e)}`)},o=(e,t)=>{if(void 0!==e&&("number"!=typeof e||!Number.isFinite(e)))throw TypeError(`"${t}" must be a finite number, but got ${JSON.stringify(e)}`)},r=(e,t)=>{e.clearRect(0,0,1,1),e.fillStyle=t,e.fillRect(0,0,1,1);let{data:n}=e.getImageData(0,0,1,1);return[n[0],n[1],n[2],n[3]]},{createEffect:i,createWebGL2ContextError:l}=a.Xp,p=["horizontal","vertical"],c=["#dff4ff","#7cc6ff"],d="horizontal",u=e=>{let t=e.thickness??40,n=e.gap??0;return{colors:e.colors??c,direction:e.direction??d,thickness:t,spacing:t+n,angle:e.angle??0,offset:e.offset??0,amplitude:e.amplitude??40,wavelength:e.wavelength??160,maskToSourceAlpha:e.maskToSourceAlpha??!1}},m=(e,t)=>{if(e<=0)throw TypeError(`"${t}" must be greater than 0, but got ${JSON.stringify(e)}`)},f=(e,t)=>{if(e<0)throw TypeError(`"${t}" must be greater than or equal to 0, but got ${JSON.stringify(e)}`)},h=`#version 300 es
784in vec2 aPos;
785in vec2 aUv;
786out vec2 vUv;
787
788void main() {
789	vUv = aUv;
790	gl_Position = vec4(aPos, 0.0, 1.0);
791}
792`,y=`#version 300 es
793precision highp float;
794
795in vec2 vUv;
796out vec4 fragColor;
797
798uniform sampler2D uSource;
799uniform sampler2D uPalette;
800uniform vec2 uResolution;
801uniform float uNumColors;
802uniform int uDirection;
803uniform float uThickness;
804uniform float uSpacing;
805uniform float uAngle;
806uniform float uOffset;
807uniform float uAmplitude;
808uniform float uWavelength;
809uniform bool uMaskToSourceAlpha;
810
811void main() {
812	vec4 texColor = texture(uSource, vUv);
813	float thickness = max(uThickness, 0.001);
814	float spacing = max(uSpacing, 0.001);
815	float cycle = spacing * uNumColors;
816	vec2 centered = vUv * uResolution - uResolution * 0.5;
817	float s = sin(uAngle);
818	float c = cos(uAngle);
819	vec2 rotated = vec2(
820		centered.x * c - centered.y * s,
821		centered.x * s + centered.y * c
822	);
823	float baseAxis = uDirection == 0 ? rotated.y : rotated.x;
824	float zigzagAxis = uDirection == 0 ? rotated.x : rotated.y;
825	float wavePhase = fract(zigzagAxis / max(uWavelength, 0.001));
826	float zigzagOffset = (1.0 - abs(wavePhase * 2.0 - 1.0) * 2.0) * uAmplitude;
827	float position = mod(baseAxis + zigzagOffset + uOffset, cycle);
828	if (position < 0.0) {
829		position += cycle;
830	}
831
832	float colorIndex = floor(position / spacing);
833	float inStripe = mod(position, spacing);
834	if (inStripe > thickness) {
835		fragColor = texColor;
836		return;
837	}
838
839	float texCoord = (colorIndex + 0.5) / uNumColors;
840	vec4 lineColor = texture(uPalette, vec2(texCoord, 0.5));
841	float lineAlpha = lineColor.a;
842	vec3 premultipliedLine = lineColor.rgb * lineAlpha;
843
844	if (uMaskToSourceAlpha) {
845		fragColor = vec4(
846			premultipliedLine * texColor.a + texColor.rgb * (1.0 - lineAlpha),
847			texColor.a
848		);
849		return;
850	}
851
852	fragColor = vec4(
853		premultipliedLine + texColor.rgb * (1.0 - lineAlpha),
854		lineAlpha + texColor.a * (1.0 - lineAlpha)
855	);
856}
857`,g=(e,t,n)=>{let a=e.createShader(t);if(!a)throw Error("Failed to create WebGL shader");if(e.shaderSource(a,n),e.compileShader(a),!e.getShaderParameter(a,e.COMPILE_STATUS)){let t=e.getShaderInfoLog(a);throw e.deleteShader(a),Error(`Zigzag shader compile failed: ${t??"(no log)"}`)}return a},E=(e,t)=>{let n=e.createTexture();if(!n)throw Error("Failed to create WebGL texture");return e.bindTexture(e.TEXTURE_2D,n),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,t),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,t),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null),n},x=i({type:"dev.remotion.effects.zigzag",label:"zigzag()",documentationLink:"https://www.remotion.dev/docs/effects/zigzag",backend:"webgl2",calculateKey:e=>{let t=u(e),n=t.maskToSourceAlpha?"-mask-to-source-alpha":"";return`zigzag-${t.colors.join("|")}-${t.direction}-${t.thickness}-${t.spacing}-${t.angle}-${t.offset}-${t.amplitude}-${t.wavelength}${n}`},setup:e=>(e=>{let t,n,a,s=e.getContext("webgl2",{premultipliedAlpha:!0,alpha:!0,preserveDrawingBuffer:!0});

857if(!s)throw l("zigzag effect");s.pixelStorei(s.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0);let o=(t=g(s,s.VERTEX_SHADER,h),n=g(s,s.FRAGMENT_SHADER,y),a=((e,t,n)=>{let a=e.createProgram();if(!a)throw Error("Failed to create WebGL program");if(e.attachShader(a,t),e.attachShader(a,n),e.linkProgram(a),!e.getProgramParameter(a,e.LINK_STATUS)){let t=e.getProgramInfoLog(a);throw e.deleteProgram(a),Error(`Zigzag program link failed: ${t??"(no log)"}`)}return a})(s,t,n),s.deleteShader(t),s.deleteShader(n),a),r=s.createVertexArray();if(!r)throw Error("Failed to create WebGL vertex array");s.bindVertexArray(r);let i=new Float32Array([-1,-1,0,0,1,-1,1,0,-1,1,0,1,1,1,1,1]),p=s.createBuffer();if(!p)throw Error("Failed to create WebGL buffer");s.bindBuffer(s.ARRAY_BUFFER,p),s.bufferData(s.ARRAY_BUFFER,i,s.STATIC_DRAW);let c=s.getAttribLocation(o,"aPos"),d=s.getAttribLocation(o,"aUv");s.enableVertexAttribArray(c),s.vertexAttribPointer(c,2,s.FLOAT,!1,16,0),s.enableVertexAttribArray(d),s.vertexAttribPointer(d,2,s.FLOAT,!1,16,8),s.bindVertexArray(null);let u=document.createElement("canvas");u.width=1,u.height=1;let m=u.getContext("2d",{willReadFrequently:!0});if(!m)throw Error("Failed to acquire 2D context for color parsing");return{gl:s,program:o,vao:r,vbo:p,sourceTexture:E(s,s.LINEAR),paletteTexture:E(s,s.NEAREST),colorCtx:m,uniforms:{uSource:s.getUniformLocation(o,"uSource"),uPalette:s.getUniformLocation(o,"uPalette"),uResolution:s.getUniformLocation(o,"uResolution"),uNumColors:s.getUniformLocation(o,"uNumColors"),uDirection:s.getUniformLocation(o,"uDirection"),uThickness:s.getUniformLocation(o,"uThickness"),uSpacing:s.getUniformLocation(o,"uSpacing"),uAngle:s.getUniformLocation(o,"uAngle"),uOffset:s.getUniformLocation(o,"uOffset"),uAmplitude:s.getUniformLocation(o,"uAmplitude"),uWavelength:s.getUniformLocation(o,"uWavelength"),uMaskToSourceAlpha:s.getUniformLocation(o,"uMaskToSourceAlpha")},cachedPaletteKey:"",palettePixelData:new Uint8Array(0)}})(e),apply:({source:e,width:t,height:n,params:a,state:s,flipSourceY:o})=>{let i=u(a),l=((e,t)=>{let n=t.join("|");if(e.cachedPaletteKey===n)return!1;e.cachedPaletteKey=n;let a=4*t.length;e.palettePixelData.length!==a&&(e.palettePixelData=new Uint8Array(a));let{palettePixelData:s}=e;for(let n=0;n<t.length;n++){let a=r(e.colorCtx,t[n]);s[4*n]=a[0],s[4*n+1]=a[1],s[4*n+2]=a[2],s[4*n+3]=a[3]}return!0})(s,i.colors),{gl:p,program:c,sourceTexture:d,paletteTexture:m,uniforms:f,vao:h}=s;p.viewport(0,0,t,n),p.bindFramebuffer(p.FRAMEBUFFER,null),p.clearColor(0,0,0,0),p.clear(p.COLOR_BUFFER_BIT),p.activeTexture(p.TEXTURE0),p.bindTexture(p.TEXTURE_2D,d),p.pixelStorei(p.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),p.pixelStorei(p.UNPACK_FLIP_Y_WEBGL,o),p.texImage2D(p.TEXTURE_2D,0,p.RGBA,p.RGBA,p.UNSIGNED_BYTE,e),p.activeTexture(p.TEXTURE1),p.bindTexture(p.TEXTURE_2D,m),l&&(p.pixelStorei(p.UNPACK_FLIP_Y_WEBGL,!1),p.pixelStorei(p.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!1),p.texImage2D(p.TEXTURE_2D,0,p.RGBA,i.colors.length,1,0,p.RGBA,p.UNSIGNED_BYTE,s.palettePixelData),p.pixelStorei(p.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0)),p.useProgram(c),f.uSource&&p.uniform1i(f.uSource,0),f.uPalette&&p.uniform1i(f.uPalette,1),f.uResolution&&p.uniform2f(f.uResolution,t,n),f.uNumColors&&p.uniform1f(f.uNumColors,i.colors.length),f.uDirection&&p.uniform1i(f.uDirection,+("horizontal"!==i.direction)),f.uThickness&&p.uniform1f(f.uThickness,i.thickness),f.uSpacing&&p.uniform1f(f.uSpacing,i.spacing),f.uAngle&&p.uniform1f(f.uAngle,i.angle*Math.PI/180),f.uOffset&&p.uniform1f(f.uOff

857set,i.offset),f.uAmplitude&&p.uniform1f(f.uAmplitude,i.amplitude),f.uWavelength&&p.uniform1f(f.uWavelength,i.wavelength),f.uMaskToSourceAlpha&&p.uniform1i(f.uMaskToSourceAlpha,+!!i.maskToSourceAlpha),p.bindVertexArray(h),p.drawArrays(p.TRIANGLE_STRIP,0,4),p.bindVertexArray(null),p.bindTexture(p.TEXTURE_2D,null),p.useProgram(null)},cleanup:({gl:e,program:t,vao:n,vbo:a,sourceTexture:s,paletteTexture:o})=>{e.deleteTexture(s),e.deleteTexture(o),e.deleteBuffer(a),e.deleteProgram(t),e.deleteVertexArray(n)},schema:{colors:{type:"array",item:{type:"color"},default:c,minLength:2,newItemDefault:"#ff0000",description:"Colors",keyframable:!1},direction:{type:"enum",variants:{horizontal:{},vertical:{}},default:d,description:"Direction"},thickness:{type:"number",min:.1,max:400,step:.1,default:40,description:"Thickness",hiddenFromList:!1},gap:{type:"number",min:0,max:400,step:.1,default:0,description:"Gap",hiddenFromList:!1},angle:{type:"rotation-degrees",step:1,default:0,description:"Angle"},offset:{type:"number",step:.1,default:0,description:"Offset",hiddenFromList:!1},amplitude:{type:"number",min:0,max:500,step:.1,default:40,description:"Amplitude",hiddenFromList:!1},wavelength:{type:"number",min:1,max:2e3,step:1,default:160,description:"Wavelength",hiddenFromList:!1},maskToSourceAlpha:{type:"boolean",default:!1,description:"Mask to source alpha"}},validateParams:e=>{if(null===e||"object"!=typeof e)throw TypeError(`Zigzag effect requires a parameters object, but got ${JSON.stringify(e)}`);var t=e.colors;if(void 0!==t){if(!Array.isArray(t)||t.length<2)throw TypeError(`"colors" must be an array with at least 2 colors, but got ${JSON.stringify(t)}`);for(let e=0;e<t.length;e++)s(t[e],`colors[${e}]`)}var n=e.direction;if(void 0!==n&&("string"!=typeof n||!p.includes(n)))throw TypeError(`"direction" must be ${2===p.length?`"${p[0]}" or "${p[1]}"`:`${p.slice(0,-1).map(e=>`"${e}"`).join(", ")} or "${p[p.length-1]}"`}, but got ${JSON.stringify(n)}`);o(e.thickness,"thickness"),o(e.gap,"gap"),o(e.angle,"angle"),o(e.offset,"offset"),o(e.amplitude,"amplitude"),o(e.wavelength,"wavelength");var a=e.maskToSourceAlpha;if(void 0!==a&&"boolean"!=typeof a)throw TypeError(`"maskToSourceAlpha" must be a boolean, but got ${JSON.stringify(a)}`);let r=e.thickness??40,i=e.gap??0,l=e.amplitude??40,c=e.wavelength??160;m(r,"thickness"),f(i,"gap"),f(l,"amplitude"),m(c,"wavelength")}})},34613(e,t,n){"use strict";n.r(t),n.d(t,{fontFamily:()=>u,getInfo:()=>d,loadFont:()=>m,loadVariableFont:()=>f});var a=n(39372),s=n(64831),o=e=>/^\[\d+\]$/.test(e),r=(e,t)=>Number(e.slice(1,-1))-Number(t.slice(1,-1)),i=({availableSubsetKeys:e,metaSubsets:t,requestedSubset:n})=>{if(e.includes(n)||!t.includes(n))return[n];let a=e.filter(o).sort(r);return 0===a.length?[n]:a},l={},p=function(){let e,t;return{promise:new Promise((n,a)=>{e=n,t=a}),resolve:e,reject:t}},c=e=>{let t=p(),n=setTimeout(()=>{t.reject(Error("Timed out loading Google Font"))},18e3);return Promise.race([e.load().then(()=>{clearTimeout(n)}),t.promise])},d=()=>({fontFamily:"Caveat",importName:"Caveat",version:"v23",url:"https://fonts.googleapis.com/css2?family=Caveat:ital,wght@0,400;0,500;0,600;0,700",unicodeRanges:{"cyrillic-ext":"U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F",cyrillic:"U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116","latin-ext":"U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF",latin:"U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"},fonts:{normal:{400:{"cyrillic-ext":"https://fonts.gstatic.com/s/caveat/v23/Wnz6HAc5bAfYB2Q7azYYmg8.woff2",cyrillic:"https://fonts.gstatic.com/s/caveat/v23/Wnz6HAc5bAfYB2Q7YjYYmg8.woff2","latin-ext":"https://fonts.gstatic.com/s/caveat/v23/Wnz6HAc5bAfYB2Q7aDYYmg8.woff2",latin:"https://fonts.gstatic.com/s/caveat/v23/Wnz6HAc5bAfYB2Q7ZjYY.woff2"}

857,500:{"cyrillic-ext":"https://fonts.gstatic.com/s/caveat/v23/Wnz6HAc5bAfYB2Q7azYYmg8.woff2",cyrillic:"https://fonts.gstatic.com/s/caveat/v23/Wnz6HAc5bAfYB2Q7YjYYmg8.woff2","latin-ext":"https://fonts.gstatic.com/s/caveat/v23/Wnz6HAc5bAfYB2Q7aDYYmg8.woff2",latin:"https://fonts.gstatic.com/s/caveat/v23/Wnz6HAc5bAfYB2Q7ZjYY.woff2"},600:{"cyrillic-ext":"https://fonts.gstatic.com/s/caveat/v23/Wnz6HAc5bAfYB2Q7azYYmg8.woff2",cyrillic:"https://fonts.gstatic.com/s/caveat/v23/Wnz6HAc5bAfYB2Q7YjYYmg8.woff2","latin-ext":"https://fonts.gstatic.com/s/caveat/v23/Wnz6HAc5bAfYB2Q7aDYYmg8.woff2",latin:"https://fonts.gstatic.com/s/caveat/v23/Wnz6HAc5bAfYB2Q7ZjYY.woff2"},700:{"cyrillic-ext":"https://fonts.gstatic.com/s/caveat/v23/Wnz6HAc5bAfYB2Q7azYYmg8.woff2",cyrillic:"https://fonts.gstatic.com/s/caveat/v23/Wnz6HAc5bAfYB2Q7YjYYmg8.woff2","latin-ext":"https://fonts.gstatic.com/s/caveat/v23/Wnz6HAc5bAfYB2Q7aDYYmg8.woff2",latin:"https://fonts.gstatic.com/s/caveat/v23/Wnz6HAc5bAfYB2Q7ZjYY.woff2"}}},subsets:["cyrillic","cyrillic-ext","latin","latin-ext"],variable:{axes:{wght:{min:400,max:700}},fontFaces:[{style:"normal",weight:"400 700",stretch:null,subset:"cyrillic-ext",unicodeRange:"U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F",src:"https://fonts.gstatic.com/s/caveat/v23/Wnz6HAc5bAfYB2Q7azYYmg8.woff2"},{style:"normal",weight:"400 700",stretch:null,subset:"cyrillic",unicodeRange:"U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116",src:"https://fonts.gstatic.com/s/caveat/v23/Wnz6HAc5bAfYB2Q7YjYYmg8.woff2"},{style:"normal",weight:"400 700",stretch:null,subset:"latin-ext",unicodeRange:"U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF",src:"https://fonts.gstatic.com/s/caveat/v23/Wnz6HAc5bAfYB2Q7aDYYmg8.woff2"},{style:"normal",weight:"400 700",stretch:null,subset:"latin",unicodeRange:"U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD",src:"https://fonts.gstatic.com/s/caveat/v23/Wnz6HAc5bAfYB2Q7ZjYY.woff2"}],url:"https://fonts.googleapis.com/css2?family=Caveat:[email protected]"}}),u="Caveat",m=(e,t)=>((e,t,n)=>{let o=Array.isArray(n?.weights)&&Array.isArray(n?.subsets)&&n.weights.length>0&&n.subsets.length>0;if(s.NoReactInternals.ENABLE_V5_BREAKING_CHANGES&&!o)throw Error("Loading Google Fonts without specifying weights and subsets is not supported in Remotion v5. Please specify the weights and subsets you need.");let r=[],p=t?[t]:Object.keys(e.fonts),d=0;for(let t of p)if(!("u"<typeof FontFace)){if(!e.fonts[t])throw Error(`The font ${e.fontFamily} does not have a style ${t}`);for(let p of n?.weights??Object.keys(e.fonts[t])){if(!e.fonts[t][p])throw Error(`The font ${e.fontFamily} does not  have a weight ${p} in style ${t}`);let u=n?.subsets??Object.keys(e.fonts[t][p]),m=Object.keys(e.fonts[t][p]);for(let f of[...new Set(u.flatMap(t=>i({availableSubsetKeys:m,metaSubsets:e.subsets,requestedSubset:t})))]){let i=e.fonts[t]?.[p]?.[f];if(!i)throw Error(`weight: ${p} subset: ${f} is not available for '${e.fontFamily}'`);let u=`${e.fontFamily}-${t}-${p}-${f}`,m=l[u];if(m){r.push(m);continue}let h=`Fetching ${e.fontFamily} font ${JSON.stringify({style:t,weight:p,subset:f})}`,y=o?h:`${h}. This might be caused by loading too many font variations. Read more: https://www.remotion.dev/docs/troubleshooting/font-loading-errors#render-timeout-when-loading-google-fonts`,g=(0,a.IH)(y,{timeoutInMilliseconds:6e4});d++;let E=n=>{s.NoReactInternals.registerFontFace({ascentOverride:null,descentOverride:null,display:null,featureSettings:null,fontFamily:e.fontFamily,fontData:n,fontUrl:i,format:"woff2",lineGapOverride:null,style:t,weight:p,stretch:null,unicodeRange:e.unicodeRanges[f]??null,variant:null})},x=2,b=()=>s.NoReactInternals.fetchFontData(i).then(s=>{let o=new FontFace(e.fontFamily,s,{weight:p,style:t,unicodeRange:e.unicodeRanges[f]});return c(o).then(()=>{(n?.document??document).fonts.add(o),E(s),(0,a._8)(g)})}).catch(e=>{if(0===x)throw l[u]=void 0,e;return x--,b()}),F=b();l[u]=F,r.push(F)}}d>20&&!n?.ignoreTooManyRequestsWarning&&console.warn(`Made ${d} network requests to load fonts for ${e.fontFamily}. Consider loading fewer weights and subsets by passing options to loadFont(). Disable this warning by passing "ignoreTooManyRequestsWarning: true" to "options".`)}return{fontFamily:e.fontFamily,fonts:e.fonts,unicodeRanges:e.unicodeRanges,waitUntilDone:()=>Promise.all(r).then(()=>{})}})(d(),e,t),f=(e,t)=>((e,t,n)=>{if(!e.variable)throw Error(`${e.fontFamily} is not available as a variable font`);if(0===n.subsets.length)throw Error("Pass at least one subset to loadVariableFont()");let o=e.variable.fontFaces.filter(e=>e.style===t);if(0===o.length)throw Error(`The variable font ${e.fontFamily} does not have a style ${t}`);let r=o.map(e=>e.subset),p=[...new Set(n.subsets.flatMap(t=>i({availableSubsetKeys:r,metaSubsets:e.subsets,requestedSubset:t})))],d=[];for(let r of p){if("u"<typeof FontFace)continue;let i=o.find(e=>e.subset===r);if(!i)throw Error(`subset: ${r} is not available for the variable font '${e.fontFamily}'`);let p=[e.fontFamily,"variable",i.style,i.weight,i.stretch,i.subset,i.src].join("-"),u=l[p];if(u){d.push(u);continue}let m=(0,a.IH)(`Fetching variable ${e.fontFamily} font ${JSON.stringify({style:t,subset:r})}`,{timeoutInMilliseconds:6e4}),f={style:i.style,weight:i.weight,unicodeRange:i.unicodeRange};i.stretch&&(f.stretch=i.stretch);let h=t=>{s.NoReactInternals.registerFontFace({ascentOverride:null,descentOverride:null,display:null,featureSettings:null,fontFamily:e.fontFamily,fontData:t,fontUrl:i.src,format:"woff2",lineGapOverride:null,style:i.style,weight:i.weight,stretch:i.stretch,unicodeRange:i.unicodeRange,variant:null})},y=2,g=()=>s.NoReactInternals.fetchFontData(i.src).then(t=>{let s=new FontFace(e.fontFamily,t,f);return c(s).then(()=>{(n.document??document).fonts.add(s),h(t),(0,a._8)(m)})}).catch(e=>{if(0===y)throw l[p]=void 0,e;return y--,g()}),E=g();l[p]=E,d.push(E)}return p.length>20&&!n.ignoreTooManyRequestsWarning&&console.warn(`Made ${p.length} network requests to load the variable font ${e.fontFamily}. Consider loading fewer subsets. Disable this warning by passing "ignoreTooManyRequestsWarning: true" to "options".`),{fontFamily:e.fontFamily,axes:e.variable.axes,waitUntilDone:()=>Promise.all(d).then(()=>{})}})(d(),e,t)},12135(e,t,n){"use strict";n.r(t),n.d(t,{fontFamily:()=>u,getInfo:()=>d,loadFont:()=>m,loadVariableFont:()=>f});var a=n(39372),s=n(64831),o=e=>/^\[\d+\]$/.test(e),r=(e,t)=>Number(e.slice(1,-1))-Number(t.slice(1,-1)),i=({availableSubsetKeys:e,metaSubsets:t,requestedSubset:n})=>{if(e.includes(n)||!t.includes(n))return[n];let a=e.filter(o).sort(r);return 0===a.length?[n]:a},l={},p=function(){let e,t;return{promise:new Promise((n,a)=>{e=n,t=a}),resolve:e,reject:t}},c=e=>{let t=p(),n=setTimeout(()=>{t.reject(Error("Timed out loading Google Font"))},18e3);return Promise.race([e.load().then(()=>{clearTimeout(n)}),t.promise])},d=()=>({fontFamily:"Cormorant Garamond",importName:"CormorantGaramond",version:"v21",url:"https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700",unicodeRanges:{"cyrillic-ext":"U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F",cyrillic:"U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116",vietnamese:"U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB","latin-ext":"U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1D

857BF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF",latin:"U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"},fonts:{italic:{300:{"cyrillic-ext":"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtFmSq17w.woff2",cyrillic:"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtMmSq17w.woff2",vietnamese:"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtHmSq17w.woff2","latin-ext":"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtGmSq17w.woff2",latin:"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtImSo.woff2"},400:{"cyrillic-ext":"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtFmSq17w.woff2",cyrillic:"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtMmSq17w.woff2",vietnamese:"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtHmSq17w.woff2","latin-ext":"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtGmSq17w.woff2",latin:"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtImSo.woff2"},500:{"cyrillic-ext":"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtFmSq17w.woff2",cyrillic:"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtMmSq17w.woff2",vietnamese:"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtHmSq17w.woff2","latin-ext":"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtGmSq17w.woff2",latin:"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtImSo.woff2"},600:{"cyrillic-ext":"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtFmSq17w.woff2",cyrillic:"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtMmSq17w.woff2",vietnamese:"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtHmSq17w.woff2","latin-ext":"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtGmSq17w.woff2",latin:"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtImSo.woff2"},700:{"cyrillic-ext":"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtFmSq17w.woff2",cyrillic:"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtMmSq17w.woff2",vietnamese:"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtHmSq17w.woff2","latin-ext":"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtGmSq17w.woff2",latin:"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtImSo.woff2"}},normal:{300:{"cyrillic-ext":"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpHtKgS4.woff2",cyrillic:"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYrXtKgS4.woff2",vietnamese:"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpntKgS4.woff2","latin-ext":"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYp3tKgS4.woff2",latin:"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2"},400:{"cyrillic-ext":"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpHtKgS4.woff2",cyrillic:"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYrXtKgS4.woff2",vietnamese:"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpntKgS4.woff2","latin-ext":"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYp3tKgS4.woff2",latin:"https://fonts.gstatic.

857com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2"},500:{"cyrillic-ext":"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpHtKgS4.woff2",cyrillic:"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYrXtKgS4.woff2",vietnamese:"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpntKgS4.woff2","latin-ext":"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYp3tKgS4.woff2",latin:"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2"},600:{"cyrillic-ext":"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpHtKgS4.woff2",cyrillic:"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYrXtKgS4.woff2",vietnamese:"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpntKgS4.woff2","latin-ext":"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYp3tKgS4.woff2",latin:"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2"},700:{"cyrillic-ext":"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpHtKgS4.woff2",cyrillic:"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYrXtKgS4.woff2",vietnamese:"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpntKgS4.woff2","latin-ext":"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYp3tKgS4.woff2",latin:"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2"}}},subsets:["cyrillic","cyrillic-ext","latin","latin-ext","vietnamese"],variable:{axes:{wght:{min:300,max:700}},fontFaces:[{style:"italic",weight:"300 700",stretch:null,subset:"cyrillic-ext",unicodeRange:"U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F",src:"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtFmSq17w.woff2"},{style:"italic",weight:"300 700",stretch:null,subset:"cyrillic",unicodeRange:"U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116",src:"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtMmSq17w.woff2"},{style:"italic",weight:"300 700",stretch:null,subset:"vietnamese",unicodeRange:"U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB",src:"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtHmSq17w.woff2"},{style:"italic",weight:"300 700",stretch:null,subset:"latin-ext",unicodeRange:"U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF",src:"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtGmSq17w.woff2"},{style:"italic",weight:"300 700",stretch:null,subset:"latin",unicodeRange:"U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD",src:"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtImSo.woff2"},{style:"normal",weight:"300 700",stretch:null,subset:"cyrillic-ext",unicodeRange:"U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F",src:"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpHtKgS4.woff2"},{style:"normal",weight:"300 700",stretch:null,subset:"cyrillic",unicodeRange:"U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116",src:"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYrXtKgS4.woff2"},{style:"normal",weight:"300 700",stretch:null,subset:"vietnamese",unicodeRange:"U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB",src:"https://fonts.gstatic.

857com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpntKgS4.woff2"},{style:"normal",weight:"300 700",stretch:null,subset:"latin-ext",unicodeRange:"U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF",src:"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYp3tKgS4.woff2"},{style:"normal",weight:"300 700",stretch:null,subset:"latin",unicodeRange:"U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD",src:"https://fonts.gstatic.com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2"}],url:"https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700"}}),u="Cormorant Garamond",m=(e,t)=>((e,t,n)=>{let o=Array.isArray(n?.weights)&&Array.isArray(n?.subsets)&&n.weights.length>0&&n.subsets.length>0;if(s.NoReactInternals.ENABLE_V5_BREAKING_CHANGES&&!o)throw Error("Loading Google Fonts without specifying weights and subsets is not supported in Remotion v5. Please specify the weights and subsets you need.");let r=[],p=t?[t]:Object.keys(e.fonts),d=0;for(let t of p)if(!("u"<typeof FontFace)){if(!e.fonts[t])throw Error(`The font ${e.fontFamily} does not have a style ${t}`);for(let p of n?.weights??Object.keys(e.fonts[t])){if(!e.fonts[t][p])throw Error(`The font ${e.fontFamily} does not  have a weight ${p} in style ${t}`);let u=n?.subsets??Object.keys(e.fonts[t][p]),m=Object.keys(e.fonts[t][p]);for(let f of[...new Set(u.flatMap(t=>i({availableSubsetKeys:m,metaSubsets:e.subsets,requestedSubset:t})))]){let i=e.fonts[t]?.[p]?.[f];if(!i)throw Error(`weight: ${p} subset: ${f} is not available for '${e.fontFamily}'`);let u=`${e.fontFamily}-${t}-${p}-${f}`,m=l[u];if(m){r.push(m);continue}let h=`Fetching ${e.fontFamily} font ${JSON.stringify({style:t,weight:p,subset:f})}`,y=o?h:`${h}. This might be caused by loading too many font variations. Read more: https://www.remotion.dev/docs/troubleshooting/font-loading-errors#render-timeout-when-loading-google-fonts`,g=(0,a.IH)(y,{timeoutInMilliseconds:6e4});d++;let E=n=>{s.NoReactInternals.registerFontFace({ascentOverride:null,descentOverride:null,display:null,featureSettings:null,fontFamily:e.fontFamily,fontData:n,fontUrl:i,format:"woff2",lineGapOverride:null,style:t,weight:p,stretch:null,unicodeRange:e.unicodeRanges[f]??null,variant:null})},x=2,b=()=>s.NoReactInternals.fetchFontData(i).then(s=>{let o=new FontFace(e.fontFamily,s,{weight:p,style:t,unicodeRange:e.unicodeRanges[f]});return c(o).then(()=>{(n?.document??document).fonts.add(o),E(s),(0,a._8)(g)})}).catch(e=>{if(0===x)throw l[u]=void 0,e;return x--,b()}),F=b();l[u]=F,r.push(F)}}d>20&&!n?.ignoreTooManyRequestsWarning&&console.warn(`Made ${d} network requests to load fonts for ${e.fontFamily}. Consider loading fewer weights and subsets by passing options to loadFont(). Disable this warning by passing "ignoreTooManyRequestsWarning: true" to "options".`)}return{fontFamily:e.fontFamily,fonts:e.fonts,unicodeRanges:e.unicodeRanges,waitUntilDone:()=>Promise.all(r).then(()=>{})}})(d(),e,t),f=(e,t)=>((e,t,n)=>{if(!e.variable)throw Error(`${e.fontFamily} is not available as a variable font`);if(0===n.subsets.length)throw Error("Pass at least one subset to loadVariableFont()");let o=e.variable.fontFaces.filter(e=>e.style===t);if(0===o.length)throw Error(`The variable font ${e.fontFamily} does not have a style ${t}`);let r=o.map(e=>e.subset),p=[...new Set(n.subsets.flatMap(t=>i({availableSubsetKeys:r,metaSubsets:e.subsets,requestedSubset:t})))],d=[];for(let r of p){if("u"<typeof FontFace)continue;let i=o.find(e=>e.subset===r);if(!i)throw Error(`subset: ${r} is not available for the variable font '${e.fontFamily}'`);let p=[e.fontFamily,"variable",i.style,i.weight,i.stretch,i.subset,i.src].join("-"),u=l[p];if(u){d.push(u);continue}let m=(0,a.IH)(`Fetching variable ${e.fontFamily} font ${JSON.stringify({style:t,subset:r})}`,{timeoutInMilliseconds:6e4}),f={style:i.style,weight:i.weight,unicodeRange:i.unicodeRange};i.stretch&&(f.stretch=i.stretch);let h=t=>{s.NoReactInternals.registerFontFace({ascentOverride:null,descentOverride:null,display:null,featureSettings:null,fontFamily:e.fontFamily,fontData:t,fontUrl:i.src,format:"woff2",lineGapOverride:null,style:i.style,weight:i.weight,stretch:i.stretch,unicodeRange:i.unicodeRange,variant:null})},y=2,g=()=>s.NoReactInternals.fetchFontData(i.src).then(t=>{let s=new FontFace(e.fontFamily,t,f);return c(s).then(()=>{(n.document??document).fonts.add(s),h(t),(0,a._8)(m)})}).catch(e=>{if(0===y)throw l[p]=void 0,e;return y--,g()}),E=g();l[p]=E,d.push(E)}return p.length>20&&!n.ignoreTooManyRequestsWarning&&console.warn(`Made ${p.length} network requests to load the variable font ${e.fontFamily}. Consider loading fewer subsets. Disable this warning by passing "ignoreTooManyRequestsWarning: true" to "options".`),{fontFamily:e.fontFamily,axes:e.variable.axes,waitUntilDone:()=>Promise.all(d).then(()=>{})}})(d(),e,t)}

857,93205(e,t,n){"use strict";n.r(t),n.d(t,{fontFamily:()=>u,getInfo:()=>d,loadFont:()=>m,loadVariableFont:()=>f});var a=n(39372),s=n(64831),o=e=>/^\[\d+\]$/.test(e),r=(e,t)=>Number(e.slice(1,-1))-Number(t.slice(1,-1)),i=({availableSubsetKeys:e,metaSubsets:t,requestedSubset:n})=>{if(e.includes(n)||!t.includes(n))return[n];let a=e.filter(o).sort(r);return 0===a.length?[n]:a},l={},p=function(){let e,t;return{promise:new Promise((n,a)=>{e=n,t=a}),resolve:e,reject:t}},c=e=>{let t=p(),n=setTimeout(()=>{t.reject(Error("Timed out loading Google Font"))},18e3);return Promise.race([e.load().then(()=>{clearTimeout(n)}),t.promise])},d=()=>({fontFamily:"Figtree",importName:"Figtree",version:"v9",url:"https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900",unicodeRanges:{"latin-ext":"U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF",latin:"U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"},fonts:{italic:{300:{"latin-ext":"https://fonts.gstatic.com/s/figtree/v9/_Xmu-HUzqDCFdgfMm4GNAa5o_ik.woff2",latin:"https://fonts.gstatic.com/s/figtree/v9/_Xmu-HUzqDCFdgfMm4GND65o.woff2"},400:{"latin-ext":"https://fonts.gstatic.com/s/figtree/v9/_Xmu-HUzqDCFdgfMm4GNAa5o_ik.woff2",latin:"https://fonts.gstatic.com/s/figtree/v9/_Xmu-HUzqDCFdgfMm4GND65o.woff2"},500:{"latin-ext":"https://fonts.gstatic.com/s/figtree/v9/_Xmu-HUzqDCFdgfMm4GNAa5o_ik.woff2",latin:"https://fonts.gstatic.com/s/figtree/v9/_Xmu-HUzqDCFdgfMm4GND65o.woff2"},600:{"latin-ext":"https://fonts.gstatic.com/s/figtree/v9/_Xmu-HUzqDCFdgfMm4GNAa5o_ik.woff2",latin:"https://fonts.gstatic.com/s/figtree/v9/_Xmu-HUzqDCFdgfMm4GND65o.woff2"},700:{"latin-ext":"https://fonts.gstatic.com/s/figtree/v9/_Xmu-HUzqDCFdgfMm4GNAa5o_ik.woff2",latin:"https://fonts.gstatic.com/s/figtree/v9/_Xmu-HUzqDCFdgfMm4GND65o.woff2"},800:{"latin-ext":"https://fonts.gstatic.com/s/figtree/v9/_Xmu-HUzqDCFdgfMm4GNAa5o_ik.woff2",latin:"https://fonts.gstatic.com/s/figtree/v9/_Xmu-HUzqDCFdgfMm4GND65o.woff2"},900:{"latin-ext":"https://fonts.gstatic.com/s/figtree/v9/_Xmu-HUzqDCFdgfMm4GNAa5o_ik.woff2",latin:"https://fonts.gstatic.com/s/figtree/v9/_Xmu-HUzqDCFdgfMm4GND65o.woff2"}},normal:{300:{"latin-ext":"https://fonts.gstatic.com/s/figtree/v9/_Xms-HUzqDCFdgfMm4q9DbZs.woff2",latin:"https://fonts.gstatic.com/s/figtree/v9/_Xms-HUzqDCFdgfMm4S9DQ.woff2"},400:{"latin-ext":"https://fonts.gstatic.com/s/figtree/v9/_Xms-HUzqDCFdgfMm4q9DbZs.woff2",latin:"https://fonts.gstatic.com/s/figtree/v9/_Xms-HUzqDCFdgfMm4S9DQ.woff2"},500:{"latin-ext":"https://fonts.gstatic.com/s/figtree/v9/_Xms-HUzqDCFdgfMm4q9DbZs.woff2",latin:"https://fonts.gstatic.com/s/figtree/v9/_Xms-HUzqDCFdgfMm4S9DQ.woff2"},600:{"latin-ext":"https://fonts.gstatic.com/s/figtree/v9/_Xms-HUzqDCFdgfMm4q9DbZs.woff2",latin:"https://fonts.gstatic.com/s/figtree/v9/_Xms-HUzqDCFdgfMm4S9DQ.woff2"},700:{"latin-ext":"https://fonts.gstatic.com/s/figtree/v9/_Xms-HUzqDCFdgfMm4q9DbZs.woff2",latin:"https://fonts.gstatic.com/s/figtree/v9/_Xms-HUzqDCFdgfMm4S9DQ.woff2"},800:{"latin-ext":"https://fonts.gstatic.com/s/figtree/v9/_Xms-HUzqDCFdgfMm4q9DbZs.woff2",latin:"https://fonts.gstatic.com/s/figtree/v9/_Xms-HUzqDCFdgfMm4S9DQ.woff2"},900:{"latin-ext":"https://fonts.gstatic.com/s/figtree/v9/_Xms-HUzqDCFdgfMm4q9DbZs.woff2",latin:"https://fonts.gstatic.com/s/figtree/v9/_Xms-HUzqDCFdgfMm4S9DQ.woff2"}}},subsets:["latin","latin-ext"],variable:{axes:{wght:{min:300,max:900}},fontFaces:[{style:"italic",weight:"300 900",stretch:null,subset:"latin-ext",unicodeRange:"U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF",src:"https://fonts.gstatic.com/s/figtree/v9/_Xmu-HUzqDCFdgfMm4GNAa5o_ik.woff2"},{style:"italic",weight:"300 900",stretch:null,subset:"latin",unicodeRange:"U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD",src:"https://fonts.gstatic.

857com/s/figtree/v9/_Xmu-HUzqDCFdgfMm4GND65o.woff2"},{style:"normal",weight:"300 900",stretch:null,subset:"latin-ext",unicodeRange:"U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF",src:"https://fonts.gstatic.com/s/figtree/v9/_Xms-HUzqDCFdgfMm4q9DbZs.woff2"},{style:"normal",weight:"300 900",stretch:null,subset:"latin",unicodeRange:"U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD",src:"https://fonts.gstatic.com/s/figtree/v9/_Xms-HUzqDCFdgfMm4S9DQ.woff2"}],url:"https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900"}}),u="Figtree",m=(e,t)=>((e,t,n)=>{let o=Array.isArray(n?.weights)&&Array.isArray(n?.subsets)&&n.weights.length>0&&n.subsets.length>0;if(s.NoReactInternals.ENABLE_V5_BREAKING_CHANGES&&!o)throw Error("Loading Google Fonts without specifying weights and subsets is not supported in Remotion v5. Please specify the weights and subsets you need.");let r=[],p=t?[t]:Object.keys(e.fonts),d=0;for(let t of p)if(!("u"<typeof FontFace)){if(!e.fonts[t])throw Error(`The font ${e.fontFamily} does not have a style ${t}`);for(let p of n?.weights??Object.keys(e.fonts[t])){if(!e.fonts[t][p])throw Error(`The font ${e.fontFamily} does not  have a weight ${p} in style ${t}`);let u=n?.subsets??Object.keys(e.fonts[t][p]),m=Object.keys(e.fonts[t][p]);for(let f of[...new Set(u.flatMap(t=>i({availableSubsetKeys:m,metaSubsets:e.subsets,requestedSubset:t})))]){let i=e.fonts[t]?.[p]?.[f];if(!i)throw Error(`weight: ${p} subset: ${f} is not available for '${e.fontFamily}'`);let u=`${e.fontFamily}-${t}-${p}-${f}`,m=l[u];if(m){r.push(m);continue}let h=`Fetching ${e.fontFamily} font ${JSON.stringify({style:t,weight:p,subset:f})}`,y=o?h:`${h}. This might be caused by loading too many font variations. Read more: https://www.remotion.dev/docs/troubleshooting/font-loading-errors#render-timeout-when-loading-google-fonts`,g=(0,a.IH)(y,{timeoutInMilliseconds:6e4});d++;let E=n=>{s.NoReactInternals.registerFontFace({ascentOverride:null,descentOverride:null,display:null,featureSettings:null,fontFamily:e.fontFamily,fontData:n,fontUrl:i,format:"woff2",lineGapOverride:null,style:t,weight:p,stretch:null,unicodeRange:e.unicodeRanges[f]??null,variant:null})},x=2,b=()=>s.NoReactInternals.fetchFontData(i).then(s=>{let o=new FontFace(e.fontFamily,s,{weight:p,style:t,unicodeRange:e.unicodeRanges[f]});return c(o).then(()=>{(n?.document??document).fonts.add(o),E(s),(0,a._8)(g)})}).catch(e=>{if(0===x)throw l[u]=void 0,e;return x--,b()}),F=b();l[u]=F,r.push(F)}}d>20&&!n?.ignoreTooManyRequestsWarning&&console.warn(`Made ${d} network requests to load fonts for ${e.fontFamily}. Consider loading fewer weights and subsets by passing options to loadFont(). Disable this warning by passing "ignoreTooManyRequestsWarning: true" to "options".`)}return{fontFamily:e.fontFamily,fonts:e.fonts,unicodeRanges:e.unicodeRanges,waitUntilDone:()=>Promise.all(r).then(()=>{})}})(d(),e,t),f=(e,t)=>((e,t,n)=>{if(!e.variable)throw Error(`${e.fontFamily} is not available as a variable font`);if(0===n.subsets.length)throw Error("Pass at least one subset to loadVariableFont()");let o=e.variable.fontFaces.filter(e=>e.style===t);if(0===o.length)throw Error(`The variable font ${e.fontFamily} does not have a style ${t}`);let r=o.map(e=>e.subset),p=[...new Set(n.subsets.flatMap(t=>i({availableSubsetKeys:r,metaSubsets:e.subsets,requestedSubset:t})))],d=[];for(let r of p){if("u"<typeof FontFace)continue;let i=o.find(e=>e.subset===r);if(!i)throw Error(`subset: ${r} is not available for the variable font '${e.fontFamily}'`);let p=[e.fontFamily,"variable",i.style,i.weight,i.stretch,i.subset,i.src].join("-"),u=l[p];if(u){d.push(u);continue}let m=(0,a.IH)(`Fetching variable ${e.fontFamily} font ${JSON.stringify({style:t,subset:r})}`,{timeoutInMilliseconds:6e4}),f={style:i.style,weight:i.weight,unicodeRange:i.unicodeRange};i.stretch&&(f.stretch=i.stretch);let h=t=>{s.NoReactInternals.registerFontFace({ascentOverride:null,descentOverride:null,display:null,featureSettings:null,fontFamily:e.fontFamily,fontData:t,fontUrl:i.src,format:"woff2",lineGapOverride:null,style:i.style,weight:i.weight,stretch:i.stretch,unicodeRange:i.unicodeRange,variant:null})},y=2,g=()=>s.NoReactInternals.fetchFontData(i.src).then(t=>{let s=new FontFace(e.fontFamily,t,f);return c(s).then(()=>{(n.document??document).fonts.add(s),h(t),(0,a._8)(m)})}).catch(e=>{if(0===y)throw l[p]=void 0,e;return y--,g()}),E=g();l[p]=E,d.push(E)}return p.length>20&&!n.ignoreTooManyRequestsWarning&&console.warn(`Made ${p.length} network requests to load the variable font ${e.fontFamily}. Consider loading fewer subsets. Disable this warning by passing "ignoreTooManyRequestsWarning: true" to "options".`),{fontFamily:e.fontFamily,axes:e.variable.axes,waitUntilDone:()=>Promise.all(d).then(()=>{})}})(d(),e,t)},17601(e,t,n){"use strict";n.r(t),n.d(t,{fontFamily:()=>u,getInfo:()=>d,loadFont:()=>m,loadVariableFont:()=>f});var a=n(39372),s=n(64831),o=e=>/^\[\d+\]$/.test(e),r=(e,t)=>Number(e.slice(1,-1))-Number(t.slice(1,-1)),i=({availableSubsetKeys:e,metaSubsets:t,requestedSubset:n})=>{if(e.includes(n)||!t.includes(n))return[n];let a=e.filter(o).sort(r);return 0===a.length?[n]:a},l={},p=function(){let e,t;return{promise:new Promise((n,a)=>{e=n,t=a}),resolve:e,reject:t}},c=e=>{let t=p(),n=setTimeout(()=>{t.reject(Error("Timed out loading Google Font"))},18e3);return Promise.race([e.load().then(()=>{clearTimeout(n)}),t.promise])},d=()=>({fontFamily:"Inter",importName:"Inter",version:"v20",url:"https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900",unicodeRanges:{"cyrillic-ext":"U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F",cyrillic:"U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116","greek-ext":"U+1F00-1FFF",greek:"U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF",viet

857namese:"U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB","latin-ext":"U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF",latin:"U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"},fonts:{italic:{100:{"cyrillic-ext":"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L0UUMJng.woff2",cyrillic:"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L9UUMJng.woff2","greek-ext":"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L1UUMJng.woff2",greek:"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L6UUMJng.woff2",vietnamese:"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L2UUMJng.woff2","latin-ext":"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L3UUMJng.woff2",latin:"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L5UUM.woff2"},200:{"cyrillic-ext":"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L0UUMJng.woff2",cyrillic:"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L9UUMJng.woff2","greek-ext":"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L1UUMJng.woff2",greek:"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L6UUMJng.woff2",vietnamese:"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L2UUMJng.woff2","latin-ext":"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L3UUMJng.woff2",latin:"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L5UUM.woff2"},300:{"cyrillic-ext":"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L0UUMJng.woff2",cyrillic:"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L9UUMJng.woff2","greek-ext":"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L1UUMJng.woff2",greek:"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L6UUMJng.woff2",vietnamese:"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L2UUMJng.woff2","latin-ext":"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L3UUMJng.woff2",latin:"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L5UUM.woff2"},400:{"cyrillic-ext":"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L0UUMJng.woff2",cyrillic:"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L9UUMJng.woff2","greek-ext":"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L1UUMJng.woff2",greek:"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L6UUMJng.woff2",vietnamese:"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L2UUMJng.woff2","latin-ext":"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L3UUMJng.woff2",latin:"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L5UUM.woff2"},500:{"cyrillic-ext":"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L0UUMJng.woff2",cyrillic:"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L9UUMJng.woff2","greek-ext":"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L1UUMJng.woff2",greek:"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L6UUMJng.woff2",vietnamese:"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L2UUMJng.woff2","latin-ext":"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L3UUMJng.woff2",latin:"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L5UUM.woff2"},600:{"cyrillic-ext":"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L0UUMJng.woff2",cyrillic:"https://fonts.gstatic.

857com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L9UUMJng.woff2","greek-ext":"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L1UUMJng.woff2",greek:"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L6UUMJng.woff2",vietnamese:"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L2UUMJng.woff2","latin-ext":"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L3UUMJng.woff2",latin:"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L5UUM.woff2"},700:{"cyrillic-ext":"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L0UUMJng.woff2",cyrillic:"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L9UUMJng.woff2","greek-ext":"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L1UUMJng.woff2",greek:"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L6UUMJng.woff2",vietnamese:"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L2UUMJng.woff2","latin-ext":"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L3UUMJng.woff2",latin:"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L5UUM.woff2"},800:{"cyrillic-ext":"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L0UUMJng.woff2",cyrillic:"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L9UUMJng.woff2","greek-ext":"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L1UUMJng.woff2",greek:"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L6UUMJng.woff2",vietnamese:"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L2UUMJng.woff2","latin-ext":"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L3UUMJng.woff2",latin:"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L5UUM.woff2"},900:{"cyrillic-ext":"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L0UUMJng.woff2",cyrillic:"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L9UUMJng.woff2","greek-ext":"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L1UUMJng.woff2",greek:"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L6UUMJng.woff2",vietnamese:"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L2UUMJng.woff2","latin-ext":"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L3UUMJng.woff2",latin:"https://fonts.gstatic.com/s/inter/v20/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L5UUM.woff2"}},normal:{100:{"cyrillic-ext":"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2",cyrillic:"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2","greek-ext":"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2",greek:"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2",vietnamese:"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2","latin-ext":"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2",latin:"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2"},200:{"cyrillic-ext":"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2",cyrillic:"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2","greek-ext":"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2",greek:"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2",vietnamese:"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2","latin-ext":"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2",latin:"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2"},300:{"cyrillic-ext":"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2",cyrillic:"https://fonts.gstatic.

857com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2","greek-ext":"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2",greek:"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2",vietnamese:"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2","latin-ext":"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2",latin:"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2"},400:{"cyrillic-ext":"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2",cyrillic:"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2","greek-ext":"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2",greek:"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2",vietnamese:"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2","latin-ext":"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2",latin:"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2"},500:{"cyrillic-ext":"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2",cyrillic:"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2","greek-ext":"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2",greek:"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2",vietnamese:"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2","latin-ext":"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2",latin:"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2"},600:{"cyrillic-ext":"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2",cyrillic:"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2","greek-ext":"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2",greek:"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2",vietnamese:"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2","latin-ext":"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2",latin:"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2"},700:{"cyrillic-ext":"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2",cyrillic:"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2","greek-ext":"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2",greek:"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2",vietnamese:"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2","latin-ext":"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2",latin:"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2"},800:{"cyrillic-ext":"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2",cyrillic:"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2","greek-ext":"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2",greek:"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2",vietnamese:"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2","latin-ext":"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2",latin:"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2"},900:{"cyrillic-ext":"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2",cyrillic:"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2","greek-ext":"https://fonts.gstatic.

857com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2",greek:"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2",vietnamese:"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2","latin-ext":"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2",latin:"https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2"}}},subsets:["cyrillic","cyrillic-ext","greek","greek-ext","latin","latin-ext","vietnamese"],variable:{axes:{opsz:{min:14,max:32},wght:{min:100,max:900}},fontFaces:[{style:"italic",weight:"100 900",stretch:null,subset:"cyrillic-ext",unicodeRange:"U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F",src:"https://fonts.gstatic.com/s/inter/v20/UcCm3FwrK3iLTcvnUwkT9nA2.woff2"},{style:"italic",weight:"100 900",stretch:null,subset:"cyrillic",unicodeRange:"U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116",src:"https://fonts.gstatic.com/s/inter/v20/UcCm3FwrK3iLTcvnUwAT9nA2.woff2"},{style:"italic",weight:"100 900",stretch:null,subset:"greek-ext",unicodeRange:"U+1F00-1FFF",src:"https://fonts.gstatic.com/s/inter/v20/UcCm3FwrK3iLTcvnUwgT9nA2.woff2"},{style:"italic",weight:"100 900",stretch:null,subset:"greek",unicodeRange:"U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF",src:"https://fonts.gstatic.com/s/inter/v20/UcCm3FwrK3iLTcvnUwcT9nA2.woff2"},{style:"italic",weight:"100 900",stretch:null,subset:"vietnamese",unicodeRange:"U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB",src:"https://fonts.gstatic.com/s/inter/v20/UcCm3FwrK3iLTcvnUwsT9nA2.woff2"},{style:"italic",weight:"100 900",stretch:null,subset:"latin-ext",unicodeRange:"U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF",src:"https://fonts.gstatic.com/s/inter/v20/UcCm3FwrK3iLTcvnUwoT9nA2.woff2"},{style:"italic",weight:"100 900",stretch:null,subset:"latin",unicodeRange:"U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD",src:"https://fonts.gstatic.com/s/inter/v20/UcCm3FwrK3iLTcvnUwQT9g.woff2"},{style:"normal",weight:"100 900",stretch:null,subset:"cyrillic-ext",unicodeRange:"U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F",src:"https://fonts.gstatic.com/s/inter/v20/UcCo3FwrK3iLTcvvYwYL8g.woff2"},{style:"normal",weight:"100 900",stretch:null,subset:"cyrillic",unicodeRange:"U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116",src:"https://fonts.gstatic.com/s/inter/v20/UcCo3FwrK3iLTcvmYwYL8g.woff2"},{style:"normal",weight:"100 900",stretch:null,subset:"greek-ext",unicodeRange:"U+1F00-1FFF",src:"https://fonts.gstatic.com/s/inter/v20/UcCo3FwrK3iLTcvuYwYL8g.woff2"},{style:"normal",weight:"100 900",stretch:null,subset:"greek",unicodeRange:"U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF",src:"https://fonts.gstatic.com/s/inter/v20/UcCo3FwrK3iLTcvhYwYL8g.woff2"},{style:"normal",weight:"100 900",stretch:null,subset:"vietnamese",unicodeRange:"U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB",src:"https://fonts.gstatic.com/s/inter/v20/UcCo3FwrK3iLTcvtYwYL8g.woff2"},{style:"normal",weight:"100 900",stretch:null,subset:"latin-ext",unicodeRange:"U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF",src:"https://fonts.gstatic.com/s/inter/v20/UcCo3FwrK3iLTcvsYwYL8g.woff2"},{style:"normal",weight:"100 900",stretch:null,subset:"latin",unicodeRange:"U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD",src:"https://fonts.gstatic.

857com/s/inter/v20/UcCo3FwrK3iLTcviYwY.woff2"}],url:"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900"}}),u="Inter",m=(e,t)=>((e,t,n)=>{let o=Array.isArray(n?.weights)&&Array.isArray(n?.subsets)&&n.weights.length>0&&n.subsets.length>0;if(s.NoReactInternals.ENABLE_V5_BREAKING_CHANGES&&!o)throw Error("Loading Google Fonts without specifying weights and subsets is not supported in Remotion v5. Please specify the weights and subsets you need.");let r=[],p=t?[t]:Object.keys(e.fonts),d=0;for(let t of p)if(!("u"<typeof FontFace)){if(!e.fonts[t])throw Error(`The font ${e.fontFamily} does not have a style ${t}`);for(let p of n?.weights??Object.keys(e.fonts[t])){if(!e.fonts[t][p])throw Error(`The font ${e.fontFamily} does not  have a weight ${p} in style ${t}`);let u=n?.subsets??Object.keys(e.fonts[t][p]),m=Object.keys(e.fonts[t][p]);for(let f of[...new Set(u.flatMap(t=>i({availableSubsetKeys:m,metaSubsets:e.subsets,requestedSubset:t})))]){let i=e.fonts[t]?.[p]?.[f];if(!i)throw Error(`weight: ${p} subset: ${f} is not available for '${e.fontFamily}'`);let u=`${e.fontFamily}-${t}-${p}-${f}`,m=l[u];if(m){r.push(m);continue}let h=`Fetching ${e.fontFamily} font ${JSON.stringify({style:t,weight:p,subset:f})}`,y=o?h:`${h}. This might be caused by loading too many font variations. Read more: https://www.remotion.dev/docs/troubleshooting/font-loading-errors#render-timeout-when-loading-google-fonts`,g=(0,a.IH)(y,{timeoutInMilliseconds:6e4});d++;let E=n=>{s.NoReactInternals.registerFontFace({ascentOverride:null,descentOverride:null,display:null,featureSettings:null,fontFamily:e.fontFamily,fontData:n,fontUrl:i,format:"woff2",lineGapOverride:null,style:t,weight:p,stretch:null,unicodeRange:e.unicodeRanges[f]??null,variant:null})},x=2,b=()=>s.NoReactInternals.fetchFontData(i).then(s=>{let o=new FontFace(e.fontFamily,s,{weight:p,style:t,unicodeRange:e.unicodeRanges[f]});return c(o).then(()=>{(n?.document??document).fonts.add(o),E(s),(0,a._8)(g)})}).catch(e=>{if(0===x)throw l[u]=void 0,e;return x--,b()}),F=b();l[u]=F,r.push(F)}}d>20&&!n?.ignoreTooManyRequestsWarning&&console.warn(`Made ${d} network requests to load fonts for ${e.fontFamily}. Consider loading fewer weights and subsets by passing options to loadFont(). Disable this warning by passing "ignoreTooManyRequestsWarning: true" to "options".`)}return{fontFamily:e.fontFamily,fonts:e.fonts,unicodeRanges:e.unicodeRanges,waitUntilDone:()=>Promise.all(r).then(()=>{})}})(d(),e,t),f=(e,t)=>((e,t,n)=>{if(!e.variable)throw Error(`${e.fontFamily} is not available as a variable font`);if(0===n.subsets.length)throw Error("Pass at least one subset to loadVariableFont()");let o=e.variable.fontFaces.filter(e=>e.style===t);if(0===o.length)throw Error(`The variable font ${e.fontFamily} does not have a style ${t}`);let r=o.map(e=>e.subset),p=[...new Set(n.subsets.flatMap(t=>i({availableSubsetKeys:r,metaSubsets:e.subsets,requestedSubset:t})))],d=[];for(let r of p){if("u"<typeof FontFace)continue;let i=o.find(e=>e.subset===r);if(!i)throw Error(`subset: ${r} is not available for the variable font '${e.fontFamily}'`);let p=[e.fontFamily,"variable",i.style,i.weight,i.stretch,i.subset,i.src].join("-"),u=l[p];if(u){d.push(u);continue}let m=(0,a.IH)(`Fetching variable ${e.fontFamily} font ${JSON.stringify({style:t,subset:r})}`,{timeoutInMilliseconds:6e4}),f={style:i.style,weight:i.weight,unicodeRange:i.unicodeRange};i.stretch&&(f.stretch=i.stretch);let h=t=>{s.NoReactInternals.registerFontFace({ascentOverride:null,descentOverride:null,display:null,featureSettings:null,fontFamily:e.fontFamily,fontData:t,fontUrl:i.src,format:"woff2",lineGapOverride:null,style:i.style,weight:i.weight,stretch:i.stretch,unicodeRange:i.unicodeRange,variant:null})},y=2,g=()=>s.NoReactInternals.fetchFontData(i.src).then(t=>{let s=new FontFace(e.fontFamily,t,f);return c(s).then(()=>{(n.document??document).fonts.add(s),h(t),(0,a._8)(m)})}).catch(e=>{if(0===y)throw l[p]=void 0,e;return y--,g()}),E=g();l[p]=E,d.push(E)}return p.length>20&&!n.ignoreTooManyRequestsWarning&&console.warn(`Made ${p.length} network requests to load the variable font ${e.fontFamily}. Consider loading fewer subsets. Disable this warning by passing "ignoreTooManyRequestsWarning: true" to "options".`),{fontFamily:e.fontFamily,axes:e.variable.axes,waitUntilDone:()=>Promise.all(d).then(()=>{})}})(d(),e,t)}

857,76777(e,t,n){"use strict";n.r(t),n.d(t,{fontFamily:()=>u,getInfo:()=>d,loadFont:()=>m,loadVariableFont:()=>f});var a=n(39372),s=n(64831),o=e=>/^\[\d+\]$/.test(e),r=(e,t)=>Number(e.slice(1,-1))-Number(t.slice(1,-1)),i=({availableSubsetKeys:e,metaSubsets:t,requestedSubset:n})=>{if(e.includes(n)||!t.includes(n))return[n];let a=e.filter(o).sort(r);return 0===a.length?[n]:a},l={},p=function(){let e,t;return{promise:new Promise((n,a)=>{e=n,t=a}),resolve:e,reject:t}},c=e=>{let t=p(),n=setTimeout(()=>{t.reject(Error("Timed out loading Google Font"))},18e3);return Promise.race([e.load().then(()=>{clearTimeout(n)}),t.promise])},d=()=>({fontFamily:"Lora",importName:"Lora",version:"v37",url:"https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700",unicodeRanges:{"cyrillic-ext":"U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F",cyrillic:"U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116",math:"U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF",symbols:"U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF",vietnamese:"U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB","latin-ext":"U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF",latin:"U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"},fonts:{italic:{400:{"cyrillic-ext":"https://fonts.gstatic.com/s/lora/v37/0QIhMX1D_JOuMw_LLPtLp_A.woff2",cyrillic:"https://fonts.gstatic.com/s/lora/v37/0QIhMX1D_JOuMw_LJftLp_A.woff2",math:"https://fonts.gstatic.

857com/s/lora/v37/0QIhMX1D_JOuMw_LXftLp_A.woff2",symbols:"https://fonts.gstatic.com/s/lora/v37/0QIhMX1D_JOuMw_LT_tLp_A.woff2",vietnamese:"https://fonts.gstatic.com/s/lora/v37/0QIhMX1D_JOuMw_LLvtLp_A.woff2","latin-ext":"https://fonts.gstatic.com/s/lora/v37/0QIhMX1D_JOuMw_LL_tLp_A.woff2",latin:"https://fonts.gstatic.com/s/lora/v37/0QIhMX1D_JOuMw_LIftL.woff2"},500:{"cyrillic-ext":"https://fonts.gstatic.com/s/lora/v37/0QIhMX1D_JOuMw_LLPtLp_A.woff2",cyrillic:"https://fonts.gstatic.com/s/lora/v37/0QIhMX1D_JOuMw_LJftLp_A.woff2",math:"https://fonts.gstatic.com/s/lora/v37/0QIhMX1D_JOuMw_LXftLp_A.woff2",symbols:"https://fonts.gstatic.com/s/lora/v37/0QIhMX1D_JOuMw_LT_tLp_A.woff2",vietnamese:"https://fonts.gstatic.com/s/lora/v37/0QIhMX1D_JOuMw_LLvtLp_A.woff2","latin-ext":"https://fonts.gstatic.com/s/lora/v37/0QIhMX1D_JOuMw_LL_tLp_A.woff2",latin:"https://fonts.gstatic.com/s/lora/v37/0QIhMX1D_JOuMw_LIftL.woff2"},600:{"cyrillic-ext":"https://fonts.gstatic.com/s/lora/v37/0QIhMX1D_JOuMw_LLPtLp_A.woff2",cyrillic:"https://fonts.gstatic.com/s/lora/v37/0QIhMX1D_JOuMw_LJftLp_A.woff2",math:"https://fonts.gstatic.com/s/lora/v37/0QIhMX1D_JOuMw_LXftLp_A.woff2",symbols:"https://fonts.gstatic.com/s/lora/v37/0QIhMX1D_JOuMw_LT_tLp_A.woff2",vietnamese:"https://fonts.gstatic.com/s/lora/v37/0QIhMX1D_JOuMw_LLvtLp_A.woff2","latin-ext":"https://fonts.gstatic.com/s/lora/v37/0QIhMX1D_JOuMw_LL_tLp_A.woff2",latin:"https://fonts.gstatic.com/s/lora/v37/0QIhMX1D_JOuMw_LIftL.woff2"},700:{"cyrillic-ext":"https://fonts.gstatic.com/s/lora/v37/0QIhMX1D_JOuMw_LLPtLp_A.woff2",cyrillic:"https://fonts.gstatic.com/s/lora/v37/0QIhMX1D_JOuMw_LJftLp_A.woff2",math:"https://fonts.gstatic.com/s/lora/v37/0QIhMX1D_JOuMw_LXftLp_A.woff2",symbols:"https://fonts.gstatic.com/s/lora/v37/0QIhMX1D_JOuMw_LT_tLp_A.woff2",vietnamese:"https://fonts.gstatic.com/s/lora/v37/0QIhMX1D_JOuMw_LLvtLp_A.woff2","latin-ext":"https://fonts.gstatic.com/s/lora/v37/0QIhMX1D_JOuMw_LL_tLp_A.woff2",latin:"https://fonts.gstatic.com/s/lora/v37/0QIhMX1D_JOuMw_LIftL.woff2"}},normal:{400:{"cyrillic-ext":"https://fonts.gstatic.com/s/lora/v37/0QIvMX1D_JOuMwf7I-NP.woff2",cyrillic:"https://fonts.gstatic.com/s/lora/v37/0QIvMX1D_JOuMw77I-NP.woff2",math:"https://fonts.gstatic.com/s/lora/v37/0QIvMX1D_JOuM3b7I-NP.woff2",symbols:"https://fonts.gstatic.com/s/lora/v37/0QIvMX1D_JOuM2T7I-NP.woff2",vietnamese:"https://fonts.gstatic.com/s/lora/v37/0QIvMX1D_JOuMwX7I-NP.woff2","latin-ext":"https://fonts.gstatic.com/s/lora/v37/0QIvMX1D_JOuMwT7I-NP.woff2",latin:"https://fonts.gstatic.com/s/lora/v37/0QIvMX1D_JOuMwr7Iw.woff2"},500:{"cyrillic-ext":"https://fonts.gstatic.com/s/lora/v37/0QIvMX1D_JOuMwf7I-NP.woff2",cyrillic:"https://fonts.gstatic.com/s/lora/v37/0QIvMX1D_JOuMw77I-NP.woff2",math:"https://fonts.gstatic.com/s/lora/v37/0QIvMX1D_JOuM3b7I-NP.woff2",symbols:"https://fonts.gstatic.com/s/lora/v37/0QIvMX1D_JOuM2T7I-NP.woff2",vietnamese:"https://fonts.gstatic.com/s/lora/v37/0QIvMX1D_JOuMwX7I-NP.woff2","latin-ext":"https://fonts.gstatic.com/s/lora/v37/0QIvMX1D_JOuMwT7I-NP.woff2",latin:"https://fonts.gstatic.com/s/lora/v37/0QIvMX1D_JOuMwr7Iw.woff2"},600:{"cyrillic-ext":"https://fonts.gstatic.com/s/lora/v37/0QIvMX1D_JOuMwf7I-NP.woff2",cyrillic:"https://fonts.gstatic.com/s/lora/v37/0QIvMX1D_JOuMw77I-NP.woff2",math:"https://fonts.gstatic.com/s/lora/v37/0QIvMX1D_JOuM3b7I-NP.woff2",symbols:"https://fonts.gstatic.com/s/lora/v37/0QIvMX1D_JOuM2T7I-NP.woff2",vietnamese:"https://fonts.gstatic.com/s/lora/v37/0QIvMX1D_JOuMwX7I-NP.woff2","latin-ext":"https://fonts.gstatic.com/s/lora/v37/0QIvMX1D_JOuMwT7I-NP.woff2",latin:"https://fonts.gstatic.com/s/lora/v37/0QIvMX1D_JOuMwr7Iw.woff2"},700:{"cyrillic-ext":"https://fonts.gstatic.com/s/lora/v37/0QIvMX1D_JOuMwf7I-NP.woff2",cyrillic:"https://fonts.gstatic.com/s/lora/v37/0QIvMX1D_JOuMw77I-NP.woff2",math:"https://fonts.gstatic.com/s/lora/v37/0QIvMX1D_JOuM3b7I-NP.woff2",symbols:"https://fonts.gstatic.com/s/lora/v37/0QIvMX1D_JOuM2T7I-NP.woff2",vietnamese:"https://fonts.gstatic.com/s/lora/v37/0QIvMX1D_JOuMwX7I-NP.woff2","latin-ext":"https://fonts.gstatic.com/s/lora/v37/0QIvMX1D_JOuMwT7I-NP.woff2",latin:"https://fonts.gstatic.

857com/s/lora/v37/0QIvMX1D_JOuMwr7Iw.woff2"}}},subsets:["cyrillic","cyrillic-ext","latin","latin-ext","math","symbols","vietnamese"],variable:{axes:{wght:{min:400,max:700}},fontFaces:[{style:"italic",weight:"400 700",stretch:null,subset:"cyrillic-ext",unicodeRange:"U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F",src:"https://fonts.gstatic.com/s/lora/v37/0QIhMX1D_JOuMw_LLPtLp_A.woff2"},{style:"italic",weight:"400 700",stretch:null,subset:"cyrillic",unicodeRange:"U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116",src:"https://fonts.gstatic.com/s/lora/v37/0QIhMX1D_JOuMw_LJftLp_A.woff2"},{style:"italic",weight:"400 700",stretch:null,subset:"math",unicodeRange:"U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF",src:"https://fonts.gstatic.com/s/lora/v37/0QIhMX1D_JOuMw_LXftLp_A.woff2"},{style:"italic",weight:"400 700",stretch:null,subset:"symbols",unicodeRange:"U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF",src:"https://fonts.gstatic.com/s/lora/v37/0QIhMX1D_JOuMw_LT_tLp_A.woff2"},{style:"italic",weight:"400 700",stretch:null,subset:"vietnamese",unicodeRange:"U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB",src:"https://fonts.gstatic.com/s/lora/v37/0QIhMX1D_JOuMw_LLvtLp_A.woff2"},{style:"italic",weight:"400 700",stretch:null,subset:"latin-ext",unicodeRange:"U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF",src:"https://fonts.gstatic.com/s/lora/v37/0QIhMX1D_JOuMw_LL_tLp_A.woff2"},{style:"italic",weight:"400 700",stretch:null,subset:"latin",unicodeRange:"U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD",src:"https://fonts.gstatic.

857com/s/lora/v37/0QIhMX1D_JOuMw_LIftL.woff2"},{style:"normal",weight:"400 700",stretch:null,subset:"cyrillic-ext",unicodeRange:"U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F",src:"https://fonts.gstatic.com/s/lora/v37/0QIvMX1D_JOuMwf7I-NP.woff2"},{style:"normal",weight:"400 700",stretch:null,subset:"cyrillic",unicodeRange:"U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116",src:"https://fonts.gstatic.com/s/lora/v37/0QIvMX1D_JOuMw77I-NP.woff2"},{style:"normal",weight:"400 700",stretch:null,subset:"math",unicodeRange:"U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF",src:"https://fonts.gstatic.com/s/lora/v37/0QIvMX1D_JOuM3b7I-NP.woff2"},{style:"normal",weight:"400 700",stretch:null,subset:"symbols",unicodeRange:"U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF",src:"https://fonts.gstatic.com/s/lora/v37/0QIvMX1D_JOuM2T7I-NP.woff2"},{style:"normal",weight:"400 700",stretch:null,subset:"vietnamese",unicodeRange:"U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB",src:"https://fonts.gstatic.com/s/lora/v37/0QIvMX1D_JOuMwX7I-NP.woff2"},{style:"normal",weight:"400 700",stretch:null,subset:"latin-ext",unicodeRange:"U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF",src:"https://fonts.gstatic.com/s/lora/v37/0QIvMX1D_JOuMwT7I-NP.woff2"},{style:"normal",weight:"400 700",stretch:null,subset:"latin",unicodeRange:"U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD",src:"https://fonts.gstatic.com/s/lora/v37/0QIvMX1D_JOuMwr7Iw.woff2"}],url:"https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700"}}),u="Lora",m=(e,t)=>

857((e,t,n)=>{let o=Array.isArray(n?.weights)&&Array.isArray(n?.subsets)&&n.weights.length>0&&n.subsets.length>0;if(s.NoReactInternals.ENABLE_V5_BREAKING_CHANGES&&!o)throw Error("Loading Google Fonts without specifying weights and subsets is not supported in Remotion v5. Please specify the weights and subsets you need.");let r=[],p=t?[t]:Object.keys(e.fonts),d=0;for(let t of p)if(!("u"<typeof FontFace)){if(!e.fonts[t])throw Error(`The font ${e.fontFamily} does not have a style ${t}`);for(let p of n?.weights??Object.keys(e.fonts[t])){if(!e.fonts[t][p])throw Error(`The font ${e.fontFamily} does not  have a weight ${p} in style ${t}`);let u=n?.subsets??Object.keys(e.fonts[t][p]),m=Object.keys(e.fonts[t][p]);for(let f of[...new Set(u.flatMap(t=>i({availableSubsetKeys:m,metaSubsets:e.subsets,requestedSubset:t})))]){let i=e.fonts[t]?.[p]?.[f];if(!i)throw Error(`weight: ${p} subset: ${f} is not available for '${e.fontFamily}'`);let u=`${e.fontFamily}-${t}-${p}-${f}`,m=l[u];if(m){r.push(m);continue}let h=`Fetching ${e.fontFamily} font ${JSON.stringify({style:t,weight:p,subset:f})}`,y=o?h:`${h}. This might be caused by loading too many font variations. Read more: https://www.remotion.dev/docs/troubleshooting/font-loading-errors#render-timeout-when-loading-google-fonts`,g=(0,a.IH)(y,{timeoutInMilliseconds:6e4});d++;let E=n=>{s.NoReactInternals.registerFontFace({ascentOverride:null,descentOverride:null,display:null,featureSettings:null,fontFamily:e.fontFamily,fontData:n,fontUrl:i,format:"woff2",lineGapOverride:null,style:t,weight:p,stretch:null,unicodeRange:e.unicodeRanges[f]??null,variant:null})},x=2,b=()=>s.NoReactInternals.fetchFontData(i).then(s=>{let o=new FontFace(e.fontFamily,s,{weight:p,style:t,unicodeRange:e.unicodeRanges[f]});return c(o).then(()=>{(n?.document??document).fonts.add(o),E(s),(0,a._8)(g)})}).catch(e=>{if(0===x)throw l[u]=void 0,e;return x--,b()}),F=b();l[u]=F,r.push(F)}}d>20&&!n?.ignoreTooManyRequestsWarning&&console.warn(`Made ${d} network requests to load fonts for ${e.fontFamily}. Consider loading fewer weights and subsets by passing options to loadFont(). Disable this warning by passing "ignoreTooManyRequestsWarning: true" to "options".`)}return{fontFamily:e.fontFamily,fonts:e.fonts,unicodeRanges:e.unicodeRanges,waitUntilDone:()=>Promise.all(r).then(()=>{})}})(d(),e,t),f=(e,t)=>((e,t,n)=>{if(!e.variable)throw Error(`${e.fontFamily} is not available as a variable font`);if(0===n.subsets.length)throw Error("Pass at least one subset to loadVariableFont()");let o=e.variable.fontFaces.filter(e=>e.style===t);if(0===o.length)throw Error(`The variable font ${e.fontFamily} does not have a style ${t}`);let r=o.map(e=>e.subset),p=[...new Set(n.subsets.flatMap(t=>i({availableSubsetKeys:r,metaSubsets:e.subsets,requestedSubset:t})))],d=[];for(let r of p){if("u"<typeof FontFace)continue;let i=o.find(e=>e.subset===r);if(!i)throw Error(`subset: ${r} is not available for the variable font '${e.fontFamily}'`);let p=[e.fontFamily,"variable",i.style,i.weight,i.stretch,i.subset,i.src].join("-"),u=l[p];if(u){d.push(u);continue}let m=(0,a.IH)(`Fetching variable ${e.fontFamily} font ${JSON.stringify({style:t,subset:r})}`,{timeoutInMilliseconds:6e4}),f={style:i.style,weight:i.weight,unicodeRange:i.unicodeRange};i.stretch&&(f.stretch=i.stretch);let h=t=>{s.NoReactInternals.registerFontFace({ascentOverride:null,descentOverride:null,display:null,featureSettings:null,fontFamily:e.fontFamily,fontData:t,fontUrl:i.src,format:"woff2",lineGapOverride:null,style:i.style,weight:i.weight,stretch:i.stretch,unicodeRange:i.unicodeRange,variant:null})},y=2,g=()=>s.NoReactInternals.fetchFontData(i.src).then(t=>{let s=new FontFace(e.fontFamily,t,f);return c(s).then(()=>{(n.document??document).fonts.add(s),h(t),(0,a._8)(m)})}).catch(e=>{if(0===y)throw l[p]=void 0,e;return y--,g()}),E=g();l[p]=E,d.push(E)}return p.length>20&&!n.ignoreTooManyRequestsWarning&&console.warn(`Made ${p.length} network requests to load the variable font ${e.fontFamily}. Consider loading fewer subsets. Disable this warning by passing "ignoreTooManyRequestsWarning: true" to "options".`),{fontFamily:e.fontFamily,axes:e.variable.axes,waitUntilDone:()=>Promise.all(d).then(()=>{})}})(d(),e,t)},74379(e,t,n){"use strict";n.r(t),n.d(t,{fontFamily:()=>u,getInfo:()=>d,loadFont:()=>m,loadVariableFont:()=>f});var a=n(39372),s=n(64831),o=e=>/^\[\d+\]$/.test(e),r=(e,t)=>Number(e.slice(1,-1))-Number(t.slice(1,-1)),i=({availableSubsetKeys:e,metaSubsets:t,requestedSubset:n})=>{if(e.includes(n)||!t.includes(n))return[n];let a=e.filter(o).sort(r);return 0===a.length?[n]:a},l={},p=function(){let e,t;return{promise:new Promise((n,a)=>{e=n,t=a}),resolve:e,reject:t}},c=e=>{let t=p(),n=setTimeout(()=>{t.reject(Error("Timed out loading Google Font"))},18e3);return Promise.race([e.load().then(()=>{clearTimeout(n)}),t.promise])},d=()=>({fontFamily:"Mona Sans",importName:"MonaSans",version:"v4",url:"https://fonts.googleapis.com/css2?family=Mona+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900",unicodeRanges:{vietnamese:"U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB","latin-ext":"U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1D

857BF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF",latin:"U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"},fonts:{italic:{200:{vietnamese:"https://fonts.gstatic.com/s/monasans/v4/o-0ZIpQmx24alC5A4PNr4C5OaxRsfNNlKbCePevttnOmDyw.woff2","latin-ext":"https://fonts.gstatic.com/s/monasans/v4/o-0ZIpQmx24alC5A4PNr4C5OaxRsfNNlKbCePevtt3OmDyw.woff2",latin:"https://fonts.gstatic.com/s/monasans/v4/o-0ZIpQmx24alC5A4PNr4C5OaxRsfNNlKbCePevtuXOm.woff2"},300:{vietnamese:"https://fonts.gstatic.com/s/monasans/v4/o-0ZIpQmx24alC5A4PNr4C5OaxRsfNNlKbCePevttnOmDyw.woff2","latin-ext":"https://fonts.gstatic.com/s/monasans/v4/o-0ZIpQmx24alC5A4PNr4C5OaxRsfNNlKbCePevtt3OmDyw.woff2",latin:"https://fonts.gstatic.com/s/monasans/v4/o-0ZIpQmx24alC5A4PNr4C5OaxRsfNNlKbCePevtuXOm.woff2"},400:{vietnamese:"https://fonts.gstatic.com/s/monasans/v4/o-0ZIpQmx24alC5A4PNr4C5OaxRsfNNlKbCePevttnOmDyw.woff2","latin-ext":"https://fonts.gstatic.com/s/monasans/v4/o-0ZIpQmx24alC5A4PNr4C5OaxRsfNNlKbCePevtt3OmDyw.woff2",latin:"https://fonts.gstatic.com/s/monasans/v4/o-0ZIpQmx24alC5A4PNr4C5OaxRsfNNlKbCePevtuXOm.woff2"},500:{vietnamese:"https://fonts.gstatic.com/s/monasans/v4/o-0ZIpQmx24alC5A4PNr4C5OaxRsfNNlKbCePevttnOmDyw.woff2","latin-ext":"https://fonts.gstatic.com/s/monasans/v4/o-0ZIpQmx24alC5A4PNr4C5OaxRsfNNlKbCePevtt3OmDyw.woff2",latin:"https://fonts.gstatic.com/s/monasans/v4/o-0ZIpQmx24alC5A4PNr4C5OaxRsfNNlKbCePevtuXOm.woff2"},600:{vietnamese:"https://fonts.gstatic.com/s/monasans/v4/o-0ZIpQmx24alC5A4PNr4C5OaxRsfNNlKbCePevttnOmDyw.woff2","latin-ext":"https://fonts.gstatic.com/s/monasans/v4/o-0ZIpQmx24alC5A4PNr4C5OaxRsfNNlKbCePevtt3OmDyw.woff2",latin:"https://fonts.gstatic.com/s/monasans/v4/o-0ZIpQmx24alC5A4PNr4C5OaxRsfNNlKbCePevtuXOm.woff2"},700:{vietnamese:"https://fonts.gstatic.com/s/monasans/v4/o-0ZIpQmx24alC5A4PNr4C5OaxRsfNNlKbCePevttnOmDyw.woff2","latin-ext":"https://fonts.gstatic.com/s/monasans/v4/o-0ZIpQmx24alC5A4PNr4C5OaxRsfNNlKbCePevtt3OmDyw.woff2",latin:"https://fonts.gstatic.com/s/monasans/v4/o-0ZIpQmx24alC5A4PNr4C5OaxRsfNNlKbCePevtuXOm.woff2"},800:{vietnamese:"https://fonts.gstatic.com/s/monasans/v4/o-0ZIpQmx24alC5A4PNr4C5OaxRsfNNlKbCePevttnOmDyw.woff2","latin-ext":"https://fonts.gstatic.com/s/monasans/v4/o-0ZIpQmx24alC5A4PNr4C5OaxRsfNNlKbCePevtt3OmDyw.woff2",latin:"https://fonts.gstatic.com/s/monasans/v4/o-0ZIpQmx24alC5A4PNr4C5OaxRsfNNlKbCePevtuXOm.woff2"},900:{vietnamese:"https://fonts.gstatic.com/s/monasans/v4/o-0ZIpQmx24alC5A4PNr4C5OaxRsfNNlKbCePevttnOmDyw.woff2","latin-ext":"https://fonts.gstatic.com/s/monasans/v4/o-0ZIpQmx24alC5A4PNr4C5OaxRsfNNlKbCePevtt3OmDyw.woff2",latin:"https://fonts.gstatic.com/s/monasans/v4/o-0ZIpQmx24alC5A4PNr4C5OaxRsfNNlKbCePevtuXOm.woff2"}},normal:{200:{vietnamese:"https://fonts.gstatic.com/s/monasans/v4/o-0bIpQmx24alC5A4PNB6Ryti20_6n1iPHjc5aHdu2ui.woff2","latin-ext":"https://fonts.gstatic.com/s/monasans/v4/o-0bIpQmx24alC5A4PNB6Ryti20_6n1iPHjc5aDdu2ui.woff2",latin:"https://fonts.gstatic.com/s/monasans/v4/o-0bIpQmx24alC5A4PNB6Ryti20_6n1iPHjc5a7duw.woff2"},300:{vietnamese:"https://fonts.gstatic.com/s/monasans/v4/o-0bIpQmx24alC5A4PNB6Ryti20_6n1iPHjc5aHdu2ui.woff2","latin-ext":"https://fonts.gstatic.com/s/monasans/v4/o-0bIpQmx24alC5A4PNB6Ryti20_6n1iPHjc5aDdu2ui.woff2",latin:"https://fonts.gstatic.com/s/monasans/v4/o-0bIpQmx24alC5A4PNB6Ryti20_6n1iPHjc5a7duw.woff2"},400:{vietnamese:"https://fonts.gstatic.com/s/monasans/v4/o-0bIpQmx24alC5A4PNB6Ryti20_6n1iPHjc5aHdu2ui.woff2","latin-ext":"https://fonts.gstatic.com/s/monasans/v4/o-0bIpQmx24alC5A4PNB6Ryti20_6n1iPHjc5aDdu2ui.woff2",latin:"https://fonts.gstatic.com/s/monasans/v4/o-0bIpQmx24alC5A4PNB6Ryti20_6n1iPHjc5a7duw.woff2"},500:{vietnamese:"https://fonts.gstatic.com/s/monasans/v4/o-0bIpQmx24alC5A4PNB6Ryti20_6n1iPHjc5aHdu2ui.woff2","latin-ext":"https://fonts.gstatic.com/s/monasans/v4/o-0bIpQmx24alC5A4PNB6Ryti20_6n1iPHjc5aDdu2ui.woff2",latin:"https://fonts.gstatic.com/s/monasans/v4/o-0bIpQmx24alC5A4PNB6Ryti20_6n1iPHjc5a7duw.woff2"}

857,600:{vietnamese:"https://fonts.gstatic.com/s/monasans/v4/o-0bIpQmx24alC5A4PNB6Ryti20_6n1iPHjc5aHdu2ui.woff2","latin-ext":"https://fonts.gstatic.com/s/monasans/v4/o-0bIpQmx24alC5A4PNB6Ryti20_6n1iPHjc5aDdu2ui.woff2",latin:"https://fonts.gstatic.com/s/monasans/v4/o-0bIpQmx24alC5A4PNB6Ryti20_6n1iPHjc5a7duw.woff2"},700:{vietnamese:"https://fonts.gstatic.com/s/monasans/v4/o-0bIpQmx24alC5A4PNB6Ryti20_6n1iPHjc5aHdu2ui.woff2","latin-ext":"https://fonts.gstatic.com/s/monasans/v4/o-0bIpQmx24alC5A4PNB6Ryti20_6n1iPHjc5aDdu2ui.woff2",latin:"https://fonts.gstatic.com/s/monasans/v4/o-0bIpQmx24alC5A4PNB6Ryti20_6n1iPHjc5a7duw.woff2"},800:{vietnamese:"https://fonts.gstatic.com/s/monasans/v4/o-0bIpQmx24alC5A4PNB6Ryti20_6n1iPHjc5aHdu2ui.woff2","latin-ext":"https://fonts.gstatic.com/s/monasans/v4/o-0bIpQmx24alC5A4PNB6Ryti20_6n1iPHjc5aDdu2ui.woff2",latin:"https://fonts.gstatic.com/s/monasans/v4/o-0bIpQmx24alC5A4PNB6Ryti20_6n1iPHjc5a7duw.woff2"},900:{vietnamese:"https://fonts.gstatic.com/s/monasans/v4/o-0bIpQmx24alC5A4PNB6Ryti20_6n1iPHjc5aHdu2ui.woff2","latin-ext":"https://fonts.gstatic.com/s/monasans/v4/o-0bIpQmx24alC5A4PNB6Ryti20_6n1iPHjc5aDdu2ui.woff2",latin:"https://fonts.gstatic.com/s/monasans/v4/o-0bIpQmx24alC5A4PNB6Ryti20_6n1iPHjc5a7duw.woff2"}}},subsets:["latin","latin-ext","vietnamese"],variable:{axes:{wdth:{min:75,max:125},wght:{min:200,max:900}},fontFaces:[{style:"italic",weight:"200 900",stretch:"75% 125%",subset:"vietnamese",unicodeRange:"U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB",src:"https://fonts.gstatic.com/s/monasans/v4/o-0OIpQmx24alC5A4PNr4ARNQ_m87A.woff2"},{style:"italic",weight:"200 900",stretch:"75% 125%",subset:"latin-ext",unicodeRange:"U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF",src:"https://fonts.gstatic.com/s/monasans/v4/o-0OIpQmx24alC5A4PNr4ARMQ_m87A.woff2"},{style:"italic",weight:"200 900",stretch:"75% 125%",subset:"latin",unicodeRange:"U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD",src:"https://fonts.gstatic.com/s/monasans/v4/o-0OIpQmx24alC5A4PNr4ARCQ_k.woff2"},{style:"normal",weight:"200 900",stretch:"75% 125%",subset:"vietnamese",unicodeRange:"U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB",src:"https://fonts.gstatic.com/s/monasans/v4/o-0IIpQmx24alC5A4PNr6jRAW_0.woff2"},{style:"normal",weight:"200 900",stretch:"75% 125%",subset:"latin-ext",unicodeRange:"U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF",src:"https://fonts.gstatic.com/s/monasans/v4/o-0IIpQmx24alC5A4PNr6zRAW_0.woff2"},{style:"normal",weight:"200 900",stretch:"75% 125%",subset:"latin",unicodeRange:"U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD",src:"https://fonts.gstatic.com/s/monasans/v4/o-0IIpQmx24alC5A4PNr5TRA.woff2"}],url:"https://fonts.googleapis.com/css2?family=Mona+Sans:ital,wdth,wght@0,75..125,200..900;1,75..125,200..900"}}),u="Mona Sans",m=(e,t)=>((e,t,n)=>{let o=Array.isArray(n?.weights)&&Array.isArray(n?.subsets)&&n.weights.length>0&&n.subsets.length>0;if(s.NoReactInternals.ENABLE_V5_BREAKING_CHANGES&&!o)throw Error("Loading Google Fonts without specifying weights and subsets is not supported in Remotion v5. Please specify the weights and subsets you need.");let r=[],p=t?[t]:Object.keys(e.fonts),d=0;for(let t of p)if(!("u"<typeof FontFace)){if(!e.fonts[t])throw Error(`The font ${e.fontFamily} does not have a style ${t}`);for(let p of n?.weights??Object.keys(e.fonts[t])){if(!e.fonts[t][p])throw Error(`The font ${e.fontFamily} does not  have a weight ${p} in style ${t}`);let u=n?.subsets??Object.keys(e.fonts[t][p]),m=Object.keys(e.fonts[t][p]);for(let f of[...new Set(u.flatMap(t=>i({availableSubsetKeys:m,metaSubsets:e.subsets,requestedSubset:t})))]){let i=e.fonts[t]?.[p]?.[f];if(!i)throw Error(`weight: ${p} subset: ${f} is not available for '${e.fontFamily}'`);let u=`${e.fontFamily}-${t}-${p}-${f}`,m=l[u];

857if(m){r.push(m);continue}let h=`Fetching ${e.fontFamily} font ${JSON.stringify({style:t,weight:p,subset:f})}`,y=o?h:`${h}. This might be caused by loading too many font variations. Read more: https://www.remotion.dev/docs/troubleshooting/font-loading-errors#render-timeout-when-loading-google-fonts`,g=(0,a.IH)(y,{timeoutInMilliseconds:6e4});d++;let E=n=>{s.NoReactInternals.registerFontFace({ascentOverride:null,descentOverride:null,display:null,featureSettings:null,fontFamily:e.fontFamily,fontData:n,fontUrl:i,format:"woff2",lineGapOverride:null,style:t,weight:p,stretch:null,unicodeRange:e.unicodeRanges[f]??null,variant:null})},x=2,b=()=>s.NoReactInternals.fetchFontData(i).then(s=>{let o=new FontFace(e.fontFamily,s,{weight:p,style:t,unicodeRange:e.unicodeRanges[f]});return c(o).then(()=>{(n?.document??document).fonts.add(o),E(s),(0,a._8)(g)})}).catch(e=>{if(0===x)throw l[u]=void 0,e;return x--,b()}),F=b();l[u]=F,r.push(F)}}d>20&&!n?.ignoreTooManyRequestsWarning&&console.warn(`Made ${d} network requests to load fonts for ${e.fontFamily}. Consider loading fewer weights and subsets by passing options to loadFont(). Disable this warning by passing "ignoreTooManyRequestsWarning: true" to "options".`)}return{fontFamily:e.fontFamily,fonts:e.fonts,unicodeRanges:e.unicodeRanges,waitUntilDone:()=>Promise.all(r).then(()=>{})}})(d(),e,t),f=(e,t)=>((e,t,n)=>{if(!e.variable)throw Error(`${e.fontFamily} is not available as a variable font`);if(0===n.subsets.length)throw Error("Pass at least one subset to loadVariableFont()");let o=e.variable.fontFaces.filter(e=>e.style===t);if(0===o.length)throw Error(`The variable font ${e.fontFamily} does not have a style ${t}`);let r=o.map(e=>e.subset),p=[...new Set(n.subsets.flatMap(t=>i({availableSubsetKeys:r,metaSubsets:e.subsets,requestedSubset:t})))],d=[];for(let r of p){if("u"<typeof FontFace)continue;let i=o.find(e=>e.subset===r);if(!i)throw Error(`subset: ${r} is not available for the variable font '${e.fontFamily}'`);let p=[e.fontFamily,"variable",i.style,i.weight,i.stretch,i.subset,i.src].join("-"),u=l[p];if(u){d.push(u);continue}let m=(0,a.IH)(`Fetching variable ${e.fontFamily} font ${JSON.stringify({style:t,subset:r})}`,{timeoutInMilliseconds:6e4}),f={style:i.style,weight:i.weight,unicodeRange:i.unicodeRange};i.stretch&&(f.stretch=i.stretch);let h=t=>{s.NoReactInternals.registerFontFace({ascentOverride:null,descentOverride:null,display:null,featureSettings:null,fontFamily:e.fontFamily,fontData:t,fontUrl:i.src,format:"woff2",lineGapOverride:null,style:i.style,weight:i.weight,stretch:i.stretch,unicodeRange:i.unicodeRange,variant:null})},y=2,g=()=>s.NoReactInternals.fetchFontData(i.src).then(t=>{let s=new FontFace(e.fontFamily,t,f);return c(s).then(()=>{(n.document??document).fonts.add(s),h(t),(0,a._8)(m)})}).catch(e=>{if(0===y)throw l[p]=void 0,e;return y--,g()}),E=g();l[p]=E,d.push(E)}return p.length>20&&!n.ignoreTooManyRequestsWarning&&console.warn(`Made ${p.length} network requests to load the variable font ${e.fontFamily}. Consider loading fewer subsets. Disable this warning by passing "ignoreTooManyRequestsWarning: true" to "options".`),{fontFamily:e.fontFamily,axes:e.variable.axes,waitUntilDone:()=>Promise.all(d).then(()=>{})}})(d(),e,t)},60240(e,t,n){"use strict";n.r(t),n.d(t,{fontFamily:()=>u,getInfo:()=>d,loadFont:()=>m,loadVariableFont:()=>f});var a=n(39372),s=n(64831),o=e=>/^\[\d+\]$/.test(e),r=(e,t)=>Number(e.slice(1,-1))-Number(t.slice(1,-1)),i=({availableSubsetKeys:e,metaSubsets:t,requestedSubset:n})=>{if(e.includes(n)||!t.includes(n))return[n];let a=e.filter(o).sort(r);return 0===a.length?[n]:a},l={},p=function(){let e,t;return{promise:new Promise((n,a)=>{e=n,t=a}),resolve:e,reject:t}},c=e=>{let t=p(),n=setTimeout(()=>{t.reject(Error("Timed out loading Google Font"))},18e3);return Promise.race([e.load().then(()=>{clearTimeout(n)}),t.promise])},d=()=>({fontFamily:"Montserrat",importName:"Montserrat",version:"v31",url:"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900",unicodeRanges:{"cyrillic-ext":"U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F",cyrillic:"U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116",vietnamese:"U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB","latin-ext":"U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1D

857BF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF",latin:"U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"},fonts:{italic:{100:{"cyrillic-ext":"https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRxC7mw9c.woff2",cyrillic:"https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRzS7mw9c.woff2",vietnamese:"https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRxi7mw9c.woff2","latin-ext":"https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRxy7mw9c.woff2",latin:"https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRyS7m.woff2"},200:{"cyrillic-ext":"https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRxC7mw9c.woff2",cyrillic:"https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRzS7mw9c.woff2",vietnamese:"https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRxi7mw9c.woff2","latin-ext":"https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRxy7mw9c.woff2",latin:"https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRyS7m.woff2"},300:{"cyrillic-ext":"https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRxC7mw9c.woff2",cyrillic:"https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRzS7mw9c.woff2",vietnamese:"https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRxi7mw9c.woff2","latin-ext":"https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRxy7mw9c.woff2",latin:"https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRyS7m.woff2"},400:{"cyrillic-ext":"https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRxC7mw9c.woff2",cyrillic:"https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRzS7mw9c.woff2",vietnamese:"https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRxi7mw9c.woff2","latin-ext":"https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRxy7mw9c.woff2",latin:"https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRyS7m.woff2"},500:{"cyrillic-ext":"https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRxC7mw9c.woff2",cyrillic:"https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRzS7mw9c.woff2",vietnamese:"https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRxi7mw9c.woff2","latin-ext":"https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRxy7mw9c.woff2",latin:"https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRyS7m.woff2"},600:{"cyrillic-ext":"https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRxC7mw9c.woff2",cyrillic:"https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRzS7mw9c.woff2",vietnamese:"https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRxi7mw9c.woff2","latin-ext":"https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRxy7mw9c.woff2",latin:"https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRyS7m.woff2"},700:{"cyrillic-ext":"https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRxC7mw9c.woff2",cyrillic:"https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRzS7mw9c.woff2",vietnamese:"https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRxi7mw9c.woff2","latin-ext":"https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRxy7mw9c.woff2",latin:"https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRyS7m.woff2"},800:{"cyrillic-ext":"https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRxC7mw9c.woff2",cyrillic:"https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRzS7mw9c.woff2",vietnamese:"https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRxi7mw9c.woff2","latin-ext":"https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRxy7mw9c.woff2",latin:"https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRyS7m.woff2"}

857,900:{"cyrillic-ext":"https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRxC7mw9c.woff2",cyrillic:"https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRzS7mw9c.woff2",vietnamese:"https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRxi7mw9c.woff2","latin-ext":"https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRxy7mw9c.woff2",latin:"https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRyS7m.woff2"}},normal:{100:{"cyrillic-ext":"https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2",cyrillic:"https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2",vietnamese:"https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2","latin-ext":"https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2",latin:"https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2"},200:{"cyrillic-ext":"https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2",cyrillic:"https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2",vietnamese:"https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2","latin-ext":"https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2",latin:"https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2"},300:{"cyrillic-ext":"https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2",cyrillic:"https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2",vietnamese:"https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2","latin-ext":"https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2",latin:"https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2"},400:{"cyrillic-ext":"https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2",cyrillic:"https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2",vietnamese:"https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2","latin-ext":"https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2",latin:"https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2"},500:{"cyrillic-ext":"https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2",cyrillic:"https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2",vietnamese:"https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2","latin-ext":"https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2",latin:"https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2"},600:{"cyrillic-ext":"https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2",cyrillic:"https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2",vietnamese:"https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2","latin-ext":"https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2",latin:"https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2"},700:{"cyrillic-ext":"https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2",cyrillic:"https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2",vietnamese:"https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2","latin-ext":"https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2",latin:"https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2"},800:{"cyrillic-ext":"https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2",cyrillic:"https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2",vietnamese:"https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2","latin-ext":"https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2",latin:"https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2"}

857,900:{"cyrillic-ext":"https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2",cyrillic:"https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2",vietnamese:"https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2","latin-ext":"https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2",latin:"https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2"}}},subsets:["cyrillic","cyrillic-ext","latin","latin-ext","vietnamese"],variable:{axes:{wght:{min:100,max:900}},fontFaces:[{style:"italic",weight:"100 900",stretch:null,subset:"cyrillic-ext",unicodeRange:"U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F",src:"https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRxC7mw9c.woff2"},{style:"italic",weight:"100 900",stretch:null,subset:"cyrillic",unicodeRange:"U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116",src:"https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRzS7mw9c.woff2"},{style:"italic",weight:"100 900",stretch:null,subset:"vietnamese",unicodeRange:"U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB",src:"https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRxi7mw9c.woff2"},{style:"italic",weight:"100 900",stretch:null,subset:"latin-ext",unicodeRange:"U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF",src:"https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRxy7mw9c.woff2"},{style:"italic",weight:"100 900",stretch:null,subset:"latin",unicodeRange:"U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD",src:"https://fonts.gstatic.com/s/montserrat/v31/JTUQjIg1_i6t8kCHKm459WxRyS7m.woff2"},{style:"normal",weight:"100 900",stretch:null,subset:"cyrillic-ext",unicodeRange:"U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F",src:"https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2"},{style:"normal",weight:"100 900",stretch:null,subset:"cyrillic",unicodeRange:"U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116",src:"https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2"},{style:"normal",weight:"100 900",stretch:null,subset:"vietnamese",unicodeRange:"U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB",src:"https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2"},{style:"normal",weight:"100 900",stretch:null,subset:"latin-ext",unicodeRange:"U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF",src:"https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2"},{style:"normal",weight:"100 900",stretch:null,subset:"latin",unicodeRange:"U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD",src:"https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2"}],url:"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900"}}),u="Montserrat",m=(e,t)=>((e,t,n)=>{let o=Array.isArray(n?.weights)&&Array.isArray(n?.subsets)&&n.weights.length>0&&n.subsets.length>0;if(s.NoReactInternals.ENABLE_V5_BREAKING_CHANGES&&!o)throw Error("Loading Google Fonts without specifying weights and subsets is not supported in Remotion v5. Please specify the weights and subsets you need.");let r=[],p=t?[t]:Object.keys(e.fonts),d=0;for(let t of p)if(!("u"<typeof FontFace)){if(!e.fonts[t])throw Error(`The font ${e.fontFamily} does not have a style ${t}`);for(let p of n?.weights??Object.keys(e.fonts[t])){if(!e.fonts[t][p])throw Error(`The font ${e.fontFamily} does not  have a weight ${p} in style ${t}`);let u=n?.subsets??Object.keys(e.fonts[t][p]),m=Object.keys(e.fonts[t][p]);for(let f of[...new Set(u.flatMap(t=>i({availableSubsetKeys:m,metaSubsets:e.subsets,requestedSubset:t})))]){let i=e.fonts[t]?.[p]?.[f];if(!i)throw Error(`weight: ${p} subset: ${f} is not available for '${e.fontFamily}'`);let u=`${e.fontFamily}-${t}-${p}-${f}`,m=l[u];

857if(m){r.push(m);continue}let h=`Fetching ${e.fontFamily} font ${JSON.stringify({style:t,weight:p,subset:f})}`,y=o?h:`${h}. This might be caused by loading too many font variations. Read more: https://www.remotion.dev/docs/troubleshooting/font-loading-errors#render-timeout-when-loading-google-fonts`,g=(0,a.IH)(y,{timeoutInMilliseconds:6e4});d++;let E=n=>{s.NoReactInternals.registerFontFace({ascentOverride:null,descentOverride:null,display:null,featureSettings:null,fontFamily:e.fontFamily,fontData:n,fontUrl:i,format:"woff2",lineGapOverride:null,style:t,weight:p,stretch:null,unicodeRange:e.unicodeRanges[f]??null,variant:null})},x=2,b=()=>s.NoReactInternals.fetchFontData(i).then(s=>{let o=new FontFace(e.fontFamily,s,{weight:p,style:t,unicodeRange:e.unicodeRanges[f]});return c(o).then(()=>{(n?.document??document).fonts.add(o),E(s),(0,a._8)(g)})}).catch(e=>{if(0===x)throw l[u]=void 0,e;return x--,b()}),F=b();l[u]=F,r.push(F)}}d>20&&!n?.ignoreTooManyRequestsWarning&&console.warn(`Made ${d} network requests to load fonts for ${e.fontFamily}. Consider loading fewer weights and subsets by passing options to loadFont(). Disable this warning by passing "ignoreTooManyRequestsWarning: true" to "options".`)}return{fontFamily:e.fontFamily,fonts:e.fonts,unicodeRanges:e.unicodeRanges,waitUntilDone:()=>Promise.all(r).then(()=>{})}})(d(),e,t),f=(e,t)=>((e,t,n)=>{if(!e.variable)throw Error(`${e.fontFamily} is not available as a variable font`);if(0===n.subsets.length)throw Error("Pass at least one subset to loadVariableFont()");let o=e.variable.fontFaces.filter(e=>e.style===t);if(0===o.length)throw Error(`The variable font ${e.fontFamily} does not have a style ${t}`);let r=o.map(e=>e.subset),p=[...new Set(n.subsets.flatMap(t=>i({availableSubsetKeys:r,metaSubsets:e.subsets,requestedSubset:t})))],d=[];for(let r of p){if("u"<typeof FontFace)continue;let i=o.find(e=>e.subset===r);if(!i)throw Error(`subset: ${r} is not available for the variable font '${e.fontFamily}'`);let p=[e.fontFamily,"variable",i.style,i.weight,i.stretch,i.subset,i.src].join("-"),u=l[p];if(u){d.push(u);continue}let m=(0,a.IH)(`Fetching variable ${e.fontFamily} font ${JSON.stringify({style:t,subset:r})}`,{timeoutInMilliseconds:6e4}),f={style:i.style,weight:i.weight,unicodeRange:i.unicodeRange};i.stretch&&(f.stretch=i.stretch);let h=t=>{s.NoReactInternals.registerFontFace({ascentOverride:null,descentOverride:null,display:null,featureSettings:null,fontFamily:e.fontFamily,fontData:t,fontUrl:i.src,format:"woff2",lineGapOverride:null,style:i.style,weight:i.weight,stretch:i.stretch,unicodeRange:i.unicodeRange,variant:null})},y=2,g=()=>s.NoReactInternals.fetchFontData(i.src).then(t=>{let s=new FontFace(e.fontFamily,t,f);return c(s).then(()=>{(n.document??document).fonts.add(s),h(t),(0,a._8)(m)})}).catch(e=>{if(0===y)throw l[p]=void 0,e;return y--,g()}),E=g();l[p]=E,d.push(E)}return p.length>20&&!n.ignoreTooManyRequestsWarning&&console.warn(`Made ${p.length} network requests to load the variable font ${e.fontFamily}. Consider loading fewer subsets. Disable this warning by passing "ignoreTooManyRequestsWarning: true" to "options".`),{fontFamily:e.fontFamily,axes:e.variable.axes,waitUntilDone:()=>Promise.all(d).then(()=>{})}})(d(),e,t)},83309(e,t,n){"use strict";n.d(t,{Vx:()=>l,kD:()=>o,vY:()=>i});var a=new Map,s=({text:e,fontFamily:t,fontSize:n,fontWeight:a,letterSpacing:s,fontVariantNumeric:o,additionalStyles:r,textTransform:i})=>{if("u"<typeof document)throw Error("measureText() can only be called in a browser.");let l=document.createElement("span");if(t&&(l.style.fontFamily=t),l.style.display="inline-block",l.style.position="absolute",l.style.top="-10000px",l.style.whiteSpace="pre",l.style.fontSize="string"==typeof n?n:`${n}px`,r)for(let e of Object.keys(r))l.style[e]=r[e];a&&(l.style.fontWeight=a.toString()),s&&(l.style.letterSpacing=s),o&&(l.style.fontVariantNumeric=o),i&&(l.style.textTransform=i),l.innerText=e,document.body.appendChild(l);let p=window.getComputedStyle(l).fontFamily,c=l.getBoundingClientRect();return document.body.removeChild(l),{boundingBox:c,computedFontFamily:p}},o=({text:e,fontFamily:t,fontSize:n,fontWeight:o,letterSpacing:r,fontVariantNumeric:i,validateFontIsLoaded:l,additionalStyles:p,textTransform:c})=>{let d=`${e}-${t}-${o}-${n}-${r}-${c}-${JSON.stringify(p)}`;if(a.has(d))return a.get(d);let{boundingBox:u,computedFontFamily:m}=s({fontFamily:t,fontSize:n,text:e,fontVariantNumeric:i,fontWeight:o,letterSpacing:r,additionalStyles:p,textTransform:c});if(l&&e.trim().length>0){let{boundingBox:a,computedFontFamily:l}=s({fontFamily:null,fontSize:n,text:e,fontVariantNumeric:i,fontWeight:o,letterSpacing:r,additionalStyles:p,textTransform:c});if(u.height===a.height&&u.width===a.width&&l!==m&&new Set(e).size>4)throw Error([`Called measureText() with "fontFamily": ${JSON.stringify(t)} but it looks like the font is not loaded at the time of calling.`,`A measurement with the fallback font ${l} was taken and had the same dimensions, indicating that the browser used the fallback font.`,"See https://remotion.dev/docs/layout-utils/best-practices for best practices."].join(`
858`))}let f={height:u.height,width:u.width};return a.set(d,f),f},r=({maxBoxWidth:e,maxLines:t})=>{let n=Array(t).fill(0).map(()=>[]);return{add:({text:a,fontFamily:s,fontWeight:r,fontSize:i,letterSpacing:l,fontVariantNumeric:p,val

858idateFontIsLoaded:c,textTransform:d,additionalStyles:u})=>{let m=n.reduceRight((e,t,n)=>-1===e&&t.length>0?n:e,-1),f=-1===m?0:m;if(Math.ceil([...n[f],{text:a,fontFamily:s,fontWeight:r,fontSize:i,letterSpacing:l,fontVariantNumeric:p,validateFontIsLoaded:c,textTransform:d,additionalStyles:u}].map(e=>o(e).width).reduce((e,t)=>e+t,0))<=e)return n[f].push({text:0===n[f].length?a.trimStart():a,fontFamily:s,fontWeight:r,fontSize:i,letterSpacing:l,textTransform:d,fontVariantNumeric:p,validateFontIsLoaded:c,additionalStyles:u}),{exceedsBox:!1,newLine:!1};if(f===t-1)return{exceedsBox:!0,newLine:!1};let h={text:a.trimStart(),fontFamily:s,fontWeight:r,fontSize:i,letterSpacing:l,fontVariantNumeric:p,validateFontIsLoaded:c,textTransform:d,additionalStyles:u};return Math.ceil(o(h).width)>e?{exceedsBox:!0,newLine:!1}:(n[f+1]=[h],{exceedsBox:!1,newLine:!0})}}},i=({text:e,withinWidth:t,fontFamily:n,fontVariantNumeric:a,fontWeight:s,letterSpacing:r,validateFontIsLoaded:i,additionalStyles:l,textTransform:p})=>{let c=o({text:e,fontFamily:n,fontSize:100,fontWeight:s,fontVariantNumeric:a,letterSpacing:r,validateFontIsLoaded:i,textTransform:p,additionalStyles:l});return{fontSize:t/c.width*100}},l=({text:e,maxLines:t,maxBoxWidth:n,fontFamily:a,fontWeight:s,letterSpacing:o,fontVariantNumeric:i,validateFontIsLoaded:l,textTransform:p,additionalStyles:c,maxFontSize:d})=>{let u=Math.floor(10),m=Math.floor((d??2e3)*100),f=.1,h=[];for(;u<=m;){let d=Math.floor((u+m)/2),y=d/100,g=r({maxBoxWidth:n,maxLines:t}),E=e.split(" "),x=!1,b=0,F=[""];for(let e of E){let t=g.add({text:0===F[b].length?e:" "+e,fontFamily:a,fontWeight:s,fontSize:y,letterSpacing:o,fontVariantNumeric:i,validateFontIsLoaded:l,textTransform:p,additionalStyles:c});if(t.exceedsBox){x=!0;break}t.newLine&&(F.push(""),b++),F[b]+=e+" "}!x&&b<t?(f=y,h=F,u=d+1):m=d-1}for(let e=0;e<h.length;e++)h[e]=h[e].trimEnd();return{fontSize:f,lines:h}}},5337(e,t,n){"use strict";n.d(t,{Ce:()=>d,D3:()=>A,HY:()=>w,c2:()=>W,h9:()=>C,sS:()=>S,zr:()=>$});var a=n(64831),s=n(67781),o=n(39372),r=n(11416),i=n(13165),l=n(39175),p=n(3842),c=({current:e,previous:t,next:n,reverse:a})=>{let s,o,r=t||e,i=n||e,l=(s=i.x-r.x,{length:Math.sqrt(s**2+(o=i.y-r.y)**2),angle:Math.atan2(o,s)}),p=l.angle+(a?Math.PI:0),c=.2*l.length;return{x:e.x+Math.cos(p)*c,y:e.y+Math.sin(p)*c}},d=({points:e})=>e.reduce((e,t,n,a)=>{if(0===n)return`M ${t.x},${t.y}`;let{x:s,y:o}=t,r=a[n-1],i=a[n-2],l=a[n+1],{x:p,y:d}=c({current:r,previous:i,next:t,reverse:!1}),{x:u,y:m}=c({current:t,previous:r,next:l,reverse:!0});return`${e} C ${p},${d} ${u},${m} ${s},${o}`},""),u=async(e,t)=>{try{return await fetch(e,{mode:"cors",referrerPolicy:"no-referrer-when-downgrade",...t})}catch(t){if(t.message.includes("Failed to fetch")||t.message.includes("Load failed")||t.message.includes("NetworkError when attempting to fetch resource"))throw TypeError(`Failed to read from ${e}: ${t.message}. Does the resource support CORS?`);throw t}},m=e=>!e.startsWith(window.origin)&&!e.startsWith("data"),f=e=>{let t=[],n=0,a=async(e,a,...s)=>{n++;let o=(async()=>e(...s))();a(o);try{await o}catch{}n--,t.length>0&&t.shift()?.()},s=(s,...o)=>new Promise(r=>{((s,o,...r)=>{t.push(()=>a(s,o,...r)),(async()=>{await Promise.resolve(),n<e&&t.length>0&&t.shift()?.()})()})(s,r,...o)});return Object.defineProperties(s,{activeCount:{get:()=>n},pendingCount:{get:()=>t.length},clearQueue:{value:()=>{t.length=0}}}),s},h={},y=f(3),g=async(e,t)=>{if(h[e])return h[e];if("u"<typeof document)throw Error("getAudioData() is only available in the browser.");let n=new AudioContext({sampleRate:t?.sampleRate??48e3}),a=await u(e,t?.requestInit);if(!a.ok)throw Error(`Failed to fetch audio data from ${e}: ${a.status} ${a.statusText}`);let s=await a.arrayBuffer(),o=await n.decodeAudioData(s),r={channelWaveforms:Array(o.numberOfChannels).fill(!0).map((e,t)=>o.getChannelData(t)),sampleRate:o.sampleRate,durationInSeconds:o.duration,numberOfChannels:o.numberOfChannels,resultId:String(Math.random()),isRemote:m(e)};return h[e]=r,r};async function E(e,t,n=3e3){let a=new AbortController,s=setTimeout(()=>a.abort(),n);t.signal=a.signal;try{let n=await fetch(e,t);return clearTimeout(s),n}catch{throw clearTimeout(s),Error(`Fetch timed out after ${n}ms`)}}var x=async({suspecting404:e,sameOrigin:t,src:n})=>{if(!e||!t)return Promise.resolve(null);try{return await E(n,{method:"HEAD",mode:"no-cors"}).then(e=>e.status)}catch{return Promise.resolve(null)}};f(3),f(3);var b={},F=f(3),v=e=>{if(b[e])return Promise.resolve(b[e]);if("u"<typeof document)throw Error("getVideoMetadata() is only available in the browser.");let t=document.createElement("video");return t.src=e,new Promise((n,a)=>{let s=()=>{(({error:e,src:t,reject:n,cleanup:a,api:s})=>{x({suspecting404:e.MEDIA_ERR_SRC_NOT_SUPPORTED===e.code,sameOrigin:new URL(t,window.location.origin).toString().startsWith(window.location.origin),src:t}).then(o=>{n(404===o?Error(`Failed to execute ${s}: Received a 404 error loading "${t}". Correct the URL of the file.`):Error([`Failed to execute ${s}, Received a MediaError loading "${t}". Consider using Mediabunny instead, which supports more codecs: https://www.remotion.dev/docs/mediabunny/metadata`,null===o?null:`HTTP Status code of the file: ${o}.`,e.message?`Browser error message: ${e.message}`:null,"Check the path of the file and if it is a valid video."].filter(

858Boolean).join(" "))),a()}).catch(e=>{n(e),a()})})({error:t.error,src:e,cleanup:r,reject:a,api:"getVideoMetadata()"})},o=()=>{if(0==t.videoHeight*t.videoWidth)return void a(Error(`Unable to determine video metadata for ${e}`));if(!Number.isFinite(t.duration))return void a(Error(`Unable to determine video duration for ${e} - got Infinity. Re-encoding this video may fix this issue.`));let s={durationInSeconds:t.duration,width:t.videoWidth,height:t.videoHeight,aspectRatio:t.videoWidth/t.videoHeight,isRemote:m(e)};n(s),b[e]=s,r()},r=()=>{t.removeEventListener("loadedmetadata",o),t.removeEventListener("error",s),t.remove()};t.addEventListener("loadedmetadata",o,{once:!0}),t.addEventListener("error",s,{once:!0})})},w=e=>F(v,e),U=e=>{let t=Math.max(...e),n=0===t?0:t**-1;return e.map(e=>e*n)},C=({audioData:e,startTimeInSeconds:t,durationInSeconds:n,numberOfSamples:s,channel:o=0,outputRange:r="zero-to-one",dataOffsetInSeconds:i,normalize:l=!0})=>{var p=e.numberOfChannels;if("number"!=typeof o)throw TypeError('"channel" must be a number');if(o%1!=0)throw TypeError(`"channel" must an integer, got ${o}`);if(Number.isNaN(o))throw TypeError("The channel parameter is NaN.");if(o<0)throw TypeError('"channel" cannot be negative');if(o>p-1)throw TypeError(`"channel" must be ${p-1} or lower. The audio has ${p} channels`);let c=e.channelWaveforms[o],d=Math.floor((t-(i??0))*e.sampleRate),u=Math.floor((t-(i??0)+n)*e.sampleRate),m=Math.min(u,0)-d,f=u-Math.max(d,c.length),h=Math.min(Math.max(d,0),c.length),y=Math.min(Math.max(u,0),c.length),g=m>0?new Float32Array(m).fill(0):null,E=f>0?new Float32Array(f).fill(0):null,x=[g,c.slice(h,y),E].filter(a.NoReactInternals.truthy);return(({audioBuffer:e,numberOfSamples:t,outputRange:n,normalize:a})=>{let s=Math.floor(e.length/t);if(0===s)return[];let o=[];for(let n=0;n<t;n++){let t=s*n,a=0;for(let n=0;n<s;n++)a+=Math.abs(e[t+n]);o.push(a/s)}return a?"minus-one-to-one"===n?U(o).map((e,t)=>t%2==0?-1*e:e):U(o):"minus-one-to-one"===n?o.map((e,t)=>t%2==0?-1*e:e):o})({audioBuffer:1===x.length?x[0]:(e=>{let t=new Float32Array(e.reduce((e,t)=>e+t.length,0)),n=0;for(let a of e)t.set(a,n),n+=a.length;return t})(x),numberOfSamples:s,outputRange:r,normalize:l}).map((e,t)=>({index:t,amplitude:e}))},S=(e,t)=>{if(!e)throw TypeError("useAudioData requires a 'src' parameter");let n=(0,s.useRef)({isMounted:!0});(0,s.useEffect)(()=>{let{current:e}=n;return e.isMounted=!0,()=>{e.isMounted=!1}},[]);let[a,r]=(0,s.useState)(null),{delayRender:i,continueRender:l}=(0,o.dB)(),p=t?.sampleRate,[c]=(0,s.useState)(t?.requestInit),d=(0,s.useCallback)(async()=>{let t=i(`Waiting for audio metadata with src="${e}" to be loaded`);try{let t,a=await (t=void 0===p&&void 0===c?void 0:{sampleRate:p,requestInit:c},y(g,e,t));n.current.isMounted&&r(a)}catch(e){(0,o.zo)(e)}l(t)},[e,p,c,i,l]);return(0,s.useLayoutEffect)(()=>{d()},[d]),a},L=async({track:e,fromSeconds:t,toSeconds:n,channelIndex:a,signal:s,isMatroska:o=!1})=>{if(s.aborted)throw Error("Operation was aborted");let r=[],i=o?0:Math.max(0,t-1.5),l=new p.O8(e).buffers(i,n);for await(let{buffer:e,timestamp:o,duration:i}of l){if(s.aborted)break;let l=e.getChannelData(a),p=o+i,c=Math.max(o,t),d=Math.min(p,n);if(c>=d)continue;let u=Math.floor((c-o)*e.sampleRate),m=Math.ceil((d-o)*e.sampleRate),f=l.slice(u,m);r.push(f)}await l.return();let c=new Float32Array(r.reduce((e,t)=>e+t.length,0)),d=0;for(let e of r)c.set(e,d),d+=e.length;return c},T={},A=({src:e,frame:t,fps:n,windowInSeconds:a,channelIndex:p=0,requestInit:c})=>{let d=(0,s.useRef)(!0),[u,f]=(0,s.useState)(null),[h,y]=(0,s.useState)({}),g=(0,s.useRef)({}

858),[E]=(0,s.useState)(a),[x]=(0,s.useState)(c);if(a!==E)throw Error("windowInSeconds cannot be changed dynamically");(0,s.useEffect)(()=>(d.current=!0,()=>{d.current=!1,Object.values(g.current).forEach(e=>{e&&e.abort()}),g.current={},y({}),u&&u.input.dispose()}),[u]);let{delayRender:b,continueRender:F}=(0,o.dB)(),v=(0,s.useCallback)(async t=>{let n=b(`Waiting for audio metadata with src="${e}" to be loaded`),a=()=>{F(n)};t.addEventListener("abort",a,{once:!0});let s=new r.pd({formats:i.XE,source:new l.Ts(e,{handleUnhandledError:t=>{o.Xp.Log.warn({logLevel:"info",tag:"@remotion/media-utils"},`A speculative fetch for "${e}" failed:`,t)},...x?{requestInit:x}:void 0})}),c=()=>{s.dispose()};t.addEventListener("abort",c,{once:!0});try{let t=await s.computeDuration(),a=await s.getPrimaryAudioTrack();if(!a)throw Error("No audio track found");if(await a.isLive())throw Error("Live streams are not currently supported by Remotion. Sorry! Source: "+e);if(await a.isRelativeToUnixEpoch())throw Error("Streams with UNIX timestamps are not currently supported by Remotion. Sorry! Source: "+e);if(!await a.canDecode())throw Error("Audio track cannot be decoded");if(p>=a.numberOfChannels||p<0)throw Error(`Invalid channel index ${p} for audio with ${a.numberOfChannels} channels`);let o=await a.getNumberOfChannels(),r=await a.getSampleRate(),l=await s.getFormat(),c=l===i.BN||l===i.q6;d.current&&f({input:s,track:a,metadata:{durationInSeconds:t,numberOfChannels:o,sampleRate:r},isMatroska:c}),F(n)}catch(e){if(e instanceof r.QO)return void F(n);(0,o.zo)(e)}finally{t.removeEventListener("abort",a),t.removeEventListener("abort",c)}},[e,b,F,p,x]);(0,s.useLayoutEffect)(()=>{let e=new AbortController;return v(e.signal),()=>{e.abort()}},[v]);let w=t/n,U=Math.floor(w/a),C=(0,s.useMemo)(()=>u?.metadata?[0===U?null:U-1,U,U+1>Math.floor(u.metadata.durationInSeconds/a-1e-12)?null:U+1].filter(e=>null!==e).filter(e=>e>=0):[],[U,u,a]),S=(0,s.useCallback)(async t=>{if(!u?.metadata||!u)throw Error("MediaBunny context is not loaded yet");let n=g.current[t];n&&n.abort();let s=new AbortController;if(g.current[t]=s,s.signal.aborted)return;let i=t*a,l=(t+1)*a;if(!(i>=u.metadata.durationInSeconds)&&!(l<=0))try{let{isMatroska:n}=u;n&&!T[e]&&(T[e]=!0,o.Xp.Log.warn({logLevel:"info",tag:"@remotion/media-utils"},`[useWindowedAudioData] Matroska/WebM file detected at "${e}".
859
860Due to format limitation, audio decoding must start from the beginning of the file, which may lead to increased memory usage and slower performance for large files. Consider converting the audio to a more suitable format like MP3 or AAC for better performance.`));let a=await L({track:u.track,fromSeconds:i,toSeconds:l,channelIndex:p,signal:s.signal,isMatroska:n});s.signal.aborted||y(e=>{let n=Object.keys(e).filter(e=>!C.includes(Number(e)));return{...e,...n.reduce((e,t)=>(e[t]=null,e),{}),[t]:a}})}catch(e){if(s.signal.aborted||e instanceof r.QO)return;throw e}finally{g.current[t]===s&&(g.current[t]=null)}},[p,u,a,C,e]);(0,s.useEffect)(()=>{if(!u?.metadata)return;for(let e of Object.keys(g.current).filter(e=>!C.includes(Number(e)))){let t=g.current[e];t&&(t.abort(),g.current[e]=null)}let e=C.filter(e=>!h[e]&&!g.current[e]);if(0===e.length)return;let t=e.includes(U),n=e.filter(e=>e!==U);(async()=>{t&&await S(U),n.length>0&&await Promise.all(n.map(e=>S(e)))})().catch(e=>{e.stack?.includes("Cancelled")||e.stack?.toLowerCase()?.includes("aborted")||e.message?.toLowerCase()?.includes("aborted")||(0,o.zo)(e)})},[S,u,C,h,U]);let A=(0,s.useMemo)(()=>C.filter(e=>h[e]),[C,h]),M=(0,s.useMemo)(()=>u?.metadata&&0!==A.length?{channelWaveforms:[(e=>{if(0===e.length)return new Float32Array([]);if(1===e.length)return e[0];let t=0;for(let n of e)t+=n.length;let n=new Float32Array(t),a=0;for(let t of e)n.set(t,a),a+=t.length;return n})(A.map(e=>h[e]))],durationInSeconds:u.metadata.durationInSeconds,isRemote:m(e),numberOfChannels:1,resultId:`${e}-windows-${A.join(",")}`,sampleRate:u.metadata.sampleRate}:null,[e,h,u,A]),I=!!u&&w>=u.metadata.durationInSeconds;return(0,s.useLayoutEffect)(()=>{if(M||I)return;let t=b(`Waiting for audio data with src="${e}" to be loaded`);return()=>{F(t)}},[M,e,b,F,I]),{audioData:I?null:M,dataOffsetInSeconds:A.length>0?A[0]*a:0}},M={},I=function(e,t){let n=-2*Math.PI*(e/t);return M[t]=M[t]||{}

860,M[t][e]=M[t][e]||[Math.cos(n),Math.sin(n)],M[t][e]},R=function(e){let t=[],n=e.length;if(1===n)return Array.isArray(e[0])?[[e[0][0],e[0][1]]]:[[e[0],0]];let a=R(e.filter((e,t)=>t%2==0)),s=R(e.filter((e,t)=>t%2==1));for(let e=0;e<n/2;e++){var o,r;let i=a[e],l=(o=I(e,n),r=s[e],[o[0]*r[0]-o[1]*r[1],o[0]*r[1]+o[1]*r[0]]);t[e]=[i[0]+l[0],i[1]+l[1]],t[e+n/2]=[i[0]-l[0],i[1]-l[1]]}return t},k=function(e){let t=e.length;if(t<=1){let n=Array(t);for(let t=0;t<e.length;t++){let a=e[t];n[t]=[2*a,0]}return n}let n=new Float64Array(t),a=new Float64Array(t),s=t>>1,o=0;for(let r=0;r<t;r+=2){let t=e[o],i=e[o+s];n[r]=t+i,a[r]=0,n[r+1]=t-i,a[r+1]=0;let l=s>>1;for(;o&l;)o^=l,l>>=1;o^=l}let r=Math.log2(t);for(let e=2;e<=r;e++){let s=1<<e,o=s>>1,i=2*Math.PI/s,l=Math.cos(i),p=Math.sin(i),c=s<<1;if(e<r)for(let e=0;e<t;e+=c){let t=n[e],r=a[e],i=n[e+o],l=a[e+o];n[e]=t+i,a[e]=r+l,n[e+o]=t-i,a[e+o]=r-l;let p=e+s,c=n[p],d=a[p],u=n[p+o],m=a[p+o];n[p]=c+u,a[p]=d+m,n[p+o]=c-u,a[p+o]=d-m}else{let e=n[0],t=a[0],s=n[o],r=a[o];n[0]=e+s,a[0]=t+r,n[o]=e-s,a[o]=t-r}let d=l,u=p;for(let i=1;i<o;i++){if(e<r)for(let e=i;e<t;e+=c){let t=n[e],r=a[e],i=n[e+o],l=a[e+o],p=d*i-u*l,c=d*l+u*i;n[e]=t+p,a[e]=r+c,n[e+o]=t-p,a[e+o]=r-c;let m=e+s,f=n[m],h=a[m],y=n[m+o],g=a[m+o],E=d*y-u*g,x=d*g+u*y;n[m]=f+E,a[m]=h+x,n[m+o]=f-E,a[m+o]=h-x}else{let e=n[i],t=a[i],s=n[i+o],r=a[i+o],l=d*s-u*r,p=d*r+u*s;n[i]=e+l,a[i]=t+p,n[i+o]=e-l,a[i+o]=t-p}let m=d*l-u*p;u=d*p+u*l,d=m}}let i=Array(t);for(let e=0;e<t;e++)i[e]=[n[e],a[e]];return i},P=function(e){let t=e.map(e=>Math.sqrt(e[0]*e[0]+e[1]*e[1]));return t.slice(0,t.length/2)},B=function(e){let t=e,n=[];for(let e=0;e<3;e++){let e=Math.floor(1.5),a=1/(2*e+1);for(let a=0;a<e;a++)n[a]=t[a],n[t.length-a-1]=t[t.length-a-1];for(let s=e;s<t.length-e;s++){let o=0;for(let n=-e;n<=e;n++)o+=a*t[s+n]+n;n[s]=o}t=n}return n},D=e=>e>0?32767*e:32768*e,j={},N={},H=({audioData:e,frame:t,fps:n,numberOfSamples:a,optimizeFor:s,dataOffsetInSeconds:o})=>{let r=e.resultId+t+n+a;if(N[r])return N[r];let i=(e=>{if(j[e.resultId])return j[e.resultId];let t=D((e=>{let t=0;for(let n=0;n<e.length;n++){let a=e[n];a>t&&(t=a)}return t})(e.channelWaveforms[0]));return j[e.resultId]=t,t})(e);return(({sampleSize:e,data:t,sampleRate:n,frame:a,fps:s,maxInt:o,optimizeFor:r,dataOffsetInSeconds:i})=>{if(!(e>0&&(e&e-1)==0))throw TypeError(`The argument "bars" must be a power of two. For example: 64, 128. Got instead: ${e}`);if(!s)throw TypeError('The argument "fps" was not provided');if(t.length<e)throw TypeError("Audio data is not big enough to provide "+e+" bars.");let l=Math.max(0,Math.floor((a/s-i)*n)-e/2),p=new Int16Array({length:e});return p.set(t.subarray(l,l+e).map(e=>D(e))),B(P(("accuracy"===r?R:k)(p)).map(e=>e)).map(t=>t/(e/2)/o)})({sampleSize:2*a,data:e.channelWaveforms[0],frame:t,fps:n,sampleRate:e.sampleRate,maxInt:i,optimizeFor:s,dataOffsetInSeconds:o})},$=({smoothing:e=!0,optimizeFor:t=a.NoReactInternals.ENABLE_V5_BREAKING_CHANGES?"speed":"accuracy",dataOffsetInSeconds:n=0,...s})=>{if(!e)return H({...s,optimizeFor:t,dataOffsetInSeconds:n,smoothing:e});let o=[s.frame-1,s.frame,s.frame+1],r=o.map(a=>H({...s,frame:a,dataOffsetInSeconds:n,optimizeFor:t,smoothing:e}));return Array(s.numberOfSamples).fill(!0).map((e,t)=>Array(o.length).fill(!0).map((e,n)=>r[n][t]).reduce((e,t)=>e+t,0)/o.length)},_={},W=e=>(({audioData:e,frame:t,fps:n,numberOfSamples:a,windowInSeconds:s,channel:o,dataOffsetInSeconds:r,normalize:i=!1})=>{if(s*e.sampleRate<a)throw TypeError(s+"s audiodata does not have "+a+" bars. Increase windowInSeconds or decrease numberOfSamples");let l=e.resultId+t+n+a+"waveform"+r;return _[l]?_[l]:C({audioData:e,startTimeInSeconds:t/n-s/2,durationInSeconds:s,numberOfSamples:a,outputRange:"minus-one-to-one",channel:o,dataOffsetInSeconds:r,normalize:i})})(e).map(e=>e.amplitude)},7913(e,t,n){"use strict";n.d(t,{Ce:()=>th,fP:()=>eY});var a,s=n(67781),o=n(39372),r=n(3842),i=n(11416),l=n(39175),p=n(13165),c=n(57825),d=n(64831),u=Symbol.dispose||Symbol.for("Symbol.dispose"),m=Symbol.asyncDispose||Symbol.for("Symbol.asyncDispose"),f=(e,t,n)=>{if(null!=t){var a;if("object"!=typeof t&&"function"!=typeof t)throw TypeError('Object expected to be assigned to "using" declaration');if(n&&(a=t[m]),void 0===a&&(a=t[u]),"function"!=typeof a)throw TypeError("Object not disposable");e.push([n,a,t])}else n&&e.push([n]);return t},h=(e,t,n)=>{var a="function"==typeof SuppressedError?SuppressedError:function(e,t,n,a){return(a=Error(n)).name="SuppressedError",a.error=e,a.suppressed=t,a},s=e=>t=n?new a(e,t,"An error was suppressed during disposal"):(n=!0,e),o=a=>{for(;a=e.pop();)try{var r=a[1]&&a[1].call(a[2]);if(a[0])return Promise.resolve(r).then(o,e=>(s(e),o()))}catch(e){s(e)}if(n)throw t};return o()},y=({loop:e,mediaDurationInSeconds:t,unloopedTimeInSeconds:n,src:a,trimAfter:s,trimBefore:r,fps:i,playbackRate:l,ifNoMediaDuration:p})=>{if(null===t&&e&&"fail"===p)throw Error(`Could not determine duration of ${a}, but "loop" was set.`);let c=e?o.Xp.calculateMediaDuration({trimAfter:s,mediaDurationInFrames:t?t*i:1/0,playbackRate:1,trimBefore:r}):1/0,d=n*l*i,u=d%c,m=Number.EPSILON*Math.max(1,Math.abs(d))*4,f=e?(Math.abs(c-u)<m?0:u)/i:n*l;return(s??null)!==null&&!e&&f>=(s-(r??0))/i?null:f+(r??0)/i},g=({behavior:e,loop:t,assetDurationInSeconds:n,fps:a,frame:s,startsAt:o,playbackRate:r,trimBefore:i,trimAfter:l})=>

860{if(!t||"extend"===e)return s+o;let p=(y({loop:!0,mediaDurationInSeconds:n,unloopedTimeInSeconds:s/a,src:"",trimBefore:i,trimAfter:l,playbackRate:r,fps:a,ifNoMediaDuration:"infinity"})*a-(i??0))/r;return Math.max(0,Math.min(s+o,p))},E=({volume:e,loop:t,behavior:n,assetDurationInSeconds:a,fps:o,startsAt:r,playbackRate:i,trimBefore:l,trimAfter:p})=>(0,s.useMemo)(()=>"function"==typeof e&&t&&"extend"!==n?s=>e(g({behavior:n,loop:t,assetDurationInSeconds:a,fps:o,frame:s-r,startsAt:r,playbackRate:i,trimBefore:l,trimAfter:p})):e,[e,t,n,a,o,r,i,l,p]),x=({loop:e,mediaDurationInSeconds:t,playbackRate:n,trimAfter:a,trimBefore:s,sequenceDurationInFrames:r,compFps:i})=>{if(!e||!t)return;let l=o.Xp.calculateMediaDuration({mediaDurationInFrames:t*i,playbackRate:n,trimAfter:a,trimBefore:s});return{numberOfTimes:r/l,startOffset:0,durationInFrames:l}},b=({toneFrequency:e,component:t})=>{if(void 0!==e&&("number"!=typeof e||!Number.isFinite(e)||e<.01||e>2))throw TypeError(`The \`toneFrequency\` prop of <${t}> must be a finite number between 0.01 and 2, but got ${String(e)}.`)},F=({durationInFrames:e,trimAfter:t,trimBefore:n})=>{let a=void 0===e?void 0:(n??0)+e;return void 0===a?t:void 0===t?a:Math.min(t,a)},v=({durationInFrames:e,loop:t,playbackRate:n,trimAfter:a,trimBefore:s})=>{if(t)return;let o=Math.min(e??1/0,void 0===a?1/0:a-(s??0));return o===1/0?void 0:o/n},w=({mediaTimestamp:e,targetTime:t,currentTime:n,sequenceStartTime:a})=>t+n+((e<a?a-e:0)+(t<0?-t:0)),U=(e,t)=>Array(e).fill(null).map(()=>new Float32Array(t)),C=({buffers:e,requiredLength:t})=>{if(e[0].length>=t)return e;let n=e[0].length;for(;n<t;)n*=2;return e.map(e=>{let t=new Float32Array(n);return t.set(e),t})};class S{chunks=[];length=0;push(e){0!==e[0].length&&(this.chunks.push(e),this.length+=e[0].length)}take(e,t){let n=Math.min(e,this.length),a=U(t,n),s=0;for(;s<n;){let e=this.chunks[0],o=e[0].length,r=Math.min(o,n-s);for(let n=0;n<t;n++)a[n].set(e[n].subarray(0,r),s);r===o?this.chunks.shift():this.chunks[0]=e.map(e=>e.subarray(r)),s+=r,this.length-=r}return a}getLength(){return this.length}}class L{numberOfChannels;factor;hopSize;windowSize;searchRadius;analysisHop;input;inputLength=0;output;outputLength=0;analysisPosition=0;synthesisPosition=0;initialized=!1;finalized=!1;totalInputFrames=0;totalOutputFrames=0;constructor({numberOfChannels:e,sampleRate:t,factor:n}){this.numberOfChannels=e,this.factor=n,this.hopSize=Math.max(32,Math.round(512*t/48e3)),this.windowSize=2*this.hopSize,this.searchRadius=this.hopSize,this.analysisHop=this.hopSize/n,this.input=U(e,65536),this.output=U(e,65536)}append(e){if(this.finalized)throw Error("Cannot append audio after the time stretcher was finalized.");let{length:t}=e[0];this.input=C({buffers:this.input,requiredLength:this.inputLength+t});for(let t=0;t<this.numberOfChannels;t++)this.input[t].set(e[t],this.inputLength);return this.inputLength+=t,this.totalInputFrames+=t,this.process(),this.drainFinalizedOutput()}findBestAnalysisPosition({expectedPosition:e,nextSynthesisPosition:t}){let n=Math.max(0,Math.floor(e-this.searchRadius)),a=Math.min(this.inputLength-this.windowSize,Math.ceil(e+this.searchRadius)),s=n,o=-1/0;for(let e=n;e<=a;e+=4){let n=0,a=0,r=0;for(let s=0;s<this.numberOfChannels;s++){let o=this.output[s],i=this.input[s];for(let s=0;s<this.hopSize;s+=2){let l=o[t+s],p=i[e+s];n+=l*p,a+=l*l,r+=p*p}}let i=n/(Math.sqrt(a*r)||Number.EPSILON);i>o&&(o=i,s=e)}let r=Math.max(n,s-4),i=Math.min(a,s+4);for(let e=r;e<=i;e++){let n=0,a=0,r=0;for(let s=0;s<this.numberOfChannels;s++){let o=this.output[s],i=this.input[s];for(let s=0;s<this.hopSize;s++){let l=o[t+s],p=i[e+s];n+=l*p,a+=l*l,r+=p*p}}let i=n/(Math.sqrt(a*r)||Number.EPSILON);i>o&&(o=i,s=e)}return s}process(){if(!this.initialized){if(this.inputLength<this.windowSize+this.searchRadius)return;for(let e=0;e<this.numberOfChannels;e++)this.output[e].set(this.input[e].subarray(0,this.windowSize));this.outputLength=this.windowSize,this.initialized=!0}for(;;){let e=this.analysisPosition+this.analysisHop;if(e+this.searchRadius+this.windowSize>this.inputLength)break;let t=this.synthesisPosition+this.hopSize;this.output=C({buffers:this.output,requiredLength:t+this.windowSize});let n=this.findBestAnalysisPosition({expectedPosition:e,nextSynthesisPosition:t});for(let e=0;e<this.numberOfChannels;e++){for(let a=0;a<this.hopSize;a++){let s=.5-.5*Math.cos(Math.PI*(a+1)/(this.hopSize+1)),o=t+a;this.output[e][o]=this.output[e][o]*(1-s)+this.input[e][n+a]*s}this.output[e].set(this.input[e].subarray(n+this.hopSize,n+this.windowSize),t+this.hopSize)}this.analysisPosition=e,this.synthesisPosition=t,this.outputLength=t+this.windowSize}}drainFinalizedOutput(){if(!this.initialized)return U(this.numberOfChannels,0);let e=Math.max(0,this.synthesisPosition+this.hopSize),t=this.output.map(t=>t.slice(0,e));this.totalOutputFrames+=e;for(let t=0;t<this.numberOfChannels;t++)this.output[t].copyWithin(0,e,this.outputLength);this.outputLength-=e,this.synthesisPosition-=e;let n=Math.max(0,Math.floor(this.analysisPosition)-this.searchRadius);for(let e=0;e<this.numberOfChannels;e++)this.input[e].copyWithin(0,n,this.inputLength);return this.inputLength-=n,this.analysisPosition-=n,t}finalize(){if(this.finalized)throw Error("The time stretcher has already been finalized.");this.finalized=!0;let e=Math.round(this.totalInputFrames*this.factor),t=U(this.numberOfChannels,this.windowSize+2*this.searchRadius);this.input=C({buffers:this.input,requiredLength:this.inputLength+t[0].length});for(let e=0;e<this.numberOfChannels;e++)this.input[e].set(t[e],this.inputLength);this.inputLength+=t[0].length,this.process();let n=this.drainFinalizedOutput(),a=Math.max(0,e-this.totalOutputFrames+n[0].length);if(n[0].length>=a)return n.map(e=>e.slice(0,a));let s=U(this.numberOfChannels,a);for(let e=0;e<this.numberOfChannels;e++)s[e].set(n[e]);return s}}class T{numberOfChannels;step;input;inputLength=0;position=0;constructor({numberOfChannels:e,step:t}){this.numberOfChannels=e,this.step=t,this.input=U(e,65536)}append(e){this.input=C({buffers:this.input,requiredLength:this.inputLength+e[0].length});for(let t=0;t<this.numberOfChannels;t++)this.input[t].set(e[t],this.inputLength);return this.inputLength+=e[0].length,this.process(!1)}process(e){let t=Math.max(0,Math.floor((this.inputLength-!e-this.position)/this.step)+1),n=U(this.numberOfChannels,t);for(let e=0;e<t;e++){let t=Math.floor(this.position),a=Math.min(t+1,this.inputLength-1),s=this.position-t;for(let o=0;o<this.numberOfChannels;o++){let r=this.input[o][t],i=this.input[o][a];n[o][e]=r+(i-r)*s}this.position+=this.step}let a=Math.min(Math.floor(this.position),this.inputLength);for(let e=0;e<this.numberOfChannels;e++)this.input[e].copyWithin(0,a,this.inputLength);return this.inputLength-=a,this.position-=a,n}finalize(){return this.process(!0)}}class A{numberOfChannels;stretcher;resampler;outputQueue=new S;totalInputFrames=0;totalOutputFrames=0;constructor({numberOfChannels:e,sampleRate:t,toneFrequency:n}){this.numberOfChannels=e,this.stretcher=new L({numberOfChannels:e,sampleRate:t,factor:n}),this.resampler=new T({numberOfChannels:e,step:n})}append(e){this.totalInputFrames+=e[0].length;let t=this.stretcher.append(e);return this.outputQueue.push(this.resampler.append(t)),this.takeAvailableOutput()}takeAvailableOutput(){let e=Math.min(this.totalInputFrames-this.totalOutputFrames,this.outputQueue.getLength()),t=this.outputQueue.take(e,this.numberOfChannels);return this.totalOutputFrames+=e,t}finalize(){this.outputQueue.push(this.resampler.append(this.stretcher.finalize())),this.outputQueue.push(this.resampler.finalize());let e=this.totalInputFrames-this.totalOutputFrames,t=this.outputQueue.take(Math.min(e,this.outputQueue.getLength()),this.numberOfChannels),n=U(this.numberOfChannels,e);for(let e=0;e<this.numberOfChannels;e++)n[e].set(t[e]);return this.totalOutputFrames+=e,n}}var M=e=>{let{buffer:t}

860=e.buffer,n=Math.max(0,Math.round(e.sourceOffsetInSeconds*t.sampleRate)),a=Math.min(t.length-n,Math.round(e.sourceDurationInSeconds*t.sampleRate));return Array(t.numberOfChannels).fill(null).map((e,s)=>t.getChannelData(s).slice(n,n+a))},I=({audio:e,timelineTimestamp:t,sampleRate:n})=>{let a=new AudioBuffer({length:e[0].length,numberOfChannels:e.length,sampleRate:n});for(let t=0;t<e.length;t++)a.copyToChannel(new Float32Array(e[t]),t);let s=e[0].length/n;return{buffer:{buffer:a,timestamp:t,duration:s},timelineTimestamp:t,sourceOffsetInSeconds:0,sourceDurationInSeconds:s}};async function*R({iterator:e,toneFrequency:t}){if(1===t)return void(yield*e);let n=null,a=0,s=0,o=0,r=0,i=0,l=()=>{if(!n)return null;let e=n.finalize(),t=0===e[0].length?null:I({audio:e,timelineTimestamp:o+i/a,sampleRate:a});return n=null,t};for await(let p of e){let e=M(p);if(0===e[0].length)continue;let c=p.buffer.buffer.sampleRate,d=p.buffer.buffer.numberOfChannels,u=o+r/a;if(!n||c!==a||d!==s||Math.abs(p.timelineTimestamp-u)>1.5/c){let e=l();e&&(yield e),a=c,s=d,o=p.timelineTimestamp,r=0,i=0,n=new A({numberOfChannels:s,sampleRate:a,toneFrequency:t})}if(!n)throw Error("Pitch shifter was not initialized.");r+=e[0].length;let m=n.append(e);m[0].length>0&&(yield I({audio:m,timelineTimestamp:o+i/a,sampleRate:a}),i+=m[0].length)}let p=l();p&&(yield p)}class k extends Error{constructor(){super("Waiter became stale before it got its turn"),this.name="StaleWaiterError"}}var P=[],B=0,D=null,j=null,N=()=>{if(null!==D&&(clearTimeout(D),D=null),B>=1)if(j?.waiter.getPriority()!==null)return;else j.cancel();let e=[];for(let t=P.length-1;t>=0;t--)if(null===P[t].getPriority()){let[n]=P.splice(t,1);e.push(n)}for(let t of e)t.onError(new k);if(0===P.length)return;let t=0,n=P[0].getPriority();if(null===n)throw Error("Stale waiter should have been removed");for(let e=1;e<P.length;

860e++){let a=P[e].getPriority();if(null===a)throw Error("Stale waiter should have been removed");a<n&&(n=a,t=e)}if(n>2){D=setTimeout(N,Math.max(1,Math.ceil((n-2)*1e3)));return}let[a]=P.splice(t,1);B++;let s=!1,o=!1,r={waiter:a,cancel:()=>{o=!0,r.settle()},settle:()=>{s||(s=!0,B--,j===r&&(j=null))}};j=r,a.fn().then(e=>{r.settle(),o||a.onDone(e,N)},e=>{r.settle(),o||a.onError(e)})};async function*H({audioSink:e,timeToSeek:t,maximumTimestamp:n}){let a=Math.max(0,t-.5);for await(let s of e.buffers(a,n)){let e=Math.max(s.timestamp,t),a=Math.min(s.timestamp+s.duration,n);a<=e||(yield{buffer:s,timelineTimestamp:e,sourceOffsetInSeconds:e-s.timestamp,sourceDurationInSeconds:a-e})}}async function*$({audioSink:e,seekTimeInSeconds:t,loopStartInSeconds:n,segmentEndInSeconds:a,maximumContinuousTimestamp:s}){if(a<=n)throw Error(`Cannot loop audio over an empty range (${n} to ${a})`);let o=t,r=t;for(;;){let t=!1;for await(let n of H({audioSink:e,timeToSeek:o,maximumTimestamp:a})){t=!0;let e=r+(n.timelineTimestamp-o),a=Math.min(n.sourceDurationInSeconds,s-e);if(a<=0||(yield{...n,timelineTimestamp:e,sourceDurationInSeconds:a},e+a>=s))return}if(!t&&o===n)return;r+=a-o,o=n}}var _=({anchor:e,unloopedTimeInSeconds:t,playbackRate:n})=>e.mediaStartInSeconds+(t-e.unloopedStartInSeconds)*n,W=async e=>await e.getDurationFromMetadata(void 0,{skipLiveWait:!0})??e.computeDuration(void 0,{skipLiveWait:!0}),z=null,O=e=>null!==z?z:z=(e=>{if("u">typeof window&&void 0!==window.remotion_mediaCacheSizeInBytes&&null!==window.remotion_mediaCacheSizeInBytes)return window.remotion_mediaCacheSizeInBytes<0xf000000&&(0,o.zo)(Error(`The minimum value for the "mediaCacheSizeInBytes" prop is 240MB (251658240), got: ${window.remotion_mediaCacheSizeInBytes}`)),window.remotion_mediaCacheSizeInBytes>2097152e4&&(0,o.zo)(Error(`The maximum value for the "mediaCacheSizeInBytes" prop is 20GB (20971520000), got: ${window.remotion_mediaCacheSizeInBytes}`)),o.Xp.Log.verbose({logLevel:e,tag:"@remotion/media"},`Using cache size set using "mediaCacheSizeInBytes": ${(window.remotion_mediaCacheSizeInBytes/1024/1024).toFixed(1)} MB`),window.remotion_mediaCacheSizeInBytes;if("u">typeof window&&void 0!==window.remotion_initialMemoryAvailable&&null!==window.remotion_initialMemoryAvailable){let t=window.remotion_initialMemoryAvailable/2;return t<524288e3?(o.Xp.Log.verbose({logLevel:e,tag:"@remotion/media"},"Using cache size set based on minimum value of 500MB (which is more than half of the available system memory!)"),524288e3):t>2097152e4?(o.Xp.Log.verbose({logLevel:e,tag:"@remotion/media"},"Using cache size set based on maximum value of 20GB (which is less than half of the available system memory)"),2097152e4):(o.Xp.Log.verbose({logLevel:e,tag:"@remotion/media"},`Using cache size set based on available memory (50% of available memory): ${(t/1024/1024).toFixed(1)} MB`),t)}return 1e9})(e),G=e=>Math.min(0x4000000,Math.max(8388608,Math.floor(O(e)/16))),X=e=>{if(!e)return;let t=(e=>{if(!e)return;let t=[];if(e instanceof Headers)e.forEach((e,n)=>{t.push([n.toLowerCase(),e])});else if(Array.isArray(e))for(let[n,a]of e)t.push([n.toLowerCase(),a]);else for(let[n,a]of Object.entries(e))t.push([n.toLowerCase(),a]);return t.sort(([e],[t])=>e<t?-1:+(e>t)),t})(e.headers),n={...void 0===e.cache?null:{cache:e.cache},...void 0===e.credentials?null:{credentials:e.credentials},...void 0===t?null:{headers:t},...void 0===e.integrity?null:{integrity:e.integrity},...void 0===e.mode?null:{mode:e.mode},...void 0===e.redirect?null:{redirect:e.redirect},...void 0===e.referrer?null:{referrer:e.referrer},...void 0===e.referrerPolicy?null:{referrerPolicy:e.referrerPolicy}};return 0===Object.keys(n).length?void 0:n},K=e=>{let t=X(e);return t?[t.cache??null,t.credentials??null,t.integrity??null,t.mode??null,t.redirect??null,t.referrer??null,t.referrerPolicy??null,t.headers??null]:null},q=({credentials:e,requestInit:t})=>void 0===e?X(t):X({credentials:e,...t}),J=async({videoTrack:e,audioTracks:t,audioStreamIndex:n})=>null!==n?t[n]??null:e?await e.getPrimaryPairableAudioTrack()??null:t[0]??null;function V(e){return!!(e.message.includes("Failed to fetch")||e.message.includes("Load failed")||e.message.includes("NetworkError when attempting to fetch resource"))}class Y{isPremounting;isPostmounting;activeHandles=new Set;delayPlayback;constructor({bufferState:e,isPremounting:t,isPostmounting:n}){this.delayPlayback=e.delayPlayback,this.isPremounting=t,this.isPostmounting=n}shouldDelayPlayback(){return!this.isPremounting&&!this.isPostmounting}syncHandles(){for(let e of this.activeHandles)this.shouldDelayPlayback()?e.arm():e.disarm()}setIsPremounting(e){this.isPremounting=e,this.syncHandles()}setIsPostmounting(e){this.isPostmounting=e,this.syncHandles()}createHandle(){let e=!1,t=null,n=!1,a=()=>{e||n||(t=this.delayPlayback().unblock,e=!0)},s=()=>{e&&(t?.(),t=null,e=!1)},o={arm:a,disarm:s,dispose:()=>{}};return o.dispose=()=>{n||(n=!0,s(),this.activeHandles.delete(o))},this.activeHandles.add(o),this.shouldDelayPlayback()&&a(),{unblock:o.dispose,[Symbol.dispose]:o.dispose}}}var Q=e=>Math.round(1e3*e)/1e3,Z=Symbol("releaseCanvas"),ee=e=>{e?.[Z]?.()},et=(e,t)=>{let n,a=e.canvases(t),s=[],o=!1,r=!1,i=!1,l=null,p=(n=[],{makeStableFrame:e=>{let{canvas:t}=e,a=n.pop()??new OffscreenCanvas(t.width,t.height);a.width!==t.width&&(a.width=t.width),a.height!==t.height&&(a.height=t.height);let s=a.getContext("2d");if(!s)throw Error("Could not create canvas context");s.clearRect(0,0,a.width,a.height),s.drawImage(t,0,0);let o=!1;return{canvas:a,duration:e.duration,timestamp:e.timestamp,[Z]:()=>{o||(o=!0,n.push(a))}}}}),c=()=>

860{if(o||r||i||s.length>=3)return;o=!0;let e={promise:a.next(),resolved:null};s.push(e),l=e.promise.then(t=>{let n;if(o=!1,l=null,t.done){e.resolved=t,r=!0;return}if(i){e.resolved={done:!0,value:void 0};return}e.resolved={...t,value:(n=t.value,p.makeStableFrame(n))},c()},()=>{o=!1,l=null})};return c(),{next:()=>{let e=s.shift();if(c(),!e){if(r||i)return{type:"ready",frame:null};let e=l;return{type:"pending",wait:async()=>{let t;await e;let n=s.shift();if(c(),!n)return null;if(n.resolved)return n.resolved.done?null:n.resolved.value;let a=await n.promise;return a.done?null:(t=a.value,p.makeStableFrame(t))}}}return e.resolved?e.resolved.done?{type:"ready",frame:null}:{type:"ready",frame:e.resolved.value}:{type:"pending",wait:async()=>{let t,n=await e.promise;return e.resolved?e.resolved.done?null:e.resolved.value:n.done?null:(t=n.value,p.makeStableFrame(t))}}},closeIterator:async()=>{for(let e of(i=!0,s))e.resolved&&!e.resolved.done&&ee(e.resolved.value);s.length=0,await a.return()}}},en=async(e,t)=>{let n=!1,a=t.makeIteratorOrUsePrewarmed(e),s=!1,o=a.next(),r=o&&"ready"===o.type?o.frame:await o.wait(),i=r,l=null,p=e=>{n?ee(e):(i!==e&&ee(i),i=e)},c=e=>n?(ee(e),null):(null===(l=e)&&(s=!0),l),d=e=>e?Q(e.timestamp):1/0,u=async({pendingFrameBehavior:e,onWait:t,shouldContinue:n})=>{let o=(()=>{if(l)return{type:"ready",frame:l};if(s)return{type:"ready",frame:null};let e=a.next();return"ready"===e.type?{type:"ready",frame:c(e.frame)}:{type:"pending",wait:e.wait}})();if("ready"===o.type)return{type:"ready",timestamp:d(o.frame)};if("restart-iterator"===e)return{type:"pending"};if(!n())return{type:"cancelled"};t();let r=c(await o.wait());return n()?{type:"ready",timestamp:d(r)}:{type:"cancelled"}},m=()=>{if(l){let e=l;return p(e),l=null,{type:"got-frame-or-end",frame:e}}let e=a.next();return"pending"===e.type?{type:"need-to-wait-for-it",waitPromise:async()=>{let t=await e.wait();return t?p(t):s=!0,t}}:(e.frame?p(e.frame):s=!0,{type:"got-frame-or-end",frame:e.frame??null})},f=async(t,n)=>{if(!n.shouldContinue())return{type:"not-satisfied",reason:"seek was superseded"};let a=Q(t);if(i){let s=Q(i.timestamp);if(a<s)return i===r&&Q(t)>=Q(e)?{type:"satisfied",frame:i}:{type:"not-satisfied",reason:`iterator is too far, most recently returned ${s}`};let o=await u({onWait:n.onWait,pendingFrameBehavior:n.pendingFrameBehavior,shouldContinue:n.shouldContinue});if("cancelled"===o.type)return{type:"not-satisfied",reason:"seek was superseded"};

860if("pending"===o.type)return{type:"not-satisfied",reason:"iterator did not have next frame ready"};if(s<=a&&o.timestamp>a)return{type:"satisfied",frame:i}}if(s)return i?{type:"satisfied",frame:i}:{type:"not-satisfied",reason:"iterator ended"};for(;;){if(!n.shouldContinue())return{type:"not-satisfied",reason:"seek was superseded"};let e=m();if("need-to-wait-for-it"===e.type){if("restart-iterator"===n.pendingFrameBehavior)return{type:"not-satisfied",reason:"iterator did not have frame ready"};n.onWait();let t=await e.waitPromise();if(!n.shouldContinue())return{type:"not-satisfied",reason:"seek was superseded"};e={type:"got-frame-or-end",frame:t}}if("got-frame-or-end"===e.type){if(null===e.frame){if(s=!0,i)return{type:"satisfied",frame:i};return{type:"not-satisfied",reason:"iterator ended and did not have frame ready"}}let t=Q(e.frame.timestamp),o=await u({onWait:n.onWait,pendingFrameBehavior:n.pendingFrameBehavior,shouldContinue:n.shouldContinue});if("cancelled"===o.type)return{type:"not-satisfied",reason:"seek was superseded"};

860if("pending"===o.type)return{type:"not-satisfied",reason:"iterator did not have next frame ready"};if(t<=a&&o.timestamp>a)return{type:"satisfied",frame:e.frame};continue}throw Error("Unreachable")}};return{destroy:()=>{n=!0,ee(i),l!==i&&ee(l),i=null,l=null,a.closeIterator().catch(()=>{})},initialFrame:r,isDestroyed:()=>n,tryToSatisfySeek:f}},{runEffectChain:ea}=o.Xp,es=async({delayPlaybackHandleIfNotPremounting:e,canvas:t,context:n,drawDebugOverlay:a,logLevel:s,getOnVideoFrameCallback:i,videoTrack:l,getLoopSegmentMediaEndTimestamp:p,getStartTime:c,getIsLooping:d,getEffects:u,getEffectChainState:m,maxCanvasSinkFrameSize:y})=>{let g,E=0,x=null,b=0,F=null,v=null,w=null,U=!1,C=()=>{v=null},S=await l.getDisplayWidth(),L=await l.getDisplayHeight();t&&(t.width!==S||t.height!==L)&&(t.width=S,t.height=L);let T=y?.width??1/0,A=y?.height??1/0,M=T/S<Math.min(1,A/L)?{width:T,fit:"fill"}:A<L?{height:A,fit:"fill"}:{},I=new r.Yy(l,{poolSize:3,fit:"contain",alpha:!0,...M}),R=null,k=(g=new Map,{prewarmIteratorForLooping:({timeToSeek:e})=>{g.has(e)||g.set(e,et(I,e))},makeIteratorOrUsePrewarmed:e=>{let t=g.get(e);return t?(g.delete(e),t):et(I,e)},destroy:()=>{for(let e of g.values())e.closeIterator();g.clear()}}),P=async e=>{if(n&&t){let a=u(),s=m(t.width,t.height);if(a.length>0&&s&&t instanceof HTMLCanvasElement){let n=e.canvas;if(e.canvas.width!==t.width||e.canvas.height!==t.height){let a=(R??=new OffscreenCanvas(t.width,t.height)).getContext("2d");a.clearRect(0,0,t.width,t.height),a.drawImage(e.canvas,0,0,t.width,t.height),n=R}await ea({state:s,source:n,effects:a,output:t,width:t.width,height:t.height})}else n.clearRect(0,0,t.width,t.height),n.drawImage(e.canvas,0,0,t.width,t.height)}},B=async e=>{await P(e),v=e,b++,a();let t=i();t&&t(e.canvas),o.Xp.Log.trace({logLevel:s,tag:"@remotion/media"},`[MediaPlayer] Drew frame ${e.timestamp.toFixed(3)}s`)},D=async(t,n)=>{let a=[];try{C(),x?.destroy(),F=f(a,e(),0),w=t;let s=await en(t,k);if(E++,U)return void s.destroy();if(x=s,s.isDestroyed())return;if(n.isStale()){!x.isDestroyed()&&s.initialFrame&&await B(s.initialFrame);return}if(x.isDestroyed()||!s.initialFrame)return;await B(s.initialFrame)}catch(e){var s=e,o=1}finally{h(a,s,o)}},j=async({newTime:t,nonce:n,fps:a,playbackRate:s,isPlaying:o,continuousPlayback:r})=>{if(!x||null!==w&&Q(w)===Q(t))return;let i=w;d()&&p()-t<1&&k.prewarmIteratorForLooping({timeToSeek:c()});let l=null!==i&&t>=i&&(r??(({previousTime:e,newTime:t,fps:n,playbackRate:a,isPlaying:s})=>{if(!s||t<e)return!1;let o=Math.abs(a)/n;return Q(t-e)<=Q(o)})({previousTime:i,newTime:t,fps:a,playbackRate:s,isPlaying:o}))?"wait":"restart-iterator",u=x,m={handle:null};try{let a=await u.tryToSatisfySeek(t,{pendingFrameBehavior:l,onWait:()=>{m.handle??=e(),F=m.handle},shouldContinue:()=>!n.isStale()&&!u.isDestroyed()});if(n.isStale()||u.isDestroyed())return;if("satisfied"===a.type){await B(a.frame),w=t;return}m.handle?.unblock(),m.handle=null,F=null,await D(t,n)}finally{m.handle?.unblock(),F===m.handle&&(F=null)}};return{startVideoIterator:D,getVideoIteratorsCreated:()=>E,seek:j,destroy:()=>{U=!0,C(),k.destroy(),x?.destroy(),n&&t&&n.clearRect(0,0,t.width,t.height),F&&(F.unblock(),F=null),x=null},getVideoFrameIterator:()=>x,drawFrame:B,redrawCurrentFrame:async()=>{if(!v)return;await P(v),a();let e=i();e&&e(v.canvas),o.Xp.Log.trace({logLevel:s,tag:"@remotion/media"},`[MediaPlayer] Redrew frame ${v.timestamp.toFixed(3)}s with updated effects`)},getFramesRendered:()=>b}};class eo{tagType;canvas;context;src;logLevel;playbackRate;toneFrequency;globalPlaybackRate;audioStreamIndex;sharedAudioContext;audioIteratorManager=null;videoIteratorManager=null;playing=!1;lastSeekIntent=null;satisfiedSeekRevision=null;loop=!1;fps;trimBefore;trimAfter;sequenceDurationInFrames;sequenceOffset;totalDuration;debugOverlay=!1;nonceManager;onVideoFrameCallback=null;getEffects;getEffectChainState;maxCanvasSinkFrameSize;initializationPromise=null;premountAwareDelayPlayback;seekPromiseChain=Promise.resolve();terminalError=null;onError;constructor({canvas:e,src:t,logLevel:n,sharedAudioContext:a,loop:s,trimBefore:r,trimAfter:c,playbackRate:d,toneFrequency:u,globalPlaybackRate:m,audioStreamIndex:f,fps:h,debugOverlay:y,bufferState:g,isPremounting:E,isPostmounting:x,durationInFrames:b,onVideoFrameCallback:F,playing:v,sequenceOffset:w,credentials:U,requestInit:C,tagType:S,getEffects:L,getEffectChainState:T,maxCanvasSinkFrameSize:A,onError:M}){let I;this.canvas=e??null,this.src=t,this.logLevel=n,this.sharedAudioContext=a,this.playbackRate=d,this.toneFrequency=u,this.globalPlaybackRate=m,this.loop=s,this.trimBefore=r,this.trimAfter=c,this.audioStreamIndex=f,this.fps=h,this.debugOverlay=y,this.premountAwareDelayPlayback=new Y({bufferState:g,isPremounting:E,isPostmounting:x}),this.sequenceDurationInFrames=b,this.nonceManager=(I=0,{createAsyncOperation:()=>{let e=++I;return{isStale:()=>I!==e}}}),this.onVideoFrameCallback=F,this.playing=v,this.sequenceOffset=w;

860let{input:R,getDuration:k,release:P}=(({src:e,credentials:t,requestInit:n,logLevel:a})=>{let s=X(n),r=(({src:e,credentials:t,requestInit:n})=>o.Xp.getMediabunnyInputResourceKey({src:e,credentials:t??null,requestInitFingerprint:K(n),revision:null}))({src:e,credentials:t,requestInit:s}),c=q({credentials:t,requestInit:s}),d=o.Xp.globalMediaResourceManager.acquire({key:r,create:()=>{let t=new i.pd({source:new l.Ts(e,{handleUnhandledError:t=>{o.Xp.Log.warn({logLevel:a,tag:"@remotion/media"},`A speculative fetch for "${e}" failed:`,t)},maxCacheSize:G(a),...c?{requestInit:c}:void 0}),formats:p.XE});return{resource:t,dispose:()=>t.dispose()}}});return{input:d.resource,getDuration:()=>d.getOrCreateValue(o.Xp.MEDIABUNNY_DURATION_VALUE_KEY,()=>W(d.resource)),release:d.release}})({src:this.src,credentials:U,requestInit:C,logLevel:n});if(this.input=R,this.getDuration=k,this.releaseInput=P,this.tagType=S,this.getEffects=L,this.getEffectChainState=T,this.maxCanvasSinkFrameSize=A,this.onError=M,e){let t=e.getContext("2d",{alpha:!0});if(!t)throw Error("Could not get 2D context from canvas");this.context=t}else this.context=null}input;getDuration;releaseInput;disposed=!1;isDisposalError(){return this.disposed||!0===this.input.disposed}reportTerminalError(e){this.terminalError||this.isDisposalError()||(this.terminalError=e,this.playing=!1,this.audioIteratorManager?.destroyIterator(),this.videoIteratorManager?.destroy(),this.onError?.(e))}initialize(e,t,n){let a=this._initialize(e,t,n);return this.initializationPromise=a,this.seekPromiseChain=a,a}getStartTime(){return(this.trimBefore??0)/this.fps}getSequenceEndTimestamp(){return this.sequenceDurationInFrames/this.fps*this.playbackRate+this.getStartTime()}getSequenceDurationInSeconds(){return this.sequenceDurationInFrames/this.fps}getMediaEndTimestamp(){return(({mediaDurationInSeconds:e,ifNoMediaDuration:t,src:n,trimAfter:a,trimBefore:s,fps:r})=>{if(null===e&&"fail"===t)throw Error(`Could not determine duration of ${n}, but "loop" was set.`);return o.Xp.calculateMediaDuration({trimAfter:a,mediaDurationInFrames:e?e*r:1/0,playbackRate:1,trimBefore:s})/r+(s??0)/r})({mediaDurationInSeconds:this.totalDuration,ifNoMediaDuration:"fail",src:this.src,trimAfter:this.trimAfter,trimBefore:this.trimBefore,fps:this.fps})}getLoopSegmentMediaEndTimestamp(){return Math.min(this.getMediaEndTimestamp(),this.get

860SequenceEndTimestamp())}async _initialize(e,t,n){let a=[];try{f(a,this.delayPlaybackHandleIfNotPremounting(),0);try{if(this.isDisposalError())return{type:"disposed"};try{await this.input.getFormat()}catch(e){if(this.isDisposalError())return{type:"disposed"};if(V(e))throw e;return o.Xp.Log.error({logLevel:this.logLevel,tag:"@remotion/media"},`[MediaPlayer] Failed to recognize format for ${this.src}`,e),{type:"unknown-container-format"}}let[a,s,l]=await Promise.all([this.getDuration(),this.input.getPrimaryVideoTrack(),this.input.getAudioTracks()]);if(this.isDisposalError())return{type:"disposed"};this.totalDuration=a;let p=await J({videoTrack:s,audioTracks:l,audioStreamIndex:this.audioStreamIndex});if(!s&&!p)return{type:"no-tracks"};if(s&&"video"===this.tagType){if(await s.isLive())throw Error("Live streams are not currently supported by Remotion. Sorry! Source: "+this.src);if(await s.isRelativeToUnixEpoch())throw Error("Streams with UNIX timestamps are not currently supported by Remotion. Sorry! Source: "+this.src);if(!await s.canDecode()){if("prores"===s.codec)return{type:"cannot-decode-prores"};return{type:"cannot-decode"}}if(this.isDisposalError())return{type:"disposed"};this.videoIteratorManager=await es({videoTrack:s,delayPlaybackHandleIfNotPremounting:this.delayPlaybackHandleIfNotPremounting,context:this.context,canvas:this.canvas,getOnVideoFrameCallback:()=>this.onVideoFrameCallback,logLevel:this.logLevel,drawDebugOverlay:this.drawDebugOverlay,getLoopSegmentMediaEndTimestamp:()=>this.getLoopSegmentMediaEndTimestamp(),getStartTime:()=>this.getStartTime(),getIsLooping:()=>this.loop,getEffects:this.getEffects,getEffectChainState:this.getEffectChainState,maxCanvasSinkFrameSize:this.maxCanvasSinkFrameSize})}let c=this.getTrimmedTime(e);if(null===c)throw Error("should have asserted that the time is not null");if(p&&this.sharedAudioContext){if(await p.isLive())throw Error("Live streams are not currently supported by Remotion. Sorry! Source: "+this.src);if(await p.isRelativeToUnixEpoch())throw Error("Streams with UNIX timestamps are not currently supported by Remotion. Sorry! Source: "+this.src);if(!await p.canDecode())return{type:"cannot-decode"};if(this.isDisposalError())return{type:"disposed"};this.audioIteratorManager=(({audioTrack:e,delayPlaybackHandleIfNotPremounting:t,sharedAudioContext:n,getSequenceEndTimestamp:a,getSequenceDurationInSeconds:s,getMediaEndTimestamp:l,getStartTime:p,initialMuted:c,initialVolume:d,toneFrequency:u,drawDebugOverlay:m,onError:f})=>{let h=c,y=Math.max(0,d),g=u,E=null,x=n.audioContext.createGain();x.gain.value=h?0:y,x.connect(n.gainNode);let b=new r.O8(e),F=null,v=null,U=0,C=0,S=null,L=()=>{S&&(S.unblock(),S=null)},T=[],A=({buffer:e,mediaTimestamp:t,originalUnloopedMediaTimestamp:a,sourceOffsetInSeconds:s,sourceDurationInSeconds:r,playbackRate:i,scheduleAudioNode:l,logLevel:p})=>{if(!F)throw Error("Audio buffer iterator not found");if(h)return;let c=n.audioContext.createBufferSource();c.buffer=e,c.playbackRate.value=i,c.connect(x);let d=l(c,t,a,s,r);if("not-started"===d.type){o.Xp.Log.verbose({logLevel:p,tag:"audio-scheduling"},"not started, disconnected: %s %s",t.toFixed(3),e.duration.toFixed(3)),c.disconnect();return}F.addQueuedAudioNode({node:c,timestamp:t,buffer:e,sourceDurationInSeconds:r,scheduledTime:d.scheduledTime,playbackRate:i,scheduledAtAnchor:n.audioSyncAnchor.value})},M=({iterator:e,nonce:t,getTargetTime:n,playbackRate:s,scheduleAudioNode:o,onScheduled:r,onDestroyed:l,onDone:c,logLevel:d,currentTime:u,getAudioContextCurrentTimeMockedInTest:y})=>{(({getPriority:e,fn:t,onDone:n,onError:a})=>{P.push({getPriority:e,fn:t,onDone:n,onError:a}),N()})({getPriority:()=>{if(e.isDestroyed())return l(),null;let t=e.guessNextTimestamp(),a=n(t,u);return null===a?null:w({mediaTimestamp:t,targetTime:a,currentTime:u,sequenceStartTime:p()})-y()},fn:()=>e.getNextFn(),onDone:(i,f)=>{if(e.isDestroyed()){f(),l();return}if(!i.value){f(),c();return}r(i.value.sourceDurationInSeconds,i.value.timelineTimestamp);for(let e=T.length-1;e>=0;e--){let t=T[e];t.remaining--,t.remaining<=0&&(t.resolve(),T.splice(e,1))}(({buffer:e,playbackRate:t,scheduleAudioNode:n,logLevel:s})=>{if(h)return;let o=p(),r=a();if(e.timelineTimestamp+e.sourceDurationInSeconds<=o||e.timelineTimestamp>=r)return;let i=Math.max(e.timelineTimestamp,o),l=Math.min(e.timelineTimestamp+e.sourceDurationInSeconds,r);C+=Math.max(0,l-i),A({buffer:e.buffer.buffer,mediaTimestamp:e.timelineTimestamp,playbackRate:t,scheduleAudioNode:n,logLevel:s,originalUnloopedMediaTimestamp:e.buffer.timestamp,sourceOffsetInSeconds:e.sourceOffsetInSeconds,sourceDurationInSeconds:Math.min(e.sourceDurationInSeconds,r-e.timelineTimestamp)}),m()})({buffer:i.value,playbackRate:s,scheduleAudioNode:o,logLevel:d}),M({iterator:e,nonce:t,getTargetTime:n,playbackRate:s,scheduleAudioNode:o,onScheduled:r,onDestroyed:l,onDone:c,logLevel:d,currentTime:u,getAudioContextCurrentTimeMockedInTest:y}),f()},onError:t=>{t instanceof i.QO||t instanceof k||e.isDestroyed()?l():(e.destroy(),l(),f(t))}})},I=({nonce:e,playbackRate:a,startFromSecond:o,unloopedStartFromSecond:r,scheduleAudioNode:i,getTargetTime:c,logLevel:d,loop:u,unscheduleAudioNode:m,getAudioContextCurrentTimeMockedInTest:f})=>{if(h)return;let y=l();if(o>=y)return;F?.destroy(),L();let E=t();S=E,v={unloopedStartInSeconds:r,mediaStartInSeconds:o};let x=o+s()*a,w=R({iterator:u?$({audioSink:b,seekTimeInSeconds:o,loopStartInSeconds:p(),segmentEndInSeconds:y,maximumContinuousTimestamp:x}):H({audioSink:b,timeToSeek:o,maximumTimestamp:y}

860),toneFrequency:g}),C=(({startFromSecond:e,iterator:t,unscheduleAudioNode:n})=>{let a=!1,s=[],o=-1/0;return{destroy:()=>{for(let{node:e}of s){n(e);try{e.stop()}catch{}}s.length=0,a=!0,t.return().catch(()=>{})},getNextFn:async()=>{let e=await t.next();return e.value&&(o=Math.max(o,e.value.timelineTimestamp+e.value.sourceDurationInSeconds)),e},isDestroyed:()=>a,addQueuedAudioNode:e=>{s.push(e)},guessNextTimestamp:()=>Number.isFinite(o)?o:e,getQueuedPeriod:()=>{let e=-1/0,t=1/0;for(let n of s)e=Math.max(e,n.timestamp+n.sourceDurationInSeconds),t=Math.min(t,n.timestamp);return Number.isFinite(t)&&Number.isFinite(e)?{from:t,until:e}:null}}})({startFromSecond:o,iterator:w,unscheduleAudioNode:m});U++,F=C;let T=o,A=!1,I=()=>{A||(A=!0,E.unblock())};M({iterator:C,nonce:e,getTargetTime:c,playbackRate:a,scheduleAudioNode:i,onScheduled:(e,t)=>{(T=Math.max(T,t+e))-o>=.1&&I()},onDestroyed:()=>{I()},onDone:()=>{I()},logLevel:d,currentTime:n.audioContext.currentTime,getAudioContextCurrentTimeMockedInTest:f})};return{startAudioIterator:I,getAudioBufferIterator:()=>F,getCurrentAnchor:()=>v,destroyIterator:()=>{F?.destroy(),F=null,v=null,E=null,L()},seek:({newTime:e,unloopedNewTime:t,nonce:a,playbackRate:s,localPlaybackRate:o,scheduleAudioNode:r,getTargetTime:i,logLevel:l,loop:p,trimBefore:c,trimAfter:d,sequenceOffset:u,sequenceDurationInFrames:m,fps:f,getAudioContextCurrentTimeMockedInTest:y})=>{if(!a.isStale()&&(null===E||E.time!==e||E.playbackRate!==s||E.trimBefore!==c||E.trimAfter!==d||E.sequenceOffset!==u||E.sequenceDurationInFrames!==m||E.loop!==p||E.fps!==f||!h&&(!F||F.isDestroyed()))&&(E={time:e,playbackRate:s,trimBefore:c,trimAfter:d,sequenceOffset:u,sequenceDurationInFrames:m,loop:p,fps:f},!h)){if(F&&!F.isDestroyed()){let a=p&&v?_({anchor:v,unloopedTimeInSeconds:t,playbackRate:o}):e,s=F.getQueuedPeriod(),r=s?{from:s.from-.1-n.audioContext.baseLatency-n.audioContext.outputLatency,until:s.until}:null;if(r&&a>=r.from&&a<r.until)return void N();let i=F.guessNextTimestamp();if(p&&null!==v&&t>=v.unloopedStartInSeconds&&i>=a||i<a&&1>Math.abs(i-a))return void N()}I({nonce:a,playbackRate:s,startFromSecond:e,unloopedStartFromSecond:t,scheduleAudioNode:r,getTargetTime:i,logLevel:l,loop:p,unscheduleAudioNode:n.unscheduleAudioNode,getAudioContextCurrentTimeMockedInTest:y})}},getAudioIteratorsCreated:()=>U,getTotalAudioScheduledInSeconds:()=>C,setMuted:e=>{h!==e&&(h=e,x.gain.value=h?0:y,h&&(F?.destroy(),F=null,v=null,L()),E=null)},setVolume:e=>{y=Math.max(0,e),x.gain.value=h?0:y},setToneFrequency:e=>{g=e},scheduleAudioChunk:A,waitForNScheduledNodes:e=>e<=0?Promise.resolve():new Promise(t=>{T.push({remaining:e,resolve:t})})}})({audioTrack:p,delayPlaybackHandleIfNotPremounting:this.delayPlaybackHandleIfNotPremounting,sharedAudioContext:this.sharedAudioContext,getMediaEndTimestamp:()=>this.getMediaEndTimestamp(),getSequenceEndTimestamp:()=>this.getSequenceEndTimestamp(),getStartTime:()=>this.getStartTime(),initialMuted:t,initialVolume:n,toneFrequency:this.toneFrequency,drawDebugOverlay:this.drawDebugOverlay,onError:e=>this.reportTerminalError(e),getSequenceDurationInSeconds:()=>this.getSequenceDurationInSeconds()})}let d=this.nonceManager.createAsyncOperation();try{await Promise.all([this.audioIteratorManager?this.audioIteratorManager.startAudioIterator({nonce:d,playbackRate:this.playbackRate*this.globalPlaybackRate,startFromSecond:c,unloopedStartFromSecond:e,scheduleAudioNode:this.scheduleAudioNode,getTargetTime:this.getTargetTime,logLevel:this.logLevel,loop:this.loop,unscheduleAudioNode:this.sharedAudioContext.unscheduleAudioNode,getAudioContextCurrentTimeMockedInTest:()=>this.sharedAudioContext.audioContext.currentTime}):Promise.resolve(),this.videoIteratorManager?this.videoIteratorManager.startVideoIterator(c,d):Promise.resolve()])}catch(e){if(this.isDisposalError())return{type:"disposed"};o.Xp.Log.error({logLevel:this.logLevel,tag:"@remotion/media"},"[MediaPlayer] Failed to start audio and video iterators",e)}return{type:"success",durationInSeconds:a}}catch(e){if(V(e))return o.Xp.Log.error({logLevel:this.logLevel,tag:"@remotion/media"},`[MediaPlayer] Network/CORS error for ${this.src}`,e),{type:"network-error"};throw o.Xp.Log.error({logLevel:this.logLevel,tag:"@remotion/media"},"[MediaPlayer] Failed to initialize",e),e}}catch(e){var s=e,l=1}finally{h(a,s,l)}}seekToWithQueue=async(e,t,n)=>{let a=this.nonceManager.createAsyncOperation();await this.seekPromiseChain,this.seekPromiseChain=this.seekToDoNotCallDirectly(e,t,a,n),await this.seekPromiseChain};async seekTo(e,t){if(this.terminalError||this.isDisposalError())return;let n=this.getTrimmedTime(e);

860if(null===n)throw Error("should have asserted that the time is not null");this.lastSeekIntent=t,"discontinuity"===t&&(this.satisfiedSeekRevision=null),await this.seekToWithQueue(n,e,t)}async seekToDoNotCallDirectly(e,t,n,a){if(!(n.isStale()||this.terminalError||this.isDisposalError()))try{await Promise.all([this.videoIteratorManager?.seek({newTime:e,nonce:n,fps:this.fps,playbackRate:this.playbackRate,isPlaying:this.playing,continuousPlayback:null===a?null:"discontinuity"!==a&&a.playing&&a.revision===this.satisfiedSeekRevision}),this.audioIteratorManager?.seek({newTime:e,unloopedNewTime:t,nonce:n,playbackRate:this.playbackRate*this.globalPlaybackRate,localPlaybackRate:this.playbackRate,getTargetTime:this.getTargetTime,logLevel:this.logLevel,loop:this.loop,trimBefore:this.trimBefore,trimAfter:this.trimAfter,sequenceOffset:this.sequenceOffset,sequenceDurationInFrames:this.sequenceDurationInFrames,fps:this.fps,scheduleAudioNode:this.scheduleAudioNode,getAudioContextCurrentTimeMockedInTest:()=>this.sharedAudioContext.audioContext.currentTime})]),n.isStale()||null===a||"discontinuity"===a||(this.satisfiedSeekRevision=a.revision)}catch(e){if(this.isDisposalError())return;this.reportTerminalError(e)}}play(){this.playing||this.terminalError||(this.playing=!0,this.drawDebugOverlay())}delayPlaybackHandleIfNotPremounting=()=>this.premountAwareDelayPlayback.createHandle();pause(){this.playing&&(this.playing=!1,this.drawDebugOverlay())}setMuted(e){this.audioIteratorManager?.setMuted(e)}setVolume(e){this.audioIteratorManager&&this.audioIteratorManager.setVolume(e)}getTrimmedTime(e){return y({unloopedTimeInSeconds:e,playbackRate:this.playbackRate,loop:this.loop,trimBefore:this.trimBefore,trimAfter:this.trimAfter,mediaDurationInSeconds:this.totalDuration??null,fps:this.fps,ifNoMediaDuration:"infinity",src:this.src})}async setTrimRange(e,t,n){(this.trimBefore!==e||this.trimAfter!==t)&&(this.trimBefore=e,this.trimAfter=t,this.audioIteratorManager?.destroyIterator(),await this.seekTo(n,"discontinuity"))}setDebugOverlay(e){this.debugOverlay=e}async setPlaybackRate(e,t){this.playbackRate!==e&&(this.playbackRate=e,this.audioIteratorManager?.destroyIterator(),await this.seekTo(t,"discontinuity"))}async setToneFrequency(e,t){this.toneFrequency!==e&&(this.toneFrequency=e,this.audioIteratorManager&&(this.audioIteratorManager.setToneFrequency(e),this.audioIteratorManager.destroyIterator(),await this.seekTo(t,"discontinuity")))}async setGlobalPlaybackRate(e,t){this.globalPlaybackRate!==e&&(this.globalPlaybackRate=e,this.audioIteratorManager?.destroyIterator(),await this.seekTo(t,"discontinuity"))}async setFps(e,t){this.fps!==e&&(this.fps=e,this.audioIteratorManager?.destroyIterator(),await this.seekTo(t,"discontinuity"))}setIsPremounting(e){this.premountAwareDelayPlayback.setIsPremounting(e),N()}setIsPostmounting(e){this.premountAwareDelayPlayback.setIsPostmounting(e),N()}async setLoop(e,t){this.loop!==e&&(this.loop=e,this.audioIteratorManager?.destroyIterator(),await this.seekTo(t,"discontinuity"))}async setSequenceOffset(e,t){this.sequenceOffset!==e&&(this.sequenceOffset=e,this.audioIteratorManager?.destroyIterator(),await this.seekTo(t,"discontinuity"))}async setSequenceDurationInFrames(e,t){this.sequenceDurationInFrames!==e&&(this.sequenceDurationInFrames=e,await this.seekTo(t,"discontinuity"))}async dispose(){if(!this.disposed){if(this.disposed=!0,this.initializationPromise)try{await this.initializationPromise}catch{}this.nonceManager.createAsyncOperation(),this.videoIteratorManager?.destroy(),this.audioIteratorManager?.destroyIterator(),this.releaseInput()}}getTargetTime=(e,t)=>{if(!this.sharedAudioContext)throw Error("Shared audio context not found");let n=(t-this.sharedAudioContext.audioSyncAnchor.value)*this.globalPlaybackRate-this.sequenceOffset,a=this.loop?this.audioIteratorManager?.getCurrentAnchor()??null:null,s=a?_({anchor:a,unloopedTimeInSeconds:n,playbackRate:this.playbackRate}):this.getTrimmedTime(n);return null===s?null:(e-s)/(this.playbackRate*this.globalPlaybackRate)};scheduleAudioNode=(e,t,n,a,s)=>{if(!this.sharedAudioContext)throw Error("Shared audio context not found");let o=this.getTargetTime(t,this.sharedAudioContext.audioContext.currentTime),r=this.playbackRate*this.globalPlaybackRate;if(null===o)return{type:"not-started",reason:"no target for"+t.toFixed(3)+","+this.sharedAudioContext.audioContext.currentTime.toFixed(3)};let i=this.getStartTime(),l=(({mediaTimestamp:e,targetTime:t,sequenceStartTime:n,combinedPlaybackRate:a,sourceStartOffsetInSeconds:s})=>s+(e<n?n-e:0)+(t<0?-t*a:0))({mediaTimestamp:t,targetTime:o,sequenceStartTime:i,combinedPlaybackRate:r,sourceStartOffsetInSeconds:a}),p=(({sourceDurationInSeconds:e,sourceOffsetInSeconds:t,offset:n})=>Math.max(0,e-(n-t)))({sourceDurationInSeconds:s,sourceOffsetInSeconds:a,offset:l}),c=w({mediaTimestamp:t,targetTime:o,sequenceStartTime:i,currentTime:this.sharedAudioContext.audioContext.currentTime});return this.sharedAudioContext.scheduleAudioNode({node:e,mediaTimestamp:t,sourceOffset:a,scheduledTime:c,duration:p,offset:l,originalUnloopedMediaTimestamp:n})};setVideoFrameCallback(e){this.onVideoFrameCallback=e}async redrawVideoEffects(){await this.videoIteratorManager?.redrawCurrentFrame()}drawDebugOverlay=()=>{this.debugOverlay&&this.context&&this.canvas&&(({context:e,audioTime:t,audioContextState:n,audioSyncAnchor:a,playing:s,audioIteratorManager:o,videoIteratorManager:r,playbackRate:i})=>{let l=a?.value??0,p=["Debug overlay",`Video iterators created: ${r?.getVideoIteratorsCreated()}`,`Audio iterators created: ${o?.getAudioIteratorsCreated()}`,`Audio scheduled: ${(o?.getTotalAudioScheduledInSeconds()??0).toFixed(3)}s`,`Frames rendered: ${r?.getFramesRendered()}`,`Audio context state: ${n}`,t?`Audio time: ${((t-l)*i).toFixed(3)}

860s`:null].filter(Boolean);if(o){let e=o.getAudioBufferIterator()?.getQueuedPeriod();if(e){let n=t?` (${(e.until-(t-l)*i).toFixed(3)}s ahead)`:"";p.push(`Audio queued until ${e.until.toFixed(3)}s${n}`)}p.push(`Playing: ${s}`)}let c=30*p.length+20;e.fillStyle="rgba(0, 0, 0, 1)",e.fillRect(20,20,600,c),e.fillStyle="white",e.font="24px sans-serif",e.textBaseline="top";for(let t=0;t<p.length;t++)e.fillText(p[t],30,30+30*t)})({context:this.context,audioTime:this.sharedAudioContext?.audioContext.currentTime??null,audioContextState:this.sharedAudioContext?.audioContext.state??null,audioSyncAnchor:this.sharedAudioContext?.audioSyncAnchor??null,audioIteratorManager:this.audioIteratorManager,playing:this.playing,videoIteratorManager:this.videoIteratorManager,playbackRate:this.playbackRate*this.globalPlaybackRate})};audioSyncAnchorChanged=async e=>{if(!this.audioIteratorManager)return;this.audioIteratorManager.destroyIterator();let t=this.lastSeekIntent;await this.seekTo(e,null!==t&&"discontinuity"!==t?{...t,playing:!0}:t)}}var er=({onError:e,error:t,disallowFallback:n,isClientSideRendering:a,clientSideError:s})=>{let o=e?.(t);return a?["fail",s]:o?[o,t]:n?["fail",t]:["fallback",t]},ei=({mediaPlayerRef:e,mediaPlayerReady:t,currentTimeRef:n,playing:a,isPlayerBuffering:r,frame:i,trimBefore:l,trimAfter:p,effectiveMuted:c,userPreferredVolume:d,playbackRate:u,toneFrequency:m,globalPlaybackRate:f,fps:h,sequenceOffset:y,loop:g,durationInFrames:E,isPremounting:x,isPostmounting:b,currentTime:F,logLevel:v,label:w})=>{let U=(0,s.useContext)(o.Xp.SharedAudioContext);(0,s.useLayoutEffect)(()=>{let t=e.current;t&&(a&&!r?t.play():t.pause())},[r,a,v,t,i,e]),(0,s.useLayoutEffect)(()=>{if(!U)return;let{remove:t}=U.audioSyncAnchorEmitter.subscribe(t=>{"changed"===t&&e.current?.audioSyncAnchorChanged(n.current).catch(()=>{})});return()=>{t()}},[U,e,n]),(0,s.useLayoutEffect)(()=>{let a=e.current;a&&t&&a.setTrimRange(l,p,n.current)},[p,l,t,e,n]),(0,s.useLayoutEffect)(()=>{let n=e.current;n&&t&&n.setMuted(c)},[c,t,e]),(0,s.useLayoutEffect)(()=>{let n=e.current;n&&t&&n.setVolume(d)},[d,t,e]),(0,s.useLayoutEffect)(()=>{let a=e.current;a&&t&&a.setPlaybackRate(u,n.current)},[u,t,e,n]),(0,s.useLayoutEffect)(()=>{let a=e.current;a&&t&&a.setToneFrequency(m,n.current)},[m,t,e,n]),(0,s.useLayoutEffect)(()=>{let a=e.current;a&&t&&a.setGlobalPlaybackRate(f,n.current)},[f,t,e,n]),(0,s.useLayoutEffect)(()=>{let a=e.current;a&&t&&a.setLoop(g,n.current)},[g,t,e,n]),(0,s.useLayoutEffect)(()=>{let a=e.current;a&&t&&a.setSequenceDurationInFrames(E,n.current)},[E,t,e,n]),(0,s.useLayoutEffect)(()=>{let t=e.current;t&&t.setIsPremounting(x)},[x,t,e]),(0,s.useLayoutEffect)(()=>{let t=e.current;t&&t.setIsPostmounting(b)},[b,t,e]),(0,s.useLayoutEffect)(()=>{let a=e.current;a&&t&&a.setFps(h,n.current)},[h,t,e,n]),(0,s.useLayoutEffect)(()=>{let a=e.current;a&&t&&a.setSequenceOffset(y,n.current)},[y,t,e,n]);let{seek:C}=(0,s.useContext)(o.Xp.SetTimelineContext),S=C?.revision.current??null,L=(0,s.useRef)(null);(0,s.useLayoutEffect)(()=>{let n=e.current;if(!n||!t)return;let s=L.current;(s?.player!==n||s.time!==F||s.revision!==S||s.isPremounting!==x||s.muted!==c)&&(L.current={player:n,time:F,revision:S,isPremounting:x,muted:c},n.seekTo(F,null===S?null:{revision:S,playing:a}).catch(()=>{}),o.Xp.Log.trace({logLevel:v,tag:"@remotion/media"},`[${w}] Updating target time to ${F.toFixed(3)}s`))},[F,c,x,v,t,w,e,a,S])},el=({muted:e,volume:t})=>{let[n]=o.Xp.usePlayerMutedState(),a=o.Xp.useIsInsideNonPremountFreeze();return e||n||t<=0||a},{useUnsafeVideoConfig:ep,SharedAudioContext:ec,useMediaVolumeState:ed,useFrameForVolumeProp:eu,evaluateVolume:em,warnAboutTooHighVolume:ef,usePreload:eh,SequenceContext:ey,usePlaying:eg,useBuffering:eE,useMediaAudioState:ex}=o.Xp,eb=({src:e,playbackRate:t,logLevel:n,muted:a,volume:r,loopVolumeCurveBehavior:i,loop:l,trimAfter:p,trimBefore:d,name:u,showInTimeline:m,_remotionInternalStack:f,disallowFallbackToHtml5Audio:h,toneFrequency:y,audioStreamIndex:E,fallbackHtml5AudioProps:x,onError:b,credentials:F,requestInit:v,setMediaDurationInSeconds:w,style:U})=>{let C=ep(),S=(0,o.UC)(),L=(0,s.useRef)(null),T=(0,s.useRef)(d),A=(0,s.useRef)(p),M=(0,s.useRef)(y??1),[I]=(0,s.use

860State)(v),[R,k]=(0,s.useState)(!1),[P,B]=(0,s.useState)(null),[D,j]=(0,s.useState)(null),[N,H]=(0,s.useState)(!1),$=eg(),{playbackRate:_}=o.Xp.usePlaybackRate(),W=(0,s.useContext)(ec),z=(0,o.Fx)(),[O]=ed(),G=eu(i??"repeat"),X=l&&C?g({behavior:i,loop:l,assetDurationInSeconds:P,fps:C.fps,frame:S,startsAt:G-S,playbackRate:t,trimBefore:d,trimAfter:p}):G,K=em({frame:X,volume:r,mediaVolume:O});if(ef(K),!C)throw Error("No video config found");if(!e)throw TypeError("No `src` was passed to <NewAudioForPreview>.");let q=(0,s.useContext)(ey),J=q?.playbackRate??1,V=t*J,Y=C.durationInFrames/J,Q=S/J/C.fps,Z=(0,s.useRef)(Q);Z.current=Q;let ee=eh(e),et=!!q?.premounting,en=!!q?.postmounting,ea=(q?.absoluteFrom??0)/C.fps,{isMutedForPlayback:es}=ex({muted:a,volume:K,audioEnabled:!0}),eb=el({muted:a,volume:K}),eF=eE(),ev=(0,s.useRef)($&&!eF),ew=(0,s.useRef)(et),eU=(0,s.useRef)(en),eC=(0,s.useRef)(_),eS=(0,s.useRef)(V),eL=(0,s.useRef)(eb),eT=(0,s.useRef)(K),eA=(0,s.useRef)(Y),eM=(0,s.useRef)(ea),eI=(0,s.useRef)(b);eI.current=b;let eR=(0,s.useRef)(h);if(eR.current=h,ei({mediaPlayerRef:L,mediaPlayerReady:R,currentTimeRef:Z,playing:$,isPlayerBuffering:eF,frame:S,trimBefore:d,trimAfter:p,effectiveMuted:eb,userPreferredVolume:K,playbackRate:V,toneFrequency:y??1,globalPlaybackRate:_,fps:C.fps,sequenceOffset:ea,loop:l,durationInFrames:Y,isPremounting:et,isPostmounting:en,currentTime:Q,logLevel:n,label:"AudioForPreview"}),(0,s.useEffect)(()=>{if(!W||!W.audioContext)return;let{audioContext:e,gainNode:t,audioSyncAnchor:a,scheduleAudioNode:s,unscheduleAudioNode:r}=W;if(t){try{let i=new eo({src:ee,logLevel:n,sharedAudioContext:{audioContext:e,gainNode:t,audioSyncAnchor:a,scheduleAudioNode:s,unscheduleAudioNode:r},loop:l,trimAfter:A.current,trimBefore:T.current,fps:C.fps,canvas:null,playbackRate:e

860S.current,toneFrequency:M.current,audioStreamIndex:E??null,debugOverlay:!1,bufferState:z,isPostmounting:eU.current,isPremounting:ew.current,globalPlaybackRate:eC.current,durationInFrames:eA.current,onVideoFrameCallback:null,playing:ev.current,sequenceOffset:eM.current,credentials:F,requestInit:I,tagType:"audio",getEffects:()=>[],getEffectChainState:()=>null,maxCanvasSinkFrameSize:null,onError:e=>{let[t,n]=er({onError:eI.current,error:e,disallowFallback:eR.current,isClientSideRendering:!1,clientSideError:e});"fallback"===t?H(!0):j(n)}});L.current=i,i.initialize(Z.current,eL.current,eT.current).then(e=>{if("disposed"===e.type)return;let t=(e,t)=>{let[a,s]=er({onError:b,error:e,disallowFallback:h,isClientSideRendering:!1,clientSideError:e});if("fail"===a)throw s;o.Xp.Log.warn({logLevel:n,tag:"@remotion/media"},t),H(!0)};if("unknown-container-format"===e.type)return void t(Error(`Unknown container format ${ee}.`),`Unknown container format for ${ee} (Supported formats: https://www.remotion.dev/docs/mediabunny/formats), falling back to <Html5Audio>`);if("network-error"===e.type)return void t(Error(`Network error fetching ${ee}.`),`Network error fetching ${ee}, falling back to <Html5Audio>`);if("cannot-decode"===e.type)return void t(Error(`Cannot decode ${ee}.`),`Cannot decode ${ee}, falling back to <Html5Audio>`);if("no-tracks"===e.type)return void t(Error(`No video or audio tracks found for ${ee}.`),`No video or audio tracks found for ${ee}, falling back to <Html5Audio>`);if("cannot-decode-prores"===e.type)throw Error(`Encountered ProRes media for ${ee}. But this should never happen, since you used the <Audio> tag. Please report this as a bug.`);"success"===e.type&&(k(!0),w(e.durationInSeconds),B(e.durationInSeconds),o.Xp.Log.trace({logLevel:n,tag:"@remotion/media"},"[AudioForPreview] MediaPlayer initialized successfully"))}).catch(e=>{let[t,a]=er({onError:b,error:e,disallowFallback:h,isClientSideRendering:!1,clientSideError:e});if("fail"===t)throw a;o.Xp.Log.error({logLevel:n,tag:"@remotion/media"},"[AudioForPreview] Failed to initialize MediaPlayer",e),H(!0)})}catch(a){let[e,t]=er({error:a,onError:b,disallowFallback:h,isClientSideRendering:!1,clientSideError:a});if("fail"===e)throw t;o.Xp.Log.error({logLevel:n,tag:"@remotion/media"},"[AudioForPreview] MediaPlayer initialization failed",t),H(!0)}return()=>{L.current&&(o.Xp.Log.trace({logLevel:n,tag:"@remotion/media"},"[AudioForPreview] Disposing MediaPlayer"),L.current.dispose(),L.current=null),k(!1),H(!1)}}},[ee,n,W,l,C.fps,E,h,z,b,F,I,w]),D)throw D;return N&&!h?(0,c.jsx)(o.fP,{src:e,muted:es,volume:r,startFrom:d,endAt:p,playbackRate:t,loopVolumeCurveBehavior:i,name:u,loop:l,showInTimeline:m,style:U??void 0,_remotionInternalStack:f??void 0,toneFrequency:y,audioStreamIndex:E,pauseWhenBuffering:x?.pauseWhenBuffering,crossOrigin:x?.crossOrigin,...x}):null},eF=({loop:e=!1,src:t,logLevel:n,muted:a,name:r,volume:i,loopVolumeCurveBehavior:l,playbackRate:p=1,trimAfter:d,trimBefore:u,showInTimeline:m,_remotionInternalStack:f,disallowFallbackToHtml5Audio:h,toneFrequency:g,audioStreamIndex:E,fallbackHtml5AudioProps:x,onError:b,credentials:F,requestInit:v,setMediaDurationInSeconds:w,style:U})=>{let C=eh(t),S=o.Xp.useLogLevel(),L=(0,o.UC)(),T=(0,o.Bk)(),A=L/T.fps;if(!(0,s.useMemo)(()=>null!==y({unloopedTimeInSeconds:A,playbackRate:p,loop:e,trimBefore:u,trimAfter:d,mediaDurationInSeconds:1/0,fps:T.fps,ifNoMediaDuration:"infinity",src:t}),[A,p,t,d,u,T.fps,e]))return null;if(!w)throw Error("setMediaDurationInSeconds is required");return(0,c.jsx)(eb,{audioStreamIndex:E,src:C,playbackRate:p,logLevel:n??S,muted:a??!1,volume:i??1,loopVolumeCurveBehavior:l??"repeat",loop:e,trimAfter:d,trimBefore:u,name:r,showInTimeline:m??!0,_remotionInternalStack:f,disallowFallbackToHtml5Audio:h??!1,toneFrequency:g,onError:b,credentials:F,requestInit:v,fallbackHtml5AudioProps:x,setMediaDurationInSeconds:w,style:U})},ev=()=>{let e=Promise.resolve(void 0);return t=>{let n=e.then(()=>t());return e=n.then(()=>{},()=>{}),n}},ew={u8:1,s16:2,s32:4,f32:4,"u8-planar":1,"s16-planar":2,"s32-planar":4,"f32-planar":4},eU=e=>e.numberOfFrames*e.numberOfChannels*ew[e.format],eC={},eS=null,eL=async e=>{try{return await e.getFormat()}catch(e){if(V(e))return"network-error";return null}},eT=e=>0===e.length?"(none)":1===e.length?e[0].toFixed(3):`${e[0].toFixed(3)}...${e[e.length-1].toFixed(3)}`,eA=e=>null===e.format?e.codedHeight*e.codedWidth*3:e.allocationSize(),eM=async({logLevel:e,src:t,videoSampleSink:n,initialTimestampRequest:a})=>{let s=n.samples(Q(a)),r={},i=[],l=!1,p=Date.now(),c=0,d=0,u=e=>{let t=i.indexOf(e);if(-1===t)throw Error(`Frame ${e} not found`);let n=i[t+1];return void 0===n?null:n-e},m=e=>{let t=u(e);return null!==t?t:l?r[e].duration??0:null},f=e=>{c-=eA(r[e]),i.splice(i.indexOf(e),1),r[e].close(),delete r[e]},h=({logLevel:e,timestampInSeconds:n})=>{let a=[];for(let e of i.slice()){if(l&&e===i[i.length-1]||!r[e])continue;let t=m(e);null!==t&&e+t<n&&(f(e),a.push(e))}a.length>0&&o.Xp.Log.verbose({logLevel:e,tag:"@remotion/media"},`Deleted ${a.length} frame${1===a.length?"":"s"} ${eT(a)} for src ${t} because it is lower than ${n}. Remaining: ${eT(i)}`)},y=e=>{let t=i[i.length-1];if(void 0===t)return!1;if(!r[t]||Q(t)>=Q(e))return!0;let n=m(t);return null!==n&&Q(t+n)>Q(e)},g=(e,t)=>{r[e.timestamp]&&f(e.timestamp),r[e.timestamp]=e,i.push(e.timestamp),c+=eA(e),p=Date.now(),o.Xp.Log.trace({logLevel:t,tag:"@remotion/media"},`Added frame at ${e.timestamp}sec to bank`)},E=async(t,n,a)=>{for(;!y(t);){h({logLevel:e,timestampInSeconds:t-eI(a)});let o=await s.next();if(o.value&&g(o.value,n),o.done){l=!0;break}h({logLevel:e,timestampInSeconds:t-eI(a)})}p=Date.now()},x=async(t,n)=>{p=Date.now();let a=t;l&&Q(a)>Q(i[i.length-1])&&(a=i[i.length-1]),await E(a,e,n);for(let e=i.length-1;e>=0;e--){let t=r[i[e]];if(!t)return null;if(Q(t.timestamp)<=Q(a)||.001>=Math.abs(t.timestamp-a))return t}return r[i[0]]??null},b=async(e,t)=>await x(e,t)!==null,F=ev(),v=await s.next();if(!v.value)throw Error("No first frame found");let w=v.value.timestamp;o.Xp.Log.verbose({logLevel:e,tag:"@remotion/media"},`Creating keyframe bank from ${w}sec`),g(v.value,e);let U=()=>

860{if(0===i.length)return null;let e=i[0],t=i[i.length-1],n=u(t)??r[t].duration??0;return{firstTimestamp:e,lastTimestamp:t+n}};return{getFrameFromTimestamp:(e,t)=>(d++,F(()=>x(e,t)).finally(()=>{d--})),prepareForDeletion:(e,t)=>{let n=U();n&&o.Xp.Log.verbose({logLevel:e,tag:"@remotion/media"},`Preparing for deletion (${t}) of keyframe bank from ${n?.firstTimestamp}sec to ${n?.lastTimestamp}sec`);let a=0;for(let e of i.slice())r[e]&&(f(e),a++);return s.return(),i.length=0,{framesDeleted:a}},hasTimestampInSecond:(e,t)=>(d++,F(()=>b(e,t)).finally(()=>{d--})),addFrame:g,deleteFramesBeforeTimestamp:h,src:t,getOpenFrameCount:()=>({size:c,timestamps:i}),getLastUsed:()=>p,isBusy:()=>d>0,canSatisfyTimestamp:e=>{if(0===i.length)return!1;let t=Q(e),n=Q(i[0]),s=U();if(!s)return!1;let o=Q(i[i.length-1]),r=Q(s.lastTimestamp);return!!l&&t>o||(t<n?n===w&&t>=a:!(t-3>r))},getRangeOfTimestamps:U}},eI=e=>6/e,eR=()=>{let e,t,n,a=(e={},t={},n=!1,{getSink:(a,s,c,d)=>{if(n)return Promise.reject(Error("Media cache has already been disposed"));let u=X(d),m=(({src:e,credentials:t,requestInit:n})=>JSON.stringify([e,t,K(n)]))({src:a,credentials:c,requestInit:u}),f=e[m];if(!f){let n,d;o.Xp.Log.verbose({logLevel:s,tag:"@remotion/media"},`Sink for ${a} was not found, creating new sink`);let h=(n=q({credentials:c,requestInit:u}),d=new i.pd({formats:p.XE,source:new l.Ts(a,{handleUnhandledError:e=>{o.Xp.Log.warn({logLevel:s,tag:"@remotion/media"},`A speculative fetch for "${a}" failed:`,e)},maxCacheSize:G(s),...n?{requestInit:n}:void 0})}),{promise:(async()=>{let e,t=await eL(d),n=t===p.BN||t===p.q6,i=async()=>{if("network-error"===t)return"network-error";if(null===t)return"unknown-container-format";let e=await d.getPrimaryVideoTrack();if(!e)return"no-video-track";if(await e.isLive())throw Error("Live streams are not currently supported by Remotion. Sorry! Source: "+a);if(await e.isRelativeToUnixEpoch())throw Error("Streams with UNIX timestamps are not currently supported by Remotion. Sorry! Source: "+a);if(!await e.canDecode())return"prores"===e.codec?"cannot-decode-prores":"cannot-decode";let n=new r.lc(e),i=new r.kQ(e),l=await i.getFirstPacket({verifyKeyPackets:!0});return!l?.sideData.alpha||(null!==eS?eS:eS=null!==new OffscreenCanvas(1,1).getContext("webgl2"))||o.Xp.Log.warn({logLevel:s,tag:"@remotion/media"},`WebGL2 is not available, using the non-fast CPU path to decode alpha for ${a}.`),{sampleSink:n}},l=null,c={},u=async e=>{if(null===t)return"unknown-container-format";if("network-error"===t)return"network-error";let[n,a]=await Promise.all([d.getPrimaryVideoTrack(),d.getAudioTracks()]),s=await J({videoTrack:n,audioTracks:a,audioStreamIndex:e});return s?await s.canDecode()?{sampleSink:new r.qw(s),sampleRate:await s.getSampleRate(),numberOfChannels:await s.getNumberOfChannels()}:"cannot-decode-audio":"no-audio-track"};return{getVideo:()=>l||(l=i()),getAudio:e=>{let t;return c[t=null===e?-1:e]||(c[t]=u(e)),c[t]},actualMatroskaTimestamps:(e=[],{observeTimestamp:t=>{n&&e.push(t)},getRealTimestamp:t=>n?e.find(e=>.001>Math.abs(t-e))??null:t}),isMatroska:n,getDuration:()=>W(d)}})(),dispose:()=>d.dispose()});f=h.promise,e[m]=f,t[m]=h.dispose}return f},dispose:()=>{if(n)return;n=!0;let a=null;for(let n of Object.keys(t))try{t[n]()}catch(e){a??=e}finally{delete t[n],delete e[n]}if(null!==a)throw a}}),s={keyframe:null,audio:null},c=()=>{let{keyframe:e,audio:t}=s;if(null===e||null===t)throw Error("Media cache managers have not been initialized");let n=e.getCacheStats(),a=t.getCacheStats();return{count:n.count+a.count,totalSize:n.totalSize+a.totalSize}},d=(({getTotalCacheStats:e})=>{let t={},n=!1,a={},s=new WeakMap,r=({src:e,bank:a,logLevel:s})=>n?(a.prepareForDeletion(s,"media cache was disposed"),!1):(t[e]=t[e]??[],t[e].push(a),!0),i=e=>{let{mostInThePastBank:n,numberOfBanks:a}=(()=>{let e=null,n=null,a=0;for(let s in t)for(let o of t[s]){if(a++,o.isBusy())continue;let r=t[s].indexOf(o),i=o.getLastUsed();(null===e||i<e)&&(e=i,n={src:s,bank:o,index:r})}return n?{mostInThePastBank:n,numberOfBanks:a}:{mostInThePastBank:null,numberOfBanks:a}})();if(a<2||null===n)return{finish:!0};let{bank:s,src:r,index:i}=n,l=s.getRangeOfTimestamps(),{framesDeleted:p}=s.prepareForDeletion(e,"deleted oldest keyframe bank to stay under max cache size");return t[r].splice(i,1),l&&o.Xp.Log.verbose({logLevel:e,tag:"@remotion/media"},`Deleted ${p} frames for src ${r} from ${l?.firstTimestamp}sec to ${l?.lastTimestamp}sec to free up memory.`),{finish:!1}},l=async({timestamp:e,videoSampleSink:n,src:a,logLevel:s})=>{let i=t[a]??[],l=i?.find(t=>t.canSatisfyTimestamp(e));if(!l){o.Xp.Log.trace({logLevel:s,tag:"@remotion/media"},`Creating new keyframe bank for src ${a} at timestamp ${e}`);let t=await eM({videoSampleSink:n,logLevel:s,src:a,initialTimestampRequest:e});return r({src:a,bank:t,logLevel:s})?t:null}if(l.canSatisfyTimestamp(e))return o.Xp.Log.trace({logLevel:s,tag:"@remotion/media"},`Keyframe bank exists and satisfies timestamp ${e}`),l;o.Xp.Log.verbose({logLevel:s,tag:"@remotion/media"},`Keyframe bank exists but frame at time ${e} does not exist anymore.`),l.prepareForDeletion(s,"already existed but evicted"),t[a]=t[a].filter(e=>e!==l);let p=await eM({videoSampleSink:n,initialTimestampRequest:e,logLevel:s,src:a});return r({src:a,bank:p,logLevel:s})?p:null},p=async({timestamp:r,videoSampleSink:p,src:c,logLevel:d,maxCacheSize:u,fps:m})=>

860{if(n)return null;a[c]=(a[c]??0)+1;let f=e(),h=0;for(;f.totalSize>u&&h<3;){let{finish:t}=i(d);if(t)break;o.Xp.Log.verbose({logLevel:d,tag:"@remotion/media"},"Deleted oldest keyframe bank to stay under max cache size",(f.totalSize/1024/1024).toFixed(1),"out of",(u/1024/1024).toFixed(1)),f=e(),h++}f.totalSize>u&&h>=3&&o.Xp.Log.warn({logLevel:d,tag:"@remotion/media"},`Exceeded max cache size after 3 attempts. Remaining cache size: ${(f.totalSize/1024/1024).toFixed(1)} MB, target was ${(u/1024/1024).toFixed(1)} MB.`),(({timestampInSeconds:e,src:n,logLevel:r,fps:i})=>{let l=e-eI(i);if(!t[n])return;let p=t[n],c=a[n]??0;for(let e of p){if(e.isBusy())continue;let a=e.getRangeOfTimestamps();if(!a)continue;let i=s.get(e);if(void 0===i||!(c-i<50))if(a.lastTimestamp<l){e.prepareForDeletion(r,"cleared before threshold "+l),o.Xp.Log.verbose({logLevel:r,tag:"@remotion/media"},`[Video] Cleared frames for src ${n} from ${a.firstTimestamp}sec to ${a.lastTimestamp}sec`);let s=p.indexOf(e);delete t[n][s]}else e.deleteFramesBeforeTimestamp({timestampInSeconds:l,logLevel:r})}t[n]=t[n].filter(e=>void 0!==e);let d=0,u=0;for(let e in t)for(let n of t[e]){let{size:t,timestamps:a}=n.getOpenFrameCount();d+=a.length,u+=t,0!==t&&o.Xp.Log.verbose({logLevel:r,tag:"@remotion/media"},`Open frames for src ${e}: ${eT(a)}`)}o.Xp.Log.verbose({logLevel:r,tag:"@remotion/media"},`Video cache stats: ${d} open frames, ${u} bytes`)})({timestampInSeconds:r,src:c,logLevel:d,fps:m});let y=await l({timestamp:r,videoSampleSink:p,src:c,logLevel:d});return y&&s.set(y,a[c]),y},c=e=>{for(let n of Object.keys(t)){for(let a of t[n])a.prepareForDeletion(e,"clearAll");t[n]=[]}t={},a={}},d=ev();return{requestKeyframeBank:({timestamp:e,videoSampleSink:t,src:n,logLevel:a,maxCacheSize:s,fps:o})=>d(()=>p({timestamp:e,videoSampleSink:t,src:n,logLevel:a,maxCacheSize:s,fps:o})),getCacheStats:()=>{let e=0,n=0;for(let a in t)for(let s of t[a]){let{timestamps:t,size:a}=s.getOpenFrameCount();if(e+=t.length,n+=a,0===a)continue}return{count:e,totalSize:n}},clearAll:c,dispose:e=>{n||(n=!0,c(e))}}})({getTotalCacheStats:c}),u=(({getTotalCacheStats:e})=>{let t=[],n=!1,a=()=>{let e=null,n=null;for(let a of t){let t=a.getLastUsed();(null===e||t<e)&&(e=t,n=a)}return n},s=()=>{let e=a();e&&(e.prepareForDeletion(),t.splice(t.indexOf(e),1))},r=e=>{let n=new Set;for(let a=0;a<t.length;a++){let s=t[a],r=`${s.src}-${s.getOldestTimestamp()}-${s.getNewestTimestamp()}`;n.has(r)&&(s.prepareForDeletion(),t.splice(t.indexOf(s),1),o.Xp.Log.verbose({logLevel:e,tag:"@remotion/media"},`Deleted duplicate iterator for ${s.src}`)),n.add(r)}},i=async({src:a,timeInSeconds:i,audioSampleSink:l,isMatroska:p,actualMatroskaTimestamps:c,logLevel:d,maxCacheSize:u})=>{if(n)throw Error("Media cache has already been disposed");let m=0;for(;(await e()).totalSize>u&&m<3;)s(),m++;for(let n of((await e()).totalSize>u&&m>=3&&o.Xp.Log.warn({logLevel:d,tag:"@remotion/media"},`Audio cache: Exceeded max cache size after 3 attempts. Still ${(await e()).totalSize} bytes used, target was ${u} bytes.`),t))if(n.src===a&&await n.waitForCompletion()&&n.canSatisfyRequestedTime(i))return n;for(let e=0;e<t.length;e++){let n=t[e];n.src===a&&n.startTimestamp===i&&(n.prepareForDeletion(),t.splice(t.indexOf(n),1))}if(r(d),n)throw Error("Media cache has already been disposed");return(({timeInSeconds:e,src:n,audioSampleSink:a,isMatroska:s,actualMatroskaTimestamps:r,logLevel:i})=>{let l=(({audioSampleSink:e,isMatroska:t,startTimestamp:n,src:a,actualMatroskaTimestamps:s,logLevel:r})=>{let i,l,p=e.samples(t?0:Math.max(0,n-1.5));t&&(eC[a]||(eC[a]=!0,o.Xp.Log.warn({logLevel:r,tag:"@remotion/media"},`Audio from ${a} will need to be read from the beginning. https://www.remotion.dev/docs/media/support#matroska-limitation`)));let c=null,d=(i=[],l={},{addFrame:e=>{i.push(e.timestamp),l[e.timestamp]=e},clearBeforeThreshold:e=>{for(let t of i.slice())if(t+l[t].duration<e){if(t===i[i.length-1])continue;l[t].close(),delete l[t],i.splice(i.indexOf(t),1)}},deleteAll:()=>{for(let e of i)l[e].close(),delete l[e];i.length=0},getSamples:(e,t)=>{let n=[];for(let a=0;a<i.length;a++){let s=l[i[a]];if(!(s.timestamp+s.duration-1e-10<=e)){if(s.timestamp>=e+t-1e-10)break;n.push(s)}}return n},getOldestTimestamp:()=>i[0],getNewestTimestamp:()=>

860{if(0===i.length)return null;let e=l[i[i.length-1]];return e.timestamp+e.duration},getOpenTimestamps:()=>i,getTotalSize:()=>{let e=0;for(let t of i)e+=eU(l[t]);return e}}),u=Date.now(),m=async()=>{u=Date.now();let{value:e,done:t}=await p.next();if(t)return c=d.getNewestTimestamp(),null;let n=s.getRealTimestamp(e.timestamp);return null!==n&&n!==e.timestamp&&e.setTimestamp(n),s.observeTimestamp(e.timestamp),s.observeTimestamp(e.timestamp+e.duration),d.addFrame(e),e},f=async(e,t)=>{if(u=Date.now(),null!==c&&e>c)return d.clearBeforeThreshold(c-.2),[];let n=d.getSamples(e,t),a=d.getNewestTimestamp();if(null!==a&&a>=e+t-1e-10)return n;for(;;){let a=await m(),s=null===c?e:Math.min(e,c);if(d.clearBeforeThreshold(s-.2),null===a)break;if(!(a.timestamp+a.duration-1e-10<=e)){if(a.timestamp>=e+t-1e-10)break;n.push(a)}}return n},h=Promise.resolve([]);return{src:a,getSamples:(e,t)=>h=h.then(()=>f(e,t)),waitForCompletion:async()=>(await h,!0),canSatisfyRequestedTime:e=>{let t=d.getOldestTimestamp()??n;return null!==c&&e>c||t<e&&10>Math.abs(t-e)},logOpenFrames:()=>{let e=d.getOpenTimestamps();if(e.length>0){let t=e[0],n=e[e.length-1];o.Xp.Log.verbose({logLevel:r,tag:"@remotion/media"},"Open audio samples for src",a,`${t.toFixed(3)}...${n.toFixed(3)}`)}},getCacheStats:()=>({count:d.getOpenTimestamps().length,size:d.getTotalSize()}),getLastUsed:()=>u,prepareForDeletion:()=>{d.deleteAll(),p.return().then(e=>{e.value&&e.value.close()}),c=null},startTimestamp:n,clearBeforeThreshold:d.clearBeforeThreshold,getOldestTimestamp:d.getOldestTimestamp,getNewestTimestamp:d.getNewestTimestamp}})({audioSampleSink:a,isMatroska:s,startTimestamp:e,src:n,actualMatroskaTimestamps:r,logLevel:i});return t.push(l),l})({src:a,timeInSeconds:i,audioSampleSink:l,isMatroska:p,actualMatroskaTimestamps:c,logLevel:d})},l=()=>{for(let e of t)e.prepareForDeletion();t.length=0},p=ev();return{getIterator:({src:e,timeInSeconds:t,audioSampleSink:n,isMatroska:a,actualMatroskaTimestamps:s,logLevel:o,maxCacheSize:r})=>p(()=>i({src:e,timeInSeconds:t,audioSampleSink:n,isMatroska:a,actualMatroskaTimestamps:s,logLevel:o,maxCacheSize:r})),getCacheStats:()=>{let e=0,n=0;for(let a of t){let{count:t,size:s}=a.getCacheStats();e+=t,n+=s}return{count:e,totalSize:n}},getIteratorMostInThePast:a,logOpenFrames:()=>{for(let e of t)e.logOpenFrames()},deleteDuplicateIterators:r,clearAll:l,dispose:()=>{n||(n=!0,l())}}})({getTotalCacheStats:c});s.keyframe=d,s.audio=u;let m=ev(),f=ev(),h=!1;return{sinkManager:a,keyframeManager:d,audioManager:u,getTotalCacheStats:c,isDisposed:()=>h,queueFrameExtraction:m,queueAudioExtraction:f,dispose:e=>{if(!h){h=!0;try{d.dispose(e)}finally{try{u.dispose()}finally{a.dispose()}}}}}},ek=eR(),eP=e=>{let t=s.useContext(o.Xp.RenderResourceManagerContext);return null===t?ek:t.getOrCreateResource({key:"@remotion/media/cache",create:()=>{let t=eR();return{resource:t,dispose:()=>t.dispose(e)}}})},eB=e=>{let t=s.useContext(o.Xp.MaxMediaCacheSizeContext);return null===t?O(e):t},eD=(e,t)=>{if(1!==t)for(let n=0;n<e.length;n++){let a=e[n]*t;a<-32768?e[n]=-32768:a>32767?e[n]=32767:e[n]=a}},ej=e=>e%1<1e-7?Math.floor(e):e%1>.9999999?Math.ceil(e):e,eN=e=>Math.max(-32768,Math.min(32767,e)),eH=e=>{let t=Math.abs(e%1);return t<1e-7?e<0?Math.ceil(e):Math.floor(e):t>.9999999?e<0?Math.floor(e):Math.ceil(e):e},e$=e=>Math.ceil(eH(e)),e_=({audioData:e,trimStartInSeconds:t,trimEndInSeconds:n,audioDataTimestamp:a,isLast:s})=>{let{numberOfChannels:o,sampleRate:r,numberOfFrames:i}=e,l=Math.floor(eH(t*e.sampleRate)),p=i-n*e.sampleRate-l,c=s?e$(p):Math.round(p),d=new Int16Array(o*i);if("f32"===e.format||"f32-planar"===e.format){let t=4*i,n=new ArrayBuffer(o*t);for(let a=0;a<o;a++)e.copyTo(new Float32Array(n,a*t,i),{planeIndex:a,frameOffset:0,frameCount:i,format:"f32-planar"});let a=new AudioData({format:"f32-planar",sampleRate:r,numberOfFrames:i,numberOfChannels:o,timestamp:e.timestamp,data:n});a.copyTo(d,{planeIndex:0,format:"s16",frameOffset:0,frameCount:i}),a.close()}else e.copyTo(d,{planeIndex:0,format:"s16",frameOffset:0,frameCount:i});let u=l/e.sampleRate*1e6;return{data:d.subarray(l*o,(l+c)*o),numberOfChannels:o,numberOfFrames:c,sampleRate:r,timestamp:1e6*a+eH(u),durationInMicroSeconds:eH(c/r*1e6)}},eW=async({sampleRate:e,src:t,timeInSeconds:n,durationInSeconds:a,logLevel:s,loop:o,playbackRate:r,audioStreamIndex:i,trimBefore:l,trimAfter:p,fps:c,maxCacheSize:d,credentials:u,requestInit:m,mediaCache:f})=>{let{getAudio:h,actualMatroskaTimestamps:g,isMatroska:E,getDuration:x}=await f.sinkManager.getSink(t,s,u,m),b=null;o&&(b=await x());let F=await h(i);if("network-error"===F)return"network-error";if("no-audio-track"===F)return{data:null,durationInSeconds:null};if("cannot-decode-audio"===F)return"cannot-decode";if("unknown-container-format"===F)return"unknown-container-format";let v=y({loop:o,mediaDurationInSeconds:b,unloopedTimeInSeconds:n,src:t,trimAfter:p,playbackRate:r,trimBefore:l,fps:c,ifNoMediaDuration:"fail"});if(null===v)return{data:null,durationInSeconds:b};try{let n=a*r,i=(l??0)/c,u=void 0===p?b??1/0:p/c;if(o&&u<=i)throw Error(`Cannot loop audio over an empty range (${i} to ${u})`);let m=[],h=n,y=v,x=0,w=(e,t,n)=>{let a=Math.ceil(eH(e*n));a>0&&m.push({data:new Int16Array(a*t),numberOfChannels:t,numberOfFrames:a,sampleRate:n,timestamp:1e6*v,durationInMicroSeconds:a/n*1e6})};for(;h>1e-10;){let e=o?Math.min(h,u-y):h;if(e<=0){y=i;continue}

860let n=await f.audioManager.getIterator({src:t,timeInSeconds:y,audioSampleSink:F.sampleSink,isMatroska:E,actualMatroskaTimestamps:g,logLevel:s,maxCacheSize:d}),a=await n.getSamples(y,e);f.audioManager.logOpenFrames();let r=[];for(let t=0;t<a.length;t++){let n=a[t],s=y+e;if(Math.abs(n.timestamp-s)*n.sampleRate<1||n.timestamp+n.duration<=y)continue;let o=0===t,i=t===a.length-1,l=n.toAudioData(),p=0,c=0,d=null;if(o&&(p=eH(y-n.timestamp))<0){let e=Math.ceil(eH(-p*l.sampleRate));d={data:new Int16Array(e*l.numberOfChannels),numberOfChannels:l.numberOfChannels,numberOfFrames:e,sampleRate:l.sampleRate,timestamp:1e6*y,durationInMicroSeconds:e/l.sampleRate*1e6},p=0}i&&(c=Math.max(0,n.timestamp+n.duration-s));let u=e_({audioData:l,trimStartInSeconds:p,trimEndInSeconds:c,audioDataTimestamp:n.timestamp,isLast:i});l.close(),0!==u.numberOfFrames&&(d&&r.push(d),r.push(u))}if(r.length>0){let{numberOfChannels:t,sampleRate:n}=r[0];w(x,t,n),m.push(...r);let a=r.reduce((e,t)=>e+t.numberOfFrames,0);x=Math.max(0,e-a/n)}else x+=e;h-=e,y=i}if(0===m.length)return{data:null,durationInSeconds:b};if(o&&x>0){let{numberOfChannels:e,sampleRate:t}=m[0];w(x,e,t)}let U=(e=>{let t=0,n=0,{numberOfChannels:a,sampleRate:s,timestamp:o}=e[0];for(let o of e){if(o.numberOfChannels!==a||o.sampleRate!==s)throw Error("Cannot combine audio data with different formats");t+=o.numberOfFrames,n+=o.durationInMicroSeconds}let r=new Int16Array(t*a),i=0;for(let t of e)r.set(t.data,i),i+=t.data.length;return{data:r,numberOfChannels:a,numberOfFrames:t,sampleRate:s,timestamp:eH(o),durationInMicroSeconds:eH(n)}})(m);return{data:(({targetSampleRate:e,audioData:t,playbackRate:n,isLast:a})=>{let s=t.sampleRate/e,o=a?e$(t.numberOfFrames/s/n):Math.round(t.numberOfFrames/s/n);if(0===o)throw Error("Cannot resample - the given sample rate would result in less than 1 sample");if(o===t.numberOfFrames&&2===t.numberOfChannels&&1===n)return{data:t.data,numberOfFrames:o,timestamp:t.timestamp,durationInMicroSeconds:eH(o/e*1e6)};let r=new Int16Array(2*o),i=t.numberOfFrames/o;return(({srcNumberOfChannels:e,sourceChannels:t,destination:n,targetFrames:a,chunkSize:s})=>{let o=(n,a,s)=>{let o=ej(n),r=ej(a),i=Math.floor(o),l=Math.ceil(o),p=o-i,c=r-Math.floor(r),d=Math.floor(r),u=0,m=0;p>0&&(u+=t[i*e+s]*(1-p),m+=1-p);for(let n=l;n<d;n++)u+=t[n*e+s],m+=1;return c>0&&(u+=t[d*e+s]*c,m+=c),u/m};for(let t=0;t<a;t++){let a=t*s,r=a+s;if(2===e)for(let s=0;s<e;s++)n[t*e+s]=o(a,r,s);if(1===e){let e=o(a,r,0);n[2*t+0]=e,n[2*t+1]=e}else if(4===e){let e=o(a,r,0),s=o(a,r,1),i=o(a,r,2),l=o(a,r,3),p=.5*(e+i),c=.5*(s+l);n[2*t+0]=p,n[2*t+1]=c}else if(6===e){let e=o(a,r,0),s=o(a,r,1),i=o(a,r,2),l=o(a,r,4),p=o(a,r,5),c=Math.sqrt(.5),d=1/(1+c+c),u=(e+c*(i+l))*d,m=(s+c*(i+p))*d;n[2*t+0]=eN(u),n[2*t+1]=eN(m)}else for(let s=0;s<e;s++)n[2*t+s]=o(a,r,s)}})({srcNumberOfChannels:t.numberOfChannels,sourceChannels:t.data,destination:r,targetFrames:o,chunkSize:i}),{data:r,numberOfFrames:o,timestamp:t.timestamp,durationInMicroSeconds:eH(o/e*1e6)}})({targetSampleRate:e,audioData:U,playbackRate:r,isLast:!0}),durationInSeconds:b}}catch(e){if(V(e))return"network-error";if(e.message.includes("Unsupported configuration"))return"cannot-decode";throw e}},ez=async({src:e,timeInSeconds:t,logLevel:n,loop:a,trimAfter:s,trimBefore:r,playbackRate:i,fps:l,maxCacheSize:p,credentials:c,requestInit:d,mediaCache:u})=>{let m=await u.sinkManager.getSink(e,n,c,d),[f,h]=await Promise.all([m.getVideo(),a?m.getDuration():Promise.resolve(null)]),g=a?h:null;if("no-video-track"===f)throw Error(`No video track found for ${e}`);if("cannot-decode"===f)return{type:"cannot-decode",durationInSeconds:g};if("cannot-decode-prores"===f)return{type:"cannot-decode-prores",durationInSeconds:g};if("unknown-container-format"===f)return{type:"unknown-container-format"};if("network-error"===f)return{type:"network-error"};if("cannot-decode-alpha"===f)return{type:"cannot-decode-alpha",durationInSeconds:g};let E=y({loop:a,mediaDurationInSeconds:g,unloopedTimeInSeconds:t,src:e,trimAfter:s,playbackRate:i,trimBefore:r,fps:l,ifNoMediaDuration:"fail"});if(null===E)return{type:"success",frame:null,rotation:0,durationInSeconds:await m.getDuration()};try{let t=await u.keyframeManager.requestKeyframeBank({videoSampleSink:f.sampleSink,timestamp:E,src:e,logLevel:n,maxCacheSize:p,fps:l});if(!t)return{type:"success",frame:null,rotation:0,durationInSeconds:await m.getDuration()};let a=await t.getFrameFromTimestamp(E,l),s=a?.rotation??0;return{type:"success",frame:a?.toVideoFrame()??null,rotation:s,durationInSeconds:await m.getDuration()}}catch(t){return o.Xp.Log.info({logLevel:n,tag:"@remotion/media"},`Error decoding ${e} at time ${E}: ${t}`,t),{type:"cannot-decode",durationInSeconds:g}}},eO=async({frame:e,rotation:t})=>{if(0===t){let t=await createImageBitmap(e);return e.close(),t}let n=90===t||270===t?e.displayHeight:e.displayWidth,a=90===t||270===t?e.displayWidth:e.displayHeight,s=new OffscreenCanvas(n,a),o=s.getContext("2d");if(!o)throw Error("Could not get 2d context");s.width=n,s.height=a,90===t?o.translate(n,0):180===t?o.translate(n,a):270===t&&o.translate(0,a),o.rotate(Math.PI/180*t),o.drawImage(e,0,0);let r=await createImageBitmap(s);return e.close(),r},eG=async({sampleRate:e,src:t,timeInSeconds:n,logLevel:a,durationInSeconds:s,playbackRate:o,includeAudio:r,includeVideo:i,loop:l,audioStreamIndex:p,trimAfter:c,trimBefore:d,fps:u,maxCacheSize:m,credentials:f,requestInit:h,mediaCache:y})=>{try{let g,E,[x,b]=await Promise.all([i?(g={src:t,timeInSeconds:n,logLevel:a,loop:l,trimAfter:c,playbackRate:o,trimBefore:d,fps:u,maxCacheSize:m,credentials:f,requestInit:h,mediaCache:y}).mediaCache.queueFrameExtraction(()=>ez(g)):null,r?(E={sampleRate:e,src:t,timeInSeconds:n,durationInSeconds:s,logLevel:a,loop:l,playbackRate:o,audioStreamIndex:p,trimAfter:c,fps:u,trimBefore:d,maxCacheSize:m,credentials:f,requestInit:h,mediaCache:y}).mediaCache.queueAudioExtraction(()=>eW(E)):null]);if(x?.type==="cannot-decode")return{type:"cannot-decode",durationInSeconds:x.durationInSeconds};if(x?.type==="cannot-decode-prores")return{type:"cannot-decode-prores",durationInSeconds:x.durationInSeconds};if(x?.type==="unknown-container-format")return{type:"unknown-container-format"};if(x?.type==="cannot-decode-alpha")return{type:"cannot-decode-alpha",durationInSeconds:x.durationInSeconds};if(x?.type==="network-error")return{type:"network-error"};if("unknown-container-format"===b)return{type:"unknown-container-format"};if("network-error"===b)return{type:"network-error"};if("cannot-decode"===b)return{type:"cannot-decode",durationInSeconds:x?.type==="success"?x.durationInSeconds:null};return{type:"success",frame:x?.frame?await eO({frame:x.frame,rotation:x.rotation}):null,audio:b?.data??null,durationInSeconds:b?.durationInSeconds??null}}catch(e){if(V(e))return{type:"network-error"};throw e}},eX=null;"u">typeof window&&window.remotion_broadcastChannel&&window.remotion_isMainTab&&(window.remotion_broadcastChannel.addEventListener("message",async e=>{let t=e.data;if("request"===t.type)try{let e=await eG({sampleRate:t.sampleRate,src:t.src,timeInSeconds:t.timeInSeconds,logLevel:t.logLevel,durationInSeconds:t.durationInSeconds,playbackRate:t.playbackRate,includeAudio:t.includeAudio,includeVideo:t.includeVideo,loop:t.loop,audioStreamIndex:t.audioStreamIndex,trimAfter:t.trimAfter,trimBefore:t.trimBefore,fps:t.fps,maxCacheSize:t.maxCacheSize,credentials:t.credentials,requestInit:t.requestInit,mediaCache:ek});if("cannot-decode"===e.type){let n={type:"response-cannot-decode",id:t.id,durationInSeconds:e.durationInSeconds};window.remotion_broadcastChannel.postMessage(n);return}if("cannot-decode-prores"===e.type){let n={type:"response-cannot-decode-prores",id:t.

860id,durationInSeconds:e.durationInSeconds};window.remotion_broadcastChannel.postMessage(n);return}if("cannot-decode-alpha"===e.type){let n={type:"response-cannot-decode-alpha",id:t.id,durationInSeconds:e.durationInSeconds};window.remotion_broadcastChannel.postMessage(n);return}if("network-error"===e.type){let e={type:"response-network-error",id:t.id};window.remotion_broadcastChannel.postMessage(e);return}if("unknown-container-format"===e.type){let e={type:"response-unknown-container-format",id:t.id};window.remotion_broadcastChannel.postMessage(e);return}let{frame:n,audio:a,durationInSeconds:s}=e,o=n?await createImageBitmap(n):null;n&&n.close();let r={type:"response-success",id:t.id,frame:o,audio:a,durationInSeconds:s??null};try{window.remotion_broadcastChannel.postMessage(r)}finally{o?.close()}}catch(n){let e={type:"response-error",id:t.id,errorStack:n.stack??"No stack trace"};window.remotion_broadcastChannel.postMessage(e)}else if("main-tab-ready"===t.type);else throw Error("Invalid message: "+JSON.stringify(t))}),(a=window.remotion_broadcastChannel).postMessage({type:"main-tab-ready"}),setInterval(()=>{a.postMessage({type:"main-tab-ready"})},300));var eK=async({sampleRate:e,src:t,timeInSeconds:n,logLevel:a,durationInSeconds:s,playbackRate:o,includeAudio:r,includeVideo:i,isClientSideRendering:l,loop:p,audioStreamIndex:c,trimAfter:d,trimBefore:u,fps:m,maxCacheSize:f,credentials:h,requestInit:y,mediaCache:g})=>{var E;let x;if(l||window.remotion_isMainTab)return eG({sampleRate:e,logLevel:a,src:t,timeInSeconds:n,durationInSeconds:s,playbackRate:o,includeAudio:r,includeVideo:i,loop:p,audioStreamIndex:c,trimAfter:d,trimBefore:u,fps:m,maxCacheSize:f,credentials:h,requestInit:y,mediaCache:g});await (E=window.remotion_broadcastChannel,eX||(eX=new Promise(e=>{let t=n=>{"main-tab-ready"===n.data.type&&(e(),E.removeEventListener("message",t))};E.addEventListener("message",t)})));let b=crypto.randomUUID(),F=new Promise((e,t)=>{let n=a=>{let s=a.data;if(s&&"main-tab-ready"!==s.type&&s.id===b){if("response-success"===s.type){e({type:"success",frame:s.frame?s.frame:null,audio:s.audio?s.audio:null,durationInSeconds:s.durationInSeconds?s.durationInSeconds:null}),window.remotion_broadcastChannel.removeEventListener("message",n);return}if("response-error"===s.type){t(s.errorStack),window.remotion_broadcastChannel.removeEventListener("message",n);return}if("response-cannot-decode"===s.type){e({type:"cannot-decode",durationInSeconds:s.durationInSeconds}),window.remotion_broadcastChannel.removeEventListener("message",n);return}if("response-cannot-decode-prores"===s.type){e({type:"cannot-decode-prores",durationInSeconds:s.durationInSeconds}),window.remotion_broadcastChannel.removeEventListener("message",n);return}if("response-network-error"===s.type){e({type:"network-error"}),window.remotion_broadcastChannel.removeEventListener("message",n);return}if("response-unknown-container-format"===s.type){e({type:"unknown-container-format"}),window.remotion_broadcastChannel.removeEventListener("message",n);return}if("response-cannot-decode-alpha"===s.type){e({type:"cannot-decode-alpha",durationInSeconds:s.durationInSeconds}),window.remotion_broadcastChannel.removeEventListener("message",n);return}throw Error(`Invalid message: ${JSON.stringify(s)}`)}};window.remotion_broadcastChannel.addEventListener("message",n)}),v={type:"request",sampleRate:e,src:t,timeInSeconds:n,id:b,logLevel:a,durationInSeconds:s,playbackRate:o,includeAudio:r,includeVideo:i,loop:p,audioStreamIndex:c,trimAfter:d,trimBefore:u,fps:m,maxCacheSize:f,credentials:h,requestInit:X(y)};return window.remotion_broadcastChannel.postMessage(v),Promise.race([F.then(e=>(clearTimeout(x),e)),new Promise((e,a)=>{x=setTimeout(()=>{a(Error(`Timeout while extracting frame at time ${n}sec from ${t}`))},Math.max(3e3,window.remotion_puppeteerTimeout-5e3))})])},eq=({volume:e,playbackRate:t,src:n,muted:a,loopVolumeCurveBehavior:r,delayRenderRetries:i,delayRenderTimeoutInMilliseconds:l,logLevel:p,loop:d,fallbackHtml5AudioProps:u,audioStreamIndex:m,showInTimeline:f,style:h,name:y,disallowFallbackToHtml5Audio:E,toneFrequency:x,trimAfter:b,trimBefore:F,onError:v,credentials:w,requestInit:U})=>{let C=(0,s.useContext)(o.Xp.SharedAudioContext),S=C?.sampleRate??48e3,L=o.Xp.useLogLevel(),T=p??L,A=(0,o.UC)(),M=o.Xp.useTimelinePosition(),I=o.Xp.useUnsafeVideoConfig(),{registerRenderAsset:R,unregisterRenderAsset:k}=(0,s.useContext)(o.Xp.RenderAssetManager),P=o.Xp.useMediaStartsAt(),B=(0,o.OK)();if(!I)throw Error("No video config found");if(!n)throw TypeError("No `src` was passed to <Audio>.");let{fps:D}=I,{delayRender:j,continueRender:N}

860=(0,o.dB)(),[H,$]=(0,s.useState)(!1),[_]=(0,s.useState)(U),W=(0,s.useContext)(o.Xp.SequenceContext),z=W?.playbackRate??1,O=W?W.cumulatedFrom+W.relativeFrom:0,G=(0,s.useMemo)(()=>`media-audio-${(0,o.yT)(n)}-${W?.cumulatedFrom}-${W?.relativeFrom}-${W?.durationInFrames}`,[n,W?.cumulatedFrom,W?.relativeFrom,W?.durationInFrames]),X=eB(T),K=eP(T),q=o.Xp.useAudioEnabled(),{isMutedForPlayback:J,shouldUseAudio:V}=o.Xp.useMediaAudioState({muted:a??!1,volume:null,audioEnabled:q});return((0,s.useLayoutEffect)(()=>{let a=A/z/D,s=1/D;if(!V||H)return;let p=!1,c=j(`Extracting audio for frame ${A}`,{retries:i??void 0,timeoutInMilliseconds:l??void 0});return eK({sampleRate:S,src:n,timeInSeconds:a,durationInSeconds:s,playbackRate:(t??1)*z,logLevel:T,includeAudio:V,includeVideo:!1,isClientSideRendering:B.isClientSideRendering,loop:d??!1,audioStreamIndex:m??null,trimAfter:b,trimBefore:F,fps:D,maxCacheSize:X,credentials:w,requestInit:_,mediaCache:K}).then(a=>{if(p||K.isDisposed())return;let s=(e,t,n)=>{let[a,s]=er({onError:v,error:e,disallowFallback:E??!1,isClientSideRendering:B.isClientSideRendering,clientSideError:t});"fail"===a&&(0,o.zo)(s),o.Xp.Log.warn({logLevel:T,tag:"@remotion/media"},n),$(!0)};if("unknown-container-format"===a.type)return void s(Error(`Unknown container format ${n}.`),Error(`Cannot render audio "${n}": Unknown container format. See supported formats: https://www.remotion.dev/docs/mediabunny/formats`),`Unknown container format for ${n} (Supported formats: https://www.remotion.dev/docs/mediabunny/formats), falling back to <Html5Audio>`);if("cannot-decode"===a.type)return void s(Error(`Cannot decode ${n}.`),Error(`Cannot render audio "${n}": The audio could not be decoded by the browser.`),`Cannot decode ${n}, falling back to <Html5Audio>`);if("cannot-decode-alpha"===a.type)throw Error(`Cannot decode alpha component for ${n}, and 'disallowFallbackToHtml5Audio' was set. But this should never happen, since you used the <Audio> tag. Please report this as a bug.`);if("cannot-decode-prores"===a.type)throw Error(`Encountered ProRes media for ${n}. But this should never happen, since you used the <Audio> tag. Please report this as a bug.`);if("network-error"===a.type)return void s(Error(`Network error fetching ${n}.`),Error(`Cannot render audio "${n}": Network error while fetching the audio (possibly CORS).`),`Network error fetching ${n}, falling back to <Html5Audio>`);let{audio:i,durationInSeconds:l}=a,u=g({behavior:r??"repeat",loop:d??!1,assetDurationInSeconds:l??0,fps:D,frame:A,startsAt:P,playbackRate:t??1,trimBefore:F,trimAfter:b}),m=o.Xp.evaluateVolume({volume:e,frame:u,mediaVolume:1});o.Xp.warnAboutTooHighVolume(m),i&&m>0&&(eD(i.data,m),R({type:"inline-audio",id:G,audio:B.isClientSideRendering?i.data:Array.from(i.data),frame:M,startInVideo:O,timestamp:i.timestamp,duration:i.durationInMicroSeconds,toneFrequency:x??1})),N(c)}).catch(e=>{p||K.isDisposed()||(0,o.zo)(e)}),()=>{p=!0,N(c),k(G)}},[S,M,N,j,i,l,E,B.isClientSideRendering,D,A,G,T,d,r,V,t,z,R,n,O,P,k,e,m,x,b,F,H,X,v,w,_,K]),H)?(0,c.jsx)(o.xN,{src:n,playbackRate:t,muted:J,loop:d,volume:e,delayRenderRetries:i,delayRenderTimeoutInMilliseconds:l,style:h,loopVolumeCurveBehavior:r,audioStreamIndex:m,useWebAudioApi:u?.useWebAudioApi,onError:u?.onError,toneFrequency:x,acceptableTimeShiftInSeconds:u?.acceptableTimeShiftInSeconds,preservePitch:u?.preservePitch??!0,name:y,showInTimeline:f}):null},{validateMediaProps:eJ}=o.Xp,eV={src:{type:"asset",assetType:"audio",default:void 0,description:"Source",keyframable:!1},...o.Xp.baseSchema,trimAfter:o.Xp.trimAfterField,...o.Xp.premountSchema,volume:{type:"number",min:0,max:20,step:.01,default:1,description:"Volume",hiddenFromList:!1},playbackRate:{type:"number",min:.1,step:.01,default:1,description:"Playback rate",hiddenFromList:!1,keyframable:!1},toneFrequency:{type:"number",min:.01,max:2,step:.01,default:1,description:"Pitch",hiddenFromList:!1,keyframable:!1},muted:{type:"boolean",default:!1,description:"Muted"},loop:{type:"boolean",default:!1,description:"Loop"}},eY=o.HG.withSchema({Component:e=>{let{name:t,showInTimeline:n,controls:a,from:r,durationInFrames:i,freeze:l,hidden:p,style:d,premou

860ntFor:u,postmountFor:m,...f}=e,h=(0,o.OK)(),y=a?o.Xp.getStackForControls(a):null,[g]=o.Xp.useMediaVolumeState(),w=o.Xp.useMediaStartsAt(),U=(0,o.Bk)(),C=F({durationInFrames:i,trimAfter:e.trimAfter,trimBefore:e.trimBefore}),S=Math.min(v({durationInFrames:i,loop:e.loop??!1,playbackRate:e.playbackRate??1,trimAfter:C,trimBefore:e.trimBefore})??1/0,Math.max(0,U.durationInFrames-(r??0))),[L,T]=(0,s.useState)(null),A=E({volume:e.volume,loop:e.loop??!1,behavior:e.loopVolumeCurveBehavior??"repeat",assetDurationInSeconds:L,fps:U.fps,startsAt:Math.min(0,w+(r??0)),playbackRate:e.playbackRate??1,trimBefore:e.trimBefore,trimAfter:C}),M=o.Xp.useBasicMediaInTimeline({src:e.src,volume:A,playbackRate:e.playbackRate??1,trimBefore:e.trimBefore,trimAfter:C,sequenceDurationInFrames:S,displayName:t??"<Audio>",mediaVolume:g,mediaStartsAt:w,mediaFrom:r??0,loop:e.loop??!1,muted:e.muted??!1}),I=(0,s.useMemo)(()=>x({loop:e.loop??!1,mediaDurationInSeconds:L,playbackRate:e.playbackRate??1,trimAfter:C,trimBefore:e.trimBefore,sequenceDurationInFrames:S,compFps:U.fps}),[e.loop,L,e.playbackRate,C,e.trimBefore,S,U.fps]),R=(0,s.useMemo)(()=>({type:"audio",data:M}),[M]),{effectivePostmountFor:k,effectivePremountFor:P,freezeFrame:B,isPremountingOrPostmounting:D,postmountingActive:j,premountingActive:N,premountingStyle:H}=o.Xp.usePremounting({from:r??0,durationInFrames:M.duration,premountFor:u??null,postmountFor:m??null,style:d??null,styleWhilePremounted:null,styleWhilePostmounted:null,hideWhilePremounted:"display-none"});if("string"!=typeof e.src)throw TypeError(`The \`<Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(e.src)} instead.`);return(eJ({playbackRate:e.playbackRate,volume:e.volume},"Audio"),b({toneFrequency:e.toneFrequency,component:"Audio"}),0===S)?null:(0,c.jsx)(o.Kl,{frame:B,active:D,_remotionInternalIsPremounting:N,children:(0,c.jsx)(o.gd,{layout:"none",from:r??0,durationInFrames:M.duration,freeze:l,_remotionInternalIsMedia:R,_remotionInternalPremountDisplay:P||null,_remotionInternalPostmountDisplay:k||null,_remotionInternalIsPremounting:N,_remotionInternalIsPostmounting:j,name:t??"<Audio>",_remotionInternalDocumentationLink:void 0===t?"https://www.remotion.dev/docs/media/audio":void 0,controls:a,_remotionInternalLoopDisplay:I,showInTimeline:n??!0,hidden:p,children:h.isRendering?(0,c.jsx)(eq,{...f,trimAfter:C,style:H??void 0}):(0,c.jsx)(eF,{name:t,...f,trimAfter:C,style:H,_remotionInternalStack:y,setMediaDurationInSeconds:T})})})},componentName:"<Audio>",componentIdentity:"dev.remotion.media.Audio",schema:eV,supportsEffects:!1});class eQ extends Error{constructor(e){super(`Cannot decode "${e}": it is encoded with Apple ProRes, which WebCodecs does not support natively. ProRes decoding is not enabled by default. Register the ProRes decoder by calling registerProresDecoder() from "@mediabunny/prores" in your entry point, before registerRoot(). See https://www.remotion.dev/docs/videos/prores.`),this.name="ProResDecoderNotEnabledError"}}var eZ=new Map,e0=/\bobject-(contain|cover|fill|none|scale-down)\b/,e1=!1,e2=!1,e4=({style:e,className:t,logLevel:n})=>{!e1&&e?.objectFit&&(e1=!0,o.Xp.Log.warn({logLevel:n,tag:"@remotion/media"},"Use the `objectFit` prop instead of the `style` prop.")),!e2&&t&&e0.test(t)&&(e2=!0,o.Xp.Log.warn({logLevel:n,tag:"@remotion/media"},"Use the `objectFit` prop instead of `object-*` CSS class names."))},{useUnsafeVideoConfig:e8,SharedAudioContext:e3,useMediaVolumeState:e5,useFrameForVolumeProp:e6,evaluateVolume:e9,warnAboutTooHighVolume:e7,usePreload:te,SequenceContext:tt,useEffectChainState:tn,usePlaying:ta,useBuffer

860ing:ts,useMediaAudioState:to}=o.Xp,tr=({src:e,style:t,playbackRate:n,toneFrequency:a,logLevel:r,className:i,muted:l,volume:p,loopVolumeCurveBehavior:d,onVideoFrame:u,showInTimeline:m,loop:f,trimAfter:h,trimBefore:y,_remotionInternalStack:E,disallowFallbackToOffthreadVideo:x,fallbackOffthreadVideoProps:b,audioStreamIndex:F,debugOverlay:v,headless:w,onError:U,credentials:C,requestInit:S,objectFit:L,maxCanvasSinkFrameSize:T,_experimentalInitiallyDrawCachedFrame:A,effects:M,setMediaDurationInSeconds:I,...R})=>{let k=te(e),P=(0,s.useRef)(null),B=e8(),D=(0,o.UC)(),j=(0,s.useRef)(null),N=(0,s.useRef)(y),H=(0,s.useRef)(h),$=(0,s.useRef)(u),[_]=(0,s.useState)(S),[W,z]=(0,s.useState)(!1),[O,G]=(0,s.useState)(null),[X,K]=(0,s.useState)(null),[q,J]=(0,s.useState)(!1),V=ta(),{playbackRate:Y}=o.Xp.usePlaybackRate(),Q=(0,s.useContext)(e3),Z=(0,o.Fx)(),[ee]=e5(),et=e6(d),en=f&&B?g({behavior:d,loop:f,assetDurationInSeconds:O,fps:B.fps,frame:D,startsAt:et-D,playbackRate:n,trimBefore:y,trimAfter:h}):et,ea=e9({frame:en,volume:p,mediaVolume:ee});if(!B)throw Error("No video config found");e7(ea);let es=tn(),ep=(0,s.useRef)(M);ep.current=M;let ec=(0,s.useRef)(U);ec.current=U;let ed=(0,s.useRef)(x);ed.current=x;let eu=(0,s.useRef)(es);eu.current=es;let em=(0,s.useRef)(T);em.current=T;let ef=(0,s.useContext)(tt),eh=!!ef?.premounting,ey=!!ef?.postmounting,eg=(ef?.absoluteFrom??0)/B.fps,eE=ef?.playbackRate??1,ex=n*eE,eb=B.durationInFrames/eE,eF=D/eE/B.fps,ev=(0,s.useRef)(eF);ev.current=eF;let ew=te(k),{isMutedForPlayback:eU}=to({muted:l,volume:ea,audioEnabled:!0}),eC=el({muted:l,volume:ea}),eS=ts(),eL=(0,s.useRef)(V&&!eS),eT=(0,s.useRef)(eh),eA=(0,s.useRef)(ey),eM=(0,s.useRef)(Y),eI=(0,s.useRef)(ex),eR=(0,s.useRef)(a),ek=(0,s.useRef)(eC),eP=(0,s.useRef)(ea),eB=(0,s.useRef)(eb),eD=(0,s.useRef)(eg),ej=(0,s.useRef)(!1),eN=(0,s.useRef)(eh);eN.current=eh,(0,s.useLayoutEffect)(()=>{if(!A)return;let e=P.current;if(!e)return;let t=eZ.get(k)??null;if(!t)return;e.width=t.width,e.height=t.height;let n=e.getContext("2d",{alpha:!0});n&&n.drawImage(t,0,0)},[A,k]),(0,s.useLayoutEffect)(()=>{if(A)return()=>{let e=P.current;e&&ej.current&&!eN.current&&((e,t)=>{let{width:n,height:a}=t;if(0===n||0===a)return;let s=eZ.get(e);s&&s.width===n&&s.height===a||(s=new OffscreenCanvas(n,a),eZ.set(e,s));let o=s.getContext("2d");o&&(o.clearRect(0,0,n,a),o.drawImage(t,0,0))})(k,e)}},[A,k]),(0,s.useEffect)(()=>{let e=Q?.audioContext&&Q.gainNode?{audioContext:Q.audioContext,gainNode:Q.gainNode,audioSyncAnchor:Q.audioSyncAnchor,scheduleAudioNode:Q.scheduleAudioNode,unscheduleAudioNode:Q.unscheduleAudioNode}:null;try{let t=new eo({canvas:P.current,src:ew,logLevel:r,sharedAudioContext:e,loop:f,trimAfter:H.current,trimBefore:N.current,fps:B.fps,playbackRate:eI.current,toneFrequency:eR.current,audioStreamIndex:F,debugOverlay:v,bufferState:Z,isPremounting:eT.current,isPostmounting:eA.current,globalPlaybackRate:eM.current,durationInFrames:eB.current,onVideoFrameCallback:$.current??null,playing:eL.current,sequenceOffset:eD.current,credentials:C,requestInit:_,tagType:"video",getEffects:()=>ep.current,getEffectChainState:(e,t)=>eu.current?.get(e,t),maxCanvasSinkFrameSize:em.current,onError:e=>{let[t,n]=er({onError:ec.current,error:e,disallowFallback:ed.current,isClientSideRendering:!1,clientSideError:e});"fallback"===t?J(!0):K(n)}});j.current=t,t.initialize(ev.current,ek.current,eP.current).then(e=>{if("disposed"===e.type)return;let t=(e,t)=>{let[n,a]=er({onError:ec.current,error:e,disallowFallback:x,isClientSideRendering:!1,clientSideError:e});if("fail"===n)throw a;o.Xp.Log.warn({logLevel:r,tag:"@remotion/media"},t),J(!0)};if("unknown-container-format"===e.type)return void t(Error(`Unknown container format ${ew}.`),`Unknown container format for ${ew} (Supported formats: https://www.remotion.dev/docs/mediabunny/formats), falling back to <OffthreadVideo>`);if("network-error"===e.type)return void t(Error(`Network error fetching ${ew}.`),`Network error fetching ${ew}, falling back to <OffthreadVideo>`);if("cannot-decode"===e.type)return void t(Error(`Cannot decode ${ew}.`),`Cannot decode ${ew}, falling back to <OffthreadVideo>`);if("cannot-decode-prores"===e.type)throw new eQ(ew);

860"no-tracks"===e.type?t(Error(`No video or audio tracks found for ${ew}.`),`No video or audio tracks found for ${ew}, falling back to <OffthreadVideo>`):"success"===e.type&&(z(!0),I(e.durationInSeconds),G(e.durationInSeconds),ej.current=!0)}).catch(e=>{if(e instanceof eQ)throw ec.current?.(e),e;let[t,n]=er({onError:ec.current,error:e,disallowFallback:x,isClientSideRendering:!1,clientSideError:e});if("fail"===t)throw n;o.Xp.Log.error({logLevel:r,tag:"@remotion/media"},"[VideoForPreview] Failed to initialize MediaPlayer",n),J(!0)})}catch(n){let[e,t]=er({error:n,onError:ec.current,disallowFallback:x,isClientSideRendering:!1,clientSideError:n});if("fail"===e)throw t;o.Xp.Log.error({logLevel:r,tag:"@remotion/media"},"[VideoForPreview] MediaPlayer initialization failed",t),J(!0)}return()=>{j.current&&(o.Xp.Log.trace({logLevel:r,tag:"@remotion/media"},"[VideoForPreview] Disposing MediaPlayer"),j.current.dispose(),j.current=null),z(!1),J(!1),ej.current=!1}},[F,Z,v,x,r,f,ew,Q,B.fps,C,_,I,T?.width,T?.height]),e4({style:t,className:i,logLevel:r});let eH=(0,s.useMemo)(()=>[o.Xp.OBJECTFIT_CONTAIN_CLASS_NAME,i].filter(o.Xp.truthy).join(" "),[i]);ei({mediaPlayerRef:j,mediaPlayerReady:W,currentTimeRef:ev,playing:V,isPlayerBuffering:eS,frame:D,trimBefore:y,trimAfter:h,effectiveMuted:eC,userPreferredVolume:ea,playbackRate:ex,toneFrequency:a,globalPlaybackRate:Y,fps:B.fps,sequenceOffset:eg,loop:f,durationInFrames:eb,isPremounting:eh,isPostmounting:ey,currentTime:eF,logLevel:r,label:"VideoForPreview"}),(0,s.useLayoutEffect)(()=>{let e=j.current;e&&W&&e.setDebugOverlay(v)},[v,W]),(0,s.useLayoutEffect)(()=>{let e=j.current;e&&W&&e.setVideoFrameCallback(u??null)},[u,W]),(0,s.useLayoutEffect)(()=>{let e=j.current;e&&W&&e.redrawVideoEffects().catch(()=>{})},[M,W,j]);let e$=(0,s.useMemo)(()=>({...t,objectFit:L}),[L,t]);if(X)throw X;return q&&!x?(0,c.jsx)(o.kY,{...R,src:k,style:e$,className:i,muted:eU,volume:p,trimAfter:h,trimBefore:y,playbackRate:n,toneFrequency:a,loopVolumeCurveBehavior:d,name:"<Html5Video> (fallback)",loop:f,showInTimeline:m,_remotionInternalStack:E??void 0,...b}):w?null:(0,c.jsx)("canvas",{...R,ref:P,style:e$,className:eH})},ti=e=>{let t=(0,o.UC)(),n=(0,o.Bk)(),a=t/n.fps;return(0,s.useMemo)(()=>null!==y({unloopedTimeInSeconds:a,playbackRate:e.playbackRate,loop:e.loop,trimBefore:e.trimBefore,trimAfter:e.trimAfter,mediaDurationInSeconds:1/0,fps:n.fps,ifNoMediaDuration:"infinity",src:e.src}),[a,e.loop,e.playbackRate,e.src,n.fps,e.trimBefore,e.trimAfter])?(0,c.jsx)(tr,{...e}):null},tl=({volume:e,playbackRate:t,src:n,muted:a,loopVolumeCurveBehavior:r,delayRenderRetries:i,delayRenderTimeoutInMilliseconds:l,onVideoFrame:p,logLevel:d,loop:u,style:m,className:f,fallbackOffthreadVideoProps:h,audioStreamIndex:y,disallowFallbackToOffthreadVideo:E,_remotionInternalStack:x,toneFrequency:b,trimAfterValue:F,trimBeforeValue:v,headless:w,onError:U,credentials:C,requestInit:S,objectFit:L,effects:T,...A})=>{if(!n)throw TypeError("No `src` was passed to <Video>.");let M=(0,s.useContext)(o.Xp.SharedAudioContext),I=M?.sampleRate??48e3,R=(0,o.UC)(),k=o.Xp.useTimelinePosition(),{fps:P}=(0,o.Bk)(),{registerRenderAsset:B,unregisterRenderAsset:D}=(0,s.useContext)(o.Xp.RenderAssetManager),j=o.Xp.useMediaStartsAt(),N=(0,s.useContext)(o.Xp.SequenceContext),H=N?.playbackRate??1,$=N?N.cumulatedFrom+N.relativeFrom:0,_=(0,s.useMemo)(()=>`media-video-${(0,o.yT)(n)}-${N?.cumulatedFrom}-${N?.relativeFrom}-${N?.durationInFrames}`,[n,N?.cumulatedFrom,N?.relativeFrom,N?.durationInFrames]),W=(0,o.OK)(),{delayRender:z,continueRender:O,cancelRender:G}=(0,o.dB)(),X=(0,s.useRef)(null),[K,q]=(0,s.useState)(!1),[J]=(0,s.useState)(S),V=o.Xp.useAudioEnabled(),Y=o.Xp.useVideoEnabled(),{isMutedForPlayback:Q,shouldUseAudio:Z}=o.Xp.useMediaAudioState({muted:a,volume:null,audioEnabled:V}),ee=eB(d),et=eP(d),en=o.Xp.useEffectChainState(),[ea,es]=(0,s.useState)(null);if(ea)throw ea;(0,s.useLayoutEffect)(()=>{if(!X.current&&!w||K)return;if(!X.current?.getContext&&!w)return es(Error("Canvas does not have .getContext() method available. This could be because <Video> was mounted inside an <svg> tag."));let a=R/H/P,s=1/P,c=!1,m=z(`Extracting frame at time ${a} from ${n}`,{retries:i??void 0,timeoutInMilliseconds:l??void 0});return eK({sampleRate:I,src:n,timeInSeconds:a,durationInSeconds:s,playbackRate:t*H,logLevel:d,includeAudio:Z,includeVideo:Y,isClientSideRendering:W.isClientSideRendering,loop:u,audioStreamIndex:y,trimAfter:F,trimBefore:v,fps:P,maxCacheSize:ee,credentials:C,requestInit:J,mediaCache:et}).then(async a=>{if(c||et.isDisposed()){"success"===a.type&&a.frame?.close();return}let s=(e,t,n,a)=>

860{if(W.isClientSideRendering)return void G(t);let[s,r]=er({onError:U,error:e,disallowFallback:E,isClientSideRendering:W.isClientSideRendering,clientSideError:e});"fail"===s?G(r):(window.remotion_isMainTab&&o.Xp.Log.warn({logLevel:d,tag:"@remotion/media"},n),q({durationInSeconds:a}))};if("unknown-container-format"===a.type)return void s(Error(`Unknown container format ${n}.`),Error(`Cannot render video "${n}": Unknown container format. See supported formats: https://www.remotion.dev/docs/mediabunny/formats`),`Unknown container format for ${n} (Supported formats: https://www.remotion.dev/docs/mediabunny/formats), falling back to <OffthreadVideo>`,null);if("cannot-decode"===a.type)return void s(Error(`Cannot decode ${n}.`),Error(`Cannot render video "${n}": The video could not be decoded by the browser.`),`Cannot decode ${n}, falling back to <OffthreadVideo>`,a.durationInSeconds);if("cannot-decode-prores"===a.type){let e=new eQ(n);U?.(e),G(e);return}if("cannot-decode-alpha"===a.type)return void s(Error(`Cannot decode alpha component for ${n}.`),Error(`Cannot render video "${n}": The alpha channel could not be decoded by the browser.`),`Cannot decode alpha component for ${n}, falling back to <OffthreadVideo>`,a.durationInSeconds);if("network-error"===a.type)return void s(Error(`Network error fetching ${n}.`),Error(`Cannot render video "${n}": Network error while fetching the video (possibly CORS).`),`Network error fetching ${n} (no CORS?), falling back to <OffthreadVideo>`,null);let{frame:i,audio:l,durationInSeconds:f}=a;if(i){p?.(i);let e=X.current?.getContext("2d",{alpha:!0});if(e&&(e.canvas.width=i.width,e.canvas.height=i.height,e.canvas.style.aspectRatio=`${e.canvas.width} / ${e.canvas.height}`,e.drawImage(i,0,0),T.length>0)&&(!await o.Xp.runEffectChain({state:en.get(i.width,i.height),source:e.canvas,effects:T,output:e.canvas,width:i.width,height:i.height})||c||et.isDisposed()))return void i.close();i.close()}else if(Y){let e=X.current?.getContext("2d",{alpha:!0});e&&e.clearRect(0,0,e.canvas.width,e.canvas.height)}let h=g({behavior:r,loop:u,assetDurationInSeconds:f??0,fps:P,frame:R,startsAt:j,playbackRate:t,trimBefore:v,trimAfter:F}),y=o.Xp.evaluateVolume({volume:e,frame:h,mediaVolume:1});o.Xp.warnAboutTooHighVolume(y),l&&y>0&&(eD(l.data,y),B({type:"inline-audio",id:_,audio:W.isClientSideRendering?l.data:Array.from(l.data),frame:k,startInVideo:$,timestamp:l.timestamp,duration:l.durationInMicroSeconds,toneFrequency:b})),O(m)}).catch(e=>{c||et.isDisposed()||G(e)}),()=>{c=!0,O(m),D(_)}},[I,k,O,z,i,l,W.isClientSideRendering,P,R,_,d,u,r,Z,p,t,H,B,n,$,j,D,e,K,y,E,b,F,v,Y,ee,G,w,U,C,en,T,J,et]),e4({style:m,className:f,logLevel:d});let eo=(0,s.useMemo)(()=>[o.Xp.OBJECTFIT_CONTAIN_CLASS_NAME,f].filter(o.Xp.truthy).join(" "),[f]),ei=(0,s.useMemo)(()=>({...m,objectFit:L}),[L,m]);if(K){let a=(0,c.jsx)(o.Xp.InnerOffthreadVideo,{...A,src:n,playbackRate:t??1,muted:Q,acceptableTimeShiftInSeconds:h?.acceptableTimeShiftInSeconds,loopVolumeCurveBehavior:r??"repeat",delayRenderRetries:i??void 0,delayRenderTimeoutInMilliseconds:l??void 0,name:"Fallback to <OffthreadVideo>",style:ei,allowAmplificationDuringRender:!0,transparent:h?.transparent??!0,toneMapped:h?.toneMapped??!0,audioStreamIndex:y??0,className:f,onVideoFrame:p,volume:e,id:_,onError:h?.onError,toneFrequency:b,showInTimeline:!1,crossOrigin:h?.crossOrigin,onAutoPlayError:h?.onAutoPlayError??null,pauseWhenBuffering:h?.pauseWhenBuffering??!1,trimAfter:F,durationInFrames:void 0,trimBefore:v,useWebAudioApi:h?.useWebAudioApi??!1,preservePitch:h?.preservePitch??!0,startFrom:void 0,endAt:void 0,_remotionInternalStack:x,_remotionInternalNativeLoopPassed:!1}

860);if(u){if(!K.durationInSeconds){let e=Error(`Cannot render video ${n}: @remotion/media was unable to render, and fell back to <OffthreadVideo>. Also, "loop" was set, but <OffthreadVideo> does not support looping and @remotion/media could also not determine the duration of the video.`);throw G(e),e}return(0,c.jsx)(o.FZ,{layout:"none",durationInFrames:o.Xp.calculateMediaDuration({trimAfter:F,mediaDurationInFrames:K.durationInSeconds*P,playbackRate:t,trimBefore:v}),children:a})}return a}return w?null:(0,c.jsx)("canvas",{...A,ref:X,style:ei,className:eo})},{validateMediaTrimProps:tp,resolveTrimProps:tc,validateMediaProps:td,useCropStyle:tu}=o.Xp,tm={src:{type:"asset",assetType:"video",default:void 0,description:"Source",keyframable:!1},...o.Xp.baseSchema,trimAfter:o.Xp.trimAfterField,...o.Xp.premountSchema,volume:{type:"number",min:0,max:20,step:.01,default:1,description:"Volume",hiddenFromList:!1},playbackRate:{type:"number",min:.1,step:.01,default:1,description:"Playback rate",hiddenFromList:!1,keyframable:!1},toneFrequency:{type:"number",min:.01,max:2,step:.01,default:1,description:"Pitch",hiddenFromList:!1,keyframable:!1},muted:{type:"boolean",default:!1,description:"Muted"},loop:{type:"boolean",default:!1,description:"Loop"},...o.Xp.transformSchema,...o.HG.backgroundSchema,...o.HG.borderSchema,...o.HG.borderRadiusSchema,...o.HG.cropSchema},tf=({src:e,audioStreamIndex:t,className:n,delayRenderRetries:a,delayRenderTimeoutInMilliseconds:s,disallowFallbackToOffthreadVideo:r,fallbackOffthreadVideoProps:i,logLevel:l,loop:p,loopVolumeCurveBehavior:u,muted:m,onVideoFrame:f,playbackRate:h,style:y,trimAfter:g,trimBefore:E,volume:x,_remotionInternalStack:F,toneFrequency:v,showInTimeline:w,debugOverlay:U,headless:C,onError:S,credentials:L,requestInit:T,controls:A,objectFit:M,maxCanvasSinkFrameSize:I,_experimentalInitiallyDrawCachedFrame:R,effects:k,setMediaDurationInSeconds:P,...B})=>{let D=(0,o.OK)();if("string"!=typeof e)throw TypeError(`The \`<Video>\` tag requires a string for \`src\`, but got ${JSON.stringify(e)} instead.`);tp({startFrom:void 0,endAt:void 0,trimBefore:E,trimAfter:g});let{trimBeforeValue:j,trimAfterValue:N}=tc({startFrom:void 0,endAt:void 0,trimBefore:E,trimAfter:g});return(td({playbackRate:h,volume:x},"Video"),b({toneFrequency:v,component:"Video"}),D.isRendering)?(0,c.jsx)(tl,{...B,audioStreamIndex:t??0,className:n,delayRenderRetries:a??null,delayRenderTimeoutInMilliseconds:s??null,disallowFallbackToOffthreadVideo:r??!1,fallbackOffthreadVideoProps:i,logLevel:l,loop:p,loopVolumeCurveBehavior:u,muted:m,onVideoFrame:f,playbackRate:h,src:e,_remotionInternalStack:F,style:y,volume:x,toneFrequency:v,trimAfterValue:N,trimBeforeValue:j,headless:C,onError:S,credentials:L,requestInit:T,objectFit:M,effects:k}):(I?.width!==void 0&&d.NoReactInternals.validateDimension(I.width,"maxCanvasSinkFrameSize.width","of the <Video /> component"),I?.height!==void 0&&d.NoReactInternals.validateDimension(I.height,"maxCanvasSinkFrameSize.height","of the <Video /> component"),(0,c.jsx)(ti,{...B,setMediaDurationInSeconds:P,audioStreamIndex:t??0,className:n,logLevel:l,loop:p,loopVolumeCurveBehavior:u,muted:m,onVideoFrame:f,playbackRate:h,toneFrequency:v??1,src:e,style:y,volume:x,showInTimeline:w,trimAfter:N,trimBefore:j,_remotionInternalStack:F??null,disallowFallbackToOffthreadVideo:r,fallbackOffthreadVideoProps:i,debugOverlay:U??!1,headless:C??!1,onError:S,credentials:L,requestInit:T,controls:A,objectFit:M,maxCanvasSinkFrameSize:I,effects:k,_experimentalInitiallyDrawCachedFrame:R}))},th=o.HG.withSchema({Component:({src:e,audioStreamIndex:t,className:n,delayRenderRetries:a,delayRenderTimeoutInMilliseconds:r,disallowFallbackToOffthreadVideo:i,fallbackOffthreadVideoProps:l,logLevel:p,loop:d,loopVolumeCurveBehavior:u,muted:m,name:f,onVideoFrame:h,playbackRate:y,showInTimeline:g,style:b,trimAfter:w,trimBefore:U,volume:C,toneFrequency:S,debugOverlay:L,headless:T,onError:A,credentials:M,requestInit:I,controls:R,objectFit:k,maxCanvasSinkFrameSize:P,_experimentalInitiallyDrawCachedFrame:B,effects:D,durationInFrames:j,from:N,freeze:H,hidden:$,premountFor:_,postmountFor:W,styleWhilePremounted:z,styleWhilePostmou

860nted:O,cropLeft:G,cropRight:X,cropTop:K,cropBottom:q,...J})=>{let V=R?o.Xp.getStackForControls(R)??void 0:void 0,Y=o.Xp.useLogLevel(),[Q]=o.Xp.useMediaVolumeState(),Z=o.Xp.useMediaStartsAt(),ee=(0,o.Bk)(),et=F({durationInFrames:j,trimAfter:w,trimBefore:U}),en=v({durationInFrames:j,loop:d??!1,playbackRate:y??1,trimAfter:et,trimBefore:U}),ea=Math.min(en??1/0,Math.max(0,ee.durationInFrames-(N??0))),[es,eo]=(0,s.useState)(null),er=E({volume:C,loop:d??!1,behavior:u??"repeat",assetDurationInSeconds:es,fps:ee.fps,startsAt:Math.min(0,Z+(N??0)),playbackRate:y??1,trimBefore:U,trimAfter:et}),ei=o.Xp.useBasicMediaInTimeline({src:e,volume:er,playbackRate:y??1,trimBefore:U,trimAfter:et,sequenceDurationInFrames:ea,displayName:f??"<Video>",mediaVolume:Q,mediaStartsAt:Z,mediaFrom:N??0,loop:d??!1,muted:m??!1}),el=(0,s.useMemo)(()=>x({loop:d??!1,mediaDurationInSeconds:es,playbackRate:y??1,trimAfter:et,trimBefore:U,sequenceDurationInFrames:ea,compFps:ee.fps}),[d,es,y,et,U,ea,ee.fps]),ep=(0,s.useMemo)(()=>({type:"video",data:ei}),[ei]),ec=o.Xp.useMemoizedEffects({effects:D??[],overrideId:R?.overrideId??null}),ed=o.Xp.useMemoizedEffectDefinitions(D??[]),{effectivePostmountFor:eu,effectivePremountFor:em,freezeFrame:ef,isPremountingOrPostmounting:eh,postmountingActive:ey,premountingActive:eg,premountingStyle:eE}=o.Xp.usePremounting({from:N??0,durationInFrames:en??1/0,premountFor:_??null,postmountFor:W??null,style:b??null,styleWhilePremounted:z??null,styleWhilePostmounted:O??null,hideWhilePremounted:"display-none"}),ex=tu({cropLeft:G,cropRight:X,cropTop:K,cropBottom:q,style:eE,componentName:"<Video />"});return 0===ea?null:(0,c.jsx)(o.Kl,{frame:ef,active:eh,_remotionInternalIsPremounting:eg,children:(0,c.jsx)(o.gd,{layout:"none",from:N??0,durationInFrames:en,freeze:H,_remotionInternalIsMedia:ep,_remotionInternalPremountDisplay:em||null,_remotionInternalPostmountDisplay:eu||null,_remotionInternalIsPremounting:eg,_remotionInternalIsPostmounting:ey,name:f??"<Video>",_remotionInternalDocumentationLink:void 0===f?"https://www.remotion.dev/docs/media/video":void 0,controls:R,_remotionInternalLoopDisplay:el,_remotionInternalEffects:ed,showInTimeline:g??!0,hidden:$,children:(0,c.jsx)(tf,{...J,audioStreamIndex:t??0,className:n,delayRenderRetries:a??null,delayRenderTimeoutInMilliseconds:r??null,disallowFallbackToOffthreadVideo:i??!1,fallbackOffthreadVideoProps:l??{},logLevel:p??Y,loop:d??!1,loopVolumeCurveBehavior:u??"repeat",muted:m??!1,onVideoFrame:h,playbackRate:y??1,showInTimeline:g??!0,src:e,style:ex??{},trimAfter:et,trimBefore:U,volume:C??1,toneFrequency:S??1,_remotionInternalStack:V,debugOverlay:L??!1,headless:T??!1,onError:A,credentials:M,requestInit:I,controls:R,objectFit:k??"contain",maxCanvasSinkFrameSize:P??null,_experimentalInitiallyDrawCachedFrame:B??!1,effects:ec,setMediaDurationInSeconds:eo})})})},componentName:"<Video>",componentIdentity:"dev.remotion.media.Video",schema:tm,supportsEffects:!0})},75145(e,t,n){"use strict";function a(e,t,n){return{x:e.x+(t.x-e.x)*n,y:e.y+(t.y-e.y)*n}}n.d(t,{D0:()=>A,ON:()=>T,Rr:()=>g,S6:()=>M,UX:()=>L,Yf:()=>v,ar:()=>U}),n(64831);var s=({instruction:e,lastPoint:t,progress:n})=>{if("M"===e.type)return e;if("L"===e.type)return(({instruction:e,lastPoint:t,progress:n})=>({type:"L",x:t.x+(e.x-t.x)*n,y:t.y+(e.y-t.y)*n}))({instruction:e,lastPoint:t,progress:n});if("C"===e.type)return function({progress:e,lastPoint:t,instruction:n}){let s={x:t.x,y:t.y},o={x:n.cp1x,y:n.cp1y},r={x:n.cp2x,y:n.cp2y},i={x:n.x,y:n.y},l=a(s,o,e),p=a(o,r,e),c=a(r,i,e),d=a(l,p,e),u=a(p,c,e),m=a(d,u,e);

860return{type:"C",cp1x:l.x,cp1y:l.y,cp2x:d.x,cp2y:d.y,x:m.x,y:m.y}}({instruction:e,lastPoint:t,progress:n});if("Z"===e.type)return e;throw TypeError(`${e.type} is not supported.`)},o=[[],[],[-.5773502691896257,.5773502691896257],[0,-.7745966692414834,.7745966692414834],[-.33998104358485626,.33998104358485626,-.8611363115940526,.8611363115940526],[0,-.5384693101056831,.5384693101056831,-.906179845938664,.906179845938664],[.6612093864662645,-.6612093864662645,-.2386191860831969,.2386191860831969,-.932469514203152,.932469514203152],[0,.4058451513773972,-.4058451513773972,-.7415311855993945,.7415311855993945,-.9491079123427585,.9491079123427585],[-.1834346424956498,.1834346424956498,-.525532409916329,.525532409916329,-.7966664774136267,.7966664774136267,-.9602898564975363,.9602898564975363],[0,-.8360311073266358,.8360311073266358,-.9681602395076261,.9681602395076261,-.3242534234038089,.3242534234038089,-.6133714327005904,.6133714327005904],[-.14887433898163122,.14887433898163122,-.4333953941292472,.4333953941292472,-.6794095682990244,.6794095682990244,-.8650633666889845,.8650633666889845,-.9739065285171717,.9739065285171717],[0,-.26954315595234496,.26954315595234496,-.5190961292068118,.5190961292068118,-.7301520055740494,.7301520055740494,-.8870625997680953,.8870625997680953,-.978228658146057,.978228658146057],[-.1252334085114689,.1252334085114689,-.3678314989981802,.3678314989981802,-.5873179542866175,.5873179542866175,-.7699026741943047,.7699026741943047,-.9041172563704749,.9041172563704749,-.9815606342467192,.9815606342467192],[0,-.2304583159551348,.2304583159551348,-.44849275103644687,.44849275103644687,-.6423493394403402,.6423493394403402,-.8015780907333099,.8015780907333099,-.9175983992229779,.9175983992229779,-.9841830547185881,.9841830547185881],[-.10805494870734367,.10805494870734367,-.31911236892788974,.31911236892788974,-.5152486363581541,.5152486363581541,-.6872929048116855,.6872929048116855,-.827201315069765,.827201315069765,-.9284348836635735,.9284348836635735,-.9862838086968123,.9862838086968123],[0,-.20119409399743451,.20119409399743451,-.3941513470775634,.3941513470775634,-.5709721726085388,.5709721726085388,-.7244177313601701,.7244177313601701,-.8482065834104272,.8482065834104272,-.937273392400706,.937273392400706,-.9879925180204854,.9879925180204854],[-.09501250983763744,.09501250983763744,-.2816035507792589,.2816035507792589,-.45801677765722737,.45801677765722737,-.6178762444026438,.6178762444026438,-.755404408355003,.755404408355003,-.8656312023878318,.8656312023878318,-.9445750230732326,.9445750230732326,-.9894009349916499,.9894009349916499],[0,-.17848418149584785,.17848418149584785,-.3512317634538763,.3512317634538763,-.5126905370864769,.5126905370864769,-.6576711592166907,.6576711592166907,-.7815140038968014,.7815140038968014,-.8802391537269859,.8802391537269859,-.9506755217687678,.9506755217687678,-.9905754753144174,.9905754753144174],[-.0847750130417353,.0847750130417353,-.2518862256915055,.2518862256915055,-.41175116146284263,.41175116146284263,-.5597708310739475,.5597708310739475,-.6916870430603532,.6916870430603532,-.8037049589725231,.8037049589725231,-.8926024664975557,.8926024664975557,-.9558239495713977,.9558239495713977,-.9915651684209309,.9915651684209309],[0,-.16035864564022537,.16035864564022537,-.31656409996362983,.31656409996362983,-.46457074137596094,.46457074137596094,-.600545304661681,.600545304661681,-.7209661773352294,.7209661773352294,-.8227146565371428,.8227146565371428,-.9031559036148179,.9031559036148179,-.96020815213483,.96020815213483,-.9924068438435844,.9924068438435844],[-.07652652113349734,.07652652113349734,-.22778585114164507,.22778585114164507,-.37370608871541955,.37370608871541955,-.5108670019508271,.5108670019508271,-.636053680726515,.636053680726515,-.7463319064601508,.7463319064601508,-.8391169718222188,.8391169718222188,-.912234428251326,.912234428251326,-.9639719272779138,.9639719272779138,-.9931285991850949,.9931285991850949],[0,-.1455618541608951,.1455618541608951,-.2880213168024011,.2880213168024011,-.4243421202074388,.4243421202074388,-.5516188358872198,.5516188358872198,-.6671388041974123,.6671388041974123,-.7684399634756779,.7684399634756779,

860-.8533633645833173,.8533633645833173,-.9200993341504008,.9200993341504008,-.9672268385663063,.9672268385663063,-.9937521706203895,.9937521706203895],[-.06973927331972223,.06973927331972223,-.20786042668822127,.20786042668822127,-.34193582089208424,.34193582089208424,-.469355837986757,.469355837986757,-.5876404035069116,.5876404035069116,-.6944872631866827,.6944872631866827,-.7878168059792081,.7878168059792081,-.8658125777203002,.8658125777203002,-.926956772187174,.926956772187174,-.9700604978354287,.9700604978354287,-.9942945854823992,.9942945854823992],[0,-.1332568242984661,.1332568242984661,-.26413568097034495,.26413568097034495,-.3903010380302908,.3903010380302908,-.5095014778460075,.5095014778460075,-.6196098757636461,.6196098757636461,-.7186613631319502,.7186613631319502,-.8048884016188399,.8048884016188399,-.8767523582704416,.8767523582704416,-.9329710868260161,.9329710868260161,-.9725424712181152,.9725424712181152,-.9947693349975522,.9947693349975522],[-.06405689286260563,.06405689286260563,-.1911188674736163,.1911188674736163,-.3150426796961634,.3150426796961634,-.4337935076260451,.4337935076260451,-.5454214713888396,.5454214713888396,-.6480936519369755,.6480936519369755,-.7401241915785544,.7401241915785544,-.820001985973903,.820001985973903,-.8864155270044011,.8864155270044011,-.9382745520027328,.9382745520027328,-.9747285559713095,.9747285559713095,-.9951872199970213,.9951872199970213]],r=[[],[],[1,1],[.8888888888888888,.5555555555555556,.5555555555555556],[.6521451548625461,.6521451548625461,.34785484513745385,.34785484513745385],[.5688888888888889,.47862867049936647,.47862867049936647,.23692688505618908,.23692688505618908],[.3607615730481386,.3607615730481386,.46791393457269104,.46791393457269104,.17132449237917036,.17132449237917036],[.4179591836734694,.3818300505051189,.3818300505051189,.27970539148927664,.27970539148927664,.1294849661688697,.1294849661688697],[.362683783378362,.362683783378362,.31370664587788727,.31370664587788727,.22238103445337448,.22238103445337448,.10122853629037626,.10122853629037626],[.3302393550012598,.1806481606948574,.1806481606948574,.08127438836157441,.08127438836157441,.31234707704000286,.31234707704000286,.26061069640293544,.26061069640293544],[.29552422471475287,.29552422471475287,.26926671930999635,.26926671930999635,.21908636251598204,.21908636251598204,.1494513491505806,.1494513491505806,.06667134430868814,.06667134430868814],[.2729250867779006,.26280454451024665,.26280454451024665,.23319376459199048,.23319376459199048,.18629021092773426,.18629021092773426,.1255803694649046,.1255803694649046,.05566856711617366,.05566856711617366],[.24914704581340277,.24914704581340277,.2334925365383548,.2334925365383548,.20316742672306592,.20316742672306592,.16007832854334622,.16007832854334622,.10693932599531843,.10693932599531843,.04717533638651183,.04717533638651183],[.2325515532308739,.22628318026289723,.22628318026289723,.2078160475368885,.2078160475368885,.17814598076194574,.17814598076194574,.13887351021978725,.13887351021978725,.09212149983772845,.09212149983772845,.04048400476531588,.04048400476531588],[.2152638534631578,.2152638534631578,.2051984637212956,.2051984637212956,.18553839747793782,.18553839747793782,.15720316715819355,.15720316715819355,.12151857068790319,.12151857068790319,.08015808715976021,.08015808715976021,.03511946033175186,.03511946033175186],[.2025782419255613,.19843148532711158,.19843148532711158,.1861610000155622,.1861610000155622,.16626920581699392,.16626920581699392,.13957067792615432,.13957067792615432,.10715922046717194,.10715922046717194,.07036604748810812,.07036604748810812,.03075324199611727,.03075324199611727],[.1894506104550685,.1894506104550685,.18260341504492358,.18260341504492358,.16915651939500254,.16915651939500254,.14959598881657674,.14959598881657674,.12462897125553388,.12462897125553388,.09515851168249279,.09515851168249279,.062253523938647894,.062253523938647894,.027152459411754096,.027152459411754096],[.17944647035620653,.17656270536699264,.17656270536699264,.16800410215645004,.16800410215645004,.15404576107681028,.15404576107681028,.13513636846852548,.13513636846852548,.11188384719340397,.11188384719340397,.08503614831717918,.08503614831717918,.0554595293739872,.0554595293739872,.02414830286854793,.02414830286854793],[.1691423829631436,.1691423829631436,.16427648374583273,.16427648374583273,.15468467512626524,.15468467512626524,.14064291467065065,.14064291467065065,.122555206

86071147846,.12255520671147846,.10094204410628717,.10094204410628717,.07642573025488905,.07642573025488905,.0497145488949698,.0497145488949698,.02161601352648331,.02161601352648331],[.1610544498487837,.15896884339395434,.15896884339395434,.15276604206585967,.15276604206585967,.1426067021736066,.1426067021736066,.12875396253933621,.12875396253933621,.11156664554733399,.11156664554733399,.09149002162245,.09149002162245,.06904454273764123,.06904454273764123,.0448142267656996,.0448142267656996,.019461788229726478,.019461788229726478],[.15275338713072584,.15275338713072584,.14917298647260374,.14917298647260374,.14209610931838204,.14209610931838204,.13168863844917664,.13168863844917664,.11819453196151841,.11819453196151841,.10193011981724044,.10193011981724044,.08327674157670475,.08327674157670475,.06267204833410907,.06267204833410907,.04060142980038694,.04060142980038694,.017614007139152118,.017614007139152118],[.14608113364969041,.14452440398997005,.14452440398997005,.13988739479107315,.13988739479107315,.13226893863333747,.13226893863333747,.12183141605372853,.12183141605372853,.10879729916714838,.10879729916714838,.09344442345603386,.09344442345603386,.0761001136283793,.0761001136283793,.057134425426857205,.057134425426857205,.036953789770852494,.036953789770852494,.016017228257774335,.016017228257774335],[.13925187285563198,.13925187285563198,.13654149834601517,.13654149834601517,.13117350478706238,.13117350478706238,.12325237681051242,.12325237681051242,.11293229608053922,.11293229608053922,.10041414444288096,.10041414444288096,.08594160621706773,.08594160621706773,.06979646842452049,.06979646842452049,.052293335152683286,.052293335152683286,.03377490158481415,.03377490158481415,.0146279952982722,.0146279952982722],[.13365457218610619,.1324620394046966,.1324620394046966,.12890572218808216,.12890572218808216,.12304908430672953,.12304908430672953,.11499664022241136,.11499664022241136,.10489209146454141,.10489209146454141,.09291576606003515,.09291576606003515,.07928141177671895,.07928141177671895,.06423242140852585,.06423242140852585,.04803767173108467,.04803767173108467,.030988005856979445,.030988005856979445,.013411859487141771,.013411859487141771],[.12793819534675216,.12793819534675216,.1258374563468283,.1258374563468283,.12167047292780339,.12167047292780339,.1155056680537256,.1155056680537256,.10744427011596563,.10744427011596563,.09761865210411388,.09761865210411388,.08619016153195327,.08619016153195327,.0733464814110803,.0733464814110803,.05929858491543678,.05929858491543678,.04427743881741981,.04427743881741981,.028531388628933663,.028531388628933663,.0123412297999872,.0123412297999872]],i=({sx:e,sy:t,t:n})=>{let a,s=3*(e[1]-e[0]),i=3*(e[2]-e[1]),l=3*(e[3]-e[2]),p=3*(t[1]-t[0]),c=3*(t[2]-t[1]),d=3*(t[3]-t[2]),u=n/2,m=0;for(let e=0;e<20;e++){let t=1-(a=u*o[20][e]+u),n=t*t*s+2*t*a*i+a*a*l,f=t*t*p+2*t*a*c+a*a*d;m+=r[20][e]*Math.sqrt(n*n+f*f)}return u*m},l=({length:e,totalLength:t,func:n})=>{let a=1,s=e/t,o=(e-n(s))/t,r=0;for(;a>.001;){let i=Math.abs(e-n(s+o))/t;if(i<a)a=i,s+=o;else{let r=Math.abs(e-n(s-o))/t;r<a?(a=r,s-=o):o/=2}if(++r>500)break}return s},p=({startX:e,startY:t,cp1x:n,cp1y:a,cp2x:s,cp2y:o,x:r,y:p})=>{let c={x:s,y:o},d={x:r,y:p},u=i({sx:[e,n,c.x,d.x],sy:[t,a,c.y,d.y],t:1});return{getPointAtLength:s=>{let o=[e,n,c.x,d.x],r=[t,a,c.y,d.y],p=l({length:s,totalLength:u,func:e=>i({sx:o,sy:r,t:e})});return{x:(1-p)*(1-p)*(1-p)*o[0]+3*(1-p)*(1-p)*p*o[1]+3*(1-p)*p*p*o[2]+p*p*p*o[3],y:(1-p)*(1-p)*(1-p)*r[0]+3*(1-p)*(1-p)*p*r[1]+3*(1-p)*p*p*r[2]+p*p*p*r[3]}},getTangentAtLength:s=>{let o,r,p,m,f,h,y,g=[e,n,c.x,d.x],E=[t,a,c.y,d.y],x=l({length:s,totalLength:u,func:e=>i({sx:g,sy:E,t:e})}),b=(o=3*(g[1]-g[0]),r=3*(g[2]-g[1]),p=3*(g[3]-g[2]),m=3*(E[1]-E[0]),f=3*(E[2]-E[1]),h=3*(E[3]-E[2]),{x:(y=1-x)*y*o+2*y*x*r+x*x*p,y:y*y*m+2*y*x*f+x*x*h}),F=Math.sqrt(b.x*b.x+b.y*b.y);return F>0?{x:b.x/F,y:b.y/F}:{x:0,y:0}},getTotalLength:()=>u,getC:()=>c,getD:()=>d,type:"cubic-bezier"}},c=({x0:e,x1:t,y0:n,y1:a})=>({getTotalLength:()=>Math.sqrt((e-t)**2+(n-a)**2),getPointAtLength:s=>{let o=s/Math.sqrt((e-t)**2+(n-a)**2),r=(t-e)*(o=Number.isNaN(o)?1:o),i=(a-n)*o;return{x:e+r,y:n+i}},getTangentAtLength:()=>{let s=Math.sqrt((t-e)*(t-e)+(a-n)*(a-n));return{x:(t-e)/s,y:(a-n)/s}},type:"linear"}),d={a:7,A:7,C:6,c:6,H:1,h:1,L:2,l:2,M:2,m:2,Q:4,q:4,S:4,s:4,T:2,t:2,V:1,v:1,Z:0,z:0}

860,u=(e,t,n)=>((e,t)=>{let n=[],a=d[t];if(e.length%a!=0)throw Error(`Expected number of arguments of SVG instruction "${t} ${e.join(" ")}" to be a multiple of ${a}`);for(let t=0;t<e.length;t+=a)n.push(e.slice(t,t+a));return n})(e,t).map(e=>n(e)),m=/([astvzqmhlc])([^astvzqmhlc]*)/gi,f=/-?[0-9]*\.?[0-9]+(?:e[-+]?\d+)?/gi,h=/[\s,]*([-+]?(?:[0-9]+\.?[0-9]*|\.[0-9]+)(?:e[-+]?\d+)?)/iy,y=/[\s,]*([01])/y,g=e=>{if(!e)throw Error("No path provided");let t=e.match(m);if(!t)throw Error(`No path elements found in string ${e}`);return t.map(e=>{let t=e.charAt(0),n=((e,t)=>{let n;if("A"===t||"a"===t){let a;n=[];let s=0;do{let t=n.length%7==3||n.length%7==4?y:h;t.lastIndex=s,(a=t.exec(e))&&(n.push(a[1]),s=t.lastIndex)}while(a)let o=e.slice(s);if(!/^[\s,]*$/.test(o))throw Error(`Malformed path data: ${t} has an invalid value at "${o.trim()}"`)}else n=e.match(f);if(!n||0===n.length){if("Z"===t||"z"===t)return[];throw Error(`Malformed path data: ${t} was expected to have numbers afterwards`)}let a=d[t];if(n.length%a!=0)throw Error(`Malformed path data: ${t} was expected to have a multiple of ${a} numbers, but got "${t} ${n.join(" ")} instead"`);return n.map(Number)})(e.substring(1),t);if("M"===t&&n.length>2){let e=[];return e.push({type:t,x:n[0],y:n[1]}),e.push(...u(n.slice(2),"L",e=>({type:"L",x:e[0],y:e[1]}))),e}if("m"===t&&n.length>2){let e=[];return e.push({type:t,dx:n[0],dy:n[1]}),e.push(...u(n.slice(2),"l",e=>({type:"l",dx:e[0],dy:e[1]}))),e}if("Z"===t||"z"===t)return[{type:"Z"}];if("A"===t)return u(n,t,e=>({type:t,rx:e[0],ry:e[1],xAxisRotation:e[2],largeArcFlag:1===e[3],sweepFlag:1===e[4],x:e[5],y:e[6]}));if("a"===t)return u(n,t,e=>({type:t,rx:e[0],ry:e[1],xAxisRotation:e[2],largeArcFlag:1===e[3],sweepFlag:1===e[4],dx:e[5],dy:e[6]}));if("C"===t)return u(n,t,e=>({type:t,cp1x:e[0],cp1y:e[1],cp2x:e[2],cp2y:e[3],x:e[4],y:e[5]}));if("c"===t)return u(n,t,e=>({type:t,cp1dx:e[0],cp1dy:e[1],cp2dx:e[2],cp2dy:e[3],dx:e[4],dy:e[5]}));if("S"===t)return u(n,t,e=>({type:t,cpx:e[0],cpy:e[1],x:e[2],y:e[3]}));if("s"===t)return u(n,t,e=>({type:t,cpdx:e[0],cpdy:e[1],dx:e[2],dy:e[3]}));if("H"===t)return u(n,t,e=>({type:t,x:e[0]}));if("h"===t)return u(n,t,e=>({type:t,dx:e[0]}));if("V"===t)return u(n,t,e=>({type:t,y:e[0]}));if("v"===t)return u(n,t,e=>({type:t,dy:e[0]}));if("L"===t||"M"===t)return u(n,t,e=>({type:t,x:e[0],y:e[1]}));if("m"===t||"l"===t)return u(n,t,e=>({type:t,dx:e[0],dy:e[1]}));if("Q"===t)return u(n,t,e=>({type:t,cpx:e[0],cpy:e[1],x:e[2],y:e[3]}));if("q"===t)return u(n,t,e=>({type:t,cpdx:e[0],cpdy:e[1],dx:e[2],dy:e[3]}));if("T"===t)return u(n,t,e=>({type:t,x:e[0],y:e[1]}));if("t"===t)return u(n,t,e=>({type:t,dx:e[0],dy:e[1]}));throw Error(`Invalid path element ${e}`)},[]).flat(1)},E=(e,t)=>{let n=t.x+2/3*(e.cpx-t.x),a=t.y+2/3*(e.cpy-t.y);return{type:"C",cp1x:n,cp1y:a,cp2x:e.x+2/3*(e.cpx-e.x),cp2y:e.y+2/3*(e.cpy-e.y),x:e.x,y:e.y}},x=2*Math.PI;function b(e,t,n,a){let s=e*n+t*a;return s>1&&(s=1),s<-1&&(s=-1),(e*a-t*n<0?-1:1)*Math.acos(s)}var F=e=>(({segments:e,iterate:t})=>{let n=0,a=0,s=0,o=0,r=null,i=null;return e.map((l,p)=>{let c=t({segment:l,x:n,y:a,prevSegment:e[p-1]??null,initialX:s,initialY:o,cpX:r,cpY:i});switch(l.type){case"M":s=l.x,o=l.y,n=l.x,a=l.y,r=null,i=null;break;case"Q":case"S":n=l.x,a=l.y,r=l.cpx,i=l.cpy;break;case"A":case"L":n=l.x,a=l.y,r=null,i=null;break;case"C":n=l.x,a=l.y,r=l.cp2x,i=l.cp2y;break;case"T":null!==r&&null!==i&&(r=n-(r-n),i=a-(i-a)),n=l.x,a=l.y;break;case"V":a=l.y,r=null,i=null;break;case"H":n=l.x,r=null,i=null;break;case"Z":n=s,a=o,r=null,i=null;break;default:throw Error(`Unexpected instruction ${l.type}`)}return c}).flat(1)})({segments:e,iterate:({segment:e,prevSegment:t,x:n,y:a,cpX:s,cpY:o})=>{if("H"===e.type)return[{type:"L",x:e.x,y:a}];if("V"===e.type)return[{type:"L",x:n,y:e.y}];if("A"===e.type){let t=function({x1:e,y1:t,x2:n,y2:a,largeArcFlag:s,sweepFlag:o,rx:r,ry:i,phi:l}){let p=Math.sin(l*x/360),c=Math.cos(l*x/360),d=c*(e-n)/2+p*(t-a)/2,u=-p*(e-n)/2+c*(t-a)/2;if(0===d&&0===u||0===r||0===i)return[];let m=d*d/((r=Math.abs(r))*r)+u*u/((i=Math.abs(i))*i);m>1&&(r*=Math.sqrt(m),i*=Math.sqrt(m));let f=function({x1:e,y1:t,x2:n,y2:a,largeArcFlag:s,sweepFlag:o,rx:r,ry:i,sin_phi:l,cos_phi:p}){let c=p*(e-n)/2+l*(t-a)/2,d=-l*(e-n)/2+p*(t-a)/2,u=r*r,m=i*i,f=c*c,h=d*d,y=u*m-u*h-m*f;y<0&&(y=0),y/=u*h+m*f;let g=(y=Math.sqrt(y)*(s===o?-1:1))*r/i*d,E=-(y*i)/r*c,F=(c-g)/r,v=(d-E)/i,w=b(1,0,F,v),U=b(F,v,(-c-g)/r,(-d-E)/i);return!1===o&&U>0&&(U-=x),!0===o&&U<0&&(U+=x),[p*g-l*E+(e+n)/2,l*g+p*E+(t+a)/2,w,U]}({x1:e,y1:t,x2:n,y2:a,largeArcFlag:s,sweepFlag:o,rx:r,ry:i,sin_phi:p,cos_phi:c}

860),h=[],y=f[2],g=f[3],E=Math.max(Math.ceil(Math.abs(g)/(x/4)),1);g/=E;for(let e=0;e<E;e++)h.push(function(e,t){let n=4/3*Math.tan(t/4),a=Math.cos(e),s=Math.sin(e),o=Math.cos(e+t),r=Math.sin(e+t);return[a,s,a-s*n,s+a*n,o+r*n,r-o*n,o,r]}(y,g)),y+=g;return h.map(e=>{for(let t=0;t<e.length;t+=2){let n=e[t+0],a=e[t+1],s=c*(n*=r)-p*(a*=i),o=p*n+c*a;e[t+0]=s+f[0],e[t+1]=o+f[1]}return e})}({x1:n,y1:a,x2:e.x,y2:e.y,largeArcFlag:e.largeArcFlag,sweepFlag:e.sweepFlag,rx:e.rx,ry:e.ry,phi:e.xAxisRotation});return 0===t.length?[{type:"L",x:e.x,y:e.y}]:t.map(e=>({type:"C",cp1x:e[2],cp1y:e[3],cp2x:e[4],cp2y:e[5],x:e[6],y:e[7]}))}if("T"===e.type){let r=0,i=0;t&&("Q"===t.type||"T"===t.type)?(r=s,i=o):(r=n,i=a);let l=r-n,p=i-a;return[E({type:"Q",cpx:n-l,cpy:a-p,x:e.x,y:e.y},{x:n,y:a})]}if("S"===e.type){let s=0,o=0;t&&"C"===t.type?(s=t.cp2x,o=t.cp2y):t&&"S"===t.type?(s=t.cpx,o=t.cpy):(s=n,o=a);let r=s-n,i=o-a;return[{type:"C",cp1x:n-r,cp1y:a-i,cp2x:e.cpx,cp2y:e.cpy,x:e.x,y:e.y}]}return"Q"===e.type?[E(e,{x:n,y:a})]:[e]}}),v=e=>e.map(e=>(e=>{if("A"===e.type)return`A ${e.rx} ${e.ry} ${e.xAxisRotation} ${Number(e.largeArcFlag)} ${Number(e.sweepFlag)} ${e.x} ${e.y}`;if("a"===e.type)return`a ${e.rx} ${e.ry} ${e.xAxisRotation} ${Number(e.largeArcFlag)} ${Number(e.sweepFlag)} ${e.dx} ${e.dy}`;if("C"===e.type)return`C ${e.cp1x} ${e.cp1y} ${e.cp2x} ${e.cp2y} ${e.x} ${e.y}`;if("c"===e.type)return`c ${e.cp1dx} ${e.cp1dy} ${e.cp2dx} ${e.cp2dy} ${e.dx} ${e.dy}`;if("S"===e.type)return`S ${e.cpx} ${e.cpy} ${e.x} ${e.y}`;if("s"===e.type)return`s ${e.cpdx} ${e.cpdy} ${e.dx} ${e.dy}`;if("Q"===e.type)return`Q ${e.cpx} ${e.cpy} ${e.x} ${e.y}`;if("q"===e.type)return`q ${e.cpdx} ${e.cpdy} ${e.dx} ${e.dy}`;if("Z"===e.type)return"Z";if("H"===e.type)return`H ${e.x}`;if("h"===e.type)return`h ${e.dx}`;if("V"===e.type)return`V ${e.y}`;if("v"===e.type)return`v ${e.dy}`;if("L"===e.type)return`L ${e.x} ${e.y}`;if("l"===e.type)return`l ${e.dx} ${e.dy}`;if("M"===e.type)return`M ${e.x} ${e.y}`;if("m"===e.type)return`m ${e.dx} ${e.dy}`;if("T"===e.type)return`T ${e.x} ${e.y}`;if("t"===e.type)return`t ${e.dx} ${e.dy}`;throw Error(`Unknown instruction type: ${e.type}`)})(e)).join(" "),w=e=>{let t=[],n=0,a=0,s=0,o=0;for(let r=0;r<e.length;r++){let i=e[r];if("M"===i.type?(s=i.x,o=i.y):"m"===i.type&&(s=n+i.dx,o=a+i.dy),"A"===i.type||"C"===i.type||"L"===i.type||"M"===i.type||"Q"===i.type||"S"===i.type||"T"===i.type){t.push(i),n=i.x,a=i.y;continue}if("a"===i.type||"c"===i.type||"l"===i.type||"m"===i.type||"q"===i.type||"s"===i.type||"t"===i.type){let e=n,s=a;if(n+=i.dx,a+=i.dy,"a"===i.type){t.push({type:"A",largeArcFlag:i.largeArcFlag,rx:i.rx,ry:i.ry,sweepFlag:i.sweepFlag,xAxisRotation:i.xAxisRotation,x:n,y:a});continue}if("c"===i.type){t.push({type:"C",cp1x:i.cp1dx+e,cp1y:i.cp1dy+s,cp2x:i.cp2dx+e,cp2y:i.cp2dy+s,x:n,y:a});continue}if("l"===i.type){t.push({type:"L",x:n,y:a});continue}if("m"===i.type){t.push({type:"M",x:n,y:a});continue}if("q"===i.type){t.push({type:"Q",cpx:i.cpdx+e,cpy:i.cpdy+s,x:n,y:a});continue}if("s"===i.type){t.push({type:"S",cpx:i.cpdx+e,cpy:i.cpdy+s,x:n,y:a});continue}if("t"===i.type){t.push({type:"T",x:n,y:a});continue}}if("H"===i.type){t.push(i),n=i.x;continue}if("V"===i.type){t.push(i),a=i.y;continue}if("Z"===i.type){t.push(i),n=s,a=o;continue}if("h"===i.type){n+=i.dx,t.push({type:"H",x:n});continue}if("v"===i.type){a+=i.dy,t.push({type:"V",y:a});continue}throw Error("Unknown instruction type: "+i.type)}return t},U=e=>F(w(e));function C(e){let t=e[0]-3*e[1]+3*e[2]-e[3];if(1e-8>Math.abs(t))return e[0]===e[3]&&e[0]===e[1]?[e[0],e[3]]:function(e){let t=Math.min(e[0],e[2]),n=Math.max(e[0],e[2]);if(e[1]>e[0]?e[2]>=e[1]:e[2]<=e[1])return[t,n];let a=(e[0]*e[2]-e[1]*e[1])/(e[0]-2*e[1]+e[2]);return a<t?[a,n]:[t,a]}([e[0],-.5*e[0]+1.5*e[1],e[0]-3*e[1]+3*e[2]]);let n=-e[0]*e[2]+e[0]*e[3]-e[1]*e[2]-e[1]*e[3]+e[1]*e[1]+e[2]*e[2];if(n<=0)return[Math.min(e[0],e[3]),Math.max(e[0],e[3])];let a=Math.sqrt(n),s=Math.min(e[0],e[3]),o=Math.max(e[0],e[3]),r=e[0]-2*e[1]+e[2];for(let n=(r+a)/t,i=1;i<=2;n=(r-a)/t,i++)if(n>0&&n<1){let t=e[0]*(1-n)*(1-n)*(1-n)+3*e[1]*(1-n)*(1-n)*n+3*e[2]*(1-n)*n*n+e[3]*n*n*n;t<s&&(s=t),t>o&&(o=t)}return[s,o]}var S=e=>{let t=1/0,n=1/0,a=-1/0,s=-1/0,o=0,r=0,i=0,l=0;for(let p of e)switch(p.type){case"M":i=p.x,l=p.y,t>p.x&&(t=p.x),n>p.y&&(n=p.y),a<p.x&&(a=p.x),s<p.y&&(s=p.y),o=p.x,r=p.y;break;case"L":t>p.x&&(t=p.x),n>p.y&&(n=p.y),a<p.x&&(a=p.x),s<p.y&&(s=p.y),o=p.x,r=p.y;break;case"C":{let e=C([o,p.cp1x,p.cp2x,p.x]);t>e[0]&&(t=e[0]),a<e[1]&&(a=e[1]);let i=C([r,p.cp1y,p.cp2y,p.y]);n>i[0]&&(n=i[0]),s<i[1]&&(s=i[1]),o=p.x,r=p.y;break}case"Z":o=i,r=l;break;default:throw Error(`Unknown instruction ${p.type}`)}return{x1:t,y1:n,x2:a,y2:s,viewBox:`${t} ${n} ${a-t} ${s-n}`,width:a-t,height:s-n}},L=e=>

860S(F(w(g(e)))),T=(e,t,n)=>{let a;return v((a=g(e),a.map(e=>{if("a"===e.type||"c"===e.type||"v"===e.type||"s"===e.type||"h"===e.type||"l"===e.type||"m"===e.type||"q"===e.type||"t"===e.type)return e;if("V"===e.type)return{type:"V",y:e.y+n};if("H"===e.type)return{type:"H",x:e.x+t};if("A"===e.type)return{type:"A",rx:e.rx,ry:e.ry,largeArcFlag:e.largeArcFlag,sweepFlag:e.sweepFlag,xAxisRotation:e.xAxisRotation,x:e.x+t,y:e.y+n};if("Z"===e.type)return e;if("C"===e.type)return{type:"C",cp1x:e.cp1x+t,cp1y:e.cp1y+n,cp2x:e.cp2x+t,cp2y:e.cp2y+n,x:e.x+t,y:e.y+n};if("Q"===e.type)return{type:"Q",cpx:e.cpx+t,cpy:e.cpy+n,x:e.x+t,y:e.y+n};if("S"===e.type)return{type:"S",cpx:e.cpx+t,cpy:e.cpy+n,x:e.x+t,y:e.y+n};if("T"===e.type)return{type:"T",x:e.x+t,y:e.y+n};if("L"===e.type)return{type:"L",x:e.x+t,y:e.y+n};if("M"===e.type)return{type:"M",x:e.x+t,y:e.y+n};throw Error(`Unknown segment type: ${e.type}`)})))},A=e=>{let t=L(e);return T(e,-t.x1,-t.y1)},M={getBoundingBoxFromInstructions:S,debugPath:e=>{let t=w(g(e));return t.map((e,n)=>{if("Z"===e.type||"H"===e.type||"V"===e.type)return null;let a=[e.x-5,e.y-5],s=[e.x+5,e.y-5],o=[e.x-5,e.y+5],r=[e.x+5,e.y+5];return{d:v([{type:"M",x:a[0],y:a[1]},{type:"L",x:s[0],y:s[1]},{type:"L",x:r[0],y:r[1]},{type:"L",x:o[0],y:o[1]},{type:"Z"}]),color:n===t.length-1?"red":"M"===e.type?"blue":"green"}}).filter(Boolean)},cutPath:(e,t)=>{let n=(e=>{let t={x:0,y:0},n={x:0,y:0},a=[];for(let s=0;s<e.length;s++){let o=e[s];if("M"===o.type&&(n={x:(t={x:o.x,y:o.y}).x,y:t.y},a.push({startPoint:{x:o.x,y:o.y},instructionsAndInfo:[{instruction:o,function:null,length:0,startPoint:t}]})),"L"===o.type){if(a.length>0){let e=Math.sqrt((t.x-o.x)**2+(t.y-o.y)**2);a[a.length-1].instructionsAndInfo.push({instruction:o,length:e,function:c({x0:t.x,x1:o.x,y0:t.y,y1:o.y}),startPoint:t})}t={x:o.x,y:o.y}}if("Z"===o.type){if(a.length>0){let e=Math.sqrt((a[a.length-1].startPoint.x-t.x)**2+(a[a.length-1].startPoint.y-t.y)**2);a[a.length-1].instructionsAndInfo.push({instruction:o,function:c({x0:t.x,x1:n.x,y0:t.y,y1:n.y}),length:e,startPoint:{...t}})}t={x:n.x,y:n.y}}if("C"===o.type){let e=p({startX:t.x,startY:t.y,cp1x:o.cp1x,cp1y:o.cp1y,cp2x:o.cp2x,cp2y:o.cp2y,x:o.x,y:o.y}),n=e.getTotalLength();a.length>0&&a[a.length-1].instructionsAndInfo.push({instruction:o,length:n,function:e,startPoint:{...t}}),t={x:o.x,y:o.y}}}return a})(U(g(e))),a=[],o=0;for(let e of n)for(let n of e.instructionsAndInfo){if(o+n.length>t){let e=(t-o)/n.length,r=s({instruction:n.instruction,lastPoint:n.startPoint,progress:e});return a.push(r),v(a)}if(o+=n.length,a.push(n.instruction),o===t)return v(a)}return v(a)}}},11682(e,t,n){"use strict";n.d(t,{Cb:()=>eH,Vz:()=>eN,ai:()=>eP});var a=n(67781),s=n(57825),o=n(39372),r=n(64831);if("function"!=typeof a.createContext)throw Error(['Remotion requires React.createContext, but it is "undefined".','If you are in a React Server Component, turn it into a client component by adding "use client" at the top of the file.',"","Before:",'  import {Player} from "@remotion/player";',"","After:",'  "use client";','  import {Player} from "@remotion/player";'].join(`
861`));var i=()=>(0,s.jsx)("svg",{width:25,height:25,viewBox:"0 0 25 25",fill:"none",children:(0,s.jsx)("path",{d:"M8 6.375C7.40904 8.17576 7.06921 10.2486 7.01438 12.3871C6.95955 14.5255 7.19163 16.6547 7.6875 18.5625C9.95364 18.2995 12.116 17.6164 14.009 16.5655C15.902 15.5147 17.4755 14.124 18.6088 12.5C17.5158 10.8949 15.9949 9.51103 14.1585 8.45082C12.3222 7.3906 10.2174 6.68116 8 6.375Z",fill:"white",stroke:"white",strokeWidth:"6.25",strokeLinejoin:"round"})}),l=()=>(0,s.jsxs)("svg",{viewBox:"0 0 100 100",width:25,height:25,children:[(0,s.jsx)("rect",{x:"25",y:"20",width:"20",height:"60",fill:"#fff",ry:"5",rx:"5"}),(0,s.jsx)("rect",{x:"55",y:"20",width:"20",height:"60",fill:"#fff",ry:"5",rx:"5"})]}),p=({isFullscreen:e})=>{let t=3*!e,n=e?9.600000000000001:3,a=e?9.600000000000001:12;return(0,s.jsxs)("svg",{viewBox:"0 0 32 32",height:16,width:16,children:[(0,s.jsx)("path",{d:`
862				M ${t} ${a}
863				L ${n} ${n}
864				L ${a} ${t}
865				`,stroke:"#fff",strokeWidth:6,fill:"none"}),(0,s.jsx)("path",{d:`

866				M ${32-t} ${a}
867				L ${32-n} ${n}
868				L ${32-a} ${t}
869				`,stroke:"#fff",strokeWidth:6,fill:"none"}),(0,s.jsx)("path",{d:`
870				M ${t} ${32-a}
871				L ${n} ${32-n}
872				L ${a} ${32-t}
873				`,stroke:"#fff",strokeWidth:6,fill:"none"}),(0,s.jsx)("path",{d:`
874				M ${32-t} ${32-a}
875				L ${32-n} ${32-n}
876				L ${32-a} ${32-t}
877				`,stroke:"#fff",strokeWidth:6,fill:"none"})]})},c=()=>(0,s.jsx)("svg",{width:25,height:25,viewBox:"0 0 24 24",children:(0,s.jsx)("path",{d:"M3.63 3.63a.996.996 0 000 1.41L7.29 8.7 7 9H4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71v-4.17l4.18 4.18c-.49.37-1.02.68-1.6.91-.36.15-.58.53-.58.92 0 .72.73 1.18 1.39.91.8-.33 1.55-.77 2.22-1.31l1.34 1.34a.996.996 0 101.41-1.41L5.05 3.63c-.39-.39-1.02-.39-1.42 0zM19 12c0 .82-.15 1.61-.41 2.34l1.53 1.53c.56-1.17.88-2.48.88-3.87 0-3.83-2.4-7.11-5.78-8.4-.59-.23-1.22.23-1.22.86v.19c0 .38.25.71.61.85C17.18 6.54 19 9.06 19 12zm-8.71-6.29l-.17.17L12 7.76V6.41c0-.89-1.08-1.33-1.71-.7zM16.5 12A4.5 4.5 0 0014 7.97v1.79l2.48 2.48c.01-.08.02-.16.02-.24z",fill:"#fff"})}),d=()=>(0,s.jsx)("svg",{width:25,height:25,viewBox:"0 0 24 24",children:(0,s.jsx)("path",{d:"M3 10v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71V6.41c0-.89-1.08-1.34-1.71-.71L7 9H4c-.55 0-1 .45-1 1zm13.5 2A4.5 4.5 0 0014 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 4.45v.2c0 .38.25.71.6.85C17.18 6.53 19 9.06 19 12s-1.82 5.47-4.4 6.5c-.36.14-.6.47-.6.85v.2c0 .63.63 1.07 1.21.85C18.6 19.11 21 15.84 21 12s-2.4-7.11-5.79-8.4c-.58-.23-1.21.22-1.21.85z",fill:"#fff"})}),u="__remotion_buffering_indicator",m="__remotion_buffering_animation",f={width:25,height:25,overflow:"hidden",lineHeight:"normal",fontSize:"inherit"},h={width:14,height:14,overflow:"hidden",lineHeight:"normal",fontSize:"inherit"},y=({type:e,color:t="white"})=>{let n="player"===e?f:h;return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("style",{type:"text/css",children:`
878				@keyframes ${m} {
879          0% {
880            rotate: 0deg;
881          }
882          100% {
883            rotate: 360deg;
884          }
885        }
886        
887        .${u} {
888            animation: ${m} 1s linear infinite;
889        }        
890			`}),(0,s.jsx)("div",{style:n,children:(0,s.jsx)("svg",{viewBox:"player"===e?"0 0 22 22":"0 0 18 18",style:n,className:u,children:(0,s.jsx)("path",{d:"player"===e?"M 11 4 A 7 7 0 0 1 15.1145 16.66312":"M 9 2 A 7 7 0 0 1 13.1145 14.66312",stroke:t,strokeLinecap:"round",fill:"none",strokeWidth:3})})})]})},g=({previewSize:e,compositionWidth:t,compositionHeight:n,canvasSize:a})=>{let s=o.Xp.calculateScale({canvasSize:a,compositionHeight:n,compositionWidth:t,previewSize:e}),r=0-(1-s)/2,i=r*t,l=r*n,p=t*s,c=n*s;return{centerX:a.width/2-p/2,centerY:a.height/2-c/2,xCorrection:i,yCorrection:l,scale:s}},E=({config:e,style:t,canvasSize:n,overflowVisible:a,layout:s})=>e?{position:"relative",overflow:a?"visible":"hidden",...(({currentSize:e,width:t,height:n,compositionWidth:a,compositionHeight:s})=>void 0!==t&&void 0===n||void 0!==n&&void 0===t?{aspectRatio:[a,s].join("/")}:{width:a,height:s})({compositionHeight:e.height,compositionWidth:e.width,currentSize:n,height:t?.height,width:t?.width}),opacity:+!!s,...t}:{},x=({config:e,layout:t,scale:n,overflowVisible:a})=>e?t?{position:"absolute",width:e.width,height:e.height,display:"flex",transform:`scale(${n})`,marginLeft:t.xCorrection,marginTop:t.yCorrection,overflow:a?"visible":"hidden"}:{position:"absolute",width:e.width,height:e.height,display:"flex",transform:`scale(${n})`,overflow:a?"visible":"hidden"}:{},b=({layout:e,scale:t,config:n,overflowVisible:a})=>{if(!n)return{};if(!e)return{width:n.width*t,height:n.height*t,display:"flex",flexDirection:"column",position:"absolute",overflow:a?"visible":"hidden"};let{centerX:s,centerY:o}=e;return{width:n.width*t,height:n.height*t,display:"flex",flexDirection:"column",position:"absolute",left:s,top:o,overflow:a?"visible":"hidden"}},F=(0,a.createContext)(null),v=a.createContext(void 0),w=a.createContext(void 0);class U{listeners={ended:[],error:[],pause:[],play:[],ratechange:[],scalechange:[],seeked:[],timeupdate:[],frameupdate:[],fullscreenchange:[],volumechange:[],mutechange:[],waiting:[],resume:[]};addEventListener(e,t){this.listeners[e].push(t)}removeEventListener(e,t){this.listeners[e]=this.listeners[e].filter(e=>e!==t)}

890dispatchEvent(e,t){this.listeners[e].forEach(e=>{e({detail:t})})}dispatchSeek=e=>{this.dispatchEvent("seeked",{frame:e})};dispatchVolumeChange=e=>{this.dispatchEvent("volumechange",{volume:e})};dispatchPause=()=>{this.dispatchEvent("pause",void 0)};dispatchPlay=()=>{this.dispatchEvent("play",void 0)};dispatchEnded=()=>{this.dispatchEvent("ended",void 0)};dispatchRateChange=e=>{this.dispatchEvent("ratechange",{playbackRate:e})};dispatchScaleChange=e=>{this.dispatchEvent("scalechange",{scale:e})};dispatchError=e=>{this.dispatchEvent("error",{error:e})};dispatchTimeUpdate=e=>{this.dispatchEvent("timeupdate",e)};dispatchFrameUpdate=e=>{this.dispatchEvent("frameupdate",e)};dispatchFullscreenChange=e=>{this.dispatchEvent("fullscreenchange",e)};dispatchMuteChange=e=>{this.dispatchEvent("mutechange",e)};dispatchWaiting=e=>{this.dispatchEvent("waiting",e)};dispatchResume=e=>{this.dispatchEvent("resume",e)}}class C{listeners={error:[],waiting:[],resume:[]};addEventListener(e,t){this.listeners[e].push(t)}removeEventListener(e,t){this.listeners[e]=this.listeners[e].filter(e=>e!==t)}dispatchEvent(e,t){this.listeners[e].forEach(e=>{e({detail:t})})}dispatchError=e=>{this.dispatchEvent("error",{error:e})};dispatchWaiting=e=>{this.dispatchEvent("waiting",e)};dispatchResume=e=>{this.dispatchEvent("resume",e)}}var S=e=>{let{subscribeBuffering:t}=(0,a.useContext)(o.Xp.SetTimelineContext);(0,a.useLayoutEffect)(()=>t(t=>{t.buffering?e.dispatchWaiting({}):e.dispatchResume({})}),[e,t])},L=({children:e,currentPlaybackRate:t})=>{let[n]=(0,a.useState)(()=>new U);return(0,a.useEffect)(()=>{t&&n.dispatchRateChange(t)},[n,t]),S(n),(0,s.jsx)(v.Provider,{value:n,children:e})},T=a.createContext(null),A=(e,t)=>{let[n,s]=(0,a.useState)(!1);return(0,a.useEffect)(()=>{let n,{current:a}=e;if(!a)return;let o=()=>{t&&(clearTimeout(n),n=setTimeout(()=>{s(!1)},!0===t?3e3:t))},r=()=>{s(!0),o()},i=()=>{s(!1),clearTimeout(n)},l=()=>{s(!0),o()};return a.addEventListener("mouseenter",r),a.addEventListener("mouseleave",i),a.addEventListener("mousemove",l),()=>{a.removeEventListener("mouseenter",r),a.removeEventListener("mouseleave",i),a.removeEventListener("mousemove",l),clearTimeout(n)}},[t,e]),n},M=()=>{let e=o.Xp.Timeline.useTimelineSeekFrame(),{setPlaying:t,frameRef:n,audioAndVideoTags:s,isPlaying:r,isBuffering:i}=(0,a.useContext)(o.Xp.SetTimelineContext),l=(0,a.useContext)(o.Xp.SharedAudioContext),p=(0,a.useContext)(o.Xp.SharedAudioTagsContext),c=(0,o.OK)(),d=o.Xp.useVideo(),u=o.Xp.useUnsafeVideoConfig(),m=(0,a.useContext)(v),f=(0,a.useRef)(0),h=(0,a.useRef)(null),y=(0,a.useRef)(!1);if(!m)throw TypeError("Expected Player event emitter context");let g=(0,a.useCallback)(()=>{if(!d)return h.current??("u"<typeof window?0:window.remotion_initialFrame??0

890);let e=n.current[d.id]??(c.isPlayer?0:o.Xp.Timeline.getFrameForComposition(d.id));return o.Xp.Timeline.clampFrameToCompositionRange(e,d.durationInFrames)},[c.isPlayer,n,d]),E=(0,a.useCallback)(t=>{let a=u?o.Xp.TimelinePosition.clampFrameToCompositionRange(t,u.durationInFrames):Math.max(0,t);h.current=a,d?.id&&(e(e=>e[d.id]===a?e:{...e,[d.id]:a}),n.current[d.id]!==a&&(n.current={...n.current,[d.id]:a})),m.dispatchSeek(a)},[u,m,n,e,d?.id]),x=(0,a.useCallback)(e=>{let n=y.current;if(y.current=!1,r())return;let a=(u?.durationInFrames??1)-1;g()===a&&E(0),n?l?.resumeAsAutoPlay():l?.resume(),p&&p.numberOfAudioTags>0&&e&&p.playAllAudios(),s.current.forEach(e=>e.play("player play() was called and playing audio from a click")),t(!0),f.current=g(),m.dispatchPlay()},[s,l,p,u?.durationInFrames,m,g,r,E,t]),b=(0,a.useCallback)(()=>{y.current=!0,x()},[x]),F=(0,a.useCallback)(()=>{r()&&(t(!1),m.dispatchPause(),l?.suspend())},[l,m,r,t]),w=(0,a.useCallback)(()=>{r()&&(t(!1),h.current=f.current,u&&(e(e=>({...e,[u.id]:f.current})),n.current={...n.current,[u.id]:f.current},m.dispatchPause()))},[u,m,n,r,t,e]),U=d?.id,C=(u?.durationInFrames??1)-1,S=(0,a.useCallback)(t=>{if(!U)return null;if(r())return;let a=n.current[U]??window.remotion_initialFrame??0,s=Math.max(0,a-t);a!==s&&(e(e=>e[U]===s?e:{...e,[U]:s}),n.current={...n.current,[U]:s})},[n,r,e,U]),L=(0,a.useCallback)(t=>{if(!U)return null;if(r())return;let a=n.current[U]??window.remotion_initialFrame??0,s=Math.min(C,a+t);a!==s&&(e(e=>e[U]===s?e:{...e,[U]:s}),n.current={...n.current,[U]:s})},[n,C,r,e,U]),T=(0,a.useCallback)(e=>{r()?F():x(e)},[F,x,r]);return(0,a.useMemo)(()=>({frameBack:S,frameForward:L,emitter:m,play:x,playAsAutoPlay:b,pause:F,seek:E,getCurrentFrame:g,isPlaying:r,isBuffering:i,pauseAndReturnToPlayStart:w,toggle:T}),[m,S,L,g,r,F,w,x,b,i,E,T])},I=()=>!("u"<typeof document)&&"hidden"===document.visibilityState,R=({audioContext:e,audioSyncAnchor:t,absoluteTimeInSeconds:n,globalPlaybackRate:a,logLevel:s,force:r})=>{let i=e.currentTime-n/a,l=i-t.value,{outputLatency:p}=e;return!(Math.abs(l)<.1+(e.baseLatency+(0===p?.3:p))&&!r||Math.abs(l)<Number.EPSILON)&&(o.Xp.Log.verbose({logLevel:s,tag:"audio-scheduling"},"Anchor "+(r?"forcibly ":"")+"changed from %s to %s with shift %s",t.value,i,l),t.value=i,!0)},k=({loop:e,playbackRate:t,moveToBeginningWhenEnded:n,inFrame:s,outFrame:r,browserMediaControlsBehavior:i,getCurrentFrame:l,muted:p})=>{let c,d=o.Xp.useUnsafeVideoConfig(),u=o.Xp.Timeline.useTimelinePosition(),m=o.Xp.usePlaying(),{pause:f,emitter:h,isPlaying:y}=M(),g=o.Xp.Timeline.useTimelineSetFrameWithoutSeek(),E=(0,a.useContext)(o.Xp.SharedAudioContext),{setPlayerMuted:x}=(0,a.useContext)(o.Xp.SetMediaVolumeContext),{isBuffering:b,subscribeBuffering:F}=(0,a.useContext)(o.Xp.SetTimelineContext),v=o.Xp.useLogLevel(),w=(c=(0,a.useRef)(I()),(0,a.useEffect)(()=>{let e=()=>{c.current=I()};return document.addEventListener("visibilitychange",e),()=>{document.removeEventListener("visibilitychange",e)}},[]),c),U=(0,a.useRef)(0);(({browserMediaControlsBehavior:e,videoConfig:t,playbackRate:n})=>{let s=o.Xp.usePlaying(),{pause:r,play:i,emitter:l,getCurrentFrame:p,seek:c}=M(),d=(0,a.useRef)(!1);(0,a.useEffect)(()=>{s&&(d.current=!0),!navigator.mediaSession||"do-nothing"!==e.mode&&(s?navigator.mediaSession.playbackState="playing":d.current&&(navigator.mediaSession.playbackState="paused"))},[e.mode,s]),(0,a.useEffect)(()=>{if(!navigator.mediaSession||"do-nothing"===e.mode)return;let a=()=>{t&&navigator.mediaSession&&navigator.mediaSession.setPositionState({duration:t.durationInFrames/t.fps,playbackRate:n,position:p()/t.fps})};return l.addEventListener("timeupdate",a),()=>{l.removeEventListener("timeupdate",a)}},[e.mode,l,p,n,t]),(0,a.useEffect)(()=>{if(navigator.mediaSession&&"do-nothing"!==e.mode)return navigator.mediaSession.setActionHandler("play",()=>{"register-media-session"===e.mode&&i()}),navigator.mediaSession.setActionHandler("pause",()=>{"register-media-session"===e.mode&&r()}),navigator.mediaSession.setActionHandler("seekto",n=>{"register-media-session"===e.mode&&void 0!==n.seekTime&&t&&c(Math.round(n.seekTime*t.fps))}),navigator.mediaSession.setActionHandler("seekbackward",()=>{"register-media-session"===e.mode&&t&&c(Math.max(0,Math.round((p()-10)*t.fps)))}),navigator.mediaSession.setActionHandler("seekforward",()=>{"register-media-session"===e.mode&&t&&c(Math.max(t.durationInFrames-1,Math.round((p()+10)*t.fps)))}),navigator.mediaSession.setActionHandler("previoustrack",()=>{"register-media-session"===e.mode&&c(0)}),()=>{navigator.mediaSession.metadata=null,navigator.mediaSession.setActionHandler("play",null),navigator.mediaSession.setActionHandler("pause",null),navigator.mediaSession.setActionHandler("seekto",null),navigator.mediaSession.setActionHandler("seekbackward",null),navigator.mediaSession.setActionHandler("seekforward",null),navigator.mediaSession.setActionHandler("previoustrack",null)}},[e.mode,p,r,i,c,t])}

890)({browserMediaControlsBehavior:i,playbackRate:t,videoConfig:d}),(0,a.useLayoutEffect)(()=>{E&&E.audioContext&&d&&!p&&R({audioContext:E.audioContext,audioSyncAnchor:E.audioSyncAnchor,absoluteTimeInSeconds:u/d.fps,globalPlaybackRate:t,logLevel:v,force:!1})&&E.audioSyncAnchorEmitter.dispatch("changed")},[d,u,v,t,E,p]),(0,a.useLayoutEffect)(()=>{let e=E?.audioContext;if(!e||!d||p)return;let n=()=>{let n=E?.getAudioContextState();n&&(e=>{if("suspended"===e||"running-to-suspended"===e)return!0;if("closed"===e||"interrupted"===e||"running"===e||"suspended-to-running"===e)return!1;throw Error(`Unexpected audio context state: ${e}`)})(n)&&R({audioContext:e,audioSyncAnchor:E.audioSyncAnchor,absoluteTimeInSeconds:l()/d.fps,globalPlaybackRate:t,logLevel:v,force:!0})&&E.audioSyncAnchorEmitter.dispatch("changed")};return e?.addEventListener("statechange",n),()=>{e?.removeEventListener("statechange",n)}},[d,l,v,p,t,E]),(0,a.useEffect)(()=>{if(!d)return;if(!m)return void E?.suspend?.();E?._experimentalKeepAudioContextAlive&&E.audioContext&&!p&&R({audioContext:E.audioContext,audioSyncAnchor:E.audioSyncAnchor,absoluteTimeInSeconds:l()/d.fps,globalPlaybackRate:t,logLevel:v,force:!0})&&E.audioSyncAnchorEmitter.dispatch("changed");let a=!1,o=!1,i=null,c=performance.now(),u=0,U=()=>{null!==i&&("raf"===i.type?cancelAnimationFrame(i.id):clearTimeout(i.id))},C=()=>{a=!0,U()},S=()=>{if(a)return;if(!y())return void E?.suspend?.();p||o||b()||E?.resume?.();let i=performance.now()-c,m=r??d.durationInFrames-1,{nextFrame:x,framesToAdvance:F,hasEnded:v}=(({time:e,currentFrame:t,playbackSpeed:n,fps:a,actualLastFrame:s,actualFirstFrame:o,framesAdvanced:r,shouldLoop:i})=>{let l=(n<0?Math.ceil:Math.floor)(e*n/(1e3/a))-r,p=l+t,c=p>s||p<o,d=!i&&c&&!(t>s||t<o);return n>0?c?{nextFrame:o,framesToAdvance:l,hasEnded:d}:{nextFrame:p,framesToAdvance:l,hasEnded:d}:c?{nextFrame:s,framesToAdvance:l,hasEnded:d}:{nextFrame:p,framesToAdvance:l,hasEnded:d}})({time:i,currentFrame:l(),playbackSpeed:t,fps:d.fps,actualFirstFrame:s??0,actualLastFrame:m,framesAdvanced:u,shouldLoop:e});if(u+=F,x===l()||v&&!n||b()||g(e=>({...e,[d.id]:x})),v){C(),f(),h.dispatchEnded();return}L()},L=()=>

890{if(a)return;let e=o?null:E?.getIsResumingAudioContext?.()??null;if(null!==e&&!p)return void e.then(e=>{a||("failed"===e&&(o=!0,E?.suspend(),x(!0)),c=performance.now(),u=0,L())});if(b()){p||o||E?.suspend?.();let e=F(t=>{t.buffering||(e(),!p&&!o&&E?._experimentalKeepAudioContextAlive&&E.resume(),c=performance.now(),u=0,L())});return}if(w.current){i={type:"timeout",id:setTimeout(S,1e3/d.fps)};return}i={type:"raf",id:requestAnimationFrame(S)}};L();let T=()=>{"visible"!==document.visibilityState&&(U(),S())};return window.addEventListener("visibilitychange",T),()=>{window.removeEventListener("visibilitychange",T),C()}},[d,e,f,m,g,h,t,s,r,n,w,l,b,y,E,x,F,v,p]),(0,a.useEffect)(()=>{let e=performance.now(),t=e-U.current;if(t>=250){h.dispatchTimeUpdate({frame:u}),U.current=e;return}let n=setTimeout(()=>{h.dispatchTimeUpdate({frame:u}),U.current=performance.now()},250-t);return()=>clearTimeout(n)},[h,u]),(0,a.useEffect)(()=>{h.dispatchFrameUpdate({frame:u})},[h,u])},P=[],B=e=>e?"current"in e?e.current:e:null,D=(e,t)=>{let[n,s]=(0,a.useState)(()=>{let t=B(e);if(!t)return null;let n=t.getClientRects();return n[0]?{width:n[0].width,height:n[0].height,left:n[0].x,top:n[0].y,windowSize:{height:window.innerHeight,width:window.innerWidth}}:null}),o=(0,a.useMemo)(()=>"u"<typeof ResizeObserver?null:new ResizeObserver(e=>{let{contentRect:n,target:a}=e[0],o=a.getClientRects();if(!o?.[0])return void s(null);let r=0===n.width?1:o[0].width/n.width,i=0===n.height?1:o[0].height/n.height,l=t.shouldApplyCssTransforms||0===r?o[0].width:o[0].width*(1/r),p=t.shouldApplyCssTransforms||0===i?o[0].height:o[0].height*(1/i);s(e=>e&&e.width===l&&e.height===p&&e.left===o[0].x&&e.top===o[0].y&&e.windowSize.height===window.innerHeight&&e.windowSize.width===window.innerWidth?e:{width:l,height:p,left:o[0].x,top:o[0].y,windowSize:{height:window.innerHeight,width:window.innerWidth}})}),[t.shouldApplyCssTransforms]),r=(0,a.useCallback)(()=>{let t=B(e);if(!t)return;let n=t.getClientRects();n[0]?s(e=>e&&e.width===n[0].width&&e.height===n[0].height&&e.left===n[0].x&&e.top===n[0].y&&e.windowSize.height===window.innerHeight&&e.windowSize.width===window.innerWidth?e:{width:n[0].width,height:n[0].height,left:n[0].x,top:n[0].y,windowSize:{height:window.innerHeight,width:window.innerWidth}}):s(null)},[e]);return(0,a.useEffect)(()=>{r()},[r]),(0,a.useEffect)(()=>{if(!o)return;let t=B(e);return t&&o.observe(t),()=>{t&&o.unobserve(t)}},[o,e]),(0,a.useEffect)(()=>{if(t.triggerOnWindowResize)return window.addEventListener("resize",r),()=>{window.removeEventListener("resize",r)}},[t.triggerOnWindowResize,r]),(0,a.useEffect)(()=>(P.push(r),()=>{P=P.filter(e=>e!==r)}),[r]),(0,a.useMemo)(()=>n?{...n,refresh:r}:null,[n,r])},j={display:"flex",justifyContent:"center",alignItems:"center",flex:1,height:"100%",width:"100%"};class N extends a.Component{state={hasError:null};static getDerivedStateFromError(e){return{hasError:e}}componentDidCatch(e){this.props.onError(e)}render(){return this.state.hasError?(0,s.jsx)("div",{style:j,children:this.props.errorFallback({error:this.state.hasError})}):this.props.children}}var H=async()=>{if("u"<typeof window||void 0===window.crypto||void 0===window.crypto.subtle)return null;try{let e=await crypto.subtle.digest("SHA-256",new TextEncoder().encode(window.location.hostname));return Array.from(new Uint8Array(e)).map(e=>e.toString(16).padStart(2,"0")).join("")}catch{return null}},$={backgroundColor:"red",position:"absolute",padding:12,fontFamily:"Arial"},_=["28d262b44cc61fa750f1686b16ad0604dabfe193fbc263eec05c89b7ad4c2cd6","4db1b0a94be33165dfefcb3ba03d04c7a2666dd27c496d3dc9fa41858e94925e","fbc48530bbf245da790f63675e84e06bab38c3b114fab07eb350025119922bdc","7baf10a8932757b1b3a22b3fce10a048747ac2f8eaf638603487e3705b07eb83","8a6c21a598d8c667272b5207c051b85997bf5b45d5fb712378be3f27cd72c6a6","a2f7aaac9c50a9255e7fc376110c4e0bfe153722dc66ed3c5d3bf2a135f65518"],W=!1,z=()=>{let[e,t]=a.useState(!1);return((0,a.useEffect)(()=>{W||(W=!0,H().then(e=>{e&&_.includes(e)&&t(!0)}).catch(()=>{}))},[]),(0,a.useEffect)(()=>{if(!e)return;let t=new MutationObserver(()=>(()=>

890{if(!document.querySelector(".warning-banner")){let e=document.createElement("div");e.className="warning-banner",Object.assign(e.style,$,{zIndex:"9999",cssText:`${$.cssText} !important;`}),e.innerHTML=`
891	        <a href="https://github.com/remotion-dev/remotion/pull/4589" style="color: white;">
892	          Remotion Unlicensed \u{2013} Contact [email protected]
893	        </a>
894	      `,document.body.appendChild(e)}})());return t.observe(document.body,{childList:!0,subtree:!0}),()=>{t.disconnect()}},[e]),e)?(0,s.jsx)("div",{style:$,className:"warning-banner",children:(0,s.jsx)("a",{style:{color:"white"},href:"https://github.com/remotion-dev/remotion/pull/4589",children:"Remotion Unlicensed \u2013 Contact [email protected]"})}):null},O=({playing:e,buffering:t})=>e&&t?(0,s.jsx)(y,{type:"player"}):e?(0,s.jsx)(l,{}):(0,s.jsx)(i,{}),G=({volume:e,isVertical:t,onBlur:n,inputRef:r,setVolume:i})=>{let l=(0,a.useMemo)(()=>{let e={paddingLeft:5,height:25,width:X,display:"inline-flex",alignItems:"center"};return t?{...e,position:"absolute",transform:`rotate(-90deg) translateX(${X/2+12.5}px)`}:{...e}},[t]),p=void 0===a.useId?"volume-slider":a.useId(),[c]=(0,a.useState)(()=>`__remotion-volume-slider-${(0,o.yT)(p)}`.replace(".","")),d=(0,a.useCallback)(e=>{i(parseFloat(e.target.value))},[i]),u=(0,a.useMemo)(()=>{let n={WebkitAppearance:"none",backgroundColor:"rgba(255, 255, 255, 0.5)",borderRadius:2.5,cursor:"pointer",height:5,width:X,backgroundImage:`linear-gradient(
895				to right,
896				white ${100*e}%, rgba(255, 255, 255, 0) ${100*e}%
897			)`};return t?{...n,bottom:25+X/2}:n},[t,e]),m=`
898	.${c}::-webkit-slider-thumb {
899		-webkit-appearance: none;
900		background-color: white;
901		border-radius: 6px;
902		box-shadow: 0 0 2px black;
903		height: 12px;
904		width: 12px;
905	}
906
907	.${c}::-moz-range-thumb {
908		-webkit-appearance: none;
909		background-color: white;
910		border-radius: 6px;
911		box-shadow: 0 0 2px black;
912		height: 12px;
913		width: 12px;
914	}
915`;return(0,s.jsxs)("div",{style:l,children:[(0,s.jsx)("style",{dangerouslySetInnerHTML:{__html:m}}),(0,s.jsx)("input",{ref:r,"aria-label":"Change volume",className:c,max:1,min:0,onBlur:n,onChange:d,step:.01,type:"range",value:e,style:u})]})},X=100,K=({displayVerticalVolumeSlider:e,renderMuteButton:t,renderVolumeSlider:n})=>{let[r,i]=o.Xp.usePlayerMutedState(),[l,p]=o.Xp.useMediaVolumeState(),[u,m]=(0,a.useState)(!1),f=(0,a.useRef)(null),h=(0,a.useRef)(null),y=A(f,!1),g=(0,a.useCallback)(()=>{setTimeout(()=>{h.current&&document.activeElement!==h.current&&m(!1)},10)},[]),E=0===l,x=(0,a.useCallback)(()=>{if(E){p(1),i(!1);return}i(e=>!e)},[E,i,p]),b=(0,a.useMemo)(()=>({display:"inline-flex",background:"none",border:"none",justifyContent:"center",alignItems:"center",touchAction:"none",...e&&{position:"relative"}}),[e]),F=(0,a.useMemo)(()=>({display:"inline",width:25,height:25,cursor:"pointer",appearance:"none",background:"none",border:"none",padding:0}),[]),v=(0,a.useCallback)(({muted:e,volume:t})=>{let n=e||0===t;return(0,s.jsx)("button",{"aria-label":n?"Unmute sound":"Mute sound",title:n?"Unmute sound":"Mute sound",onClick:x,onBlur:g,onFocus:()=>m(!0),style:F,type:"button",children:n?(0,s.jsx)(c,{}):(0,s.jsx)(d,{})})},[g,x,F]),w=(0,a.useMemo)(()=>t?t({muted:r,volume:l}):v({muted:r,volume:l}),[r,l,v,t]),U=(0,a.useMemo)(()=>(u||y)&&!r&&!o.Xp.isIosSafari()?(n??(e=>(0,s.jsx)(G,{...e})))({isVertical:e,volume:l,onBlur:()=>m(!1),inputRef:h,setVolume:p}):null,[e,u,y,r,l,n,p]);return(0,s.jsxs)("div",{ref:f,style:b,children:[w,U]})},q={height:30,paddingRight:15,paddingLeft:12,display:"flex",flexDirection:"row",alignItems:"center"},J={width:22,display:"flex",alignItems:"center"},V={width:14,height:14,color:"black"},Y=()=>(0,s.jsx)("svg",{viewBox:"0 0 512 512",style:V,children:(0,s.jsx)("path",{fill:"currentColor",d:"M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z"})}),Q=({rate:e,onSelect:t,selectedRate:n,keyboardSelectedRate:o})=>{let r,i=(0,a.useCallback)(n=>{n.stopPropagation(),n.preventDefault(),t(e)},[t,e]),[l,p]=(0,a.useState)(!1),c=(0,a.useCallback)(()=>{p(!0)},[]),d=(0,a.useCallback)(()=>{p(!1)},[]),u=o===e,m=(0,a.useMemo)(()=>({...q,backgroundColor:l||u?"#eee":"transparent"}),[l,u]);return(0,s.jsxs)("div",{onPointerEnter:c,onPointerLeave:d,tabIndex:0,style:m,onClick:i,children:[(0,s.jsx)("div",{style:J,children:e===n?(0,s.jsx)(Y,{}):null}),(r=e.toString()).includes(".")?r:r+".0","x"]},e)},Z=({setIsComponentVisible:e,playbackRates:t,canvasSize:n})=>{let{setPlaybackRate:r,playbackRate:i}=o.Xp.usePlaybackRate(),[l,p]=(0,a.useState)(i);(0,a.useEffect)(()=>{let n=n=>{if(n.preventDefault(),"ArrowUp"===n.key){let e=t.findIndex(e=>e===l);0!==e&&(-1===e?p(t[0]):p(t[e-1]))}else if("ArrowDown"===n.key){let e=t.findIndex(e=>e===l);if(e===t.length-1)return;-1===e?p(t[t.length-1]):p(t[e+1])}else"Enter"===n.key&&(r(l),e(!1))};return window.addEventListener("keydown",n),()=>{window.removeEventListener("keydown",n)}},[t,l,r,e]);let c=(0,a.useCallback)(t=>{r(t),e(!1)},[e,r]),d=(0,a.useMemo)(()=>({position:"absolute",right:0,width:125,maxHeight:n.height-70-35,bottom:35,background:"#fff",borderRadius:4,overflow:"auto",color:"black",textAlign:"left"}),[n.height]);return(0,s.jsx)("div",{style:d,children:t.map(e=>(0,s.jsx)(Q,{selectedRate:i,onSelect:c,rate:e,keyboardSelectedRate:l},e))})}

915,ee={fontSize:13,fontWeight:"bold",color:"white",border:"2px solid white",borderRadius:20,paddingLeft:8,paddingRight:8,paddingTop:2,paddingBottom:2},et={appearance:"none",backgroundColor:"transparent",border:"none",cursor:"pointer",paddingLeft:0,paddingRight:0,paddingTop:6,paddingBottom:6,height:37,display:"inline-flex",marginBottom:0,marginTop:0,alignItems:"center"},en={...et,position:"relative"},ea=({playbackRates:e,canvasSize:t})=>{let{ref:n,isComponentVisible:r,setIsComponentVisible:i}=function(e){let[t,n]=(0,a.useState)(e),s=(0,a.useRef)(null);return(0,a.useEffect)(()=>{let e=e=>{s.current&&!s.current.contains(e.target)&&n(!1)};return document.addEventListener("pointerup",e,!0),()=>{document.removeEventListener("pointerup",e,!0)}},[]),{ref:s,isComponentVisible:t,setIsComponentVisible:n}}(!1),{playbackRate:l}=o.Xp.usePlaybackRate(),p=(0,a.useCallback)(e=>{e.stopPropagation(),e.preventDefault(),i(e=>!e)},[i]);return(0,s.jsx)("div",{ref:n,children:(0,s.jsxs)("button",{type:"button","aria-label":"Change playback rate",style:en,onClick:p,children:[(0,s.jsxs)("div",{style:ee,children:[l,"x"]}),r&&(0,s.jsx)(Z,{canvasSize:t,playbackRates:e,setIsComponentVisible:i})]})})},es=(e,t,n)=>Math.round((0,o.GW)(e,[0,n],[0,t-1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"})),eo={userSelect:"none",WebkitUserSelect:"none",paddingTop:4,paddingBottom:4,boxSizing:"border-box",cursor:"pointer",position:"relative",touchAction:"none"},er={height:5,backgroundColor:"rgba(255, 255, 255, 0.25)",width:"100%",borderRadius:2.5},ei=({durationInFrames:e,onSeekEnd:t,onSeekStart:n,inFrame:r,outFrame:i})=>{let l=(0,a.useRef)(null),p=A(l,!1),c=D(l,{triggerOnWindowResize:!0,shouldApplyCssTransforms:!0}),{seek:d,play:u,pause:m,isPlaying:f}=M(),h=o.Xp.Timeline.useTimelinePosition(),[y,g]=(0,a.useState)({dragging:!1}),E=c?.width??0,x=(0,a.useCallback)(t=>{if(0!==t.button)return;let a=l.current?.getBoundingClientRect().left,s=es(t.clientX-a,e,E),o=f();m(),d(s),g({dragging:!0,wasPlaying:o}),n()},[e,E,f,m,d,n]),b=(0,a.useCallback)(t=>{if(!c)throw Error("Player has no size");if(!y.dragging)return;let n=l.current?.getBoundingClientRect().left;d(es(t.clientX-n,e,c.width))},[y.dragging,e,d,c]),F=(0,a.useCallback)(()=>{g({dragging:!1}),y.dragging&&(y.wasPlaying?u():m(),t())},[y,t,m,u]);(0,a.useEffect)(()=>{if(!y.dragging)return;let e=(e=>{let t=e;for(;t.parentElement;)t=t.parentElement;return t})(l.current);return e.addEventListener("pointermove",b),e.addEventListener("pointerup",F),()=>{e.removeEventListener("pointermove",b),e.removeEventListener("pointerup",F)}},[y.dragging,b,F]);let v=(0,a.useMemo)(()=>({height:12,width:12,borderRadius:6,position:"absolute",top:.5,backgroundColor:"white",left:Math.max(0,h/Math.max(1,e-1)*E-6),boxShadow:"0 0 2px black",opacity:Number(p||y.dragging)}),[p,y.dragging,e,h,E]),w=(0,a.useMemo)(()=>({height:5,backgroundColor:"rgba(255, 255, 255, 1)",width:(h-(r??0))/(e-1)*E,marginLeft:(r??0)/(e-1)*E,borderRadius:2.5}),[e,h,r,E]),U=(0,a.useMemo)(()=>({height:5,backgroundColor:"rgba(255, 255, 255, 0.25)",width:((i??e-1)-(r??0))/(e-1)*100+"%",marginLeft:(r??0)/(e-1)*100+"%",borderRadius:2.5,position:"absolute"}),[e,r,i]);return(0,s.jsxs)("div",{ref:l,onPointerDown:x,style:eo,children:[(0,s.jsxs)("div",{style:er,children:[(0,s.jsx)("div",{style:U}),(0,s.jsx)("div",{style:w})]}),(0,s.jsx)("div",{style:v})]})},el=e=>{let t=Math.floor(e/60),n=Math.floor(e-60*t);return`${String(t)}:${String(n).padStart(2,"0")}`},ep=({durationInFrames:e,maxTimeLabelWidth:t,fps:n})=>{let r=o.Xp.Timeline.useTimelinePosition(),i=(0,a.useMemo)(()=>({color:"white",fontFamily:"sans-serif",fontSize:14,maxWidth:null===t?void 0:t,overflow:"hidden",textOverflow:"ellipsis"}),[t]);return(0,s.jsxs)("div",{style:i,children:[el((r===e-1?r+1:r)/n)," / ",el(e/n)]})},ec=[0,8.1,15.5,22.5,29,35.3,41.2,47.1,52.9,58.8,64.7,71,77.5,84.5,91.9],ed=1/.7,eu={boxSizing:"border-box",position:"absolute",bottom:0,width:"100%",paddingTop:40,paddingBottom:10,backgroundImage:`linear-gradient(to bottom,${[0,.013,.049,.104,.175,.259,.352,.45,.55,.648,.741,.825,.896,.951,.987].map((e,t)=>`hsla(0, 0%, 0%, ${e}) ${ec[t]*ed}%`).join(", ")}, hsl(0, 0%, 0%) 100%)`,backgroundSize:"auto 145px",display:"flex",paddingRight:12,paddingLeft:12,flexDirection:"column",transition:"opacity 0.3s"},em={display:"flex",flexDirection:"row",width:"100%",alignItems:"center",justifyContent:"center",userSelect:"none",WebkitUserSelect:"none"},ef={display:"flex",flexDirection:"row",userSelect:"none",WebkitUserSelect:"none",alignItems:"center"},eh={width:12},ey={height:8},eg={flex:1},eE={},ex=({durationInFrames:e,isFullscreen:t,fps:n,showVolumeControls:o,onFullscreenButtonClick:r,allowFullscreen:i,onExitFullscreenButtonClick:l,spaceKeyToPlayOrPause:c,onSeekEnd:d,onSeekStart:u,inFrame:m,outFrame:f,initiallyShowControls:h,canvasSize:y,renderPlayPauseButton:g,renderFullscreenButton:E,alwaysShowControls:x,showPlaybackRateControl:b,containerRef:F,buffering:v,hideControlsWhenPointerDoesntMove:w,onPointerDown:U,onDoubleClick:C,renderMuteButton:S,renderVolumeSlider:L,playing:T,toggle:M,renderCustomControls:I})=>{let R=(0,a.useRef)(null),[k,P]=(0,a.useState)(!1),B=A(F,w),{maxTimeLabelWidth:D,displayVerticalVolumeSlider:j}=(({allowFullscreen:e,playerWidth:t})=>(0,a.useMemo)(()=>{let n=50+16*!!e+24+20,a=Math.max(t-n,0),s=a-X,o=t<(s<X?a:s)+n+X;return{maxTimeLabelWidth:0===a?null:a,displayVerticalVolumeSlider:o}},[e,t]))({allowFullscreen:i,playerWidth:y?.width??0}),[N,H]=(0,a.useState)(()=>

915{if("boolean"==typeof h)return h;if("number"==typeof h){if(h%1!=0)throw Error("initiallyShowControls must be an integer or a boolean");if(Number.isNaN(h))throw Error("initiallyShowControls must not be NaN");if(!Number.isFinite(h))throw Error("initiallyShowControls must be finite");if(h<=0)throw Error("initiallyShowControls must be a positive integer");return h}throw TypeError("initiallyShowControls must be a number or a boolean")}),$=(0,a.useMemo)(()=>{let e=B||!T||N||x;return{...eu,opacity:Number(e)}},[B,N,T,x]);(0,a.useEffect)(()=>{R.current&&c&&R.current.focus({preventScroll:!0})},[T,c]),(0,a.useEffect)(()=>{P(("u">typeof document&&(document.fullscreenEnabled||document.webkitFullscreenEnabled))??!1)},[]),(0,a.useEffect)(()=>{if(!1===N)return;let e=setTimeout(()=>{H(!1)},!0===N?2e3:N);return()=>{clearInterval(e)}},[N]);let _=(0,a.useMemo)(()=>{if(!0===b)return[.5,.8,1,1.2,1.5,1.8,2,2.5,3];if(Array.isArray(b)){for(let e of b){if("number"!=typeof e)throw Error("Every item in showPlaybackRateControl must be a number");if(e<=0)throw Error("Every item in showPlaybackRateControl must be positive")}return b}return null},[b]),W=I?I():null,z=(0,a.useRef)(null),G=(0,a.useRef)(null),q=(0,a.useCallback)(e=>{(e.target===z.current||e.target===G.current)&&U?.(e)},[U]),J=(0,a.useCallback)(e=>{(e.target===z.current||e.target===G.current)&&C?.(e)},[C]);return(0,s.jsxs)("div",{ref:z,style:$,onPointerDown:q,onDoubleClick:J,children:[(0,s.jsxs)("div",{ref:G,style:em,children:[(0,s.jsxs)("div",{style:ef,children:[(0,s.jsx)("button",{ref:R,type:"button",style:et,onClick:M,"aria-label":T?"Pause video":"Play video",title:T?"Pause video":"Play video",children:null===g?(0,s.jsx)(O,{buffering:v,playing:T}):g({playing:T,isBuffering:v})??(0,s.jsx)(O,{buffering:v,playing:T})}),o?(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("div",{style:eh}),(0,s.jsx)(K,{renderMuteButton:S,renderVolumeSlider:L,displayVerticalVolumeSlider:j})]}):null,(0,s.jsx)("div",{style:eh}),(0,s.jsx)(ep,{durationInFrames:e,fps:n,maxTimeLabelWidth:D}),(0,s.jsx)("div",{style:eh})]}),(0,s.jsx)("div",{style:eg}),W,W&&_&&y?(0,s.jsx)("div",{style:eh}):null,_&&y&&(0,s.jsx)(ea,{canvasSize:y,playbackRates:_}),_&&k&&i?(0,s.jsx)("div",{style:eh}):null,(0,s.jsx)("div",{style:eE,children:k&&i?(0,s.jsx)("button",{type:"button","aria-label":t?"Exit fullscreen":"Enter Fullscreen",title:t?"Exit fullscreen":"Enter Fullscreen",style:et,onClick:t?l:r,children:null===E?(0,s.jsx)(p,{isFullscreen:t}):E({isFullscreen:t})}):null})]}),(0,s.jsx)("div",{style:ey}),(0,s.jsx)(ei,{onSeekEnd:d,onSeekStart:u,durationInFrames:e,inFrame:m,outFrame:f})]})},eb="u"<typeof document,eF=a.version.split(".")[0];if("0"===eF)throw Error(`Version ${eF} of "react" is not supported by Remotion`);var ev=parseInt(eF,10)>=18,ew=(0,a.forwardRef)(({controls:e,style:t,loop:n,autoPlay:r,allowFullscreen:i,inputProps:l,clickToPlay:p,showVolumeControls:c,doubleClickToFullscreen:d,spaceKeyToPlayOrPause:u,errorFallback:m,playbackRate:f,renderLoading:h,renderPoster:y,className:v,moveToBeginningWhenEnded:w,showPosterWhenUnplayed:U,showPosterWhenEnded:C,showPosterWhenPaused:S,showPosterWhenBuffering:L,showPosterWhenBufferingAndPaused:T,inFrame:A,outFrame:I,initiallyShowControls:R,renderFullscreen:P,renderPlayPauseButton:B,renderMuteButton:j,renderVolumeSlider:H,renderCustomControls:$,alwaysShowControls:_,showPlaybackRateControl:W,posterFillMode:O,bufferStateDelayInMilliseconds:G,hideControlsWhenPointerDoesntMove:X,overflowVisible:K,browserMediaControlsBehavior:q,overrideInternalClassName:J,noSuspense:V},Y)=>{var Q;let Z,ee,et,en,ea,es,eo,er,ei=o.Xp.useUnsafeVideoConfig(),el=o.Xp.useVideo(),ep=(0,a.useRef)(null),ec=D(ep,{triggerOnWindowResize:!1,shouldApplyCssTransforms:!1}),[ed,eu]=(0,a.useState)(!1),[em,ef]=(0,a.useState)(r),[eh,ey]=(0,a.useState)(()=>!1),[eg,eE]=(0,a.useState)(!1),[eF,ew]=(0,a.useState)(!1),eU=(0,a.useMemo)(()=>!("u"<typeof document)&&!!(document.fullscreenEnabled||document.webkitFullscreenEnabled),[]),eC=M(),eS=o.Xp.usePlaying(),eL=o.Xp.Timeline.useTimelinePosition(),eT=(0,a.useCallback)(e=>{eC.isPlaying()||(ew(!0),eC.play(e))},[eC]),{playerMuted:eA,mediaVolume:eM}=(0,a.useContext)(o.Xp.MediaVolumeContext),eI=(0,a.useContext)(F);(0,a.useEffect)(()=>{eC.emitter.dispatchVolumeChange(eM)},[eC.emitter,eM]);let eR=eA||0===eM;(0,a.useEffect)(()=>{eC.emitter.dispatchMuteChange({isMuted:eR})},[eC.emitter,eR]),k({loop:n,playbackRate:f,moveToBeginningWhenEnded:w,inFrame:A,outFrame:I,getCurrentFrame:eC.getCurrentFrame,browserMediaControl

915sBehavior:q,muted:eR}),(0,a.useEffect)(()=>{ed&&!eS&&(eu(!1),eT())},[ed,eT,eS]),(0,a.useEffect)(()=>{let{current:e}=ep;if(!e)return;let t=()=>{ey(document.fullscreenElement===e||document.webkitFullscreenElement===e)};return document.addEventListener("fullscreenchange",t),document.addEventListener("webkitfullscreenchange",t),()=>{document.removeEventListener("fullscreenchange",t),document.removeEventListener("webkitfullscreenchange",t)}},[]);let ek=(0,a.useCallback)(e=>{eC.isPlaying()?eC.pause():eT(e)},[eT,eC]),eP=(0,a.useCallback)(()=>{if(!i)throw Error("allowFullscreen is false");if(!eU)throw Error("Browser doesnt support fullscreen");if(!ep.current)throw Error("No player ref found");ep.current.webkitRequestFullScreen?ep.current.webkitRequestFullScreen():ep.current.requestFullscreen()},[i,eU]),eB=(0,a.useCallback)(()=>{document.webkitExitFullscreen?document.webkitExitFullscreen():document.exitFullscreen()},[]);(0,a.useEffect)(()=>{let{current:e}=ep;if(!e)return;let t=()=>{let e=document.webkitFullscreenElement??document.fullscreenElement;e&&e===ep.current?eC.emitter.dispatchFullscreenChange({isFullscreen:!0}):eC.emitter.dispatchFullscreenChange({isFullscreen:!1})};return e.addEventListener("webkitfullscreenchange",t),e.addEventListener("fullscreenchange",t),()=>{e.removeEventListener("webkitfullscreenchange",t),e.removeEventListener("fullscreenchange",t)}},[eC.emitter]);let eD=ei?.durationInFrames??1,ej=(0,a.useMemo)(()=>ei&&ec?g({canvasSize:ec,compositionHeight:ei.height,compositionWidth:ei.width,previewSize:"auto"}):null,[ec,ei]),eN=ej?.scale??1,eH=(0,a.useRef)(!1);(0,a.useEffect)(()=>{if(!eH.current){eH.current=!0;return}eC.emitter.dispatchScaleChange(eN)},[eC.emitter,eN]);let{setMediaVolume:e$,setPlayerMuted:e_}=(0,a.useContext)(o.Xp.SetMediaVolumeContext),[eW,ez]=(0,a.useState)(!1);(0,a.useEffect)(()=>{let e=null,t=!1,n=()=>{t=!1,requestAnimationFrame(()=>{0===G?ez(!0):e=setTimeout(()=>{t||ez(!0)},G)})},a=()=>{requestAnimationFrame(()=>{t=!0,ez(!1),e&&clearTimeout(e)})};return eC.emitter.addEventListener("waiting",n),eC.emitter.addEventListener("resume",a),()=>{eC.emitter.removeEventListener("waiting",n),eC.emitter.removeEventListener("resume",a),ez(!1),e&&clearTimeout(e),t=!0}},[G,eC.emitter]),(0,a.useImperativeHandle)(Y,()=>{let e={play:eT,pause:()=>{eu(!1),eC.pause()},toggle:ek,getContainerNode:()=>ep.current,getCurrentFrame:eC.getCurrentFrame,isPlaying:eC.isPlaying,seekTo:e=>{let t=eD-1,a=Math.max(0,Math.min(t,e));eC.isPlaying()&&(eu(a!==t||n),eC.pause()),a!==t||n||eC.emitter.dispatchEnded(),eC.seek(a)},isFullscreen:()=>{let{current:e}=ep;return!!e&&(document.fullscreenElement===e||document.webkitFullscreenElement===e)},requestFullscreen:eP,exitFullscreen:eB,getVolume:()=>eA?0:eM,setVolume:e=>{if("number"!=typeof e)throw TypeError(`setVolume() takes a number, got value of type ${typeof e}`);if(isNaN(e))throw TypeError("setVolume() got a number that is NaN. Volume must be between 0 and 1.");if(e<0||e>1)throw TypeError(`setVolume() got a number that is out of range. Must be between 0 and 1, got ${e}`);e$(e)},isMuted:()=>eR,mute:()=>{e_(!0)},unmute:()=>{e_(!1)},getScale:()=>eN,pauseAndReturnToPlayStart:()=>{eC.pauseAndReturnToPlayStart()}};return Object.assign(eC.emitter,e)},[eD,eB,n,eA,eR,eM,eC,eT,eP,e_,e$,ek,eN]);let eO=el?el.component:null,eG=(0,a.useMemo)(()=>E({canvasSize:ec,config:ei,style:t,overflowVisible:K,layout:ej}),[ec,ei,ej,K,t]),eX=(0,a.useMemo)(()=>b({config:ei,layout:ej,scale:eN,overflowVisible:K}),[ei,ej,K,eN]),eK=(0,a.useMemo)(()=>x({config:ei,layout:ej,scale:eN,overflowVisible:K}),[ei,ej,K,eN]),eq=eC.pause,eJ=eC.emitter.dispatchError,eV=(0,a.useCallback)(e=>{eq(),eJ(e)},[eJ,eq]),eY=(0,a.useCallback)(e=>{e.stopPropagation(),eP()},[eP]),eQ=(0,a.useCallback)(e=>{e.stopPropagation(),eB()},[eB]),eZ=(0,a.useCallback)(e=>{(e instanceof MouseEvent?2===e.button:e.nativeEvent.button)||ek(e)},[ek]),e0=(0,a.useCallback)(()=>{eE(!0)},[]),e1=(0,a.useCallback)(()=>{eE(!1)},[]),e2=(0,a.useCallback)(()=>{eh?eB():eP()},[eB,eh,eP]),{handlePointerDown:e4,handleDoubleClick:e8}=(Q=d&&i&&eU,Z=(0,a.useRef)([]),ee=(0,a.useCallback)(e=>{Z.current=[...Z.current,e]},[]),et=(0,a.useCallback)(e=>{Z.current=Z.current.filter(t=>t!==e)},[]),en=(0,a.useCallback)(()=>Z.current.map(e=>e.cancel()),[]),ea=(0,a.useMemo)(()=>({appendPendingPromise:ee,removePendingPromise:et,clearPendingPromises:en}),[ee,en,et]),es=(0,a.useCallback)(async e=>{var t;let n;if(e instanceof PointerEvent?"touch"===e.pointerType:"touch"===e.nativeEvent.pointerType)return void eZ(e);ea.clearPendingPromises();let a=(t=new Promise(e=>setTimeout(e,200)),n=!1,{promise:new Promise((e,a)=>{t.then(t=>{n?a({isCanceled:n,value:t}):e(t)}).catch(e=>{a({isCanceled:n,error:e})})}),cancel:()=>{n=!0}});ea.appendPendingPromise(a);try{await a.promise,ea.removePendingPromise(a),eZ(e)}catch(e){if(ea.removePendingPromise(a),!e.isCanceled)throw e.error}},[ea,eZ]),eo=(0,a.useCallback)(()=>{document.addEventListener("pointerup",e=>{es(e)},{once:!0})},[es]),er=(0,a.useCallback)(()=>{ea.clearPendingPromises(),e2()},[ea,e2]),(0,a.useMemo)(()=>Q?{handlePointerDown:eo,handleDoubleClick:er}:{handlePointerDown:eZ,handleDoubleClick:()=>{}},[Q,er,eo,eZ]));(0,a.useEffect)(()=>{em&&(ew(!0),eC.playAsAutoPlay(),ef(!1))},[eC,em]);let e3=(0,a.useMemo)(()=>h?h({height:eG.height,width:eG.width,isBuffering:eW}):null,[eG.height,eG.width,h,eW]),e5=(0,a.useMemo)(()=>({type:"scale",scale:eN}),[eN]);if(!ei)return null;let e6=y?y({height:"player-size"===O?eG.height:ei.height,width:"player-size"===O?eG.width:ei.width,isBuffering:eW}):null;if(void 0===e6)throw TypeError("renderPoster() must return a React element, but undefined was returned");let e9=e6&&[S&&!eS&&!eg,C&&eL===eD-1&&!eS,U&&!eF&&!eS,L&&eW&&eS,T&&eW&&!eS].some(Boolean),{left:e7,top:te,width:tt,height:tn,...ta}=eX,ts=(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)("div",{style:eX,onPointerDown:p?e4:void 0,onDoubleClick:d?e8:void 0,children:[(0,s.jsxs)("div",{style:eK,className:J??"__remotion-player",children:[eO?

915(0,s.jsx)(N,{onError:eV,errorFallback:m,children:(0,s.jsx)(o.Xp.CurrentScaleContext.Provider,{value:e5,children:(0,s.jsx)(F.Provider,{value:null,children:(0,s.jsx)(eO,{...el?.props??{},...l??{}})})})}):null,e9&&"composition-size"===O?(0,s.jsx)("div",{style:{...ta,width:ei.width,height:ei.height},onPointerDown:p?e4:void 0,onDoubleClick:d?e8:void 0,children:e6}):null]}),(0,s.jsx)(z,{}),eI]}),e9&&"player-size"===O?(0,s.jsx)("div",{style:eX,onPointerDown:p?e4:void 0,onDoubleClick:d?e8:void 0,children:e6}):null,e?(0,s.jsx)(ex,{fps:ei.fps,playing:eS,toggle:ek,durationInFrames:ei.durationInFrames,containerRef:ep,onFullscreenButtonClick:eY,isFullscreen:eh,allowFullscreen:i,showVolumeControls:c,onExitFullscreenButtonClick:eQ,spaceKeyToPlayOrPause:u,onSeekEnd:e1,onSeekStart:e0,inFrame:A,outFrame:I,initiallyShowControls:R,canvasSize:ec,renderFullscreenButton:P,renderPlayPauseButton:B,alwaysShowControls:_,showPlaybackRateControl:W,buffering:eW,hideControlsWhenPointerDoesntMove:X,onDoubleClick:d?e8:void 0,onPointerDown:p?e4:void 0,renderMuteButton:j,renderVolumeSlider:H,renderCustomControls:$}):null]});return V||eb&&!ev?(0,s.jsx)("div",{ref:ep,style:eG,className:v,children:ts}):(0,s.jsx)("div",{ref:ep,style:eG,className:v,children:(0,s.jsx)(a.Suspense,{fallback:e3,children:ts})})}),eU="remotion.volumePreference",eC="player-comp",eS=({children:e,timelineContext:t,playbackRateContext:n,fps:r,compositionHeight:i,compositionWidth:l,durationInFrames:p,component:c,numberOfSharedAudioTags:d,initiallyMuted:u,logLevel:m,audioLatencyHint:f,sampleRate:h,volumePersistenceKey:y,initialVolume:g,inputProps:E,audioEnabled:x,_experimentalKeepAudioContextAlive:b})=>{let F=void 0===g,v=(0,a.useMemo)(()=>({compositions:[{component:c,durationInFrames:p,height:i,width:l,fps:r,id:eC,order:null,folderName:null,parentFolderName:null,schema:null,calculateMetadata:null,stack:null}],folders:[],currentAssetMetadata:null,currentCompositionMetadata:{defaultCodec:null,defaultOutName:null,defaultPixelFormat:null,defaultProResProfile:null,defaultSampleRate:null,defaultVideoImageFormat:null,durationInFrames:p,fps:r,height:i,width:l,props:E},canvasContent:{type:"composition",compositionId:"player-comp"}}),[c,p,i,l,r,E]),[w,U]=(0,a.useState)(()=>u),[C,S]=(0,a.useState)(()=>F?(e=>{if("u"<typeof window)return 1;try{let t=window.localStorage.getItem(e??eU);return t?Number(t):1}catch{return 1}})(y??null):g),L=(0,a.useMemo)(()=>({playerMuted:w,mediaVolume:C}),[w,C]),T=(0,a.useRef)(!1),A=T.current||x&&!w&&C>0;T.current=A;let M=(0,a.useCallback)(e=>{S(e),F&&((e,t,n)=>{if("u">typeof window)try{window.localStorage.setItem(n??eU,String(e))}catch(e){o.Xp.Log.error({logLevel:t,tag:null},"Could not persist volume",e)}})(e,m,y??null)},[F,m,y]),I=(0,a.useMemo)(()=>({setPlayerMuted:U,setMediaVolume:M}),[M]),R=(0,a.useMemo)(()=>({logLevel:m,mountTime:Date.now()}),[m]),k=(0,a.useMemo)(()=>({isPlayer:!0,isRendering:!1,isStudio:!1,isClientSideRendering:!1,isReadOnlyStudio:!1}),[]);return(0,s.jsx)(o.Xp.RemotionEnvironmentContext.Provider,{value:k,children:(0,s.jsx)(o.Xp.LogLevelContext.Provider,{value:R,children:(0,s.jsx)(o.Xp.CanUseRemotionHooksProvider,{children:(0,s.jsx)(o.Xp.AbsoluteTimeContext.Provider,{value:t,children:(0,s.jsx)(o.Xp.PlaybackRateContext.Provider,{value:n,children:(0,s.jsx)(o.Xp.TimelineContext.Provider,{value:t,children:(0,s.jsx)(o.Xp.CompositionManager.Provider,{value:v,children:(0,s.jsx)(o.Xp.PrefetchProvider,{children:(0,s.jsx)(o.Xp.DurationsContextProvider,{children:(0,s.jsx)(o.Xp.MediaVolumeContext.Provider,{value:L,children:(0,s.jsx)(o.Xp.SetMediaVolumeContext.Provider,{value:I,children:(0,s.jsx)(o.Xp.BufferingProvider,{children:(0,s.jsx)(o.Xp.SharedAudioContextProvider,{audioLatencyHint:f,audioEnabled:A,previewSampleRate:h,_experimentalKeepAudioContextAlive:b,children:(0,s.jsx)(o.Xp.SharedAudioTagsContextProvider,{numberOfAudioTags:d,children:e})})})})})})})})})})})})})})},eL=!1,eT=(e,t)=>{if(null==e)return e??null;if("number"!=typeof e)throw TypeError(`"${t}" must be a number, but is ${JSON.stringify(e)}`);if(Number.isNaN(e))throw TypeError(`"${t}" must not be NaN, but is ${JSON.stringify(e)}`);

915if(!Number.isFinite(e))throw TypeError(`"${t}" must be finite, but is ${JSON.stringify(e)}`);if(e%1!=0)throw TypeError(`"${t}" must be an integer, but is ${JSON.stringify(e)}`);return e},eA=r.NoReactInternals.validateFps,eM=r.NoReactInternals.validateDimension,eI=r.NoReactInternals.validateDurationInFrames,eR=r.NoReactInternals.validateDefaultAndInputProps,ek=({onTimelineSequenceChange:e})=>{let{sequences:t}=a.useContext(o.Xp.SequenceManager);return(0,a.useEffect)(()=>{e(t)},[e,t]),null},eP=(0,a.forwardRef)(({durationInFrames:e,compositionHeight:t,compositionWidth:n,fps:i,inputProps:l,style:p,controls:c=!1,loop:d=!1,autoPlay:u=!1,showVolumeControls:m=!0,allowFullscreen:f=!0,clickToPlay:h,doubleClickToFullscreen:y=!1,spaceKeyToPlayOrPause:g=!0,moveToBeginningWhenEnded:E=!0,numberOfSharedAudioTags:x=5*!r.NoReactInternals.ENABLE_V5_BREAKING_CHANGES,errorFallback:b=()=>"\u26A0\uFE0F",playbackRate:F=1,renderLoading:v,className:w,showPosterWhenUnplayed:U,showPosterWhenEnded:C,showPosterWhenPaused:S,showPosterWhenBuffering:A,showPosterWhenBufferingAndPaused:M,initialFrame:I,renderPoster:R,inFrame:k,outFrame:P,initiallyShowControls:B,renderFullscreenButton:D,renderPlayPauseButton:j,renderVolumeSlider:N,renderCustomControls:H,alwaysShowControls:$=!1,initiallyMuted:_=!1,showPlaybackRateControl:W=!1,posterFillMode:z="player-size",bufferStateDelayInMilliseconds:O,hideControlsWhenPointerDoesntMove:G=!0,overflowVisible:X=!1,renderMuteButton:K,browserMediaControlsBehavior:q,overrideInternalClassName:J,logLevel:V="info",noSuspense:Y,acknowledgeRemotionLicense:Q,audioLatencyHint:Z="playback",sampleRate:ee=48e3,volumePersistenceKey:et,initialVolume:en,_experimentalKeepAudioContextAlive:ea=!1,...es},eo)=>{"u">typeof window&&(window.remotion_isPlayer=!0);let er=a.useContext(T);if(void 0!==es.defaultProps)throw Error("The <Player /> component does not accept `defaultProps`, but some were passed. Use `inputProps` instead.");let ei="component"in es?es.component:null;if(ei?.type===o.BO)throw TypeError("'component' should not be an instance of <Composition/>. Pass the React component directly, and set the duration, fps and dimensions as separate props. See https://www.remotion.dev/docs/player/examples for an example.");if(ei===o.BO)throw TypeError("'component' must not be the 'Composition' component. Pass your own React component directly, and set the duration, fps and dimensions as separate props. See https://www.remotion.dev/docs/player/examples for an example.");(0,a.useState)(()=>{Q||!eL&&(eL=!0,o.Xp.Log.warn({logLevel:V,tag:null},"Note: Some companies are required to obtain a license to use Remotion. See: https://remotion.dev/license\nPass the `acknowledgeRemotionLicense` prop to `<Player />` function to make this message disappear."))});let el=o.Xp.useLazyComponent({compProps:es,componentName:"Player",noSuspense:!!Y});(({initialFrame:e,durationInFrames:t})=>{if("number"!=typeof t)throw Error(`\`durationInFrames\` must be a number, but is ${JSON.stringify(t)}`);if(void 0!==e){if("number"!=typeof e)throw Error(`\`initialFrame\` must be a number, but is ${JSON.stringify(e)}`);if(Number.isNaN(e))throw Error("`initialFrame` must be a number, but is NaN");if(!Number.isFinite(e))throw Error("`initialFrame` must be a number, but is Infinity");if(e%1!=0)throw Error(`\`initialFrame\` must be an integer, but is ${JSON.stringify(e)}`);if(e>t-1)throw Error(`\`initialFrame\` must be less or equal than \`durationInFrames - 1\`, but is ${JSON.stringify(e)}`)}})({initialFrame:I,durationInFrames:e});let[ep,ec]=(0,a.useState)(()=>({[eC]:I??0})),ed=o.Xp.useTimelineSeek(ec),eu=(0,a.useRef)(ep);eu.current=ep;let em=(0,a.useRef)(null),ef=(0,a.useRef)([]),eh=(0,a.useMemo)(()=>

915o.Xp.createRuntimeValueStore({playing:!1}),[]),ey=(0,a.useMemo)(()=>o.Xp.createRuntimeValueStore({buffering:!1}),[]),eg=(0,a.useCallback)(()=>eh.store.getSnapshot().playing,[eh]),eE=(0,a.useCallback)(()=>ey.store.getSnapshot().buffering,[ey]),[ex,eb]=(0,a.useState)(F);if("number"!=typeof t)throw TypeError(`'compositionHeight' must be a number but got '${typeof t}' instead`);if("number"!=typeof n)throw TypeError(`'compositionWidth' must be a number but got '${typeof n}' instead`);if(eM(t,"compositionHeight","of the <Player /> component"),eM(n,"compositionWidth","of the <Player /> component"),eI(e,{component:"of the <Player/> component",allowFloats:!1}),eA(i,"as a prop of the <Player/> component",!1),eR(l,"inputProps",null),(({inFrame:e,durationInFrames:t,outFrame:n})=>{let a=eT(e,"inFrame"),s=eT(n,"outFrame");if(null!==a||null!==s){if(null!==a&&a>t-1)throw Error("inFrame must be less than (durationInFrames - 1), but is "+a);if(null!==s&&s>t-1)throw Error("outFrame must be less than (durationInFrames - 1), but is "+s);if(null!==a&&a<0)throw Error("inFrame must be greater than 0, but is "+a);if(null!==s&&s<=0)throw Error(`outFrame must be greater than 0, but is ${s}. If you want to render a single frame, use <Thumbnail /> instead.`);if(null!==s&&null!==a&&s<=a)throw Error("outFrame must be greater than inFrame, but is "+s+" <= "+a)}})({durationInFrames:e,inFrame:k,outFrame:P}),"boolean"!=typeof c&&void 0!==c)throw TypeError(`'controls' must be a boolean or undefined but got '${typeof c}' instead`);if("boolean"!=typeof u&&void 0!==u)throw TypeError(`'autoPlay' must be a boolean or undefined but got '${typeof u}' instead`);if("boolean"!=typeof d&&void 0!==d)throw TypeError(`'loop' must be a boolean or undefined but got '${typeof d}' instead`);if("boolean"!=typeof y&&void 0!==y)throw TypeError(`'doubleClickToFullscreen' must be a boolean or undefined but got '${typeof y}' instead`);if("boolean"!=typeof m&&void 0!==m)throw TypeError(`'showVolumeControls' must be a boolean or undefined but got '${typeof m}' instead`);if("boolean"!=typeof f&&void 0!==f)throw TypeError(`'allowFullscreen' must be a boolean or undefined but got '${typeof f}' instead`);if("boolean"!=typeof h&&void 0!==h)throw TypeError(`'clickToPlay' must be a boolean or undefined but got '${typeof h}' instead`);if("boolean"!=typeof g&&void 0!==g)throw TypeError(`'spaceKeyToPlayOrPause' must be a boolean or undefined but got '${typeof g}' instead`);if("number"!=typeof ee||!Number.isFinite(ee)||Number.isNaN(ee)||ee<=0||ee%1!=0)throw TypeError(`'sampleRate' must be a positive integer but got '${ee}' instead`);if(void 0!==en&&"number"!=typeof en)throw TypeError(`'initialVolume' must be a number or undefined but got '${typeof en}' instead`);if("number"==typeof en&&(!Number.isFinite(en)||Number.isNaN(en)||en<0||en>1))throw TypeError(`'initialVolume' must be between 0 and 1 but got '${en}' instead`);if("number"!=typeof x||x%1!=0||!Number.isFinite(x)||Number.isNaN(x)||x<0)throw TypeError(`'numberOfSharedAudioTags' must be an integer but got '${x}' instead`);if(void 0!==ex){if(ex>10)throw Error(`The highest possible playback rate is 10. You passed: ${ex}`);if(ex<-10)throw Error(`The lowest possible playback rate is -10. You passed: ${ex}`);if(0===ex)throw Error("A playback rate of 0 is not supported.")}(0,a.useEffect)(()=>{eb(F)},[F]),(0,a.useImperativeHandle)(eo,()=>em.current,[]),(0,a.useState)(()=>{o.Xp.playbackLogging({logLevel:V,message:`[player] Mounting <Player>. User agent = ${"u"<typeof navigator?"server":navigator.userAgent}`,tag:"player",mountTime:Date.now()})});let eF=(0,a.useMemo)(()=>({frame:ep,isPlaying:eg,isInsideFreeze:!1,audioAndVideoTags:ef}),[ep,eg]),ev=(0,a.useMemo)(()=>({playbackRate:ex,setPlaybackRate:eb}),[ex]),eU=(0,a.useMemo)(()=>({setFrameWithoutSeek:ec,seek:ed,setPlaying:e=>{let t=eh.store.getSnapshot().playing,n="function"==typeof e?e(t):e;t!==n&&eh.setSnapshot({playing:n})},setBuffering:e=>{eE()!==e&&ey.setSnapshot({buffering:e})},subscribePlaying:eh.store.subscribe,subscribeBuffering:ey.store.subscribe,isPlaying:eg,isBuffering:eE,frameRef:eu,audioAndVideoTags:ef}),[ey,ed,ec,eu,eh,eE,eg]);"u">typeof window&&(0,a.useLayoutEffect)(()=>{o.Xp.CSSUtils.injectCSS(o.Xp.CSSUtils.makeDefaultPreviewCSS(`.${J??"__remotion-player"}`,"#fff"))},[J]);let eP=(0,a.useMemo)(()=>l??{},[l]),eB=(0,a.useMemo)(()=>q??{mode:"prevent-media-session"},[q]),eD=(0,s.jsx)(o.Xp.IsPlayerContextProvider,{children:(0,s.jsx)(o.Xp.SetTimelineContext.Provider,{value:eU,children:(0,s.jsx)(eS,{timelineContext:eF,playbackRateContext:ev,component:el,compositionHeight:t,compositionWidth:n,durationInFrames:e,fps:i,numberOfSharedAudioTags:x,initiallyMuted:_,logLevel:V,audioLatencyHint:Z,sampleRate:ee,_experimentalKeepAudioContextAlive:ea,volumePersistenceKey:et,initialVolume:en,inputProps:eP,audioEnabled:!0,children:(0,s.jsx)(L,{currentPlaybackRate:ex,children:(0,s.jsx)(ew,{ref:em,posterFillMode:z,renderLoading:v,autoPlay:!!u,loop:!!d,controls:!!c,errorFallback:b,style:p,inputProps:eP,allowFullscreen:!!f,moveToBeginningWhenEnded:!!E,clickToPlay:"boolean"==typeof h?h:!!c,showVolumeControls:!!m,doubleClickToFullscreen:!!y,spaceKeyToPlayOrPause:!!g,playbackRate:ex,className:w??void 0,showPosterWhenUnplayed:!!U,showPosterWhenEnded:!!C,showPosterWhenPaused:!!S,showPosterWhenBuffering:!!A,showPosterWhenBufferingAndPaused:!!M,renderPoster:R,inFrame:k??null,outFrame:P??null,initiallyShowControls:B??!0,renderFullscreen:D??null,renderPlayPauseButton:j??null,renderMuteButton:K??null,renderVolumeSlider:N??null,renderCustomControls:H??null,alwaysShowControls:$,showPlaybackRateControl:W,bufferStateDelayInMilliseconds:O??300,hideControlsWhenPointerDoesntMove:G,overflowVisible:X,browserMediaControl

915sBehavior:eB,overrideInternalClassName:J??void 0,noSuspense:!!Y})})})})});return er?(0,s.jsx)(o.Xp.SequenceRegistrationContext.Provider,{value:!0,children:(0,s.jsxs)(o.Xp.SequenceManagerProvider,{children:[(0,s.jsx)(ek,{onTimelineSequenceChange:er}),eD]})}):eD}),eB=a.version.split(".")[0];if("0"===eB)throw Error(`Version ${eB} of "react" is not supported by Remotion`);var eD=parseInt(eB,10)>=18,ej=(0,a.forwardRef)(({style:e,inputProps:t,errorFallback:n,renderLoading:r,className:i,overflowVisible:l,noSuspense:p,overrideInternalClassName:c},d)=>{let u=o.Xp.useUnsafeVideoConfig(),m=o.Xp.useVideo(),f=(0,a.useRef)(null),h=D(f,{triggerOnWindowResize:!1,shouldApplyCssTransforms:!1}),y=(0,a.useMemo)(()=>u&&h?g({canvasSize:h,compositionHeight:u.height,compositionWidth:u.width,previewSize:"auto"}):null,[h,u]),F=y?.scale??1,v=(()=>{let e=(0,a.useContext)(w);if(!e)throw TypeError("Expected Player event emitter context");return(0,a.useMemo)(()=>({emitter:e}),[e])})();S(v.emitter),(0,a.useImperativeHandle)(d,()=>Object.assign(v.emitter,{getContainerNode:()=>f.current,getScale:()=>F}),[F,v.emitter]);let U=m?m.component:null,C=(0,a.useMemo)(()=>E({config:u,style:e,canvasSize:h,overflowVisible:l,layout:y}),[h,u,y,l,e]),L=(0,a.useMemo)(()=>b({config:u,layout:y,scale:F,overflowVisible:l}),[u,y,l,F]),T=(0,a.useMemo)(()=>x({config:u,layout:y,scale:F,overflowVisible:l}),[u,y,l,F]),A=(0,a.useCallback)(e=>{v.emitter.dispatchError(e)},[v.emitter]),M=(0,a.useMemo)(()=>r?r({height:C.height,width:C.width,isBuffering:!1}):null,[C.height,C.width,r]),I=(0,a.useMemo)(()=>({type:"scale",scale:F}),[F]);if(!u)return null;let R=(0,s.jsx)("div",{style:L,children:(0,s.jsx)("div",{style:T,className:c??"__remotion-player",children:U?(0,s.jsx)(N,{onError:A,errorFallback:n,children:(0,s.jsx)(o.Xp.CurrentScaleContext.Provider,{value:I,children:(0,s.jsx)(U,{...m?.props??{},...t??{}})})}):null})});return p||eb&&!eD?(0,s.jsx)("div",{ref:f,style:C,className:i,children:R}):(0,s.jsx)("div",{ref:f,style:C,className:i,children:(0,s.jsx)(a.Suspense,{fallback:M,children:R})})}),eN=(0,a.forwardRef)(({frameToDisplay:e,style:t,inputProps:n,compositionHeight:r,compositionWidth:i,durationInFrames:l,fps:p,className:c,errorFallback:d=()=>"\u26A0\uFE0F",renderLoading:u,overflowVisible:m=!1,overrideInternalClassName:f,logLevel:h="info",noSuspense:y,...g},E)=>{"u">typeof window&&(0,a.useLayoutEffect)(()=>{window.remotion_isPlayer=!0},[]);let x=(0,a.useRef)(null),b=(0,a.useRef)([]),F=(0,a.useMemo)(()=>

915o.Xp.createRuntimeValueStore({buffering:!1}),[]),v=(0,a.useMemo)(()=>({isPlaying:()=>!1,isInsideFreeze:!1,frame:{[eC]:e},audioAndVideoTags:b}),[e]),U=(0,a.useMemo)(()=>({playbackRate:1,setPlaybackRate:()=>{throw Error("thumbnail")}}),[]),S=(0,a.useRef)(v.frame);S.current=v.frame;let L=(0,a.useMemo)(()=>({setFrameWithoutSeek:()=>{},seek:null,setPlaying:()=>{},setBuffering:e=>{F.store.getSnapshot().buffering!==e&&F.setSnapshot({buffering:e})},subscribePlaying:()=>()=>{},subscribeBuffering:F.store.subscribe,isPlaying:()=>!1,isBuffering:()=>F.store.getSnapshot().buffering,frameRef:S,audioAndVideoTags:b}),[F]);(0,a.useImperativeHandle)(E,()=>x.current,[]);let T=o.Xp.useLazyComponent({compProps:g,componentName:"Thumbnail",noSuspense:!!y}),[A]=(0,a.useState)(()=>new C),M=(0,a.useMemo)(()=>n??{},[n]);return(0,s.jsx)(o.Xp.IsPlayerContextProvider,{children:(0,s.jsx)(o.Xp.SetTimelineContext.Provider,{value:L,children:(0,s.jsx)(eS,{timelineContext:v,playbackRateContext:U,component:T,compositionHeight:r,compositionWidth:i,durationInFrames:l,fps:p,numberOfSharedAudioTags:0,initiallyMuted:!0,logLevel:h,audioLatencyHint:"playback",sampleRate:48e3,inputProps:M,audioEnabled:!1,_experimentalKeepAudioContextAlive:!1,children:(0,s.jsx)(w.Provider,{value:A,children:(0,s.jsx)(ej,{ref:x,className:c,errorFallback:d,inputProps:M,renderLoading:u,style:t,overflowVisible:m,overrideInternalClassName:f,noSuspense:!!y})})})})})}),eH={PlayerEventEmitterContext:v,PlayerEmitter:U,usePlayerMethods:M,usePlayback:k,useElementSize:D,calculateCanvasTransformation:g,useHoverState:A,updateAllElementsSizes:()=>{for(let e of P)e()},PlayerEmitterProvider:L,BufferingIndicator:y,TimelineSequenceObserverContext:T,CanvasOverlayContext:F}},22693(e,t,n){"use strict";n.d(t,{Ih:()=>es,az:()=>er,dr:()=>ei,f4:()=>en,fG:()=>eo,jl:()=>el,z2:()=>ea});var a=n(67781),s=n(39372);n(64831);var o=n(57825),r=[[],[],[-.5773502691896257,.5773502691896257],[0,-.7745966692414834,.7745966692414834],[-.33998104358485626,.33998104358485626,-.8611363115940526,.8611363115940526],[0,-.5384693101056831,.5384693101056831,-.906179845938664,.906179845938664],[.6612093864662645,-.6612093864662645,-.2386191860831969,.2386191860831969,-.932469514203152,.932469514203152],[0,.4058451513773972,-.4058451513773972,-.7415311855993945,.7415311855993945,-.9491079123427585,.9491079123427585],[-.1834346424956498,.1834346424956498,-.525532409916329,.525532409916329,-.7966664774136267,.7966664774136267,-.9602898564975363,.9602898564975363],[0,-.8360311073266358,.8360311073266358,-.9681602395076261,.9681602395076261,-.3242534234038089,.3242534234038089,-.6133714327005904,.6133714327005904],[-.14887433898163122,.14887433898163122,-.4333953941292472,.4333953941292472,-.6794095682990244,.6794095682990244,-.8650633666889845,.8650633666889845,-.9739065285171717,.9739065285171717],[0,-.26954315595234496,.26954315595234496,-.5190961292068118,.5190961292068118,-.7301520055740494,.7301520055740494,-.8870625997680953,.8870625997680953,-.978228658146057,.978228658146057],[-.1252334085114689,.1252334085114689,-.3678314989981802,.3678314989981802,-.5873179542866175,.5873179542866175,-.7699026741943047,.7699026741943047,-.9041172563704749,.9041172563704749,-.9815606342467192,.9815606342467192],[0,-.2304583159551348,.2304583159551348,-.44849275103644687,.44849275103644687,-.6423493394403402,.6423493394403402,-.8015780907333099,.8015780907333099,-.9175983992229779,.9175983992229779,-.9841830547185881,.9841830547185881],[-.10805494870734367,.10805494870734367,-.31911236892788974,.31911236892788974,-.5152486363581541,.5152486363581541,-.6872929048116855,.6872929048116855,-.827201315069765,.827201315069765,-.9284348836635735,.9284348836635735,-.9862838086968123,.9862838086968123],[0,-.20119409399743451,.20119409399743451,-.3941513470775634,.3941513470775634,-.5709721726085388,.5709721726085388,-.7244177313601701,.7244177313601701,-.8482065834104272,.8482065834104272,-.937273392400706,.937273392400706,-.9879925180204854,.9879925180204854],[-.09501250983763744,.09501250983763744,-.2816035507792589,.2816035507792589,-.45801677765722737,.45801677765722737,-.6178762444026438,.6178762444026438,-.755404408355003,.755404408355003,-.8656312023878318,.8656312023878318,-.9445750230732326,.9445750230732326,-.9894009349916499,.9894009349916499],[0,-.17848418149584785,.17848418149584785,-.3512317634538763,.3512317634538763,-.5126905370864769,.5126905370864769,-.6576711592166907,.6576711592166907,-.7815140038968014,.7815140038968014,-.8802391537269859,.8802391537269859,-.9506755217687678,.9506755217687678,-.9905754753144174,.9905754753144174],[-.0847750130417353,.0847750130417353,-.2518862256915055,.2518862256915055,-.41175116146284263,.41175116146284263,-.5597708310739475,.5597708310739475,-.6916870430603532,.6916870430603532,-.8037049589725231,.8037049589725231,-.8926024664975557,.8926024664975557,-.9558239495713977,.9558239495713977,-.9915651684209309,.9915651684209309],[0,-.16035864564022537,.16035864564022537,-.31656409996362983,.31656409996362983,-.46457074137596094,.46457074137596094,-.600545304661681,.600545304661681,-.7209661773352294,.7209661773352294,-.8227146565371428,.8227146565371428,-.9031559036148179,.9031559036148179,-.96020815213483,.96020815213483,-.9924068438435844,.9924068438435844],[-.07652652113349734,.07652652113349734,-.22778585114164507,.22778585114164507,-.37370608871541955,.37370608871541955,-.5108670019508271,.5108670019508271,-.636053680726515,.636053680726515,-.7463319064601508,.7463319064601508,-.8391169718222188,.8391169718222188,-.912234428251326,.912234428251326,-.9639719272779138,.9639719272779138,-.9931285991850949,.9931285991850949],[0,-.1455618541608951,.1455618541608951,-.2880213168024011,.2880213168024011,-.4243421202074388,.4243421202074388,-.5516188358872198,.5516188358872198,-.6671388041974123,.6671388041974123,-.7684399634756779,.7684399634756779,

915-.8533633645833173,.8533633645833173,-.9200993341504008,.9200993341504008,-.9672268385663063,.9672268385663063,-.9937521706203895,.9937521706203895],[-.06973927331972223,.06973927331972223,-.20786042668822127,.20786042668822127,-.34193582089208424,.34193582089208424,-.469355837986757,.469355837986757,-.5876404035069116,.5876404035069116,-.6944872631866827,.6944872631866827,-.7878168059792081,.7878168059792081,-.8658125777203002,.8658125777203002,-.926956772187174,.926956772187174,-.9700604978354287,.9700604978354287,-.9942945854823992,.9942945854823992],[0,-.1332568242984661,.1332568242984661,-.26413568097034495,.26413568097034495,-.3903010380302908,.3903010380302908,-.5095014778460075,.5095014778460075,-.6196098757636461,.6196098757636461,-.7186613631319502,.7186613631319502,-.8048884016188399,.8048884016188399,-.8767523582704416,.8767523582704416,-.9329710868260161,.9329710868260161,-.9725424712181152,.9725424712181152,-.9947693349975522,.9947693349975522],[-.06405689286260563,.06405689286260563,-.1911188674736163,.1911188674736163,-.3150426796961634,.3150426796961634,-.4337935076260451,.4337935076260451,-.5454214713888396,.5454214713888396,-.6480936519369755,.6480936519369755,-.7401241915785544,.7401241915785544,-.820001985973903,.820001985973903,-.8864155270044011,.8864155270044011,-.9382745520027328,.9382745520027328,-.9747285559713095,.9747285559713095,-.9951872199970213,.9951872199970213]],i=[[],[],[1,1],[.8888888888888888,.5555555555555556,.5555555555555556],[.6521451548625461,.6521451548625461,.34785484513745385,.34785484513745385],[.5688888888888889,.47862867049936647,.47862867049936647,.23692688505618908,.23692688505618908],[.3607615730481386,.3607615730481386,.46791393457269104,.46791393457269104,.17132449237917036,.17132449237917036],[.4179591836734694,.3818300505051189,.3818300505051189,.27970539148927664,.27970539148927664,.1294849661688697,.1294849661688697],[.362683783378362,.362683783378362,.31370664587788727,.31370664587788727,.22238103445337448,.22238103445337448,.10122853629037626,.10122853629037626],[.3302393550012598,.1806481606948574,.1806481606948574,.08127438836157441,.08127438836157441,.31234707704000286,.31234707704000286,.26061069640293544,.26061069640293544],[.29552422471475287,.29552422471475287,.26926671930999635,.26926671930999635,.21908636251598204,.21908636251598204,.1494513491505806,.1494513491505806,.06667134430868814,.06667134430868814],[.2729250867779006,.26280454451024665,.26280454451024665,.23319376459199048,.23319376459199048,.18629021092773426,.18629021092773426,.1255803694649046,.1255803694649046,.05566856711617366,.05566856711617366],[.24914704581340277,.24914704581340277,.2334925365383548,.2334925365383548,.20316742672306592,.20316742672306592,.16007832854334622,.16007832854334622,.10693932599531843,.10693932599531843,.04717533638651183,.04717533638651183],[.2325515532308739,.22628318026289723,.22628318026289723,.2078160475368885,.2078160475368885,.17814598076194574,.17814598076194574,.13887351021978725,.13887351021978725,.09212149983772845,.09212149983772845,.04048400476531588,.04048400476531588],[.2152638534631578,.2152638534631578,.2051984637212956,.2051984637212956,.18553839747793782,.18553839747793782,.15720316715819355,.15720316715819355,.12151857068790319,.12151857068790319,.08015808715976021,.08015808715976021,.03511946033175186,.03511946033175186],[.2025782419255613,.19843148532711158,.19843148532711158,.1861610000155622,.1861610000155622,.16626920581699392,.16626920581699392,.13957067792615432,.13957067792615432,.10715922046717194,.10715922046717194,.07036604748810812,.07036604748810812,.03075324199611727,.03075324199611727],[.1894506104550685,.1894506104550685,.18260341504492358,.18260341504492358,.16915651939500254,.16915651939500254,.14959598881657674,.14959598881657674,.12462897125553388,.12462897125553388,.09515851168249279,.09515851168249279,.062253523938647894,.062253523938647894,.027152459411754096,.027152459411754096],[.17944647035620653,.17656270536699264,.17656270536699264,.16800410215645004,.16800410215645004,.15404576107681028,.15404576107681028,.13513636846852548,.13513636846852548,.11188384719340397,.11188384719340397,.08503614831717918,.08503614831717918,.0554595293739872,.0554595293739872,.02414830286854793,.02414830286854793],[.1691423829631436,.1691423829631436,.16427648374583273,.16427648374583273,.15468467512626524,.15468467512626524,.14064291467065065,.14064291467065065,.122555206

91571147846,.12255520671147846,.10094204410628717,.10094204410628717,.07642573025488905,.07642573025488905,.0497145488949698,.0497145488949698,.02161601352648331,.02161601352648331],[.1610544498487837,.15896884339395434,.15896884339395434,.15276604206585967,.15276604206585967,.1426067021736066,.1426067021736066,.12875396253933621,.12875396253933621,.11156664554733399,.11156664554733399,.09149002162245,.09149002162245,.06904454273764123,.06904454273764123,.0448142267656996,.0448142267656996,.019461788229726478,.019461788229726478],[.15275338713072584,.15275338713072584,.14917298647260374,.14917298647260374,.14209610931838204,.14209610931838204,.13168863844917664,.13168863844917664,.11819453196151841,.11819453196151841,.10193011981724044,.10193011981724044,.08327674157670475,.08327674157670475,.06267204833410907,.06267204833410907,.04060142980038694,.04060142980038694,.017614007139152118,.017614007139152118],[.14608113364969041,.14452440398997005,.14452440398997005,.13988739479107315,.13988739479107315,.13226893863333747,.13226893863333747,.12183141605372853,.12183141605372853,.10879729916714838,.10879729916714838,.09344442345603386,.09344442345603386,.0761001136283793,.0761001136283793,.057134425426857205,.057134425426857205,.036953789770852494,.036953789770852494,.016017228257774335,.016017228257774335],[.13925187285563198,.13925187285563198,.13654149834601517,.13654149834601517,.13117350478706238,.13117350478706238,.12325237681051242,.12325237681051242,.11293229608053922,.11293229608053922,.10041414444288096,.10041414444288096,.08594160621706773,.08594160621706773,.06979646842452049,.06979646842452049,.052293335152683286,.052293335152683286,.03377490158481415,.03377490158481415,.0146279952982722,.0146279952982722],[.13365457218610619,.1324620394046966,.1324620394046966,.12890572218808216,.12890572218808216,.12304908430672953,.12304908430672953,.11499664022241136,.11499664022241136,.10489209146454141,.10489209146454141,.09291576606003515,.09291576606003515,.07928141177671895,.07928141177671895,.06423242140852585,.06423242140852585,.04803767173108467,.04803767173108467,.030988005856979445,.030988005856979445,.013411859487141771,.013411859487141771],[.12793819534675216,.12793819534675216,.1258374563468283,.1258374563468283,.12167047292780339,.12167047292780339,.1155056680537256,.1155056680537256,.10744427011596563,.10744427011596563,.09761865210411388,.09761865210411388,.08619016153195327,.08619016153195327,.0733464814110803,.0733464814110803,.05929858491543678,.05929858491543678,.04427743881741981,.04427743881741981,.028531388628933663,.028531388628933663,.0123412297999872,.0123412297999872]],l=({sx:e,sy:t,t:n})=>{let a,s=3*(e[1]-e[0]),o=3*(e[2]-e[1]),l=3*(e[3]-e[2]),p=3*(t[1]-t[0]),c=3*(t[2]-t[1]),d=3*(t[3]-t[2]),u=n/2,m=0;for(let e=0;e<20;e++){let t=1-(a=u*r[20][e]+u),n=t*t*s+2*t*a*o+a*a*l,f=t*t*p+2*t*a*c+a*a*d;m+=i[20][e]*Math.sqrt(n*n+f*f)}return u*m},p=(e,t,n)=>{void 0===n&&(n=1);let a=e[0]-2*e[1]+e[2],s=t[0]-2*t[1]+t[2],o=2*e[1]-2*e[0],r=2*t[1]-2*t[0],i=4*(a*a+s*s);if(0===i)return n*Math.sqrt((e[2]-e[0])**2+(t[2]-t[0])**2);let l=4*(a*o+s*r)/(2*i),p=n+l,c=(o*o+r*r)/i-l*l,d=p*p+c>0?Math.sqrt(p*p+c):0,u=l*l+c>0?Math.sqrt(l*l+c):0,m=l+Math.sqrt(l*l+c)===0?0:c*Math.log(Math.abs((p+d)/(l+u)));return Math.sqrt(i)/2*(p*d-l*u+m)},c=({length:e,totalLength:t,func:n})=>{let a=1,s=e/t,o=(e-n(s))/t,r=0;for(;a>.001;){let i=Math.abs(e-n(s+o))/t;if(i<a)a=i,s+=o;else{let r=Math.abs(e-n(s-o))/t;r<a?(a=r,s-=o):o/=2}if(++r>500)break}return s},d=({startX:e,startY:t,cpx:n,cpy:a,x:s,y:o})=>{let r={x:s,y:o},i=p([e,n,r.x,0],[t,a,r.y,0],1);return{getPointAtLength:s=>{let o=[e,n,r.x,0],l=[t,a,r.y,0],d=c({length:s,totalLength:i,func:e=>p(o,l,e)});return{x:(1-d)*(1-d)*o[0]+2*(1-d)*d*o[1]+d*d*o[2],y:(1-d)*(1-d)*l[0]+2*(1-d)*d*l[1]+d*d*l[2]}},getTangentAtLength:s=>{let o=[e,n,r.x,0],l=[t,a,r.y,0],d=c({length:s,totalLength:i,func:e=>p(o,l,e)}),u={x:(1-d)*2*(o[1]-o[0])+2*d*(o[2]-o[1]),y:(1-d)*2*(l[1]-l[0])+2*d*(l[2]-l[1])},m=Math.sqrt(u.x*u.x+u.y*u.y);return m>0?{x:u.x/m,y:u.y/m}:{x:0,y:0}},getTotalLength:()=>i,getC:()=>r,type:"quadratic-bezier",getD:()=>({x:0,y:0})}},u=({startX:e,startY:t,cp1x:n,cp1y:a,cp2x:s,cp2y:o,x:r,y:i})=>{let p={x:s,y:o},d={x:r,y:i},u=l({sx:[e,n,p.x,d.x],sy:[t,a,p.y,d.y],t:1});return{getPointAtLength:s=>{let o=[e,n,p.x,d.x],r=[t,a,p.y,d.y],i=c({length:s,totalLength:u,func:e=>l({sx:o,sy:r,t:e})});return{x:(1-i)*(1-i)*(1-i)*o[0]+3*(1-i)*(1-i)*i*o[1]+3*(1-i)*i*i*o[2]+i*i*i*o[3],y:(1-i)*(1-i)*(1-i)*r[0]+3*(1-i)*(1-i)*i*r[1]+3*(1-i)*i*i*r[2]+i*i*i*r[3]}},getTangentAtLength:s=>{let o,r,i,m,f,h,y,g=[e,n,p.x,d.x],E=[t,a,p.y,d.y],x=c({length:s,totalLength:u,func:e=>l({sx:g,sy:E,t:e})}),b=(o=3*(g[1]-g[0]),r=3*(g[2]-g[1]),i=3*(g[3]-g[2]),m=3*(E[1]-E[0]),f=3*(E[2]-E[1]),h=3*(E[3]-E[2]),{x:(y=1-x)*y*o+2*y*x*r+x*x*i,y:y*y*m+2*y*x*f+x*x*h}),F=Math.sqrt(b.x*b.x+b.y*b.y);return F>0?{x:b.x/F,y:b.y/F}:{x:0,y:0}},getTotalLength:()=>u,getC:()=>p,getD:()=>d,type:"cubic-bezier"}},m=({x0:e,x1:t,y0:n,y1:a})=>({getTotalLength:()=>Math.sqrt((e-t)**2+(n-a)**2),getPointAtLength:s=>{let o=s/Math.sqrt((e-t)**2+(n-a)**2),r=(t-e)*(o=Number.isNaN(o)?1:o),i=(a-n)*o;return{x:e+r,y:n+i}},getTangentAtLength:()=>{let s=Math.sqrt((t-e)*(t-e)+(a-n)*(a-n));return{x:(t-e)/s,y:(a-n)/s}},type:"linear"}),f={a:7,A:7,C:6,c:6,H:1,h:1,L:2,l:2,M:2,m:2,Q:4,q:4,S:4,s:4,T:2,t:2,V:1,v:1,Z:0,z:0},h=(e,t,n)=>((e,t)=>{let n=[],a=f[t];if(e.length%a!=0)throw Error(`Expected number of arguments of SVG instruction "${t} ${e.join(" ")}" to be a multiple of ${a}`);for(let t=0;t<e.length;t+=a)n.push(e.slice(t,t+a));return n})(e,t).map(e=>n(e)),y=/([astvzqmhlc])([^astvzqmhlc]*)/gi,g=/-?[0-9]*\.?[0-9]+(?:e[-+]?\d+)?/gi,E=/[\s,]*([-+]?(?:[0-9]+\.?[0-9]*|\.[0-9]+)(?:e[-+]?\d+)?)/iy,x=/[\s,]*([01])/y,b=(e,t)=>Math.sqrt((t.x-e.x)**2+(t.y-e.y)**2),F=(e,t,n)=>Math.min(Math.max(e,t),n),v=(e,t)=>

915{let n=e.x*t.x+e.y*t.y,a=Math.sqrt((e.x**2+e.y**2)*(t.x**2+t.y**2));return(e.x*t.y-e.y*t.x<0?-1:1)*Math.acos(n/a)},w=({p0:e,rx:t,ry:n,xAxisRotation:a,largeArcFlag:s,sweepFlag:o,p1:r,t:i})=>{t=Math.abs(t),n=Math.abs(n);let l=Math.PI/180*(a=(a%360+360)%360);if(e.x===r.x&&e.y===r.y)return{x:e.x,y:e.y,ellipticalArcAngle:0};if(0===t||0===n)return{x:0,y:0,ellipticalArcAngle:0};let p=(e.x-r.x)/2,c=(e.y-r.y)/2,d={x:Math.cos(l)*p+Math.sin(l)*c,y:-Math.sin(l)*p+Math.cos(l)*c},u=d.x**2/t**2+d.y**2/n**2;u>1&&(t*=Math.sqrt(u),n*=Math.sqrt(u));let m=(t**2*n**2-t**2*d.y**2-n**2*d.x**2)/(t**2*d.y**2+n**2*d.x**2),f=(s===o?-1:1)*Math.sqrt(m=m<0?0:m),h={x:f*(t*d.y/n),y:f*(-(n*d.x)/t)},y={x:Math.cos(l)*h.x-Math.sin(l)*h.y+(e.x+r.x)/2,y:Math.sin(l)*h.x+Math.cos(l)*h.y+(e.y+r.y)/2},g={x:(d.x-h.x)/t,y:(d.y-h.y)/n},E=v({x:1,y:0},g),x=v(g,{x:(-d.x-h.x)/t,y:(-d.y-h.y)/n});!o&&x>0?x-=2*Math.PI:o&&x<0&&(x+=2*Math.PI);let b=E+(x%=2*Math.PI)*i,F=t*Math.cos(b),w=n*Math.sin(b);return{x:Math.cos(l)*F-Math.sin(l)*w+y.x,y:Math.sin(l)*F+Math.cos(l)*w+y.y,ellipticalArcStartAngle:E,ellipticalArcEndAngle:E+x,ellipticalArcAngle:b,ellipticalArcCenter:y,resultantRx:t,resultantRy:n}},U=({x0:e,y0:t,rx:n,ry:a,xAxisRotate:s,LargeArcFlag:o,SweepFlag:r,x1:i,y1:l})=>{let p=((e,t)=>{let n;e=e||500;let a=0,s=[],o=[],r=t(0);for(let i=0;i<e;i++){let l=F(1/e*i,0,1);a+=b(r,n=t(l)),o.push([r,n]),s.push({t:l,arcLength:a}),r=n}return n=t(1),o.push([r,n]),a+=b(r,n),s.push({t:1,arcLength:a}),{arcLength:a,arcLengthMap:s,approximationLines:o}})(300,p=>w({p0:{x:e,y:t},rx:n,ry:a,xAxisRotation:s,largeArcFlag:o,sweepFlag:r,p1:{x:i,y:l},t:p})).arcLength,c=c=>{c<0?c=0:c>p&&(c=p);let d=w({p0:{x:e,y:t},rx:n,ry:a,xAxisRotation:s,largeArcFlag:o,sweepFlag:r,p1:{x:i,y:l},t:c/p});return{x:d.x,y:d.y}};return{getPointAtLength:c,getTangentAtLength:e=>{let t;e<0?e=0:e>p&&(e=p);let n=c(e);e<0?e=0:e>p&&(e=p);let a=(t=e<p-.05?c(e+.05):c(e-.05)).x-n.x,s=t.y-n.y,o=Math.sqrt(a*a+s*s);return e<p-.05?{x:-a/o,y:-s/o}:{x:a/o,y:s/o}},getTotalLength:()=>p,type:"arc"}};class C{constructor(e){this.seed=e}next(){return this.seed?(0x80000000-1&(this.seed=Math.imul(48271,this.seed)))/0x80000000:Math.random()}}function S(e,t,n,a,s){return{type:"path",ops:I(e,t,n,a,s)}}function L(e,t,n){let a=(e||[]).length;if(a>2){let s=[];for(let t=0;t<a-1;t++)s.push(...I(e[t][0],e[t][1],e[t+1][0],e[t+1][1],n));return t&&s.push(...I(e[a-1][0],e[a-1][1],e[0][0],e[0][1],n)),{type:"path",ops:s}}return 2===a?S(e[0][0],e[0][1],e[1][0],e[1][1],n):{type:"path",ops:[]}}function T(e){return e.randomizer||(e.randomizer=new C(e.seed||0)),e.randomizer.next()}function A(e,t,n,a=1){return n.roughness*a*(T(n)*(t-e)+e)}function M(e,t,n=1){return A(-e,e,t,n)}function I(e,t,n,a,s,o=!1){let r=o?s.disableMultiStrokeFill:s.disableMultiStroke,i=R(e,t,n,a,s,!0,!1);if(r)return i;let l=R(e,t,n,a,s,!0,!0);return i.concat(l)}function R(e,t,n,a,s,o,r){let i=Math.pow(e-n,2)+Math.pow(t-a,2),l=Math.sqrt(i),p=1;p=l<200?1:l>500?.4:-.0016668*l+1.233334;let c=s.maxRandomnessOffset||0;c*c*100>i&&(c=l/10);let d=c/2,u=.2+.2*T(s),m=s.bowing*s.maxRandomnessOffset*(a-t)/200,f=s.bowing*s.maxRandomnessOffset*(e-n)/200;m=M(m,s,p),f=M(f,s,p);let h=[],y=s.preserveVertices;return o&&(r?h.push({op:"move",data:[e+(y?0:M(d,s,p)),t+(y?0:M(d,s,p))]}):h.push({op:"move",data:[e+(y?0:M(c,s,p)),t+(y?0:M(c,s,p))]})),r?h.push({op:"bcurveTo",data:[m+e+(n-e)*u+M(d,s,p),f+t+(a-t)*u+M(d,s,p),m+e+2*(n-e)*u+M(d,s,p),f+t+2*(a-t)*u+M(d,s,p),n+(y?0:M(d,s,p)),a+(y?0:M(d,s,p))]}):h.push({op:"bcurveTo",data:[m+e+(n-e)*u+M(c,s,p),f+t+(a-t)*u+M(c,s,p),m+e+2*(n-e)*u+M(c,s,p),f+t+2*(a-t)*u+M(c,s,p),n+(y?0:M(c,s,p)),a+(y?0:M(c,s,p))]}),h}function k(e,t,n){let a=e.length,s=[];if(a>3){let o=[],r=1-n.curveTightness;s.push({op:"move",data:[e[1][0],e[1][1]]});for(let t=1;t+2<a;t++){let n=e[t];o[0]=[n[0],n[1]],o[1]=[n[0]+(r*e[t+1][0]-r*e[t-1][0])/6,n[1]+(r*e[t+1][1]-r*e[t-1][1])/6],o[2]=[e[t+1][0]+(r*e[t][0]-r*e[t+2][0])/6,e[t+1][1]+(r*e[t][1]-r*e[t+2][1])/6],o[3]=[e[t+1][0],e[t+1][1]],s.push({op:"bcurveTo",data:[o[1][0],o[1][1],o[2][0],o[2][1],o[3][0],o[3][1]]})}if(t&&2===t.length){let e=n.maxRandomnessOffset;s.push({op:"lineTo",data:[t[0]+M(e,n),t[1]+M(e,n)]})}}else 3===a?(s.push({op:"move",data:[e[1][0],e[1][1]]}),s.push({op:"bcurveTo",data:[e[1][0],e[1][1],e[2][0],e[2][1],e[2][0],e[2][1]]})):2===a&&s.push(...R(e[0][0],e[0][1],e[1][0],e[1][1],n,!0,!0));return s}function P(e,t,n,a,s,o,r,i){let l=0===i.roughness,p=[],c=[];if(l){e/=4,c.push([t+a*Math.cos(-e),n+s*Math.sin(-e)]);for(let o=0;o<=2*Math.PI;o+=e){let e=[t+a*Math.cos(o),n+s*Math.sin(o)];p.push(e),c.push(e)}c.push([t+ +a,n+0*s]),c.push([t+a*Math.cos(e),n+s*Math.sin(e)])}else{let l=M(.5,i)-Math.PI/2;c.push([M(o,i)+t+.9*a*Math.cos(l-e),M(o,i)+n+.9*s*Math.sin(l-e)]);let d=2*Math.PI+l-.01;for(let r=l;r<d;r+=e){let e=[M(o,i)+t+a*Math.cos(r),M(o,i)+n+s*Math.sin(r)];p.push(e),c.push(e)}c.push([M(o,i)+t+a*Math.cos(l+2*Math.PI+.5*r),M(o,i)+n+s*Math.sin(l+2*Math.PI+.5*r)]),c.push([M(o,i)+t+.98*a*Math.cos(l+r),M(o,i)+n+.98*s*Math.sin(l+r)]),c.push([M(o,i)+t+.9*a*Math.cos(l+.5*r),M(o,i)+n+.9*s*Math.sin(l+.5*r)]

915)}return[c,p]}var B=(e,t,n)=>({maxRandomnessOffset:5,roughness:"highlight"===e?3:1.5,bowing:1,stroke:"#000",strokeWidth:1.5,curveTightness:0,curveFitting:.95,curveStepCount:9,fillStyle:"hachure",fillWeight:-1,hachureAngle:-41,hachureGap:-1,dashOffset:-1,dashGap:-1,zigzagOffset:-1,disableMultiStroke:"double"!==e,disableMultiStrokeFill:!1,fillShapeRoughnessGain:1.5,preserveVertices:!1,...n,seed:t}),D={bottom:0,left:0,right:0,top:0},j=e=>({...D,...e}),N=(e,t)=>{if(void 0===e)return t;if(!Number.isInteger(e)||e<1)throw TypeError("iterations must be an integer of at least 1");return e},H=({color:e,strokeWidth:t,defaultStrokeWidth:n})=>({color:e??"currentColor",strokeWidth:t??n}),$={color:{type:"color",default:"currentColor",description:"Color"}},_=e=>({strokeWidth:{type:"number",min:0,step:1,default:e,description:"Stroke Width",hiddenFromList:!1}}),W=e=>({iterations:{type:"number",min:1,step:1,integer:!0,default:e,description:"Iterations",hiddenFromList:!1}}),z={rtl:{type:"boolean",default:!1,description:"Right-to-left"}},O={"padding.left":{type:"number",step:1,default:0,description:"Left Padding",hiddenFromList:!1},"padding.right":{type:"number",step:1,default:0,description:"Right Padding",hiddenFromList:!1},"padding.top":{type:"number",step:1,default:0,description:"Top Padding",hiddenFromList:!1},"padding.bottom":{type:"number",step:1,default:0,description:"Bottom Padding",hiddenFromList:!1}},G={"padding.top":O["padding.top"]},X={children:{type:"text-content",default:"",description:"Text",keyframable:!1}},K=e=>({...s.HG.baseSchema,...s.HG.premountSchema,progress:{type:"number",min:0,max:1,step:.01,default:1,description:"Progress",hiddenFromList:!1},disabled:{type:"boolean",default:!1,description:"Disabled"},seed:{type:"number",step:1,default:1,description:"Seed",hiddenFromList:!1},roughness:{type:"number",min:0,step:.1,default:e,description:"Roughness",hiddenFromList:!1},maxRandomnessOffset:{type:"number",min:0,step:.1,default:5,description:"Max Randomness Offset",hiddenFromList:!1},bowing:{type:"number",min:0,step:.1,default:1,description:"Bowing",hiddenFromList:!1},disableMultiStroke:{type:"boolean",default:!1,description:"Disable Multi Stroke"},preserveVertices:{type:"boolean",default:!1,description:"Preserve Vertices"},...$,...s.HG.textSchema,...X,...s.HG.backgroundSchema,...s.HG.borderSchema,...s.HG.borderRadiusSchema}),q={...K(3),...W(2),...z,...O},J={...K(1.5),..._(20),...W(2),...z,...G},V={...K(1.5),..._(20),...W(1),...z},Y={...K(1.5),..._(20),...W(1),...z},Q={...K(1.5),..._(7),...W(2),...O},Z={...K(1.5),..._(20),...O,bracketLeft:{type:"boolean",default:!1,description:"Left Bracket"},bracketRight:{type:"boolean",default:!0,description:"Right Bracket"},bracketTop:{type:"boolean",default:!1,description:"Top Bracket"},bracketBottom:{type:"boolean",default:!1,description:"Bottom Bracket"}},ee={...K(1.5),..._(20),...W(2),...O,curveFitting:{type:"number",min:0,step:.01,default:.95,description:"Curve Fitting",hiddenFromList:!1},curveTightness:{type:"number",step:.1,default:0,description:"Curve Tightness",hiddenFromList:!1},curveStepCount:{type:"number",min:1,step:1,integer:!0,default:9,description:"Curve Step Count",hiddenFromList:!1},box:{type:"enum",default:"around",description:"Box",keyframable:!1,variants:{inside:{},around:{}}}},et=({type:e,componentName:t,documentationSlug:n,layer:r,schema:i})=>{let l=s.HG.withSchema({Component:({children:i,durationInFrames:l,from:p,premountFor:c,postmountFor:b,styleWhilePremounted:F,styleWhilePostmounted:v,trimBefore:w,playbackRate:C,loop:T,freeze:I,hidden:R,name:D,showInTimeline:$,controls:_,style:W,progress:z,seed:O,disabled:G,roughness:X,maxRandomnessOffset:K,bowing:q,curveFitting:J,curveTightness:V,curveStepCount:Y,disableMultiStroke:Q,preserveVertices:Z,...ee})=>{let et=(0,a.useMemo)(()=>{let e,t;return e=(0,a.createRef)(),t=(0,a.createRef)(),{Container:e=>e.children,Tracker:({children:t,style:n})=>(0,o.jsx)("span",{ref:e,style:{...n,display:"inline-block",position:"relative",whiteSpace:"pre"},children:t}),Annotation:({roughness:n,maxRandomnessOffset:r,bowing:i,curveFitting:l,curveTightness:p,curveStepCount:c,disableMultiStroke:b,preserveVertices:F,seed:v,progress:w,...C})=>{let T=(0,s.UC)(),I=JSON.stringify((e=>{if("none"===e.type)return e;if("underline"===e.type)return{type:"underline",...H({...e,defaultStrokeWidth:20}),padding:j(e.padding),iterations:N(e.iterations,2),rtl:e.rtl??!1};if("strike-through"===e.type)return{type:"strike-through",...H({...e,defaultStrokeWidth:20}),iterations:N(e.iterations,1),rtl:e.rtl??!1};if("box"===e.type)return{type:"box",...H({...e,defaultStrokeWidth:7}),padding:j(e.padding),iterations:N(e.iterations,2)};if("bracket"===e.type)return{type:"bracket",...H({...e,defaultStrokeWidth:20}),padding:j(e.padding),bracketLeft:e.bracketLeft??!1,bracketRight:e.bracketRight??!0,bracketTop:e.bracketTop??!1,bracketBottom:e.bracketBottom??!1};if("crossed-off"===e.type)return{type:"crossed-off",...H({...e,defaultStrokeWidth:20}),iterations:N(e.iterations,1),rtl:e.rtl??!1};if("circle"===e.type)return{type:"circle",...H({...e,defaultStrokeWidth:20}),padding:j(e.padding),iterations:N(e.iterations,2),box:e.box??"around"};if("highlight"===e.type)return{type:"highlight",color:e.color??"currentColor",padding:j(e.padding),iterations:N(e.iterations,2),rtl:e.rtl??!1};throw TypeError(`Unsupported annotation type: ${String(e.type)}`)})(C)),R=(0,a.useMemo)(()=>JSON.parse(I),[I]),D=(0,a.useMemo)(()=>Object.fromEntries(Object.entries({roughness:n,maxRandomnessOffset:r,bowing:i,curveFitting:l,curveTightness:p,curveStepCount:c,disableMultiStroke:b,preserveVertices:F}).filter(([,e])=>void 0!==e)),[i,l,c,p,b,r,F,n]),[$]=(0,a.useState)(()=>(0,s.IH)()),_=(e=>{let[t,n]=(0,a.useState)(()=>

915{if(!e.current)return null;let t=e.current.getClientRects();return t[0]?{width:t[0].width,height:t[0].height,left:t[0].x,top:t[0].y}:null}),s=(0,a.useMemo)(()=>"u"<typeof ResizeObserver?null:new ResizeObserver(e=>{let{target:t}=e[0],a=t.getClientRects();if(!a?.[0])return void n(null);let{width:s,height:o}=a[0];n({width:s,height:o,left:a[0].x,top:a[0].y})}),[]),o=(0,a.useCallback)(()=>{if(!e.current)return;let t=e.current.getClientRects();t[0]?n(e=>e&&e.width===t[0].width&&e.height===t[0].height&&e.left===t[0].x&&e.top===t[0].y?e:{width:t[0].width,height:t[0].height,left:t[0].x,top:t[0].y}):n(null)},[e]);return(0,a.useEffect)(()=>{if(!s)return;let{current:t}=e;return t&&s.observe(t),()=>{t&&s.unobserve(t)}},[s,e,o]),(0,a.useMemo)(()=>t?{...t,refresh:o}:null,[t,o])})(e);(0,a.useEffect)(()=>{null!==_&&(0,s._8)($)},[$,_]);let[W,z]=(0,a.useState)([]);return(0,a.useLayoutEffect)(()=>{e.current&&t.current?z((({seed:e,element:t,config:n,progress:a,options:s})=>{let r={x:t.offsetLeft,y:t.offsetTop,w:t.offsetWidth,h:t.offsetHeight};return 0===r.w||0===r.h?[]:(({rect:e,config:t,seed:n,progress:a,options:s})=>{var r;let i;if("none"===t.type)return[];let{opList:l,strokeWidth:p}=function({rect:e,config:t,seed:n,options:a}){if("none"===t.type)return{opList:[],strokeWidth:0};if("underline"===t.type){let s=B("single",n,a),{iterations:o}=t,r=+!!t.rtl,i=[],l=e.y+e.h+t.padding.top;for(let t=r;t<o+r;t++)t%2?i.push(S(e.x+e.w,l,e.x,l,s)):i.push(S(e.x,l,e.x+e.w,l,s));return{opList:i,strokeWidth:t.strokeWidth}}if("strike-through"===t.type){let s=B("single",n,a),{iterations:o}=t,r=+!!t.rtl,i=[],l=e.y+e.h/2;for(let t=r;t<o+r;t++)t%2?i.push(S(e.x+e.w,l,e.x,l,s)):i.push(S(e.x,l,e.x+e.w,l,s));return{opList:i,strokeWidth:t.strokeWidth}}if("box"===t.type){let l=B("single",n,a),{iterations:p}=t,c=[],d=e.x-t.padding.left,u=e.y-t.padding.top,m=e.w+(t.padding.left+t.padding.right),f=e.h+(t.padding.top+t.padding.bottom);for(let e=0;e<p;e++){var s,o,r,i;c.push(L([[s=d,o=u],[s+(r=m),o],[s+r,o+(i=f)],[s,o+i]],!0,l))}return{opList:c,strokeWidth:t.strokeWidth}}if("bracket"===t.type){let s=B("single",n,a),o=[],r=e.x-t.padding.left,i=e.x+e.w+t.padding.right,l=e.y-t.padding.top,p=e.y+e.h+t.padding.bottom;for(let e of[{enabled:t.bracketBottom,points:[[r,p],[i,p]]},{enabled:t.bracketTop,points:[[r,l],[i,l]]},{enabled:t.bracketLeft,points:[[r,l],[r,p]]},{enabled:t.bracketRight,points:[[i,l],[i,p]]}])e.enabled&&o.push(L(e.points,!1,s));return{opList:o,strokeWidth:t.strokeWidth}}if("crossed-off"===t.type){let s=B("single",n,a),{iterations:o}=t,r=+!!t.rtl,i=[],{x:l}=e,{y:p}=e,c=l+e.w,d=p+e.h;for(let e=r;e<o+r;e++)e%2?i.push(S(c,d,l,p,s)):i.push(S(l,p,c,d,s));for(let e=r;e<o+r;e++)e%2?i.push(S(l,d,c,p,s)):i.push(S(c,p,l,d,s));return{opList:i,strokeWidth:t.strokeWidth}}if("circle"===t.type){let{iterations:s}=t,o=[],{width:r,height:i,x:l,y:p}=((e,t)=>{if("circle"!==t.type)throw Error("Not a circle");if("inside"===t.box){let n=e.w+(t.padding.left+t.padding.right),a=e.h+(t.padding.top+t.padding.bottom),s=e.x-t.padding.left+n/2,o=e.y-t.padding.top+a/2;return{width:n,height:a,x:s,y:o}}let n=e.x+e.w/2-t.padding.left/2+t.padding.right/2,a=e.y+e.h/2-t.padding.top/2+t.padding.bottom/2;return{width:(e.w+t.padding.left+t.padding.right)/Math.sqrt(2)*2,height:(e.h+t.padding.top+t.padding.bottom)/Math.sqrt(2)*2,x:n,y:a}})(e,t);for(let e=0;e<s;e++){let t=B("single",n+e,a);o.push(function(e,t,n,a,s){let o=function(e,t,n){let a=Math.sqrt(2*Math.PI*Math.sqrt((Math.pow(e/2,2)+Math.pow(t/2,2))/2)),s=2*Math.PI/Math.ceil(Math.max(n.curveStepCount,n.curveStepCount/Math.sqrt(200)*a)),o=Math.abs(e/2),r=Math.abs(t/2),i=1-n.curveFitting;return o+=M(o*i,n),r+=M(r*i,n),{increment:s,rx:o,ry:r}}(n,a,s);return function(e,t,n,a){let[s,o]=P(a.increment,e,t,a.rx,a.ry,1,a.increment*A(.1,A(.4,1,n),n),n),r=k(s,null,n);if(!n.disableMultiStroke&&0!==n.roughness){let[s]=P(a.increment,e,t,a.rx,a.ry,1.5,0,n),o=k(s,null,n);r=r.concat(o)}return{estimatedPoints:o,opset:{type:"path",ops:r}}}(e,t,s,o).opset}(l,p,r,i,t))}return{opList:o,strokeWidth:t.strokeWidth}}if("highlight"===t.type){let{iterations:s}=t,o=+!!t.rtl,r=[],i=e.y+e.h/2+(t.padding.bottom-t.padding.top)/2;for(let l=o;l<s+o;l++){let s=B("highlight",n+l,a);l%2?r.push(S(e.x+e.w+t.padding.right,i,e.x-t.padding.left,i,s)):r.push(S(e.x-t.padding.left,i,e.x+e.w+t.padding.right,i,s))}return{opList:r,strokeWidth:e.h+t.padding.top+t.padding.bottom}}throw Error(`Unrecognized annotation type: ${t}`)}({config:t,rect:e,seed:n,options:s}),c=(r=(e=>{let t=[];for(let n of e){let e="";for(let a of n.ops){let{data:n}=a;

915"move"===a.op?(e.trim()&&t.push(e.trim()),e=`M${n[0]} ${n[1]} `):"bcurveTo"===a.op?e+=`C${n[0]} ${n[1]}, ${n[2]} ${n[3]}, ${n[4]} ${n[5]} `:"lineTo"===a.op&&(e+=`L${n[0]} ${n[1]} `)}e.trim()&&t.push(e.trim())}return t})(l),i=new Map,r.map(e=>{let t=i.get(e)??0;return i.set(e,t+1),{d:e,key:`${e}-${t}`}}));return c.map(({d:e,key:n},s)=>{let{strokeDasharray:r,strokeDashoffset:i}=((e,t)=>{let n=(e=>{let t,n=0,a=[],s=[],o=null,r=[0,0],i=[0,0],l=[0,0],p=[];for(let c=0;c<e.length;c++){let f=e[c];if("m"!==f.type&&"M"!==f.type&&p.length>0&&p[p.length-1].push(f),"M"===f.type&&(l=[(r=[f.x,f.y])[0],r[1]],p.push([f]),s.push(null),0===c&&(o={x:f.x,y:f.y})),"m"===f.type&&(l=[(r=[f.dx+r[0],f.dy+r[1]])[0],r[1]],p.push([{type:"M",x:r[0],y:r[1]}]),s.push(null)),"L"===f.type&&(n+=Math.sqrt((r[0]-f.x)**2+(r[1]-f.y)**2),s.push(m({x0:r[0],x1:f.x,y0:r[1],y1:f.y})),r=[f.x,f.y]),"l"===f.type&&(n+=Math.sqrt(f.dx**2+f.dy**2),s.push(m({x0:r[0],x1:f.dx+r[0],y0:r[1],y1:f.dy+r[1]})),r=[f.dx+r[0],f.dy+r[1]]),"H"===f.type&&(n+=Math.abs(r[0]-f.x),s.push(m({x0:r[0],x1:f.x,y0:r[1],y1:r[1]})),r[0]=f.x),"h"===f.type?(n+=Math.abs(f.dx),s.push(m({x0:r[0],x1:r[0]+f.dx,y0:r[1],y1:r[1]})),r[0]=f.dx+r[0]):"V"===f.type&&(n+=Math.abs(r[1]-f.y),s.push(m({x0:r[0],x1:r[0],y0:r[1],y1:f.y})),r[1]=f.y),"v"===f.type?(n+=Math.abs(f.dy),s.push(m({x0:r[0],x1:r[0],y0:r[1],y1:r[1]+f.dy})),r[1]=f.dy+r[1]):"Z"===f.type&&(n+=Math.sqrt((l[0]-r[0])**2+(l[1]-r[1])**2),s.push(m({x0:r[0],x1:l[0],y0:r[1],y1:l[1]})),r=[l[0],l[1]]),"C"===f.type?(n+=(t=u({startX:r[0],startY:r[1],cp1x:f.cp1x,cp1y:f.cp1y,cp2x:f.cp2x,cp2y:f.cp2y,x:f.x,y:f.y})).getTotalLength(),r=[f.x,f.y],s.push(t)):"c"===f.type&&((t=u({startX:r[0],startY:r[1],cp1x:r[0]+f.cp1dx,cp1y:r[1]+f.cp1dy,cp2x:r[0]+f.cp2dx,cp2y:r[1]+f.cp2dy,x:r[0]+f.dx,y:r[1]+f.dy})).getTotalLength()>0?(n+=t.getTotalLength(),s.push(t),r=[f.dx+r[0],f.dy+r[1]]):s.push(m({x0:r[0],x1:r[0],y0:r[1],y1:r[1]}))),"S"===f.type){let a=e[c-1],o="C"===a.type||"c"===a.type||"S"===a.type||"s"===a.type;if(c>0&&o){if(t){let e=t.getC();t=u({startX:r[0],startY:r[1],cp1x:2*r[0]-e.x,cp1y:2*r[1]-e.y,cp2x:f.cpx,cp2y:f.cpy,x:f.x,y:f.y})}}else t=u({startX:r[0],startY:r[1],cp1x:r[0],cp1y:r[1],cp2x:f.cpx,cp2y:f.cpy,x:f.x,y:f.y});t&&(n+=t.getTotalLength(),r=[f.x,f.y],s.push(t))}if("s"===f.type){let a=e[c-1],o="C"===a.type||"c"===a.type||"S"===a.type||"s"===a.type;if(c>0&&o){if(t){let e=t.getC(),n=t.getD();t=u({startX:r[0],startY:r[1],cp1x:r[0]+n.x-e.x,cp1y:r[1]+n.y-e.y,cp2x:r[0]+f.cpdx,cp2y:r[1]+f.cpdy,x:r[0]+f.dx,y:r[1]+f.dy})}}else t=u({startX:r[0],startY:r[1],cp1x:r[0],cp1y:r[1],cp2x:r[0]+f.cpdx,cp2y:r[1]+f.cpdy,x:r[0]+f.dx,y:r[1]+f.dy});t&&(n+=t.getTotalLength(),r=[f.dx+r[0],f.dy+r[1]],s.push(t))}if("Q"===f.type){if(r[0]===f.cpx&&r[1]===f.cpy){let e=m({x0:f.cpx,x1:f.x,y0:f.cpy,y1:f.y});n+=e.getTotalLength(),s.push(e)}else n+=(t=d({startX:r[0],startY:r[1],cpx:f.cpx,cpy:f.cpy,x:f.x,y:f.y})).getTotalLength(),s.push(t);r=[f.x,f.y],i=[f.cpx,f.cpy]}if("q"===f.type){if(0===f.cpdx&&0===f.cpdy){let e=m({x0:r[0]+f.cpdx,x1:r[0]+f.cpdy,y0:r[1]+f.dx,y1:r[1]+f.dy});n+=e.getTotalLength(),s.push(e)}else n+=(t=d({startX:r[0],startY:r[1],cpx:r[0]+f.cpdx,cpy:r[1]+f.cpdy,x:r[0]+f.dx,y:r[1]+f.dy})).getTotalLength(),s.push(t);i=[r[0]+f.cpdx,r[1]+f.cpdy],r=[f.dx+r[0],f.dy+r[1]]}if("T"===f.type){let a=e[c-1],o="Q"===a.type||"q"===a.type||"T"===a.type||"t"===a.type;if(c>0&&o)t=d({startX:r[0],startY:r[1],cpx:2*r[0]-i[0],cpy:2*r[1]-i[1],x:f.x,y:f.y}),s.push(t),n+=t.getTotalLength();else{let e=m({x0:r[0],x1:f.x,y0:r[1],y1:f.y});s.push(e),n+=e.getTotalLength()}i=[2*r[0]-i[0],2*r[1]-i[1]],r=[f.x,f.y]}if("t"===f.type){let a=e[c-1],o="Q"===a.type||"q"===a.type||"T"===a.type||"t"===a.type;if(c>0&&o)n+=(t=d({startX:r[0],startY:r[1],cpx:2*r[0]-i[0],cpy:2*r[1]-i[1],x:r[0]+f.dx,y:r[1]+f.dy})).getTotalLength(),s.push(t);else{let e=m({x0:r[0],x1:r[0]+f.dx,y0:r[1],y1:r[1]+f.dy});n+=e.getTotalLength(),s.push(e)}i=[2*r[0]-i[0],2*r[1]-i[1]],r=[f.dx+r[0],f.dy+r[1]]}if("A"===f.type){let e=U({x0:r[0],y0:r[1],rx:f.rx,ry:f.ry,xAxisRotate:f.xAxisRotation,LargeArcFlag:f.largeArcFlag,SweepFlag:f.sweepFlag,x1:f.x,y1:f.y});n+=e.getTotalLength(),r=[f.x,f.y],s.push(e)}if("a"===f.type){let e=U({x0:r[0],y0:r[1],rx:f.rx,ry:f.ry,xAxisRotate:f.xAxisRotation,LargeArcFlag:f.largeArcFlag,SweepFlag:f.sweepFlag,x1:r[0]+f.dx,y1:r[1]+f.dy});n+=e.getTotalLength(),r=[r[0]+f.dx,r[1]+f.dy],s.push(e)}a.push(n)}return{segments:p,initialPoint:o,totalLength:n,partialLengths:a,functions:s}})((e=>{if(!e)throw Error("No path provided");let t=e.match(y);if(!t)throw Error(`No path elements found in string ${e}`);return t.map(e=>{let t=e.charAt(0),n=((e,t)=>{let n;if("A"===t||"a"===t){let a;n=[];let s=0;do{let t=n.length%7==3||n.length%7==4?x:E;t.lastIndex=s,(a=t.exec(e))&&(n.push(a[1]),s=t.lastIndex)}while(a)let o=e.slice(s);if(!/^[\s,]*$/.test(o))throw Error(`Malformed path data: ${t}

915 has an invalid value at "${o.trim()}"`)}else n=e.match(g);if(!n||0===n.length){if("Z"===t||"z"===t)return[];throw Error(`Malformed path data: ${t} was expected to have numbers afterwards`)}let a=f[t];if(n.length%a!=0)throw Error(`Malformed path data: ${t} was expected to have a multiple of ${a} numbers, but got "${t} ${n.join(" ")} instead"`);return n.map(Number)})(e.substring(1),t);if("M"===t&&n.length>2){let e=[];return e.push({type:t,x:n[0],y:n[1]}),e.push(...h(n.slice(2),"L",e=>({type:"L",x:e[0],y:e[1]}))),e}if("m"===t&&n.length>2){let e=[];return e.push({type:t,dx:n[0],dy:n[1]}),e.push(...h(n.slice(2),"l",e=>({type:"l",dx:e[0],dy:e[1]}))),e}if("Z"===t||"z"===t)return[{type:"Z"}];if("A"===t)return h(n,t,e=>({type:t,rx:e[0],ry:e[1],xAxisRotation:e[2],largeArcFlag:1===e[3],sweepFlag:1===e[4],x:e[5],y:e[6]}));if("a"===t)return h(n,t,e=>({type:t,rx:e[0],ry:e[1],xAxisRotation:e[2],largeArcFlag:1===e[3],sweepFlag:1===e[4],dx:e[5],dy:e[6]}));if("C"===t)return h(n,t,e=>({type:t,cp1x:e[0],cp1y:e[1],cp2x:e[2],cp2y:e[3],x:e[4],y:e[5]}));if("c"===t)return h(n,t,e=>({type:t,cp1dx:e[0],cp1dy:e[1],cp2dx:e[2],cp2dy:e[3],dx:e[4],dy:e[5]}));if("S"===t)return h(n,t,e=>({type:t,cpx:e[0],cpy:e[1],x:e[2],y:e[3]}));if("s"===t)return h(n,t,e=>({type:t,cpdx:e[0],cpdy:e[1],dx:e[2],dy:e[3]}));if("H"===t)return h(n,t,e=>({type:t,x:e[0]}));if("h"===t)return h(n,t,e=>({type:t,dx:e[0]}));if("V"===t)return h(n,t,e=>({type:t,y:e[0]}));if("v"===t)return h(n,t,e=>({type:t,dy:e[0]}));if("L"===t||"M"===t)return h(n,t,e=>({type:t,x:e[0],y:e[1]}));if("m"===t||"l"===t)return h(n,t,e=>({type:t,dx:e[0],dy:e[1]}));if("Q"===t)return h(n,t,e=>({type:t,cpx:e[0],cpy:e[1],x:e[2],y:e[3]}));if("q"===t)return h(n,t,e=>({type:t,cpdx:e[0],cpdy:e[1],dx:e[2],dy:e[3]}));if("T"===t)return h(n,t,e=>({type:t,x:e[0],y:e[1]}));if("t"===t)return h(n,t,e=>({type:t,dx:e[0],dy:e[1]}));throw Error(`Invalid path element ${e}`)},[]).flat(1)})(t)).totalLength;if(0===e){let e=1.5*n;return{strokeDasharray:`${e} ${e}`,strokeDashoffset:e}}return{strokeDasharray:`${n} ${n}`,strokeDashoffset:n-e*n}})(Math.max(0,Math.min(s===c.length-1?1/0:1,a*c.length-s)),e);return(0,o.jsx)("path",{d:e,fill:"none",stroke:t.color,strokeWidth:p,strokeDasharray:r,strokeDashoffset:i},n)})})({config:n,seed:e,rect:r,progress:a,options:s})})({config:R,element:e.current,seed:v??1,progress:w,options:D})):z([])},[T,R,w,D,v,_]),(0,o.jsx)("svg",{ref:t,style:{position:"absolute",top:0,left:0,overflow:"visible",width:100,height:100},children:W})}}},[]),en=G?{type:"none"}:{...ee,type:e},ea=(0,o.jsx)(et.Annotation,{...en,progress:z,seed:O,roughness:X,maxRandomnessOffset:K,bowing:q,curveFitting:J,curveTightness:V,curveStepCount:Y,disableMultiStroke:Q,preserveVertices:Z}),{effectivePremountFor:es,effectivePostmountFor:eo,freezeFrame:er,isPremountingOrPostmounting:ei,premountingActive:el,postmountingActive:ep,premountingStyle:ec}=s.Xp.usePremounting({from:p??0,durationInFrames:s.Xp.resolveSequenceDuration({durationInFrames:l,playbackRate:C,loop:T}),premountFor:c??null,postmountFor:b??null,style:null,styleWhilePremounted:F??null,styleWhilePostmounted:v??null,hideWhilePremounted:"opacity"});return(0,o.jsx)(s.Kl,{frame:er,active:ei,children:(0,o.jsx)(s.gd,{layout:"none",from:p??0,trimBefore:w,playbackRate:C,loop:T,durationInFrames:l??1/0,freeze:I,hidden:R,name:D??`<${t}>`,showInTimeline:$??!0,controls:_,_remotionInternalDocumentationLink:`https://www.remotion.dev/docs/rough-notation/${n}`,_remotionInternalPremountDisplay:es||null,_remotionInternalPostmountDisplay:eo||null,_remotionInternalIsPremounting:el,_remotionInternalIsPostmounting:ep,children:(0,o.jsx)("span",{style:{display:"inline-block",position:"relative",...ec},children:(0,o.jsxs)(et.Container,{children:["behind"===r?ea:null,(0,o.jsx)(et.Tracker,{style:W,children:i}),"on-top"===r?ea:null]})})})})},componentName:`<${t}>`,componentIdentity:s.HG._internalMakeRemotionComponentIdentity({packageName:"@remotion/rough-notation",componentName:t}),schema:i,supportsEffects:!1});return l.displayName=t,l},en=et({type:"highlight",componentName:"Highlight",documentationSlug:"highlight",layer:"behind",schema:q}),ea=et({type:"underline",componentName:"Underline",documentationSlug:"underline",layer:"on-top",schema:J}),es=et({type:"strike-through",componentName:"StrikeThrough",documentationSlug:"strike-through",layer:"on-top",schema:V}),eo=et({type:"crossed-off",componentName:"CrossedOff",documentationSlug:"crossed-off",layer:"on-top",schema:Y}),er=et({type:"box",componentName:"Box",documentationSlug:"box",layer:"on-top",schema:Q}),ei=et({type:"bracket",componentName:"Bracket",documentationSlug:"bracket",layer:"on-top",schema:Z}),el=et({type:"circle",componentName:"Circle",documentationSlug:"circle",layer:"on-top",schema:ee})},73260(e,t,n){"use strict";n.d(t,{S:()=>o});var a=n(75145),s=(e,t,n)=>Math.min(Math.max(e,t),n),o=({textMeasurements:e,textAlign:t,horizontalPadding:n,borderRadius:o})=>{let r=[],i=0;for(let t of e)i=Math.max(i,t.width+2*n);let l=0;for(let a=0;a<e.length;a++){let p=e[a-1],c=e[a],d=e[a+1],u=0;"center"===t?u=(i-(c.width+2*n))/2:"right"===t&&(u=i-(c.width+2*n));let m=s(o,0,c.height/2);0===a&&r.push({type:"M",x:u+m,y:l});let f=s(p?"right"===t?0:"left"===t?(p.width-c.width)/2:(p.width-c.width)/4:-1/0,-m,m);0!==f?(r.push({type:"L",x:u+c.width+2*n+f,y:l}),r.push({type:"A",rx:Math.abs(f),ry:Math.abs(f),xAxisRotation:0,largeArcFlag:!1,sweepFlag:f<0,x:u+c.width+2*n,y:l+Math.abs(f)})):r.push({type:"L",x:u+c.width+2*n,y:l});let h=s(d?"right"===t?0:"left"===t?(d.width-c.width)/2:(d.width-c.width)/4:-1/0,-m,m);0!==h?(r.push({type:"L",x:u+c.width+2*n,y:l+c.height-Math.abs(h)}),r.push({type:"A",rx:Math.abs(h),ry:Math.abs(h),xAxisRotation:0,largeArcFlag:!1,sweepFlag:h<0,x:u+c.width+2*n+h,y:l+c.height})):r.push({type:"L",x:u+c.width+2*n,y:l+c.height}),l+=c.height}for(let a=e.length-1;a>=0;a--){let p=e[a],c=e[a+1],d=e[a-1],u=0;"center"===t?u=(i-(p.width+2*n))/2:"right"===t&&(u=i-(p.width+2*n));let m=c?c.width-p.width:-1/0,f=s(o,0,p.height/2),h=s(c?"left"===t?0:"right"===t?m/2:m/4:-1/0,-f,f);

9150!==h?(r.push({type:"L",x:u-h,y:l}),r.push({type:"A",rx:Math.abs(h),ry:Math.abs(h),xAxisRotation:0,largeArcFlag:!1,sweepFlag:h<0,x:u,y:l-Math.abs(h)})):r.push({type:"L",x:u,y:l});let y=d?d.width-p.width:-1/0,g=s(d?"left"===t?0:"right"===t?y/2:y/4:-1/0,-f,f);0!==g?(r.push({type:"L",x:u,y:l-p.height+Math.abs(g)}),r.push({type:"A",rx:Math.abs(g),ry:Math.abs(g),xAxisRotation:0,largeArcFlag:!1,sweepFlag:g<0,x:u-g,y:l-p.height})):r.push({type:"L",x:u,y:l-p.height}),l-=p.height}r.push({type:"Z"});let p=(0,a.ar)(r),c=a.S6.getBoundingBoxFromInstructions(p);return{d:(0,a.Yf)(p),boundingBox:c,instructions:p}}},83433(e,t,n){"use strict";n.d(t,{B1:()=>j,E9:()=>B,FE:()=>ea,Fq:()=>_,LM:()=>R,OP:()=>ee,Pp:()=>P,Pq:()=>T,RB:()=>W,TK:()=>A,Ts:()=>es,Wo:()=>Q,i3:()=>E,ic:()=>p,jl:()=>I,jp:()=>G,lM:()=>er,nE:()=>H,rw:()=>K,tS:()=>O,vD:()=>S,vM:()=>et});var a=n(39372),s=n(75145),o=n(67781),r=n(55684),i=n(57825),l=(e,t)=>{let n=t[0]-e[0],a=t[1]-e[1],s=Math.sqrt(n*n+a*a);return 0===s?[0,0]:[n/s,a/s]},p=({length:e=300,headWidth:t=185,headLength:n=120,shaftWidth:a=80,direction:o="right",cornerRadius:r=0})=>{let i,p,c;if(e<=0||t<=0||n<=0||a<=0)throw Error('All dimension parameters ("length", "headWidth", "headLength", "shaftWidth") must be positive numbers');if(t<a)throw Error(`"headWidth" must be greater than or equal to "shaftWidth", got headWidth=${t} and shaftWidth=${a}`);if(n>e)throw Error(`"headLength" must be less than or equal to "length", got headLength=${n} and length=${e}`);let d=(t-a)/2,u=d+a,m=e-n,f=[[0,d],[m,d],[m,0],[e,t/2],[m,t],[m,u],[0,u]];"right"===o?(i=f,p=e,c=t):"left"===o?(i=f.map(([t,n])=>[e-t,n]),p=e,c=t):(i="down"===o?[[d,0],[u,0],[u,m],[t,m],[t/2,e],[0,m],[d,m]]:[[d,e],[u,e],[u,n],[t,n],[t/2,0],[0,n],[d,n]],p=t,c=e);let h=((e,t,n)=>{let a=e.length;if(0===n)return[{type:"M",x:e[0][0],y:e[0][1]},...e.slice(1).map(([e,t])=>({type:"L",x:e,y:t})),{type:"Z"}];let s=l(e[0],e[1]),o=e[0][0]+s[0]*n,r=e[0][1]+s[1]*n,i=[{type:"M",x:o,y:r}];for(let s=1;s<a;s++){let o=e[s];if(t.has(s)){let t=e[s-1],r=e[(s+1)%a],p=l(t,o),c=l(o,r);i.push({type:"L",x:o[0]-p[0]*n,y:o[1]-p[1]*n},{type:"C",cp1x:o[0],cp1y:o[1],cp2x:o[0],cp2y:o[1],x:o[0]+c[0]*n,y:o[1]+c[1]*n})}else i.push({type:"L",x:o[0],y:o[1]})}let p=l(e[a-1],e[0]);return i.push({type:"L",x:e[0][0]-p[0]*n,y:e[0][1]-p[1]*n},{type:"C",cp1x:e[0][0],cp1y:e[0][1],cp2x:e[0][0],cp2y:e[0][1],x:o,y:r},{type:"Z"}),i})(i,new Set("right"===o||"left"===o?[0,2,3,4,6]:[0,1,3,4,5]),r);return{path:(0,s.Yf)(h),instructions:h,width:p,height:c,transformOrigin:`${p/2} ${c/2}`}},c=a.jC,d=({premountFor:e,postmountFor:t,styleWhilePremounted:n,styleWhilePostmounted:s,from:r,trimBefore:l,playbackRate:p,loop:c,freeze:d,hidden:u,showInTimeline:m,controls:f,durationInFrames:h,name:y,defaultName:g,documentationLink:E,memoizedEffectDefinitions:x,content:b,actualStyle:F})=>{let{effectivePremountFor:v,effectivePostmountFor:w,freezeFrame:U,isPremountingOrPostmounting:C,premountingActive:S,postmountingActive:L,premountingStyle:T}=a.Xp.usePremounting({from:r??0,durationInFrames:a.Xp.resolveSequenceDuration({durationInFrames:h,playbackRate:p,loop:c}),premountFor:e??null,postmountFor:t??null,style:F,styleWhilePremounted:n??null,styleWhilePostmounted:s??null,hideWhilePremounted:"opacity"});return(0,i.jsx)(a.Kl,{frame:U,active:C,children:(0,i.jsx)(a.gd,{layout:"none",from:r,trimBefore:l,playbackRate:p,loop:c,freeze:d,hidden:u,showInTimeline:m,controls:f,_remotionInternalEffects:x,durationInFrames:h,name:y??g,_remotionInternalDocumentationLink:void 0===y?E:void 0,_remotionInternalPremountDisplay:v||null,_remotionInternalPostmountDisplay:w||null,_remotionInternalIsPremounting:S,_remotionInternalIsPostmounting:L,children:o.cloneElement(b,{style:T??void 0})})})},u=({defaultName:e,documentationLink:t,width:n,height:s,path:l,style:p,pathStyle:u,transformOrigin:m,debug:f,effects:h=[],instructions:y,pixelDensity:g,durationInFrames:E,from:x,premountFor:b,postmountFor:F,styleWhilePremounted:v,styleWhilePostmounted:w,trimBefore:U,playbackRate:C,loop:S,freeze:L,hidden:T,name:A,showInTimeline:M,controls:I,...R})=>{let k=(0,o.useMemo)(()=>({overflow:"visible",...p??{}}),[p]),P=(0,o.useMemo)(()=>({transformBox:"fill-box",...u??{}}),[u]),B=a.Xp.useMemoizedEffectDefinitions(h),D=a.Xp.useUnsafeVideoConfig(),j=(e=>{if(e.includes("canary")||e.includes("experimental"))return parseInt(e.slice(-8),10)>0x134b041;let[t]=e.split(".").map(Number);return t>18})(r.version),N=(0,i.jsxs)("svg",{width:n,height:s,viewBox:`0 0 ${n} ${s}`,xmlns:"http://www.w3.org/2000/svg",style:0!==h.length&&D?{overflow:"visible"}:k,children:[(0,i.jsx)("path",{...j?{transformOrigin:m}:{"transform-origin":m},d:l,style:P,...R}),f?y.map((e,t)=>{if("C"===e.type){let n=0===t?y[y.length-1]:y[t-1];if("V"===n.type||"H"===n.type||"a"===n.type||"Z"===n.type||"t"===n.type||"q"===n.type||"l"===n.type||"c"===n.type||"m"===n.type||"h"===n.type||"s"===n.type||"v"===n.type)return null;let a=n.x,s=n.y;return(0,i.jsxs)(o.Fragment,{children:[(0,i.jsx)("path",{d:`M ${a} ${s} ${e.cp1x} ${e.cp1y}`,strokeWidth:2,stroke:"rgba(0, 0, 0, 0.4)"}),(0,i.jsx)("path",{d:`M ${e.x} ${e.y} ${e.cp2x} ${e.cp2y}`,strokeWidth:2,stroke:"rgba(0, 0, 0, 0.4)"}),(0,i.jsx)("circle",{cx:e.cp1x,cy:e.cp1y,r:3,fill:"white",strokeWidth:2,stroke:"black"}),(0,i.jsx)("circle",{cx:e.cp2x,cy:e.cp2y,r:3,strokeWidth:2,fill:"white",stroke:"black"})]},t)}return null}):null]}),H=0===h.length?N:(0,i.jsx)(c,{width:Math.ceil(n),height:Math.ceil(s),effects:h,pixelDensity:g,showInTimeline:!1,style:k,controls:I,children:N});return D?(0,i.jsx)(d,{premountFor:b,postmountFor:F,styleWhilePremounted:v,styleWhilePostmou

915nted:w,from:x,trimBefore:U,playbackRate:C,loop:S,freeze:L,hidden:T,showInTimeline:M,controls:I,durationInFrames:E,name:A,defaultName:e,documentationLink:t,memoizedEffectDefinitions:B,content:H,actualStyle:k}):N},m=({defaultValue:e,description:t,hiddenFromList:n=!1,integer:a,max:s,min:o,step:r=1})=>({type:"number",default:e,description:t,hiddenFromList:n,integer:a,max:s,min:o,step:r}),f=({defaultValue:e,description:t})=>({type:"boolean",default:e,description:t}),h=({defaultValue:e,description:t,variants:n})=>({type:"enum",default:e,description:t,variants:Object.fromEntries(n.map(e=>[e,{}]))}),y=e=>({...a.Xp.baseSchema,...a.Xp.premountSchema,...e,fill:(({defaultValue:e,description:t})=>({type:"color",default:e,description:t}))({defaultValue:"#0b84ff",description:"Fill"}),...a.Xp.transformSchema,...a.HG.backgroundSchema,...a.HG.borderSchema,...a.HG.borderRadiusSchema}),g=y({length:m({defaultValue:300,description:"Length",min:0}),headWidth:m({defaultValue:185,description:"Head Width",min:0}),headLength:m({defaultValue:120,description:"Head Length",min:0}),shaftWidth:m({defaultValue:80,description:"Shaft Width",min:0}),direction:h({defaultValue:"right",description:"Direction",variants:["right","left","up","down"]}),cornerRadius:m({defaultValue:0,description:"Corner Radius",min:0})}),E=a.HG.withSchema({Component:({length:e,headWidth:t,headLength:n,shaftWidth:a,direction:s,cornerRadius:o,...r})=>(0,i.jsx)(u,{defaultName:"<Arrow>",documentationLink:"https://www.remotion.dev/docs/shapes/arrow",...p({length:e,headWidth:t,headLength:n,shaftWidth:a,direction:s,cornerRadius:o}),...r}),componentName:"<Arrow>

915",componentIdentity:"dev.remotion.shapes.Arrow",schema:g,supportsEffects:!0}),x=(e,t)=>{let[n,a]=e,s=Math.sqrt(n*n+a*a),o=(s-t)/s;return[n*o,a*o]},b=(e,t)=>{let[n,a]=e,s=t/Math.sqrt(n*n+a*a);return[n*s,a*s]},F=(e,{edgeRoundness:t,cornerRadius:n,roundCornerStrategy:a})=>e.map(([s,o],r)=>{let i=0===r?e.length-2:r-1,l=e[i],p=r===e.length-1?1:r+1,c=e[p],d=[(s+c[0])/2,(o+c[1])/2],u=[(s+l[0])/2,(o+l[1])/2],m=[s-l[0],o-l[1]],f=[c[0]-s,c[1]-o];if(0===r){if(null!==t)return[{type:"M",x:d[0],y:d[1]}];if(0!==n){let e=x(f,n);return[{type:"M",x:e[0]+s,y:e[1]+o}]}return[{type:"M",x:s,y:o}]}if(n&&null!==t)throw Error('"cornerRadius" and "edgeRoundness" cannot be specified at the same time.');if(null===t){if(0===n)return[{type:"L",x:s,y:o}];let e=x(m,n),t=b(m,n),r=b(f,n),i=[l[0]+e[0],l[1]+e[1]];return[{type:"L",x:i[0],y:i[1]},"arc"===a?{type:"a",rx:n,ry:n,xAxisRotation:0,dx:t[0]+r[0],dy:t[1]+r[1],largeArcFlag:!1,sweepFlag:!0}:{type:"C",x:i[0]+t[0]+r[0],y:i[1]+t[1]+r[1],cp1x:s,cp1y:o,cp2x:s,cp2y:o}]}let h=[u[0]+m[0]*t*.5,u[1]+m[1]*t*.5],y=[d[0]-f[0]*t*.5,d[1]-f[1]*t*.5];return[{type:"C",cp1x:h[0],cp1y:h[1],cp2x:y[0],cp2y:y[1],x:d[0],y:d[1]}]}).flat(1),v=(e,t)=>{if("number"!=typeof t||t<=0)throw Error(`"${e}" must be a positive number, got ${t}`)},w=({availableLength:e,pointerBaseWidth:t,pointerPosition:n})=>{let a=e*n,s=t/2;return{center:a,start:Math.max(0,a-s),end:Math.min(e,a+s)}},U=(e,t)=>e[0]===t[0]&&e[1]===t[1],C=(e,t)=>{let n=t[0]-e[0],a=t[1]-e[1],s=Math.sqrt(n*n+a*a);return 0===s?[0,0]:[n/s,a/s]},S=({width:e=500,height:t=200,pointerLength:n=40,pointerBaseWidth:a=60,pointerPosition:o=.5,pointerDirection:r="down",edgeRoundness:i=null,cornerRadius:l=0})=>{if(v("width",e),v("height",t),v("pointerLength",n),v("pointerBaseWidth",a),"number"!=typeof o||o<0||o>1)throw Error(`"pointerPosition" must be a number between 0 and 1, got ${o}`);let p=w({availableLength:e,pointerBaseWidth:a,pointerPosition:o}),c=w({availableLength:t,pointerBaseWidth:a,pointerPosition:o}),d=(({points:e,edgeRoundness:t,cornerRadius:n})=>{let a=e.map(e=>e.point);if(null!==t||0===n)return[...F(a,{edgeRoundness:t,cornerRadius:n,roundCornerStrategy:"arc"}),{type:"Z"}];let s=U(e[0].point,e[e.length-1].point)?e.slice(0,-1):e,o=s[0],r=o.round?C(s[0].point,s[1].point):null,i=r?[o.point[0]+r[0]*n,o.point[1]+r[1]*n]:o.point,l=[{type:"M",x:i[0],y:i[1]}];for(let e=1;e<s.length;e++){let t=s[e];if(!t.round){l.push({type:"L",x:t.point[0],y:t.point[1]});continue}let a=s[e-1].point,o=s[(e+1)%s.length].point,r=C(a,t.point),i=C(t.point,o),p=[t.point[0]-r[0]*n,t.point[1]-r[1]*n];l.push({type:"L",x:p[0],y:p[1]},{type:"a",rx:n,ry:n,xAxisRotation:0,dx:r[0]*n+i[0]*n,dy:r[1]*n+i[1]*n,largeArcFlag:!1,sweepFlag:!0})}if(o.round){let e=C(s[s.length-1].point,o.point);l.push({type:"L",x:o.point[0]-e[0]*n,y:o.point[1]-e[1]*n},{type:"a",rx:n,ry:n,xAxisRotation:0,dx:e[0]*n+r[0]*n,dy:e[1]*n+r[1]*n,largeArcFlag:!1,sweepFlag:!0})}return l.push({type:"Z"}),l})({points:(e=>{let t=e.reduce((e,t)=>{let n=e[e.length-1];return n&&U(n.point,t.point)?(e[e.length-1]={point:n.point,round:n.round&&t.round},e):[...e,t]},[]);if(0===t.length)return t;let n=t[0],a=t[t.length-1];if(U(n.point,a.point)){let[e,...n]=t,s=n.slice(0,-1),o={point:e.point,round:e.round&&a.round};return[o,...s,o]}return[...t,n]})({up:[{point:[0,n],round:!0},{point:[p.start,n],round:!1},{point:[p.center,0],round:!1},{point:[p.end,n],round:!1},{point:[e,n],round:!0},{point:[e,t+n],round:!0},{point:[0,t+n],round:!0},{point:[0,n],round:!0}],down:[{point:[0,0],round:!0},{point:[e,0],round:!0},{point:[e,t],round:!0},{point:[p.end,t],round:!1},{point:[p.center,t+n],round:!1},{point:[p.start,t],round:!1},{point:[0,t],round:!0},{point:[0,0],round:!0}],left:[{point:[n,0],round:!0},{point:[e+n,0],round:!0},{point:[e+n,t],round:!0},{point:[n,t],round:!0},{point:[n,c.end],round:!1},{point:[0,c.center],round:!1},{point:[n,c.start],round:!1},{point:[n,0],round:!0}],right:[{point:[0,0],round:!0},{point:[e,0],round:!0},{point:[e,c.start],round:!1},{point:[e+n,c.center],round:!1},{point:[e,c.end],round:!1},{point:[e,t],round:!0},{point:[0,t],round:!0},{point:[0,0],round:!0}]}[r]),edgeRoundness:i,cornerRadius:l}

915),u=(0,s.Yf)(d),m="left"===r||"right"===r?e+n:e,f="up"===r||"down"===r?t+n:t,h="left"===r?n:0,y="up"===r?n:0;return{width:m,height:f,instructions:d,path:u,transformOrigin:`${h+e/2} ${y+t/2}`}},L=y({width:m({defaultValue:500,description:"Width",min:1}),height:m({defaultValue:200,description:"Height",min:1}),pointerLength:m({defaultValue:40,description:"Pointer Length",min:1}),pointerBaseWidth:m({defaultValue:60,description:"Pointer Base Width",min:1}),pointerPosition:m({defaultValue:.5,description:"Pointer Position",min:0,max:1,step:.01}),pointerDirection:h({defaultValue:"down",description:"Pointer Direction",variants:["up","down","left","right"]}),cornerRadius:m({defaultValue:0,description:"Corner Radius",min:0})}),T=a.HG.withSchema({Component:({width:e,height:t,pointerLength:n,pointerBaseWidth:a,pointerPosition:s,pointerDirection:o,edgeRoundness:r,cornerRadius:l,...p})=>(0,i.jsx)(u,{defaultName:"<Callout>",documentationLink:"https://www.remotion.dev/docs/shapes/callout",...S({width:e,height:t,pointerLength:n,pointerBaseWidth:a,pointerPosition:s,pointerDirection:o,edgeRoundness:r,cornerRadius:l}),...p}),componentName:"<Callout>",componentIdentity:"dev.remotion.shapes.Callout",schema:L,supportsEffects:!0}),A=({radius:e})=>{let t=[{type:"M",x:e,y:0},{type:"a",rx:e,ry:e,xAxisRotation:0,largeArcFlag:!0,sweepFlag:!0,dx:0,dy:2*e},{type:"a",rx:e,ry:e,xAxisRotation:0,largeArcFlag:!0,sweepFlag:!0,dx:0,dy:-(2*e)},{type:"Z"}];return{height:2*e,width:2*e,path:(0,s.Yf)(t),instructions:t,transformOrigin:`${e} ${e}`}},M=y({radius:m({defaultValue:100,description:"Radius",min:0})}),I=a.HG.withSchema({Component:({radius:e,...t})=>(0,i.jsx)(u,{defaultName:"<Circle>",documentationLink:"https://www.remotion.dev/docs/shapes/circle",...A({radius:e}),...t}),componentName:"<Circle>",componentIdentity:"dev.remotion.shapes.Circle",schema:M,supportsEffects:!0}),R=({rx:e,ry:t})=>{let n=[{type:"M",x:e,y:0},{type:"a",rx:e,ry:t,xAxisRotation:0,largeArcFlag:!0,sweepFlag:!1,dx:1,dy:0},{type:"Z"}];return{width:2*e,height:2*t,path:(0,s.Yf)(n),instructions:n,transformOrigin:`${e} ${t}`}},k=y({rx:m({defaultValue:100,description:"X Radius",min:0}),ry:m({defaultValue:50,description:"Y Radius",min:0})}),P=a.HG.withSchema({Component:({rx:e,ry:t,...n})=>(0,i.jsx)(u,{defaultName:"<Ellipse>",documentationLink:"https://www.remotion.dev/docs/shapes/ellipse",...R({rx:e,ry:t}),...n}),componentName:"<Ellipse>",componentIdentity:"dev.remotion.shapes.Ellipse",schema:k,supportsEffects:!0}),B=({height:e,aspectRatio:t=1.1,bottomRoundnessAdjustment:n=0,depthAdjustment:a=0})=>{let o=e*t,r=23/110*o+n*o,i=.69*e,l=.6*e,p=.13*e,c=29/110*o,d=15/110*o,u=5/110*o,m=.07*e,f=[{type:"M",x:o/2,y:e},{type:"C",cp1x:o/2-r,cp1y:i,cp2x:0,cp2y:l,x:0,y:e/4},{type:"C",cp1x:0,cp1y:p,cp2x:o/4-c/2,cp2y:0,x:o/4,y:0},{type:"C",cp1x:o/4+c/2,cp1y:0,cp2x:o/2-u,cp2y:m,x:o/2,y:.17*e+a*e},{type:"C",cp1x:o/2+u,cp1y:m,cp2x:o/2+d,cp2y:0,x:o/4*3,y:0},{type:"C",cp1x:o/4*3+c/2,cp1y:0,cp2x:o,cp2y:p,x:o,y:e/4},{type:"C",x:o/2,y:e,cp1x:o,cp1y:l,cp2x:o/2+r,cp2y:i},{type:"Z"}];return{path:(0,s.Yf)(f),width:o,height:e,transformOrigin:`${o/2} ${e/2}`,instructions:f}},D=y({height:m({defaultValue:100,description:"Height",min:0}),aspectRatio:m({defaultValue:1.1,description:"Aspect Ratio",min:0,step:.01}),bottomRoundnessAdjustment:m({defaultValue:0,description:"Bottom Roundness Adjustment",step:.01}),depthAdjustment:m({defaultValue:0,description:"Depth Adjustment",step:.01})}),j=a.HG.withSchema({Component:({aspectRatio:e,height:t,bottomRoundnessAdjustment:n=0,depthAdjustment:a=0,...s})=>(0,i.jsx)(u,{defaultName:"<Heart>",documentationLink:"https://www.remotion.dev/docs/shapes/heart",...B({aspectRatio:e,height:t,bottomRoundnessAdjustment:n,depthAdjustment:a}),...s}),componentName:"<Heart>",componentIdentity:"dev.remotion.shapes.Heart",schema:D,supportsEffects:!0}),N=({counterClockwise:e,actualProgress:t,rotation:n,radius:a,coord:s})=>Math.round(1e5*(Math["x"===s?"cos":"sin"]((e?-1:1)*t*Math.PI*2+1.5*Math.PI+n)*a+a))/1e5,H=({progress:e,radius:t,closePath:n=!0,counterClockwise:a=!1,rotation:o=0})=>{let r=Math.min(Math.max(e,0),1),i=N({actualProgress:r,coord:"x",counterClockwise:a,radius:t,rotation:o}),l=N({actualProgress:r,coord:"y",counterClockwise:a,radius:t,rotation:o}),p=[{type:"M",...{x:N({actualProgress:0,coord:"x",counterClockwise:a,radius:t,rotation:o}),y:N({actualProgress:0,coord:"y",counterClockwise:a,radius:t,rotation:o})}}

915,{type:"A",rx:t,ry:t,xAxisRotation:0,largeArcFlag:!1,sweepFlag:!a,x:r<=.5?i:N({actualProgress:.5,coord:"x",counterClockwise:a,radius:t,rotation:o}),y:r<=.5?l:N({actualProgress:.5,coord:"y",counterClockwise:a,radius:t,rotation:o})},r>.5?{type:"A",rx:t,ry:t,xAxisRotation:0,largeArcFlag:!1,sweepFlag:!a,x:i,y:l}:null,r>0&&r<1&&n?{type:"L",x:t,y:t}:null,n?{type:"Z"}:null].filter(Boolean);return{height:2*t,width:2*t,path:(0,s.Yf)(p),instructions:p,transformOrigin:`${t} ${t}`}},$=y({radius:m({defaultValue:100,description:"Radius",min:0}),progress:m({defaultValue:.5,description:"Progress",max:1,min:0,step:.01}),closePath:f({defaultValue:!0,description:"Close Path"}),counterClockwise:f({defaultValue:!1,description:"Counter Clockwise"}),rotation:m({defaultValue:0,description:"Rotation",step:.01})}),_=a.HG.withSchema({Component:({radius:e,progress:t,closePath:n,counterClockwise:a,rotation:s,...o})=>(0,i.jsx)(u,{defaultName:"<Pie>",documentationLink:"https://www.remotion.dev/docs/shapes/pie",...H({radius:e,progress:t,closePath:n,counterClockwise:a,rotation:s}),...o}),componentName:"<Pie>",componentIdentity:"dev.remotion.shapes.Pie",schema:$,supportsEffects:!0}),W=({points:e,radius:t,cornerRadius:n=0,edgeRoundness:a=null})=>{if(e<3)throw Error(`"points" should be minimum 3, got ${e}`);let o=2*t/2,r=2*t/2,i=function({points:e,radius:t,centerX:n,centerY:a,cornerRadius:s,edgeRoundness:o}){let r=2*Math.PI/e,i=Array(e).fill(0).map((e,s)=>{let o=r*s-Math.PI/2,i={x:n+t*Math.cos(o),y:a+t*Math.sin(o)};return[i.x,i.y]});return F([...i,i[0]],{edgeRoundness:o,cornerRadius:s,roundCornerStrategy:s>0?"bezier":"arc"})}({points:e,radius:t,centerX:o,centerY:r,cornerRadius:n,edgeRoundness:a}),l=(0,s.ar)(i),p=(0,s.D0)((0,s.Yf)(l)),c=s.S6.getBoundingBoxFromInstructions(l);return{path:p,width:c.width,height:c.height,transformOrigin:`${o} ${r}`,instructions:i}},z=y({points:m({defaultValue:5,description:"Points",min:3,step:1,integer:!0}),radius:m({defaultValue:100,description:"Radius",min:0}),cornerRadius:m({defaultValue:0,description:"Corner Radius",min:0})}),O=a.HG.withSchema({Component:({points:e,radius:t,cornerRadius:n,edgeRoundness:a,...s})=>(0,i.jsx)(u,{defaultName:"<Polygon>",documentationLink:"https://www.remotion.dev/docs/shapes/polygon",...W({points:e,cornerRadius:n,edgeRoundness:a,radius:t}),...s}),componentName:"<Polygon>",componentIdentity:"dev.remotion.shapes.Polygon",schema:z,supportsEffects:!0}),G=({width:e,height:t,edgeRoundness:n=null,cornerRadius:a=0})=>{let o=[e/2,t/2],r=[...F([[a,0],[e,0],[e,t],[0,t],[0,0]],{edgeRoundness:n,cornerRadius:a,roundCornerStrategy:"arc"}),{type:"Z"}],i=(0,s.Yf)(r);return{width:e,height:t,instructions:r,path:i,transformOrigin:o.join(" ")}},X=y({width:m({defaultValue:100,description:"Width",min:0}),height:m({defaultValue:100,description:"Height",min:0}),cornerRadius:m({defaultValue:0,description:"Corner Radius",min:0})}),K=a.HG.withSchema({Component:({width:e,edgeRoundness:t,height:n,cornerRadius:a,...s})=>(0,i.jsx)(u,{defaultName:"<Rect>",documentationLink:"https://www.remotion.dev/docs/shapes/rect",...G({height:n,width:e,edgeRoundness:t,cornerRadius:a}),...s}),componentName:"<Rect>",componentIdentity:"dev.remotion.shapes.Rect",schema:X,supportsEffects:!0}),q=4/3,J=({to:e,cp1:t,cp2:n})=>({type:"C",cp1x:t[0],cp1y:t[1],cp2x:n[0],cp2y:n[1],x:e[0],y:e[1]}),V=({from:e,to:t,radius:n,direction:a})=>"top"===a?J({to:t,cp1:[e[0],e[1]-n*q],cp2:[t[0],t[1]-n*q]}):"right"===a?J({to:t,cp1:[e[0]+n*q,e[1]],cp2:[t[0]+n*q,t[1]]}):"bottom"===a?J({to:t,cp1:[e[0],e[1]+n*q],cp2:[t[0],t[1]+n*q]}):J({to:t,cp1:[e[0]-n*q,e[1]],cp2:[t[0]-n*q,t[1]]}),Y=({from:e,to:t,edgeRoundness:n,direction:a})=>{let s=t[0]-e[0],o=t[1]-e[1],r=.5522847498307936*Math.abs(s)*n,i=.5522847498307936*Math.abs(o)*n;return"top-right"===a?J({to:t,cp1:[e[0],e[1]+i],cp2:[t[0]-r,t[1]]}):"right-bottom"===a?J({to:t,cp1:[e[0]-r,e[1]],cp2:[t[0],t[1]-i]}):"bottom-left"===a?J({to:t,cp1:[e[0],e[1]-i],cp2:[t[0]+r,t[1]]}):J({to:t,cp1:[e[0]+r,e[1]],cp2:[t[0],t[1]+i]})},Q=({width:e,height:t,edgeRoundness:n=1,cornerRadius:a=0})=>{let o=e/2,r=t/2,i=(({cornerRadius:e,width:t,height:n})=>Math.min(Math.max(e,0),t/2,n/2))({cornerRadius:a,width:e,height:t}),l=[o,0],p=[e,r],c=[o,t],d=[0,r],u=0===i?l:[o+i,i],m=0===i?p:[e-i,r-i],f=0===i?p:[e-i,r+i],h=0===i?c:[o+i,t-i],y=0===i?c:[o-i,t-i],g=0===i?d:[i,r+i],E=0===i?d:[i,r-i],x=0===i?l:[o-i,i],b=[{type:"M",x:u[0],y:u[1]},Y({from:u,to:m,edgeRoundness:n,direction:"top-right"})];return i>0&&b.push(V({from:m,to:f,radius:i,direction:"right"})),b.push(Y({from:f,to:h,edgeRoundness:n,direction:"right-bottom"})),i>0&&b.push(V({from:h,to:y,radius:i,direction:"bottom"})),b.push(Y({from:y,to:g,edgeRoundness:n,direction:"bottom-left"})),i>0&&b.push(V({from:g,to:E,radius:i,direction:"left"})),b.push(Y({from:E,to:x,edgeRoundness:n,direction:"left-top"})),i>

9150&&b.push(V({from:x,to:u,radius:i,direction:"top"})),b.push({type:"Z"}),{path:(0,s.Yf)(b),width:e,height:t,transformOrigin:`${o} ${r}`,instructions:b}},Z=y({width:m({defaultValue:100,description:"Width",min:0}),height:m({defaultValue:140,description:"Height",min:0}),edgeRoundness:m({defaultValue:1,description:"Edge Roundness",min:0,step:.01}),cornerRadius:m({defaultValue:0,description:"Corner Radius",min:0})}),ee=a.HG.withSchema({Component:({width:e,height:t,edgeRoundness:n,cornerRadius:a,...s})=>(0,i.jsx)(u,{defaultName:"<Spark>",documentationLink:"https://www.remotion.dev/docs/shapes/spark",...Q({width:e,height:t,edgeRoundness:n,cornerRadius:a}),...s}),componentName:"<Spark>",componentIdentity:"dev.remotion.shapes.Spark",schema:Z,supportsEffects:!0}),et=({points:e,innerRadius:t,outerRadius:n,cornerRadius:a=0,edgeRoundness:o=null})=>{let r=2*n/2,i=2*n/2,l=(({centerX:e,centerY:t,points:n,innerRadius:a,outerRadius:s,cornerRadius:o,edgeRoundness:r})=>{let i=2*Math.PI/(2*n),l=Array(2*n).fill(!0).map((n,o)=>{let r=o%2==0?s:a,l=i*o-Math.PI/2,p={x:e+r*Math.cos(l),y:t+r*Math.sin(l)};return[p.x,p.y]});return[...F([...l,l[0]],{edgeRoundness:r,cornerRadius:o,roundCornerStrategy:o>0?"bezier":"arc"}),{type:"Z"}]})({centerX:r,centerY:i,points:e,innerRadius:t,outerRadius:n,cornerRadius:a,edgeRoundness:o}),p=(0,s.ar)(l),c=(0,s.D0)((0,s.Yf)(p)),d=s.S6.getBoundingBoxFromInstructions(p);return{path:c,width:d.width,height:d.height,transformOrigin:`${r} ${i}`,instructions:l}},en=y({points:m({defaultValue:5,description:"Points",min:3,step:1,integer:!0}),innerRadius:m({defaultValue:50,description:"Inner Radius",min:0}),outerRadius:m({defaultValue:100,description:"Outer Radius",min:0}),cornerRadius:m({defaultValue:0,description:"Corner Radius",min:0})}),ea=a.HG.withSchema({Component:({innerRadius:e,outerRadius:t,points:n,cornerRadius:a,edgeRoundness:s,...o})=>(0,i.jsx)(u,{defaultName:"<Star>",documentationLink:"https://www.remotion.dev/docs/shapes/star",...et({innerRadius:e,outerRadius:t,points:n,cornerRadius:a,edgeRoundness:s}),...o}),componentName:"<Star>",componentIdentity:"dev.remotion.shapes.Star",schema:en,supportsEffects:!0}),es=({length:e,direction:t="right",edgeRoundness:n=null,cornerRadius:a=0})=>{if("number"!=typeof e)throw Error(`"length" of a triangle must be a number, got ${JSON.stringify(e)}`);let o=Math.sqrt(e**2*.75),r=[...F({up:[[e/2,0],[0,o],[e,o],[e/2,0]],right:[[0,0],[0,e],[o,e/2],[0,0]],down:[[0,0],[e,0],[e/2,o],[0,0]],left:[[o,0],[o,e],[0,e/2],[o,0]]}[t],{edgeRoundness:n,cornerRadius:a,roundCornerStrategy:"bezier"}),{type:"Z"}];return{path:(0,s.Yf)(r),instructions:r,width:"up"===t||"down"===t?e:o,height:"up"===t||"down"===t?o:e,transformOrigin:`${({left:o/3*2,right:o/3,up:e/2,down:e/2})[t]} ${({up:o/3*2,down:o/3,left:e/2,right:e/2})[t]}`}},eo=y({length:m({defaultValue:100,description:"Length",min:0}),direction:h({defaultValue:"right",description:"Direction",variants:["right","left","up","down"]}),cornerRadius:m({defaultValue:0,description:"Corner Radius",min:0})}),er=a.HG.withSchema({Component:({length:e,direction:t,edgeRoundness:n,cornerRadius:a,...s})=>(0,i.jsx)(u,{defaultName:"<Triangle>",documentationLink:"https://www.remotion.dev/docs/shapes/triangle",...es({length:e,direction:t,edgeRoundness:n,cornerRadius:a}),...s}),componentName:"<Triangle>",componentIdentity:"dev.remotion.shapes.Triangle",schema:eo,supportsEffects:!0})}}]);

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.