Snowfall video

videos/snowfall/.gitignore

@@ -0,0 +1,15 @@
+# Generated files
+node_modules
+output
+dist
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

videos/snowfall/package.json

@@ -0,0 +1,22 @@
+{
+ "name": "snowfall",
+ "private": true,
+ "version": "0.0.0",
+ "scripts": {
+ "start": "vite",
+ "serve": "vite",
+ "build": "tsc && vite build"
+ },
+ "dependencies": {
+ "@motion-canvas/core": "^3.13.0",
+ "@motion-canvas/2d": "^3.13.0",
+ "@motion-canvas/ffmpeg": "^1.1.0",
+ "components": "0.0.0"
+ },
+ "devDependencies": {
+ "@motion-canvas/ui": "^3.13.0",
+ "@motion-canvas/vite-plugin": "^3.13.0",
+ "typescript": "^5.2.2",
+ "vite": "^4.0.0"
+ }
+}

videos/snowfall/src/motion-canvas.d.ts

@@ -0,0 +1 @@
+/// <reference types="@motion-canvas/core/project" />

videos/snowfall/src/project.meta

@@ -0,0 +1,31 @@
+{
+ "version": 0,
+ "shared": {
+ "background": null,
+ "range": [
+ 0,
+ null
+ ],
+ "size": {
+ "x": 1920,
+ "y": 1080
+ },
+ "audioOffset": 0
+ },
+ "preview": {
+ "fps": 60,
+ "resolutionScale": 0.5
+ },
+ "rendering": {
+ "fps": 60,
+ "resolutionScale": 1,
+ "colorSpace": "srgb",
+ "exporter": {
+ "name": "@motion-canvas/ffmpeg",
+ "options": {
+ "fastStart": true,
+ "includeAudio": true
+ }
+ }
+ }
+}

videos/snowfall/src/project.ts

@@ -0,0 +1,9 @@
+import { makeProject } from '@motion-canvas/core';
+
+import example from './scenes/example?scene';
+import audio from './audio/audio.mp3'
+
+export default makeProject({
+ scenes: [example],
+ audio: audio,
+});

videos/snowfall/src/scenes/example.meta

@@ -0,0 +1,106 @@
+{
+ "version": 0,
+ "timeEvents": [
+ {
+ "name": "snowfall",
+ "targetTime": 0.330625576795146
+ },
+ {
+ "name": "template",
+ "targetTime": 14.849174012360864
+ },
+ {
+ "name": "bios",
+ "targetTime": 16.87376690431561
+ },
+ {
+ "name": "nix cli",
+ "targetTime": 18.354888801037475
+ },
+ {
+ "name": "audio",
+ "targetTime": 19.885732337325575
+ },
+ {
+ "name": "networking",
+ "targetTime": 20.577938536674868
+ },
+ {
+ "name": "nvidia",
+ "targetTime": 21.17212022031309
+ },
+ {
+ "name": "battery",
+ "targetTime": 22.12634515855331
+ },
+ {
+ "name": "remove icons",
+ "targetTime": 27.407018067421486
+ },
+ {
+ "name": "links",
+ "targetTime": 35.206061583257416
+ },
+ {
+ "name": "The Basics",
+ "targetTime": 38.41004034737296
+ },
+ {
+ "name": "directories",
+ "targetTime": 52.90736574947376
+ },
+ {
+ "name": "modules",
+ "targetTime": 66.59142054886144
+ },
+ {
+ "name": "module_code",
+ "targetTime": 79.75959567319543
+ },
+ {
+ "name": "packages",
+ "targetTime": 95.49697566697257
+ },
+ {
+ "name": "lib",
+ "targetTime": 104.12907685881585
+ },
+ {
+ "name": "homes",
+ "targetTime": 110.89374903563365
+ },
+ {
+ "name": "Getting help",
+ "targetTime": 127.813581266507
+ },
+ {
+ "name": "store_page",
+ "targetTime": 131.52710922516184
+ },
+ {
+ "name": "thanks",
+ "targetTime": 142.1180839020628
+ },
+ {
+ "name": "kin",
+ "targetTime": 143.8301625640646
+ },
+ {
+ "name": "aksh",
+ "targetTime": 147.12321339389484
+ },
+ {
+ "name": "lepage",
+ "targetTime": 150.10821178239055
+ },
+ {
+ "name": "thanksOut",
+ "targetTime": 154.90254498517882
+ },
+ {
+ "name": "end",
+ "targetTime": 164.69334217594403
+ }
+ ],
+ "seed": 1750582422
+}

