From d19084665195cb20e62ba77ab9cf46d800b3975b Mon Sep 17 00:00:00 2001 From: Lizzy Hunt Date: Thu, 1 Feb 2024 22:11:05 -0700 Subject: add xkcd and basic transitions --- src/global.css | 7 +- src/palette.ts | 367 ----------------------------------------------- src/project.ts | 9 +- src/scenes/example.meta | 5 - src/scenes/example.tsx | 23 --- src/scenes/index.ts | 4 + src/scenes/me.tsx | 83 +++++++++-- src/scenes/title.meta | 5 + src/scenes/title.tsx | 36 +++++ src/theme.ts | 368 ++++++++++++++++++++++++++++++++++++++++++++++++ 10 files changed, 491 insertions(+), 416 deletions(-) delete mode 100644 src/palette.ts delete mode 100644 src/scenes/example.meta delete mode 100644 src/scenes/example.tsx create mode 100644 src/scenes/index.ts create mode 100644 src/scenes/title.meta create mode 100644 src/scenes/title.tsx create mode 100644 src/theme.ts (limited to 'src') diff --git a/src/global.css b/src/global.css index b271252..cd3afe3 100644 --- a/src/global.css +++ b/src/global.css @@ -1 +1,6 @@ -@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap"); +@font-face { + font-family: "JetBrains"; + src: + local("JetBrains"), + url(public/fonts/JetBrainsMono-Regular.ttf) format("truetype"); +} diff --git a/src/palette.ts b/src/palette.ts deleted file mode 100644 index af1017b..0000000 --- a/src/palette.ts +++ /dev/null @@ -1,367 +0,0 @@ -/* https://raw.githubusercontent.com/catppuccin/palette/main/palette.json */ -export const palette = { - 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.ts b/src/project.ts index 82af284..b403dc5 100644 --- a/src/project.ts +++ b/src/project.ts @@ -1,10 +1,7 @@ import { makeProject } from "@motion-canvas/core"; - -import "./global.css"; // <- import the css - -import example from "./scenes/example?scene"; -import me from "./scenes/me?scene"; +import { scenes } from "./scenes"; +import "./global.css"; export default makeProject({ - scenes: [example, me], + scenes, }); diff --git a/src/scenes/example.meta b/src/scenes/example.meta deleted file mode 100644 index 011b988..0000000 --- a/src/scenes/example.meta +++ /dev/null @@ -1,5 +0,0 @@ -{ - "version": 0, - "timeEvents": [], - "seed": 3229939754 -} \ No newline at end of file diff --git a/src/scenes/example.tsx b/src/scenes/example.tsx deleted file mode 100644 index 8e38187..0000000 --- a/src/scenes/example.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { Node, Txt, Layout, makeScene2D } from "@motion-canvas/2d"; -import { beginSlide, waitFor, createRef } from "@motion-canvas/core"; -import { palette } from "../palette"; - -export default makeScene2D(function* (view) { - const node = createRef(); - - view.add( - - - - Compiling The Lambda Calculus {"=> λ"} - - - Elizabeth Hunt (@simponic) - - - - ); - yield* beginSlide("Title"); - yield* node().opacity(0, 1); - yield* waitFor(1); -}); diff --git a/src/scenes/index.ts b/src/scenes/index.ts new file mode 100644 index 0000000..9d08ec5 --- /dev/null +++ b/src/scenes/index.ts @@ -0,0 +1,4 @@ +import title from "./title?scene"; +import me from "./me?scene"; + +export const scenes = [title, me]; diff --git a/src/scenes/me.tsx b/src/scenes/me.tsx index 9d5740f..2e36605 100644 --- a/src/scenes/me.tsx +++ b/src/scenes/me.tsx @@ -1,19 +1,74 @@ -import { Img, Txt, Layout, makeScene2D } from "@motion-canvas/2d"; -import { beginSlide, waitFor } from "@motion-canvas/core"; +import { Node, Img, Txt, Layout, makeScene2D } from "@motion-canvas/2d"; +import { beginSlide, createRef, waitFor, all } from "@motion-canvas/core"; -import me from "../../public/img/me.png"; +import me from "../../public/img/me.jpg"; +import { theme } from "../theme"; export default makeScene2D(function* (view) { - yield* beginSlide("Title"); - view.add( - - - + const img = createRef(); + const node = createRef(); + const layout = createRef(); + const src = createRef(); + + yield view.add( + <> + + + + Hello! + + + My name is Elizabeth{" "} + + (@simponic) + + . + + + I love 😍 + + + {"=>"} Common LISP + + + {"=>"}{" "} + + Elixir + + + + {"=>"} Functional Programming + + + + {" "} + + git.simponic.xyz/simponic/compiling-the-lambda-calculus + + ); + + yield img().fill(img().getColorAtPoint(0)); + + const diff = 370; + yield* all( + img().size([450, 450], 1), + img().radius(50, 1), + img().alpha(1, 1), + img().position.x(-diff, 1), + node().opacity(1, 1), + layout().position.x(diff, 1), + src().opacity(1, 1), + src().position.y(275, 1) + ); + + yield* beginSlide("About Me"); }); diff --git a/src/scenes/title.meta b/src/scenes/title.meta new file mode 100644 index 0000000..011b988 --- /dev/null +++ b/src/scenes/title.meta @@ -0,0 +1,5 @@ +{ + "version": 0, + "timeEvents": [], + "seed": 3229939754 +} \ No newline at end of file diff --git a/src/scenes/title.tsx b/src/scenes/title.tsx new file mode 100644 index 0000000..775e9ec --- /dev/null +++ b/src/scenes/title.tsx @@ -0,0 +1,36 @@ +import { Img, Txt, Layout, makeScene2D } from "@motion-canvas/2d"; +import { beginSlide } from "@motion-canvas/core"; +import { theme } from "../theme"; + +import xkcd from "../../public/img/xkcd.png"; + +export default makeScene2D(function* (view) { + yield view.add( + <> + + + Compiling The Lambda Calculus{" "} + + {"=> λ"} + + + + + #2453 + + + + ); + yield* beginSlide("Title"); +}); diff --git a/src/theme.ts b/src/theme.ts new file mode 100644 index 0000000..77aa48e --- /dev/null +++ b/src/theme.ts @@ -0,0 +1,368 @@ +/* https://raw.githubusercontent.com/catppuccin/palette/main/palette.json */ +export const theme = { + font: "JetBrains", + 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, + }, +}; -- cgit v1.2.3-70-g09d2