├── .eslintrc
├── .gitignore
├── .vscode
    └── settings.json
├── README.md
├── bun.lockb
├── package.json
├── public
    └── pitch.png
├── remotion.config.ts
├── src
    ├── Composition.tsx
    ├── Overlay.tsx
    ├── Perspective.tsx
    ├── Ray.tsx
    ├── Root.tsx
    ├── ScaleIn.tsx
    ├── SwitzerlandLogo.tsx
    └── index.ts
└── tsconfig.json


/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "@remotion",
3 | }
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | .DS_Store
4 | .env
5 | 
6 | # Ignore the output video from Git but not videos you import into src/.
7 | out
8 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "typescript.tsdk": "node_modules/typescript/lib",
3 |   "typescript.enablePromptUseWorkspaceTsdk": true
4 | }
5 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Remotion video
 2 | 
 3 | <p align="center">
 4 |   <a href="https://github.com/remotion-dev/logo">
 5 |     <picture>
 6 |       <source media="(prefers-color-scheme: dark)" srcset="https://github.com/remotion-dev/logo/raw/main/animated-logo-banner-dark.gif">
 7 |       <img alt="Animated Remotion Logo" src="https://github.com/remotion-dev/logo/raw/main/animated-logo-banner-light.gif">
 8 |     </picture>
 9 |   </a>
