add xkcd and basic transitions

This commit is contained in:
Elizabeth Hunt 2024-02-01 22:11:05 -07:00
parent 2b2ed28e2d
commit d190846651
Signed by: simponic
GPG Key ID: 52B3774857EB24B1
12 changed files with 120 additions and 45 deletions

Binary file not shown.

BIN
public/img/me.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 149 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 752 KiB

BIN
public/img/xkcd.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

View File

@ -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");
}

View File

@ -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,
});

View File

@ -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<Node>();
view.add(
<Node ref={node}>
<Layout layout direction="column" textAlign="center" gap={80}>
<Txt fontFamily={"Fira Code"} fill={palette.text.hex}>
Compiling The Lambda Calculus {"=> λ"}
</Txt>
<Txt fontFamily={"Fira Code"} fill={palette.text.hex}>
Elizabeth Hunt (@simponic)
</Txt>
</Layout>
</Node>
);
yield* beginSlide("Title");
yield* node().opacity(0, 1);
yield* waitFor(1);
});

4
src/scenes/index.ts Normal file
View File

@ -0,0 +1,4 @@
import title from "./title?scene";
import me from "./me?scene";
export const scenes = [title, me];

View File

@ -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(
<Layout
layout
direction="row"
justifyContent="space-around"
alignItems="center"
gap={0}
>
<Img scale={0.5} src={me}></Img>
</Layout>
const img = createRef<Img>();
const node = createRef<Node>();
const layout = createRef<Layout>();
const src = createRef<Txt>();
yield view.add(
<>
<Layout
layout
ref={layout}
direction="column"
justifyContent="center"
gap={12}
alignItems="start"
y={-10}
>
<Node ref={node} opacity={0}>
<Txt fontFamily={theme.font} fill={theme.text.hex}>
Hello!
</Txt>
<Txt fontFamily={theme.font} fill={theme.text.hex}>
My name is Elizabeth{" "}
<Txt fontFamily={theme.font} fill={theme.teal.hex}>
(@simponic)
</Txt>
.
</Txt>
<Txt fontFamily={theme.font} fill={theme.text.hex}>
I love 😍
</Txt>
<Txt fontFamily={theme.font} fill={theme.text.hex}>
{"=>"} Common LISP
</Txt>
<Txt fontFamily={theme.font} fill={theme.text.hex}>
{"=>"}{" "}
<Txt fontFamily={theme.font} fill={theme.mauve.hex}>
Elixir
</Txt>
</Txt>
<Txt fontFamily={theme.font} fill={theme.text.hex}>
{"=>"} Functional Programming
</Txt>
</Node>
</Layout>
<Img y={-10} ref={img} src={me} width={10} alpha={0} radius={20} />{" "}
<Txt opacity={0} ref={src} fontFamily={theme.font} fill={theme.green.hex}>
git.simponic.xyz/simponic/compiling-the-lambda-calculus
</Txt>
</>
);
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");
});

36
src/scenes/title.tsx Normal file
View File

@ -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(
<>
<Layout
layout
direction="column"
textAlign="center"
alignItems="center"
gap={100}
>
<Txt fontFamily={theme.font} fill={theme.text.hex}>
Compiling The Lambda Calculus{" "}
<Txt fontFamily={theme.font} fill={theme.blue.hex}>
{"=> λ"}
</Txt>
</Txt>
<Img scale={1.4} src={xkcd}></Img>
<Txt
fontFamily={theme.font}
fill={theme.flamingo.hex}
fontStyle="italic"
fontSize={40}
>
#2453
</Txt>
</Layout>
</>
);
yield* beginSlide("Title");
});

View File

@ -1,5 +1,6 @@
/* https://raw.githubusercontent.com/catppuccin/palette/main/palette.json */
export const palette = {
export const theme = {
font: "JetBrains",
rosewater: {
hex: "#f5e0dc",
rgb: {