videos/snowfall/src/scenes/example.tsx

@@ -0,0 +1,194 @@
+import { Icon, Img, Layout, Rect, Txt, makeScene2D } from '@motion-canvas/2d';
+import { createRef, waitFor, waitUntil } from '@motion-canvas/core';
+import { Colors, Logo, WhiteLabel, setupView, slideIn, slideOut } from 'components';
+
+import snowfall_logo from '../assets/lib.jpg';
+import system_structure_png from '../assets/system_structure.png';
+import module_structure_png from '../assets/module_structure.png';
+import package_structure_png from '../assets/package_structure.png';
+import module_code_png from '../assets/module_code.png';
+import lib_code_png from '../assets/lib_code.png';
+import store_png from '../assets/store.png';
+
+export default makeScene2D(function*(view) {
+ // Create your animations here
+
+ setupView(view);
+ const logoRef = createRef<Logo>();
+ view.add(<Logo ref={logoRef} />)
+ yield logoRef().animateToCorner();
+
+ yield* waitUntil("snowfall");
+ const snowfall = createRef<Img>();
+ yield view.add(<Img src={snowfall_logo} ref={snowfall} scale={0.2} radius={360} y={-2000} />)
+ yield* slideIn(snowfall)
+
+
+
+ yield* waitUntil("template");
+ yield* slideOut(snowfall, [0, 2000])
+
+ yield* waitUntil("bios");
+ const chip = createRef<Icon>();
+ yield* view.add(<Icon icon={"bx:bxs-microchip"} ref={chip} color={Colors.text} scale={25} x={0} y={0} opacity={0} />)
+ yield* chip().opacity(100, 0.3)
+
+ yield* waitUntil("nix cli");
+ const snowflake = createRef<Icon>();
+ yield* view.add(<Icon icon={"uil:snowflake"} ref={snowflake} color={Colors.blue} scale={25} x={0} y={0} opacity={0} />)
+ yield* chip().x(-400, 0.3)
+ yield* snowflake().opacity(100, 0.3)
+
+
+ yield* waitUntil("audio");
+ const audio = createRef<Icon>();
+ yield* view.add(<Icon icon={"mingcute:speaker-fill"} ref={audio} color={Colors.lavender} scale={22} x={0} y={0} opacity={0} />)
+ yield* snowflake().x(400, 0.3)
+ yield* audio().opacity(100, 0.3)
+
+ yield* waitUntil("networking");
+ const network = createRef<Icon>();
+ yield* view.add(<Icon icon={"lucide:network"} ref={network} color={Colors.maroon} scale={20} x={0} y={-350} opacity={0} />)
+ yield* network().opacity(100, 0.3)
+
+ yield* waitUntil("nvidia");
+ const nvidia = createRef<Icon>();
+ yield* view.add(<Icon icon={"bi:nvidia"} ref={nvidia} color={Colors.green} scale={20} x={0} y={350} opacity={0} />)
+ yield* nvidia().opacity(100, 0.3)
+
+ yield* waitUntil("battery");
+ const battery = createRef<Icon>();
+ yield* view.add(<Icon icon={"solar:battery-charge-minimalistic-bold"} ref={battery} color={Colors.peach} scale={20} x={250} y={350} opacity={0} />)
+ yield* nvidia().x(-250, 0.3)
+ yield* battery().opacity(100, 0.3)
+
+ yield* waitUntil("remove icons");
+
+ yield nvidia().y(2000, 1)
+ yield battery().y(2000, 1)
+
+ yield* waitFor(0.1);
+ yield chip().y(2000, 1)
+ yield snowflake().y(2000, 1)
+ yield audio().y(2000, 1)
+
+ yield* waitFor(0.1);
+ yield network().y(2000, 1)
+
+
+ yield* waitUntil("links")
+ const links = createRef<Txt>();
+ view.add(
+ <Txt
+ {...WhiteLabel}
+ ref={links}
+ fontSize={100}
+ y={0}
+ zIndex={12}
+ ></Txt>,
+ );
+ yield* links().text("github:jakehamilton/config", 0.7);
+ yield* waitFor(0.1);
+ yield* links().text("github:IogaMaster/dotfiles", 0.7);
+ yield* waitFor(0.2);
+ yield* links().text("", 0.7);
+
+ yield* waitUntil("The Basics");
+ yield* links().text("Building the Basics", 0.7);
+
+ yield* waitUntil("directories");
+ yield* links().y(-300, 0.7);
+ yield links().text("Systems", 0.7);
+
+ const system_structure = createRef<Img>();
+ yield view.add(<Img src={system_structure_png} ref={system_structure} scale={2} radius={25} y={1000} />)
+ yield* slideIn(system_structure)
+
+
+ yield* waitUntil("modules");
+ yield links().text("Modules", 0.7);
+ yield* slideOut(system_structure, [0, 1000])
+
+ const module_structure = createRef<Img>();
+ yield view.add(<Img src={module_structure_png} ref={module_structure} scale={2} radius={25} y={1000} />)
+ yield* slideIn(module_structure)
+
+
+
+ yield* waitUntil("module_code");
+ yield links().text("", 0.7);
+ yield* slideOut(module_structure, [0, 1000])
+
+ const module_code = createRef<Img>();
+ yield view.add(<Img src={module_code_png} ref={module_code} scale={1} radius={25} y={1000} />)
+ yield* slideIn(module_code)
+
+ yield* waitUntil("packages");
+ yield links().text("Packages", 0.7);
+ yield* slideOut(module_code, [0, 1000])
+
+ const package_structure = createRef<Img>();
+ yield view.add(<Img src={package_structure_png} ref={package_structure} scale={2} radius={25} y={1000} />)
+ yield* slideIn(package_structure)
+
+ yield* waitUntil("lib");
+ yield links().text("", 0.7);
+ yield* slideOut(package_structure, [0, 1000])
+
+ const lib_code = createRef<Img>();
+ yield view.add(<Img src={lib_code_png} ref={lib_code} scale={1.3} radius={25} y={1000} />)
+ yield* slideIn(lib_code)
+
+ yield* waitUntil("homes");
+ yield links().y(0, 0.7);
+ yield* slideOut(lib_code, [0, 1000])
+ yield links().text("A note on Homes", 0.7);
+
+ yield* waitUntil("Getting help");
+ yield links().text("Getting Help", 0.7);
+
+ yield* waitUntil("store_page");
+ yield* links().y(-350, 0.7);
+
+ const store = createRef<Img>();
+ yield view.add(<Img src={store_png} ref={store} scale={1.3} radius={25} y={1000} />)
+ yield* slideOut(store, [0, 100])
+
+
+ yield* waitUntil("thanks");
+ yield links().text("Thanks", 0.7);
+ yield* slideOut(store, [0, -1000])
+
+ yield* waitUntil("kin");
+ const names = createRef<Txt>();
+ view.add(
+ <Txt
+ {...WhiteLabel}
+ ref={names}
+ fontSize={100}
+ y={1000}
+ zIndex={12}
+ ></Txt>,
+ );
+ yield names().text("Kinzoku | $5/mo",);
+ yield* slideIn(names)
+
+ yield* waitUntil("aksh");
+ yield* slideOut(names, [0, 1000])
+ yield names().text("aksh1618 | $1/mo",);
+ yield* slideIn(names)
+
+
+ yield* waitUntil("lepage");
+ yield* slideOut(names, [0, 1000])
+ yield names().text("Gaétan Lepage | $3 one time",);
+ yield* slideIn(names)
+
+ yield* waitUntil("thanksOut");
+ yield slideOut(names, [0, 1000])
+ yield* waitFor(0.1);
+ yield* slideOut(links, [0, 1000])
+ yield* logoRef().animateToCenter();
+
+ yield* waitUntil("end");
+});

videos/snowfall/tsconfig.json

@@ -0,0 +1,4 @@
+{
+ "extends": "@motion-canvas/2d/tsconfig.project.json",
+ "include": ["src"]
+}