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
|
import { Img, Layout, Txt, makeScene2D } from "@motion-canvas/2d";
import {
Direction,
beginSlide,
createRef,
slideTransition,
} from "@motion-canvas/core";
import { theme } from "../theme";
const PROS = [
"readbility, reasoning",
"concurrency",
"no side effects",
"computers and math!",
];
const CONS = ["more computation", "higher learning curve"];
export default makeScene2D(function* (view) {
const pros = createRef<Txt>();
const cons = createRef<Txt>();
view.add(
<Layout direction="row" justifyContent="center" gap={300} layout>
<Layout direction="column" justifyContent="end">
<Txt fontSize={30} fontFamily={theme.font} fill={theme.green.hex}>
PROS :)
</Txt>
<Txt
ref={pros}
fontSize={30}
fontFamily={theme.font}
fill={theme.text.hex}
></Txt>
</Layout>
<Layout direction="column" justifyContent="start">
<Txt fontSize={30} fontFamily={theme.font} fill={theme.red.hex}>
CONS :(
</Txt>
<Txt
ref={cons}
fontSize={30}
fontFamily={theme.font}
fill={theme.text.hex}
></Txt>
</Layout>
</Layout>,
);
yield* slideTransition(Direction.Right);
yield* beginSlide("layout pros and cons");
for (const pro of PROS) {
yield* pros().text(pros().text() + "\n\n+ " + pro, 0.5);
yield* beginSlide("pro - " + pro);
}
for (const con of CONS) {
yield* cons().text(cons().text() + "\n\n- " + con, 0.5);
yield* beginSlide("con - " + con);
}
});
|
