1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
import { Node, Img, Txt, Layout, makeScene2D } from "@motion-canvas/2d";
import {
beginSlide,
createRef,
waitFor,
all,
fadeTransition,
} from "@motion-canvas/core";
import me from "../../public/img/me.jpg";
import { theme } from "../theme";
export default makeScene2D(function* (view) {
const img = createRef<Img>();
const node = createRef<Node>();
const layout = createRef<Layout>();
const src = createRef<Txt>();
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}>
{"=>"} Elixir
</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");
});
|
