initial commit

6 files changed, 1536 insertions, 0 deletions

diff --git a/src/motion-canvas.d.ts b/src/motion-canvas.d.ts
new file mode 100644
index 0000000..067c6a4
--- /dev/null
+++ b/src/motion-canvas.d.ts
@@ -0,0 +1 @@
+/// <reference types="@motion-canvas/core/project" />
diff --git a/src/palette.ts b/src/palette.ts
new file mode 100644
index 0000000..4315132
--- /dev/null
+++ b/src/palette.ts
@@ -0,0 +1,1483 @@
+/* https://raw.githubusercontent.com/catppuccin/palette/main/palette.json */
+export const palette = {
+  latte: {
+    name: "Latte",
+    dark: false,
+    colors: {
+      rosewater: {
+        hex: "#dc8a78",
+        rgb: {
+          r: 220,
+          g: 138,
+          b: 120,
+        },
+        hsl: {
+          h: 10.799999999999995,
+          s: 0.5882352941176472,
+          l: 0.6666666666666667,
+        },
+        accent: true,
+      },
+      flamingo: {
+        hex: "#dd7878",
+        rgb: {
+          r: 221,
+          g: 120,
+          b: 120,
+        },
+        hsl: {
+          h: 0,
+          s: 0.5976331360946746,
+          l: 0.6686274509803922,
+        },
+        accent: true,
+      },
+      pink: {
+        hex: "#ea76cb",
+        rgb: {
+          r: 234,
+          g: 118,
+          b: 203,
+        },
+        hsl: {
+          h: 316.0344827586207,
+          s: 0.7341772151898731,
+          l: 0.6901960784313725,
+        },
+        accent: true,
+      },
+      mauve: {
+        hex: "#8839ef",
+        rgb: {
+          r: 136,
+          g: 57,
+          b: 239,
+        },
+        hsl: {
+          h: 266.0439560439561,
+          s: 0.8504672897196262,
+          l: 0.5803921568627451,
+        },
+        accent: true,
+      },
+      red: {
+        hex: "#d20f39",
+        rgb: {
+          r: 210,
+          g: 15,
+          b: 57,
+        },
+        hsl: {
+          h: 347.0769230769231,
+          s: 0.8666666666666666,
+          l: 0.4411764705882353,
+        },
+        accent: true,
+      },
+      maroon: {
+        hex: "#e64553",
+        rgb: {
+          r: 230,
+          g: 69,
+          b: 83,
+        },
+        hsl: {
+          h: 354.78260869565213,
+          s: 0.76303317535545,
+          l: 0.5862745098039216,
+        },
+        accent: true,
+      },
+      peach: {
+        hex: "#fe640b",
+        rgb: {
+          r: 254,
+          g: 100,
+          b: 11,
+        },
+        hsl: {
+          h: 21.975308641975307,
+          s: 0.9918367346938776,
+          l: 0.5196078431372549,
+        },
+        accent: true,
+      },
+      yellow: {
+        hex: "#df8e1d",
+        rgb: {
+          r: 223,
+          g: 142,
+          b: 29,
+        },
+        hsl: {
+          h: 34.948453608247426,
+          s: 0.7698412698412698,
+          l: 0.49411764705882355,
+        },
+        accent: true,
+      },
+      green: {
+        hex: "#40a02b",
+        rgb: {
+          r: 64,
+          g: 160,
+          b: 43,
+        },
+        hsl: {
+          h: 109.23076923076923,
+          s: 0.5763546798029556,
+          l: 0.39803921568627454,
+        },
+        accent: true,
+      },
+      teal: {
+        hex: "#179299",
+        rgb: {
+          r: 23,
+          g: 146,
+          b: 153,
+        },
+        hsl: {
+          h: 183.23076923076923,
+          s: 0.7386363636363636,
+          l: 0.34509803921568627,
+        },
+        accent: true,
+      },
+      sky: {
+        hex: "#04a5e5",
+        rgb: {
+          r: 4,
+          g: 165,
+          b: 229,
+        },
+        hsl: {
+          h: 197.0666666666667,
+          s: 0.965665236051502,
+          l: 0.45686274509803926,
+        },
+        accent: true,
+      },
+      sapphire: {
+        hex: "#209fb5",
+        rgb: {
+          r: 32,
+          g: 159,
+          b: 181,
+        },
+        hsl: {
+          h: 188.85906040268458,
+          s: 0.6995305164319249,
+          l: 0.4176470588235294,
+        },
+        accent: true,
+      },
+      blue: {
+        hex: "#1e66f5",
+        rgb: {
+          r: 30,
+          g: 102,
+          b: 245,
+        },
+        hsl: {
+          h: 219.90697674418607,
+          s: 0.9148936170212768,
+          l: 0.5392156862745098,
+        },
+        accent: true,
+      },
+      lavender: {
+        hex: "#7287fd",
+        rgb: {
+          r: 114,
+          g: 135,
+          b: 253,
+        },
+        hsl: {
+          h: 230.93525179856115,
+          s: 0.9720279720279721,
+          l: 0.7196078431372549,
+        },
+        accent: true,
+      },
+      text: {
+        hex: "#4c4f69",
+        rgb: {
+          r: 76,
+          g: 79,
+          b: 105,
+        },
+        hsl: {
+          h: 233.79310344827587,
+          s: 0.16022099447513813,
+          l: 0.3549019607843137,
+        },
+        accent: false,
+      },
+      subtext1: {
+        hex: "#5c5f77",
+        rgb: {
+          r: 92,
+          g: 95,
+          b: 119,
+        },
+        hsl: {
+          h: 233.33333333333334,
+          s: 0.1279620853080569,
+          l: 0.4137254901960784,
+        },
+        accent: false,
+      },
+      subtext0: {
+        hex: "#6c6f85",
+        rgb: {
+          r: 108,
+          g: 111,
+          b: 133,
+        },
+        hsl: {
+          h: 232.79999999999998,
+          s: 0.10373443983402494,
+          l: 0.4725490196078431,
+        },
+        accent: false,
+      },
+      overlay2: {
+        hex: "#7c7f93",
+        rgb: {
+          r: 124,
+          g: 127,
+          b: 147,
+        },
+        hsl: {
+          h: 232.17391304347825,
+          s: 0.09623430962343092,
+          l: 0.5313725490196078,
+        },
+        accent: false,
+      },
+      overlay1: {
+        hex: "#8c8fa1",
+        rgb: {
+          r: 140,
+          g: 143,
+          b: 161,
+        },
+        hsl: {
+          h: 231.42857142857144,
+          s: 0.10047846889952144,
+          l: 0.5901960784313726,
+        },
+        accent: false,
+      },
+      overlay0: {
+        hex: "#9ca0b0",
+        rgb: {
+          r: 156,
+          g: 160,
+          b: 176,
+        },
+        hsl: {
+          h: 228.00000000000003,
+          s: 0.11235955056179768,
+          l: 0.6509803921568628,
+        },
+        accent: false,
+      },
+      surface2: {
+        hex: "#acb0be",
+        rgb: {
+          r: 172,
+          g: 176,
+          b: 190,
+        },
+        hsl: {
+          h: 226.6666666666667,
+          s: 0.12162162162162159,
+          l: 0.7098039215686275,
+        },
+        accent: false,
+      },
+      surface1: {
+        hex: "#bcc0cc",
+        rgb: {
+          r: 188,
+          g: 192,
+          b: 204,
+        },
+        hsl: {
+          h: 225.00000000000003,
+          s: 0.13559322033898308,
+          l: 0.7686274509803922,
+        },
+        accent: false,
+      },
+      surface0: {
+        hex: "#ccd0da",
+        rgb: {
+          r: 204,
+          g: 208,
+          b: 218,
+        },
+        hsl: {
+          h: 222.85714285714292,
+          s: 0.1590909090909089,
+          l: 0.8274509803921568,
+        },
+        accent: false,
+      },
+      base: {
+        hex: "#eff1f5",
+        rgb: {
+          r: 239,
+          g: 241,
+          b: 245,
+        },
+        hsl: {
+          h: 220.00000000000009,
+          s: 0.23076923076923136,
+          l: 0.9490196078431372,
+        },
+        accent: false,
+      },
+      mantle: {
+        hex: "#e6e9ef",
+        rgb: {
+          r: 230,
+          g: 233,
+          b: 239,
+        },
+        hsl: {
+          h: 220.00000000000006,
+          s: 0.21951219512195116,
+          l: 0.919607843137255,
+        },
+        accent: false,
+      },
+      crust: {
+        hex: "#dce0e8",
+        rgb: {
+          r: 220,
+          g: 224,
+          b: 232,
+        },
+        hsl: {
+          h: 220.00000000000006,
+          s: 0.20689655172413762,
+          l: 0.8862745098039215,
+        },
+        accent: false,
+      },
+    },
+  },
+  frappe: {
+    name: "Frappé",
+    dark: true,
+    colors: {
+      rosewater: {
+        hex: "#f2d5cf",
+        rgb: {
+          r: 242,
+          g: 213,
+          b: 207,
+        },
+        hsl: {
+          h: 10.2857142857143,
+          s: 0.5737704918032784,
+          l: 0.8803921568627451,
+        },
+        accent: true,
+      },
+      flamingo: {
+        hex: "#eebebe",
+        rgb: {
+          r: 238,
+          g: 190,
+          b: 190,
+        },
+        hsl: {
+          h: 0,
+          s: 0.5853658536585367,
+          l: 0.8392156862745098,
+        },
+        accent: true,
+      },
+      pink: {
+        hex: "#f4b8e4",
+        rgb: {
+          r: 244,
+          g: 184,
+          b: 228,
+        },
+        hsl: {
+          h: 316,
+          s: 0.7317073170731713,
+          l: 0.8392156862745098,
+        },
+        accent: true,
+      },
+      mauve: {
+        hex: "#ca9ee6",
+        rgb: {
+          r: 202,
+          g: 158,
+          b: 230,
+        },
+        hsl: {
+          h: 276.66666666666663,
+          s: 0.5901639344262294,
+          l: 0.7607843137254902,
+        },
+        accent: true,
+      },
+      red: {
+        hex: "#e78284",
+        rgb: {
+          r: 231,
+          g: 130,
+          b: 132,
+        },
+        hsl: {
+          h: 358.8118811881188,
+          s: 0.6778523489932885,
+          l: 0.7078431372549019,
+        },
+        accent: true,
+      },
+      maroon: {
+        hex: "#ea999c",
+        rgb: {
+          r: 234,
+          g: 153,
+          b: 156,
+        },
+        hsl: {
+          h: 357.77777777777777,
+          s: 0.6585365853658534,
+          l: 0.7588235294117647,
+        },
+        accent: true,
+      },
+      peach: {
+        hex: "#ef9f76",
+        rgb: {
+          r: 239,
+          g: 159,
+          b: 118,
+        },
+        hsl: {
+          h: 20.33057851239669,
+          s: 0.7908496732026143,
+          l: 0.7,
+        },
+        accent: true,
+      },
+      yellow: {
+        hex: "#e5c890",
+        rgb: {
+          r: 229,
+          g: 200,
+          b: 144,
+        },
+        hsl: {
+          h: 39.52941176470588,
+          s: 0.6204379562043796,
+          l: 0.7313725490196079,
+        },
+        accent: true,
+      },
+      green: {
+        hex: "#a6d189",
+        rgb: {
+          r: 166,
+          g: 209,
+          b: 137,
+        },
+        hsl: {
+          h: 95.83333333333331,
+          s: 0.4390243902439024,
+          l: 0.6784313725490196,
+        },
+        accent: true,
+      },
+      teal: {
+        hex: "#81c8be",
+        rgb: {
+          r: 129,
+          g: 200,
+          b: 190,
+        },
+        hsl: {
+          h: 171.5492957746479,
+          s: 0.3922651933701657,
+          l: 0.6450980392156862,
+        },
+        accent: true,
+      },
+      sky: {
+        hex: "#99d1db",
+        rgb: {
+          r: 153,
+          g: 209,
+          b: 219,
+        },
+        hsl: {
+          h: 189.09090909090907,
+          s: 0.47826086956521735,
+          l: 0.7294117647058823,
+        },
+        accent: true,
+      },
+      sapphire: {
+        hex: "#85c1dc",
+        rgb: {
+          r: 133,
+          g: 193,
+          b: 220,
+        },
+        hsl: {
+          h: 198.62068965517244,
+          s: 0.5541401273885351,
+          l: 0.692156862745098,
+        },
+        accent: true,
+      },
+      blue: {
+        hex: "#8caaee",
+        rgb: {
+          r: 140,
+          g: 170,
+          b: 238,
+        },
+        hsl: {
+          h: 221.6326530612245,
+          s: 0.7424242424242424,
+          l: 0.7411764705882353,
+        },
+        accent: true,
+      },
+      lavender: {
+        hex: "#babbf1",
+        rgb: {
+          r: 186,
+          g: 187,
+          b: 241,
+        },
+        hsl: {
+          h: 238.90909090909093,
+          s: 0.6626506024096385,
+          l: 0.8372549019607842,
+        },
+        accent: true,
+      },
+      text: {
+        hex: "#c6d0f5",
+        rgb: {
+          r: 198,
+          g: 208,
+          b: 245,
+        },
+        hsl: {
+          h: 227.2340425531915,
+          s: 0.7014925373134333,
+          l: 0.8686274509803922,
+        },
+        accent: false,
+      },
+      subtext1: {
+        hex: "#b5bfe2",
+        rgb: {
+          r: 181,
+          g: 191,
+          b: 226,
+        },
+        hsl: {
+          h: 226.66666666666669,
+          s: 0.43689320388349495,
+          l: 0.7980392156862746,
+        },
+        accent: false,
+      },
+      subtext0: {
+        hex: "#a5adce",
+        rgb: {
+          r: 165,
+          g: 173,
+          b: 206,
+        },
+        hsl: {
+          h: 228.29268292682926,
+          s: 0.2949640287769784,
+          l: 0.7274509803921569,
+        },
+        accent: false,
+      },
+      overlay2: {
+        hex: "#949cbb",
+        rgb: {
+          r: 148,
+          g: 156,
+          b: 187,
+        },
+        hsl: {
+          h: 227.69230769230768,
+          s: 0.22285714285714275,
+          l: 0.6568627450980392,
+        },
+        accent: false,
+      },
+      overlay1: {
+        hex: "#838ba7",
+        rgb: {
+          r: 131,
+          g: 139,
+          b: 167,
+        },
+        hsl: {
+          h: 226.66666666666669,
+          s: 0.16981132075471703,
+          l: 0.584313725490196,
+        },
+        accent: false,
+      },
+      overlay0: {
+        hex: "#737994",
+        rgb: {
+          r: 115,
+          g: 121,
+          b: 148,
+        },
+        hsl: {
+          h: 229.0909090909091,
+          s: 0.13360323886639683,
+          l: 0.515686274509804,
+        },
+        accent: false,
+      },
+      surface2: {
+        hex: "#626880",
+        rgb: {
+          r: 98,
+          g: 104,
+          b: 128,
+        },
+        hsl: {
+          h: 228.00000000000003,
+          s: 0.1327433628318584,
+          l: 0.44313725490196076,
+        },
+        accent: false,
+      },
+      surface1: {
+        hex: "#51576d",
+        rgb: {
+          r: 81,
+          g: 87,
+          b: 109,
+        },
+        hsl: {
+          h: 227.14285714285714,
+          s: 0.14736842105263157,
+          l: 0.37254901960784315,
+        },
+        accent: false,
+      },
+      surface0: {
+        hex: "#414559",
+        rgb: {
+          r: 65,
+          g: 69,
+          b: 89,
+        },
+        hsl: {
+          h: 230.00000000000003,
+          s: 0.15584415584415584,
+          l: 0.30196078431372547,
+        },
+        accent: false,
+      },
+      base: {
+        hex: "#303446",
+        rgb: {
+          r: 48,
+          g: 52,
+          b: 70,
+        },
+        hsl: {
+          h: 229.0909090909091,
+          s: 0.18644067796610175,
+          l: 0.23137254901960785,
+        },
+        accent: false,
+      },
+      mantle: {
+        hex: "#292c3c",
+        rgb: {
+          r: 41,
+          g: 44,
+          b: 60,
+        },
+        hsl: {
+          h: 230.52631578947367,
+          s: 0.18811881188118806,
+          l: 0.19803921568627453,
+        },
+        accent: false,
+      },
+      crust: {
+        hex: "#232634",
+        rgb: {
+          r: 35,
+          g: 38,
+          b: 52,
+        },
+        hsl: {
+          h: 229.41176470588238,
+          s: 0.19540229885057467,
+          l: 0.17058823529411765,
+        },
+        accent: false,
+      },
+    },
+  },
+  macchiato: {
+    name: "Macchiato",
+    dark: true,
+    colors: {
+      rosewater: {
+        hex: "#f4dbd6",
+        rgb: {
+          r: 244,
+          g: 219,
+          b: 214,
+        },
+        hsl: {
+          h: 9.999999999999963,
+          s: 0.5769230769230775,
+          l: 0.8980392156862745,
+        },
+        accent: true,
+      },
+      flamingo: {
+        hex: "#f0c6c6",
+        rgb: {
+          r: 240,
+          g: 198,
+          b: 198,
+        },
+        hsl: {
+          h: 0,
+          s: 0.5833333333333333,
+          l: 0.8588235294117648,
+        },
+        accent: true,
+      },
+      pink: {
+        hex: "#f5bde6",
+        rgb: {
+          r: 245,
+          g: 189,
+          b: 230,
+        },
+        hsl: {
+          h: 316.0714285714286,
+          s: 0.7368421052631583,
+          l: 0.8509803921568628,
+        },
+        accent: true,
+      },
+      mauve: {
+        hex: "#c6a0f6",
+        rgb: {
+          r: 198,
+          g: 160,
+          b: 246,
+        },
+        hsl: {
+          h: 266.51162790697674,
+          s: 0.8269230769230772,
+          l: 0.7960784313725491,
+        },
+        accent: true,
+      },
+      red: {
+        hex: "#ed8796",
+        rgb: {
+          r: 237,
+          g: 135,
+          b: 150,
+        },
+        hsl: {
+          h: 351.1764705882353,
+          s: 0.7391304347826088,
+          l: 0.7294117647058824,
+        },
+        accent: true,
+      },
+      maroon: {
+        hex: "#ee99a0",
+        rgb: {
+          r: 238,
+          g: 153,
+          b: 160,
+        },
+        hsl: {
+          h: 355.05882352941177,
+          s: 0.7142857142857143,
+          l: 0.7666666666666666,
+        },
+        accent: true,
+      },
+      peach: {
+        hex: "#f5a97f",
+        rgb: {
+          r: 245,
+          g: 169,
+          b: 127,
+        },
+        hsl: {
+          h: 21.355932203389827,
+          s: 0.8550724637681162,
+          l: 0.7294117647058824,
+        },
+        accent: true,
+      },
+      yellow: {
+        hex: "#eed49f",
+        rgb: {
+          r: 238,
+          g: 212,
+          b: 159,
+        },
+        hsl: {
+          h: 40.253164556962034,
+          s: 0.6991150442477877,
+          l: 0.7784313725490196,
+        },
+        accent: true,
+      },
+      green: {
+        hex: "#a6da95",
+        rgb: {
+          r: 166,
+          g: 218,
+          b: 149,
+        },
+        hsl: {
+          h: 105.21739130434783,
+          s: 0.4825174825174825,
+          l: 0.7196078431372549,
+        },
+        accent: true,
+      },
+      teal: {
+        hex: "#8bd5ca",
+        rgb: {
+          r: 139,
+          g: 213,
+          b: 202,
+        },
+        hsl: {
+          h: 171.08108108108107,
+          s: 0.46835443037974706,
+          l: 0.6901960784313725,
+        },
+        accent: true,
+      },
+      sky: {
+        hex: "#91d7e3",
+        rgb: {
+          r: 145,
+          g: 215,
+          b: 227,
+        },
+        hsl: {
+          h: 188.78048780487802,
+          s: 0.5942028985507245,
+          l: 0.7294117647058823,
+        },
+        accent: true,
+      },
+      sapphire: {
+        hex: "#7dc4e4",
+        rgb: {
+          r: 125,
+          g: 196,
+          b: 228,
+        },
+        hsl: {
+          h: 198.64077669902912,
+          s: 0.6560509554140128,
+          l: 0.692156862745098,
+        },
+        accent: true,
+      },
+      blue: {
+        hex: "#8aadf4",
+        rgb: {
+          r: 138,
+          g: 173,
+          b: 244,
+        },
+        hsl: {
+          h: 220.188679245283,
+          s: 0.8281250000000003,
+          l: 0.7490196078431373,
+        },
+        accent: true,
+      },
+      lavender: {
+        hex: "#b7bdf8",
+        rgb: {
+          r: 183,
+          g: 189,
+          b: 248,
+        },
+        hsl: {
+          h: 234.46153846153848,
+          s: 0.8227848101265824,
+          l: 0.8450980392156863,
+        },
+        accent: true,
+      },
+      text: {
+        hex: "#cad3f5",
+        rgb: {
+          r: 202,
+          g: 211,
+          b: 245,
+        },
+        hsl: {
+          h: 227.4418604651163,
+          s: 0.6825396825396831,
+          l: 0.8764705882352941,
+        },
+        accent: false,
+      },
+      subtext1: {
+        hex: "#b8c0e0",
+        rgb: {
+          r: 184,
+          g: 192,
+          b: 224,
+        },
+        hsl: {
+          h: 228,
+          s: 0.39215686274509803,
+          l: 0.8,
+        },
+        accent: false,
+      },
+      subtext0: {
+        hex: "#a5adcb",
+        rgb: {
+          r: 165,
+          g: 173,
+          b: 203,
+        },
+        hsl: {
+          h: 227.36842105263156,
+          s: 0.2676056338028167,
+          l: 0.7215686274509804,
+        },
+        accent: false,
+      },
+      overlay2: {
+        hex: "#939ab7",
+        rgb: {
+          r: 147,
+          g: 154,
+          b: 183,
+        },
+        hsl: {
+          h: 228.33333333333331,
+          s: 0.2000000000000001,
+          l: 0.6470588235294117,
+        },
+        accent: false,
+      },
+      overlay1: {
+        hex: "#8087a2",
+        rgb: {
+          r: 128,
+          g: 135,
+          b: 162,
+        },
+        hsl: {
+          h: 227.6470588235294,
+          s: 0.1545454545454545,
+          l: 0.5686274509803921,
+        },
+        accent: false,
+      },
+      overlay0: {
+        hex: "#6e738d",
+        rgb: {
+          r: 110,
+          g: 115,
+          b: 141,
+        },
+        hsl: {
+          h: 230.32258064516128,
+          s: 0.12350597609561753,
+          l: 0.49215686274509807,
+        },
+        accent: false,
+      },
+      surface2: {
+        hex: "#5b6078",
+        rgb: {
+          r: 91,
+          g: 96,
+          b: 120,
+        },
+        hsl: {
+          h: 229.65517241379308,
+          s: 0.13744075829383887,
+          l: 0.4137254901960784,
+        },
+        accent: false,
+      },
+      surface1: {
+        hex: "#494d64",
+        rgb: {
+          r: 73,
+          g: 77,
+          b: 100,
+        },
+        hsl: {
+          h: 231.11111111111114,
+          s: 0.15606936416184972,
+          l: 0.3392156862745098,
+        },
+        accent: false,
+      },
+      surface0: {
+        hex: "#363a4f",
+        rgb: {
+          r: 54,
+          g: 58,
+          b: 79,
+        },
+        hsl: {
+          h: 230.4,
+          s: 0.1879699248120301,
+          l: 0.2607843137254902,
+        },
+        accent: false,
+      },
+      base: {
+        hex: "#24273a",
+        rgb: {
+          r: 36,
+          g: 39,
+          b: 58,
+        },
+        hsl: {
+          h: 231.8181818181818,
+          s: 0.23404255319148934,
+          l: 0.1843137254901961,
+        },
+        accent: false,
+      },
+      mantle: {
+        hex: "#1e2030",
+        rgb: {
+          r: 30,
+          g: 32,
+          b: 48,
+        },
+        hsl: {
+          h: 233.33333333333334,
+          s: 0.23076923076923075,
+          l: 0.15294117647058825,
+        },
+        accent: false,
+      },
+      crust: {
+        hex: "#181926",
+        rgb: {
+          r: 24,
+          g: 25,
+          b: 38,
+        },
+        hsl: {
+          h: 235.71428571428572,
+          s: 0.22580645161290322,
+          l: 0.12156862745098039,
+        },
+        accent: false,
+      },
+    },
+  },
+  mocha: {
+    name: "Mocha",
+    dark: true,
+    colors: {
+      rosewater: {
+        hex: "#f5e0dc",
+        rgb: {
+          r: 245,
+          g: 224,
+          b: 220,
+        },
+        hsl: {
+          h: 9.599999999999968,
+          s: 0.555555555555556,
+          l: 0.911764705882353,
+        },
+        accent: true,
+      },
+      flamingo: {
+        hex: "#f2cdcd",
+        rgb: {
+          r: 242,
+          g: 205,
+          b: 205,
+        },
+        hsl: {
+          h: 0,
+          s: 0.587301587301587,
+          l: 0.8764705882352941,
+        },
+        accent: true,
+      },
+      pink: {
+        hex: "#f5c2e7",
+        rgb: {
+          r: 245,
+          g: 194,
+          b: 231,
+        },
+        hsl: {
+          h: 316.4705882352941,
+          s: 0.7183098591549301,
+          l: 0.8607843137254902,
+        },
+        accent: true,
+      },
+      mauve: {
+        hex: "#cba6f7",
+        rgb: {
+          r: 203,
+          g: 166,
+          b: 247,
+        },
+        hsl: {
+          h: 267.4074074074074,
+          s: 0.8350515463917528,
+          l: 0.8098039215686275,
+        },
+        accent: true,
+      },
+      red: {
+        hex: "#f38ba8",
+        rgb: {
+          r: 243,
+          g: 139,
+          b: 168,
+        },
+        hsl: {
+          h: 343.2692307692308,
+          s: 0.8124999999999998,
+          l: 0.7490196078431373,
+        },
+        accent: true,
+      },
+      maroon: {
+        hex: "#eba0ac",
+        rgb: {
+          r: 235,
+          g: 160,
+          b: 172,
+        },
+        hsl: {
+          h: 350.4,
+          s: 0.6521739130434779,
+          l: 0.7745098039215685,
+        },
+        accent: true,
+      },
+      peach: {
+        hex: "#fab387",
+        rgb: {
+          r: 250,
+          g: 179,
+          b: 135,
+        },
+        hsl: {
+          h: 22.95652173913043,
+          s: 0.92,
+          l: 0.7549019607843137,
+        },
+        accent: true,
+      },
+      yellow: {
+        hex: "#f9e2af",
+        rgb: {
+          r: 249,
+          g: 226,
+          b: 175,
+        },
+        hsl: {
+          h: 41.35135135135135,
+          s: 0.8604651162790699,
+          l: 0.8313725490196078,
+        },
+        accent: true,
+      },
+      green: {
+        hex: "#a6e3a1",
+        rgb: {
+          r: 166,
+          g: 227,
+          b: 161,
+        },
+        hsl: {
+          h: 115.45454545454544,
+          s: 0.5409836065573769,
+          l: 0.7607843137254902,
+        },
+        accent: true,
+      },
+      teal: {
+        hex: "#94e2d5",
+        rgb: {
+          r: 148,
+          g: 226,
+          b: 213,
+        },
+        hsl: {
+          h: 170.00000000000003,
+          s: 0.5735294117647057,
+          l: 0.7333333333333334,
+        },
+        accent: true,
+      },
+      sky: {
+        hex: "#89dceb",
+        rgb: {
+          r: 137,
+          g: 220,
+          b: 235,
+        },
+        hsl: {
+          h: 189.18367346938774,
+          s: 0.7101449275362316,
+          l: 0.7294117647058823,
+        },
+        accent: true,
+      },
+      sapphire: {
+        hex: "#74c7ec",
+        rgb: {
+          r: 116,
+          g: 199,
+          b: 236,
+        },
+        hsl: {
+          h: 198.5,
+          s: 0.759493670886076,
+          l: 0.6901960784313725,
+        },
+        accent: true,
+      },
+      blue: {
+        hex: "#89b4fa",
+        rgb: {
+          r: 137,
+          g: 180,
+          b: 250,
+        },
+        hsl: {
+          h: 217.1681415929203,
+          s: 0.9186991869918699,
+          l: 0.7588235294117647,
+        },
+        accent: true,
+      },
+      lavender: {
+        hex: "#b4befe",
+        rgb: {
+          r: 180,
+          g: 190,
+          b: 254,
+        },
+        hsl: {
+          h: 231.89189189189187,
+          s: 0.9736842105263159,
+          l: 0.8509803921568628,
+        },
+        accent: true,
+      },
+      text: {
+        hex: "#cdd6f4",
+        rgb: {
+          r: 205,
+          g: 214,
+          b: 244,
+        },
+        hsl: {
+          h: 226.15384615384616,
+          s: 0.6393442622950825,
+          l: 0.8803921568627451,
+        },
+        accent: false,
+      },
+      subtext1: {
+        hex: "#bac2de",
+        rgb: {
+          r: 186,
+          g: 194,
+          b: 222,
+        },
+        hsl: {
+          h: 226.66666666666669,
+          s: 0.35294117647058837,
+          l: 0.8,
+        },
+        accent: false,
+      },
+      subtext0: {
+        hex: "#a6adc8",
+        rgb: {
+          r: 166,
+          g: 173,
+          b: 200,
+        },
+        hsl: {
+          h: 227.6470588235294,
+          s: 0.23611111111111102,
+          l: 0.7176470588235294,
+        },
+        accent: false,
+      },
+      overlay2: {
+        hex: "#9399b2",
+        rgb: {
+          r: 147,
+          g: 153,
+          b: 178,
+        },
+        hsl: {
+          h: 228.38709677419354,
+          s: 0.16756756756756758,
+          l: 0.6372549019607843,
+        },
+        accent: false,
+      },
+      overlay1: {
+        hex: "#7f849c",
+        rgb: {
+          r: 127,
+          g: 132,
+          b: 156,
+        },
+        hsl: {
+          h: 229.65517241379308,
+          s: 0.12775330396475776,
+          l: 0.5549019607843138,
+        },
+        accent: false,
+      },
+      overlay0: {
+        hex: "#6c7086",
+        rgb: {
+          r: 108,
+          g: 112,
+          b: 134,
+        },
+        hsl: {
+          h: 230.7692307692308,
+          s: 0.10743801652892565,
+          l: 0.4745098039215686,
+        },
+        accent: false,
+      },
+      surface2: {
+        hex: "#585b70",
+        rgb: {
+          r: 88,
+          g: 91,
+          b: 112,
+        },
+        hsl: {
+          h: 232.5,
+          s: 0.12,
+          l: 0.39215686274509803,
+        },
+        accent: false,
+      },
+      surface1: {
+        hex: "#45475a",
+        rgb: {
+          r: 69,
+          g: 71,
+          b: 90,
+        },
+        hsl: {
+          h: 234.2857142857143,
+          s: 0.13207547169811326,
+          l: 0.31176470588235294,
+        },
+        accent: false,
+      },
+      surface0: {
+        hex: "#313244",
+        rgb: {
+          r: 49,
+          g: 50,
+          b: 68,
+        },
+        hsl: {
+          h: 236.84210526315792,
+          s: 0.16239316239316234,
+          l: 0.22941176470588237,
+        },
+        accent: false,
+      },
+      base: {
+        hex: "#1e1e2e",
+        rgb: {
+          r: 30,
+          g: 30,
+          b: 46,
+        },
+        hsl: {
+          h: 240,
+          s: 0.21052631578947367,
+          l: 0.14901960784313725,
+        },
+        accent: false,
+      },
+      mantle: {
+        hex: "#181825",
+        rgb: {
+          r: 24,
+          g: 24,
+          b: 37,
+        },
+        hsl: {
+          h: 240,
+          s: 0.2131147540983607,
+          l: 0.11960784313725491,
+        },
+        accent: false,
+      },
+      crust: {
+        hex: "#11111b",
+        rgb: {
+          r: 17,
+          g: 17,
+          b: 27,
+        },
+        hsl: {
+          h: 240,
+          s: 0.22727272727272727,
+          l: 0.08627450980392157,
+        },
+        accent: false,
+      },
+    },
+  },
+};
diff --git a/src/project.meta b/src/project.meta
new file mode 100644
index 0000000..499e306
--- /dev/null
+++ b/src/project.meta
@@ -0,0 +1,32 @@
+{
+  "version": 0,
+  "shared": {
+    "background": null,
+    "range": [
+      0,
+      null
+    ],
+    "size": {
+      "x": 1920,
+      "y": 1080
+    },
+    "audioOffset": 0
+  },
+  "preview": {
+    "fps": 30,
+    "resolutionScale": 1
+  },
+  "rendering": {
+    "fps": 60,
+    "resolutionScale": 1,
+    "colorSpace": "srgb",
+    "exporter": {
+      "name": "@motion-canvas/core/image-sequence",
+      "options": {
+        "fileType": "image/png",
+        "quality": 100,
+        "groupByScene": false
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/project.ts b/src/project.ts
new file mode 100644
index 0000000..ecfbbeb
--- /dev/null
+++ b/src/project.ts
@@ -0,0 +1,7 @@
+import {makeProject} from '@motion-canvas/core';
+
+import example from './scenes/example?scene';
+
+export default makeProject({
+  scenes: [example],
+});
diff --git a/src/scenes/example.meta b/src/scenes/example.meta
new file mode 100644
index 0000000..011b988
--- /dev/null
+++ b/src/scenes/example.meta
@@ -0,0 +1,5 @@
+{
+  "version": 0,
+  "timeEvents": [],
+  "seed": 3229939754
+}
\ No newline at end of file
diff --git a/src/scenes/example.tsx b/src/scenes/example.tsx
new file mode 100644
index 0000000..3e35184
--- /dev/null
+++ b/src/scenes/example.tsx
@@ -0,0 +1,8 @@
+import { makeScene2D } from "@motion-canvas/2d";
+import { waitFor } from "@motion-canvas/core";
+
+export default makeScene2D(function* (view) {
+  // Create your animations here
+
+  yield* waitFor(5);
+});