add xkcd and basic transitions
This commit is contained in:
parent
2b2ed28e2d
commit
d190846651
BIN
public/fonts/JetBrainsMono-Regular.ttf
Normal file
BIN
public/fonts/JetBrainsMono-Regular.ttf
Normal file
Binary file not shown.
BIN
public/img/me.jpg
Normal file
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
BIN
public/img/xkcd.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 44 KiB |
@ -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");
|
||||||
|
}
|
||||||
|
@ -1,10 +1,7 @@
|
|||||||
import { makeProject } from "@motion-canvas/core";
|
import { makeProject } from "@motion-canvas/core";
|
||||||
|
import { scenes } from "./scenes";
|
||||||
import "./global.css"; // <- import the css
|
import "./global.css";
|
||||||
|
|
||||||
import example from "./scenes/example?scene";
|
|
||||||
import me from "./scenes/me?scene";
|
|
||||||
|
|
||||||
export default makeProject({
|
export default makeProject({
|
||||||
scenes: [example, me],
|
scenes,
|
||||||
});
|
});
|
||||||
|
@ -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
4
src/scenes/index.ts
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
import title from "./title?scene";
|
||||||
|
import me from "./me?scene";
|
||||||
|
|
||||||
|
export const scenes = [title, me];
|
@ -1,19 +1,74 @@
|
|||||||
import { Img, Txt, Layout, makeScene2D } from "@motion-canvas/2d";
|
import { Node, Img, Txt, Layout, makeScene2D } from "@motion-canvas/2d";
|
||||||
import { beginSlide, waitFor } from "@motion-canvas/core";
|
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) {
|
export default makeScene2D(function* (view) {
|
||||||
yield* beginSlide("Title");
|
const img = createRef<Img>();
|
||||||
view.add(
|
const node = createRef<Node>();
|
||||||
|
const layout = createRef<Layout>();
|
||||||
|
const src = createRef<Txt>();
|
||||||
|
|
||||||
|
yield view.add(
|
||||||
|
<>
|
||||||
<Layout
|
<Layout
|
||||||
layout
|
layout
|
||||||
direction="row"
|
ref={layout}
|
||||||
justifyContent="space-around"
|
direction="column"
|
||||||
alignItems="center"
|
justifyContent="center"
|
||||||
gap={0}
|
gap={12}
|
||||||
|
alignItems="start"
|
||||||
|
y={-10}
|
||||||
>
|
>
|
||||||
<Img scale={0.5} src={me}></Img>
|
<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>
|
</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
36
src/scenes/title.tsx
Normal 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");
|
||||||
|
});
|
@ -1,5 +1,6 @@
|
|||||||
/* https://raw.githubusercontent.com/catppuccin/palette/main/palette.json */
|
/* https://raw.githubusercontent.com/catppuccin/palette/main/palette.json */
|
||||||
export const palette = {
|
export const theme = {
|
||||||
|
font: "JetBrains",
|
||||||
rosewater: {
|
rosewater: {
|
||||||
hex: "#f5e0dc",
|
hex: "#f5e0dc",
|
||||||
rgb: {
|
rgb: {
|
Loading…
Reference in New Issue
Block a user