10 | </p>
11 | 
12 | Welcome to your Remotion project!
13 | 
14 | ## Commands
15 | 
16 | **Install Dependencies**
17 | 
18 | ```console
19 | bun install
20 | ```
21 | 
22 | **Start Preview**
23 | 
24 | ```console
25 | bun start
26 | ```
27 | 
28 | **Render video**
29 | 
30 | ```console
31 | bun run build
32 | ```
33 | 
34 | **Upgrade Remotion**
35 | 
36 | ```console
37 | bun run upgrade
38 | ```
39 | 
40 | ## Docs
41 | 
42 | Get started with Remotion by reading the [fundamentals page](https://www.remotion.dev/docs/the-fundamentals).
43 | 
44 | ## Help
45 | 
46 | We provide help on our [Discord server](https://discord.gg/6VzzNDwUwV).
47 | 
48 | ## Issues
49 | 
50 | Found an issue with Remotion? [File an issue here](https://github.com/remotion-dev/remotion/issues/new).
51 | 
52 | ## License
53 | 
54 | Note that for some entities a company license is needed. [Read the terms here](https://github.com/remotion-dev/remotion/blob/main/LICENSE.md).
55 | 


--------------------------------------------------------------------------------
/bun.lockb:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JonnyBurger/euro-2024-animation/8aa240890ff39e076e0d67e083bddf99b4f7154e/bun.lockb


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "euro",
 3 |   "version": "1.0.0",
 4 |   "description": "My Remotion video",
 5 |   "repository": {},
 6 |   "license": "UNLICENSED",
 7 |   "dependencies": {
 8 |     "@remotion/cli": "4.0.174",
 9 |     "@remotion/google-fonts": "^4.0.174",
10 |     "@remotion/paths": "^4.0.174",
11 |     "@remotion/shapes": "^4.0.174",
12 |     "react": "^18.0.0",
13 |     "react-dom": "^18.0.0",
14 |     "remotion": "4.0.174"
15 |   },
16 |   "devDependencies": {
17 |     "@remotion/eslint-config": "4.0.174",
18 |     "@types/react": "^18.0.26",
19 |     "@types/web": "^0.0.143",
20 |     "eslint": "^8.43.0",
21 |     "prettier": "^3.2.5",
22 |     "typescript": "^5.4.5"
23 |   },
24 |   "scripts": {
25 |     "start": "remotionb studio",
26 |     "build": "remotionb render MyComp out/video.mp4",
27 |     "upgrade": "remotionb upgrade",
28 |     "test": "eslint src --ext ts,tsx,js,jsx && tsc"
29 |   },
30 |   "packageManager": "bun@1.1.12"
31 | }


--------------------------------------------------------------------------------
/public/pitch.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JonnyBurger/euro-2024-animation/8aa240890ff39e076e0d67e083bddf99b4f7154e/public/pitch.png


--------------------------------------------------------------------------------
/remotion.config.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Note: When using the Node.JS APIs, the config file
 3 |  * doesn't apply. Instead, pass options directly to the APIs.
 4 |  *
 5 |  * All configuration options: https://remotion.dev/docs/config
 6 |  */
 7 | 
 8 | import { Config } from "@remotion/cli/config";
 9 | 
10 | Config.setVideoImageFormat("jpeg");
11 | Config.setOverwriteOutput(true);
12 | 


--------------------------------------------------------------------------------
/src/Composition.tsx:
--------------------------------------------------------------------------------
  1 | import { AbsoluteFill, Img, interpolate, staticFile } from "remotion";
  2 | import { useCurrentFrame } from "remotion";
  3 | import { random, spring, useVideoConfig } from "remotion";
  4 | import { FINAL_RADIUS, Ray } from "./Ray";
  5 | import { Perspective } from "./Perspective";
  6 | import { ScaleIn } from "./ScaleIn";
  7 | import { Overlay } from "./Overlay";
  8 | 
  9 | const colors = [
 10 |   "#24BB5D",
 11 |   "#020101",
 12 |   "#F2C004",
 13 |   "#F00E03",
 14 |   "#F2F0EE",
 15 |   "#28BA61",
 16 |   "#033BE0",
 17 |   "#F4F0F3",
 18 | ];
 19 | 
 20 | const SEGMENTS = 66;
 21 | const singlesegmentLength = 1 / SEGMENTS;
 22 | 
 23 | export const MyComposition = () => {
 24 |   const { fps } = useVideoConfig();
 25 |   const frame = useCurrentFrame();
 26 |   return (
 27 |     <AbsoluteFill>
 28 |       <AbsoluteFill>
 29 |         <Img
 30 |           src={staticFile("pitch.png")}
 31 |           style={{ objectFit: "cover", transform: `scale(1.05)` }}
 32 |         />
 33 |       </AbsoluteFill>
 34 |       <Perspective>
 35 |         <ScaleIn>
 36 |           <AbsoluteFill style={{ opacity: 0.9 }}>
 37 |             {new Array(SEGMENTS).fill(true).map((_, i) => {
 38 |               const prog = spring({
 39 |                 fps,
 40 |                 frame,
 41 |                 config: {
 42 |                   damping: 200,
 43 |                 },
 44 |                 delay: random(i) * 5,
 45 |               });
 46 |               const rotation = (i / SEGMENTS) * 2 * Math.PI + (Math.PI / 3) * 2;
 47 | 
 48 |               const initialRadius =
 49 |                 i > SEGMENTS / 3
 50 |                   ? FINAL_RADIUS
 51 |                   : random(i) * 0.1 * FINAL_RADIUS;
 52 |               const radius = interpolate(
 53 |                 prog,
 54 |                 [0, 1],
 55 |                 [initialRadius, FINAL_RADIUS]
 56 |               );
 57 | 
 58 |               return (
 59 |                 <Ray
 60 |                   radius={radius}
 61 |                   strokeWidth={radius}
 62 |                   color="#252360"
 63 |                   i={i}
 64 |                   sliceLength={singlesegmentLength}
 65 |                   rotation={rotation}
 66 |                 />
 67 |               );
 68 |             })}
 69 |           </AbsoluteFill>
 70 |           {new Array(SEGMENTS / 3).fill(true).map((_, i) => {
 71 |             const progress = (delay: number, initialProgress: number) =>
 72 |               spring({
 73 |                 fps,
 74 |                 frame,
 75 |                 config: {
 76 |                   damping: 200,
 77 |                 },
 78 |                 from: initialProgress,
 79 |                 to: 1,
 80 |                 delay,
 81 |               });
 82 | 
 83 |             const sliceLength =
 84 |               i % 2 === 0 ? singlesegmentLength * 2 : singlesegmentLength;
 85 |             const initialProgress = random(i) * 0.3;
 86 |             const color = colors[i % colors.length];
 87 |             const delay = random(i) * 10;
 88 |             const prog = progress(delay, initialProgress);
 89 |             const rotation = (i / SEGMENTS) * 2 * Math.PI + (Math.PI / 3) * 2;
 90 |             const absoluteRadius = random(i) + 0.4 * FINAL_RADIUS;
 91 |             const radius = interpolate(
 92 |               prog,
 93 |               [0, 1],
 94 |               [absoluteRadius, FINAL_RADIUS]
 95 |             );
 96 | 
 97 |             const strokeWidth = interpolate(prog, [0, 1], [absoluteRadius, 12]);
 98 | 
 99 |             return (
100 |               <Ray
101 |                 strokeWidth={strokeWidth}
102 |                 radius={radius}
103 |                 color={color}
104 |                 i={i}
105 |                 sliceLength={sliceLength}
106 |                 rotation={rotation}
107 |               />
108 |             );
109 |           })}
110 |         </ScaleIn>
111 |       </Perspective>
112 |       <Overlay />
113 |     </AbsoluteFill>
114 |   );
115 | };
116 | 


--------------------------------------------------------------------------------
/src/Overlay.tsx:
--------------------------------------------------------------------------------
 1 | import { Easing, interpolate } from "remotion";
 2 | import { useCurrentFrame } from "remotion";
 3 | import React from "react";
 4 | import { AbsoluteFill } from "remotion";
 5 | import { loadFont, fontFamily } from "@remotion/google-fonts/LeagueGothic";
 6 | import {
 7 |   loadFont as loadMontserrat,
 8 |   fontFamily as montserrat,
 9 | } from "@remotion/google-fonts/Montserrat";
10 | import { SwitzerlandLogo } from "./SwitzerlandLogo";
11 | 
12 | loadFont();
13 | loadMontserrat("normal");
14 | 
15 | export const Overlay: React.FC = () => {
16 |   const frame = useCurrentFrame();
17 |   const progress = interpolate(frame, [5, 20], [0, 1], {
18 |     extrapolateRight: "clamp",
19 |     extrapolateLeft: "clamp",
20 |     easing: Easing.in(Easing.ease),
21 |   });
22 | 
23 |   const opacity = interpolate(progress, [0, 1], [0, 1]);
24 |   const translationY = interpolate(progress, [0, 1], [50, 0]);
25 | 
26 |   return (
27 |     <AbsoluteFill
28 |       style={{
29 |         justifyContent: "center",
30 |         alignItems: "center",
31 |         color: "white",
32 |         transform: `translateZ(-1000px) translateY(${translationY}px)`,
33 |         opacity,
34 |       }}
35 |     >
36 |       <SwitzerlandLogo />
37 |       <div style={{ height: 50 }} />
38 |       <div
39 |         style={{
40 |           fontSize: 180,
41 |           fontFamily,
42 |         }}
43 |       >
44 |         SWITZERLAND
45 |       </div>
46 |       <div style={{ height: 120 }} />
47 |       <div
48 |         style={{
49 |           fontFamily: montserrat,
50 |           color: "#E8C234",
51 |           fontWeight: 600,
52 |           fontSize: 36,
53 |         }}
54 |       >
55 |         HEAD COACH
56 |       </div>
57 |       <div
58 |         style={{
59 |           fontFamily: montserrat,
60 |           color: "#fff",
61 |           fontSize: 36,
62 |         }}
63 |       >
64 |         MURAT <span style={{ fontWeight: "bold" }}>YAKIN</span>
65 |       </div>
66 |     </AbsoluteFill>
67 |   );
68 | };
69 | 


--------------------------------------------------------------------------------
/src/Perspective.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { AbsoluteFill } from "remotion";
 3 | 
 4 | export const Perspective: React.FC<{
 5 |   children: React.ReactNode;
 6 | }> = ({ children }) => {
 7 |   return (
 8 |     <AbsoluteFill
 9 |       style={{
10 |         transform: `translateY(-50%)`,
11 |       }}
12 |     >
13 |       <AbsoluteFill
14 |         style={{
15 |           transform: `perspective(700px) rotateX(20deg) scaleX(1.5)`,
16 |         }}
17 |       >
18 |         {children}
19 |       </AbsoluteFill>
20 |     </AbsoluteFill>
21 |   );
22 | };
23 | 


--------------------------------------------------------------------------------
/src/Ray.tsx:
--------------------------------------------------------------------------------
 1 | import { AbsoluteFill } from "remotion";
 2 | import React, { useMemo } from "react";
 3 | import { PathInternals, getLength } from "@remotion/paths";
 4 | import { makeCircle } from "@remotion/shapes";
 5 | 
 6 | export const FINAL_RADIUS = 720;
 7 | 
 8 | export const Ray: React.FC<{
 9 |   i: number;
10 |   color: string;
11 |   sliceLength: number;
12 |   rotation: number;
13 |   radius: number;
14 |   strokeWidth: number;
15 | }> = ({ color, i, sliceLength, rotation, radius, strokeWidth }) => {
16 |   const circle = useMemo(() => {
17 |     return makeCircle({
18 |       radius: radius - strokeWidth / 2,
19 |     });
20 |   }, [radius, strokeWidth]);
21 | 
22 |   const { path } = circle;
23 | 
24 |   const length = getLength(path);
25 | 
26 |   const pathLength = length * sliceLength;
27 | 
28 |   const cutPath = useMemo(() => {
29 |     return PathInternals.cutPath(path, pathLength);
30 |   }, [path, pathLength]);
31 | 
32 |   return (
33 |     <AbsoluteFill
34 |       style={{
35 |         justifyContent: "center",
36 |         alignItems: "center",
37 |         transform: `rotate(${rotation}rad)`,
38 |       }}
39 |     >
40 |       <svg
41 |         key={i}
42 |         viewBox={`0 0 ${circle.width} ${circle.height}`}
43 |         style={{
44 |           overflow: "visible",
45 |           transformOrigin: "center center",
46 |           width: circle.width,
47 |           height: circle.height,
48 |         }}
49 |       >
50 |         <path
51 |           d={cutPath}
52 |           stroke={color}
53 |           fill="none"
54 |           strokeWidth={strokeWidth}
55 |         />
56 |       </svg>
57 |     </AbsoluteFill>
58 |   );
59 | };
60 | 


--------------------------------------------------------------------------------
/src/Root.tsx:
--------------------------------------------------------------------------------
 1 | import { Composition } from "remotion";
 2 | import { MyComposition } from "./Composition";
 3 | 
 4 | export const RemotionRoot: React.FC = () => {
 5 |   return (
 6 |     <>
 7 |       <Composition
 8 |         id="MyComp"
 9 |         component={MyComposition}
10 |         durationInFrames={60}
11 |         fps={30}
12 |         width={1920}
13 |         height={1080}
14 |       />
15 |     </>
16 |   );
17 | };
18 | 


--------------------------------------------------------------------------------
/src/ScaleIn.tsx:
--------------------------------------------------------------------------------
 1 | import { useCurrentFrame } from "remotion";
 2 | import React from "react";
 3 | import { AbsoluteFill, spring, useVideoConfig } from "remotion";
 4 | 
 5 | export const ScaleIn: React.FC<{
 6 |   children: React.ReactNode;
 7 | }> = ({ children }) => {
 8 |   const { fps } = useVideoConfig();
 9 |   const frame = useCurrentFrame();
10 |   const scale = spring({
11 |     fps,
12 |     frame,
13 |     config: {
14 |       damping: 200,
15 |     },
16 |   });
17 |   return (
18 |     <AbsoluteFill style={{ transform: `scale(${scale})` }}>
19 |       {children}
20 |     </AbsoluteFill>
21 |   );
22 | };
23 | 


--------------------------------------------------------------------------------
/src/SwitzerlandLogo.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | export const SwitzerlandLogo: React.FC = () => {
 4 |   return (
 5 |     <svg
 6 |       width="500"
 7 |       height="340"
 8 |       viewBox="0 0 500 340"
 9 |       fill="none"
10 |       style={{ height: 250 }}
11 |       xmlns="http://www.w3.org/2000/svg"
12 |     >
13 |       <path
14 |         d="M116.917 56.1719C128.142 53.1848 139.894 51.587 151.98 51.587V40.9952C139.209 40.9952 126.785 42.6779 114.902 45.7824L114.882 45.7237C114.38 45.8541 113.898 46.0237 113.402 46.1737C56.7063 61.6047 12.7807 110.096 5 170.026H44.1254C46.3494 160.054 50.3213 150.845 54.9519 142.693H66.6263V132.094L48.9582 132.088C43.8776 140.129 39.2144 149.339 35.999 159.454H17.6005C26.3595 119.944 52.2583 86.9231 86.7531 68.205C83.6421 74.2509 81.8877 81.0598 81.8877 88.2079C81.8877 98.0822 85.1748 107.193 90.6989 114.518V159.454H64.4088V170.052H101.297V124.555C108.243 129.218 116.598 131.951 125.579 131.951H151.98V121.353H125.579C107.33 121.353 92.486 106.483 92.486 88.2079C92.486 73.24 102.504 60.1699 116.917 56.1719ZM254.218 82.9642H125.442V93.5625H152.006C170.293 93.5625 185.157 108.38 185.157 126.603C185.157 144.871 170.293 159.741 152.006 159.741H141.375V170.339H152.006C160.536 170.339 168.506 167.874 175.25 163.635V198.736H185.842V154.295C192.031 146.749 195.762 137.103 195.762 126.603C195.762 113.402 189.846 101.565 180.539 93.5625H254.218V82.9642ZM208.577 131.951H249.946V121.353H208.577V131.951ZM207.893 154.184V198.736H218.491V164.783H236.041V154.184H207.893Z"
15 |         fill="white"
16 |       />
17 |       <path
18 |         d="M88.5923 209.171C64.5001 209.171 44.9081 228.75 44.9081 252.81C44.9081 276.928 64.5001 296.54 88.5923 296.54H115.241V285.948H88.5923C70.3438 285.948 55.4998 271.085 55.4998 252.81C55.4998 234.594 70.3438 219.769 88.5923 219.769H101.291V209.171H88.5923ZM218.491 219.926V209.328H141.375V256.038C134.129 250.716 125.181 247.56 115.502 247.56H90.5815V258.158H115.502C133.783 258.158 148.653 272.982 148.653 291.192C148.653 309.46 133.783 324.33 115.502 324.33V334.928C139.627 334.928 159.252 315.304 159.252 291.192C159.252 282.309 156.565 274.039 151.98 267.139V219.926H218.491ZM176.463 258.041H214.519V247.442H176.463V258.041ZM176.463 284.128V335H187.061V294.727H203.81V284.128H176.463ZM329.104 203.341C328.158 204.723 327.206 206.112 326.234 207.508C316.386 221.68 303.172 237.901 287.911 253.84C286.248 255.575 284.617 257.434 282.987 259.325C291.113 243.946 296.592 227.087 298.92 209.439H259.482C256.657 224.276 250.488 238.344 241.572 250.573V209.347H230.974V278.272L240.079 268.887C253.403 255.138 262.964 238.207 267.934 219.926H286.319C277.437 259.899 250.983 294.316 214.121 312.995C214.056 313.027 214.004 313.054 213.188 313.464V325.224C214.004 324.819 214.062 324.787 214.121 324.76C219.319 322.354 224.321 319.654 229.154 316.706C229.454 316.536 229.774 316.334 230.133 316.112C230.159 316.099 230.185 316.073 230.211 316.06C232.461 314.658 234.659 313.19 236.824 311.671C279.374 282.883 313.471 244.501 335.15 213.254C336.578 211.193 337.967 209.145 339.337 207.097L329.104 203.341Z"
19 |         fill="white"
20 |       />
21 |       <path
22 |         d="M494.912 258.947C494.886 258.673 494.867 258.399 494.841 258.125C493.106 239.785 476.983 226.05 458.513 227.355C450.615 227.909 443.323 231.131 437.63 236.472L445.606 243.568C449.415 240.275 454.15 238.285 459.257 237.92C472.177 237.007 483.427 246.777 484.34 259.697C484.784 265.952 482.762 272.011 478.659 276.746C474.538 281.487 468.831 284.344 462.57 284.787C457.933 285.113 453.413 284.07 449.447 281.839C449.415 281.82 449.382 281.8 449.35 281.781C448.6 281.35 447.876 280.861 447.165 280.346C444.765 278.546 442.234 276.361 439.612 273.895C416.492 219.946 392.641 178.851 369.149 152.476C378.612 133.203 384.58 117.537 387.763 108.328L378.149 103.619C375.351 111.726 369.925 126.205 361.303 144.199C350.842 133.888 340.472 126.551 330.291 122.39L326.273 132.199C347.672 140.945 381.182 170.046 421.318 257.212C417.333 251.76 413.159 245.068 409.011 240.242C397.454 226.826 384.358 211.617 370.303 197.484C359.366 186.488 347.32 180.807 335.671 175.322C326.938 171.207 318.701 167.32 311.044 161.352L310.907 161.248L310.77 161.15C303.968 156.526 299.918 148.862 299.944 140.645C299.963 133.666 303.498 127.333 307.242 120.629L312.134 111.837C318.166 100.998 320.651 96.4974 321.571 94.0255C323.175 89.9623 323.958 85.5535 323.847 81.0468C323.371 61.8004 309.336 48.3912 289.711 48.4499H232.741C250.631 39.3778 277.189 30.8862 305.07 32.0927C321.421 32.8036 329.267 36.5081 335.567 39.4821C339.845 41.504 343.883 43.4019 349.009 43.4019C360.246 43.4019 363.781 35.4581 365.673 31.1862L366.292 29.8296L366.39 29.647C367.029 28.2187 367.792 26.8556 368.666 25.5968C372.429 20.164 378.097 16.5182 384.599 15.3377C391.102 14.1573 397.682 15.5791 403.115 19.3422C408.555 23.112 412.2 28.7665 413.374 35.2755C414.561 41.7779 413.133 48.3586 409.37 53.7914C405.176 59.8438 399.319 63.8222 393.3 64.7092C388.506 65.4201 383.941 64.1679 380.067 61.0895C377.079 58.722 375.306 54.9197 375.442 51.1696C375.527 48.8673 376.336 46.702 377.764 44.7258L368.927 38.9082C366.442 42.4757 365.014 46.4998 364.851 50.7848C364.596 57.9394 367.818 64.8983 373.473 69.392C379.61 74.2639 387.202 76.3249 394.845 75.1966C396.737 74.9161 398.615 74.4335 400.448 73.7813C411.757 84.2556 427.462 104.441 433.41 116.279C435.19 119.631 435.745 123.27 435.053 126.903C434.251 131.116 431.858 134.762 428.31 137.175C424.768 139.588 420.49 140.475 416.27 139.673C412.559 138.969 409.376 137.012 407.055 134.279L398.609 140.756C402.483 145.51 407.955 148.882 414.294 150.082C421.292 151.413 428.381 149.945 434.271 145.941C440.16 141.93 444.132 135.877 445.469 128.879C446.591 122.938 445.652 116.729 442.821 111.407C436.28 98.3953 421.194 79.3511 410.107 68.3615C413.074 66.0136 415.781 63.1439 418.077 59.8242C423.457 52.0631 425.492 42.6714 423.81 33.3841C422.12 24.0903 416.916 16.016 409.148 10.6354C401.387 5.25475 392.002 3.21989 382.708 4.90908C373.414 6.59175 365.333 11.7963 359.953 19.564C358.707 21.3641 357.624 23.2946 356.718 25.3164C356.705 25.3099 355.994 26.8817 355.994 26.8817C354.116 31.0949 353.196 32.8102 349.009 32.8102C346.263 32.8102 343.811 31.6492 340.093 29.9013C333.31 26.6925 324.017 22.3097 305.533 21.5075C266.845 19.8249 230.302 35.6537 213.221 47.7455V59.0481H289.73C303.472 59.009 312.923 67.9572 313.249 81.3142C313.255 81.5098 313.255 81.7055 313.255 81.9012C313.255 84.7774 312.72 87.5818 311.677 90.2363C310.96 92.1472 307.568 98.2453 302.872 106.678L297.987 115.463C293.748 123.048 289.372 130.894 289.346 140.619V140.716C289.346 152.378 295.085 163.243 304.711 169.837C313.242 176.457 322.347 180.755 331.152 184.903C342.474 190.244 353.163 195.279 362.79 204.952C376.577 218.817 388.982 233.224 400.976 247.155C415.657 264.204 428.421 279.498 440.721 288.785C447.23 293.598 455.148 295.927 463.313 295.353C472.398 294.707 480.694 290.566 486.662 283.692C492.623 276.811 495.558 268.026 494.912 258.947ZM304.809 171.631C304.77 171.611 304.744 171.585 304.711 171.559C304.653 171.513 304.594 171.481 304.529 171.435L304.809 171.631Z"
23 |         fill="white"
24 |       />
25 |     </svg>
26 |   );
27 | };
28 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | import { registerRoot } from "remotion";
2 | import { RemotionRoot } from "./Root";
3 | 
4 | registerRoot(RemotionRoot);
5 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2018",
 4 |     "module": "commonjs",
 5 |     "jsx": "react-jsx",
 6 |     "outDir": "./dist",
 7 |     "strict": true,
 8 |     "noEmit": true,
 9 |     "lib": ["es2015"],
10 |     "esModuleInterop": true,
11 |     "skipLibCheck": true,
12 |     "forceConsistentCasingInFileNames": true,
13 |     "noUnusedLocals": true
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------