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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
import { Layout, Txt, makeScene2D } from "@motion-canvas/2d";
import {
Direction,
all,
beginSlide,
createRef,
makeRef,
slideTransition,
waitFor,
} from "@motion-canvas/core";
import { theme } from "../theme";
import { PEOPLE, Person } from "../components/person";
import { CardI, birthdayCardsFor } from "./birthday_letters";
export default makeScene2D(function* (view) {
const date = createRef<Txt>();
const people: Person[] = [];
const peopleLayout: Layout[] = [];
const peopleText: Txt[] = [];
view.add(
<Layout direction="column" gap={15} layout>
<Txt
fontSize={30}
fontFamily={theme.font}
fill={theme.text.hex}
ref={date}
/>
<Layout direction="row" gap={15}>
{PEOPLE.map((person, i) => (
<Layout
ref={makeRef(peopleLayout, i)}
alignItems="center"
direction="column"
gap={100}
>
<Person ref={makeRef(people, i)} person={person} />
<Txt
textAlign="center"
ref={makeRef(peopleText, i)}
fontSize={0}
fontFamily={theme.font}
fill={theme.text.hex}
/>
</Layout>
))}
</Layout>
</Layout>,
);
yield* all(slideTransition(Direction.Right));
const cards = birthdayCardsFor(PEOPLE);
for (let i = 1; i <= 365 + 1; i++) {
const day = new Date(Date.now() + i * 24 * 60 * 60 * 1000);
yield* waitFor(0.01);
yield date().text(day.toDateString());
const peoplesBirthday = cards
.map((x, i) => [x, i] as [CardI, number])
.filter(([{ deliverInDays }]) => deliverInDays === i)
.map(([_, i]) => i);
yield* all(
...peoplesBirthday.map((p) => {
const text = peopleText[p];
return all(text.text("🗓️🎂", 0), text.fontSize(50, 0.5));
}),
);
yield* all(
...peoplesBirthday.map((p) => {
const layout = peopleLayout[p];
return layout.gap(0, 0.5);
}),
);
yield* all(
...peoplesBirthday.map((p) => {
const person = people[p];
const text = peopleText[p];
return all(
text.opacity(0, 0.5),
text.fontSize(0, 0.5),
person.emit(":(", 0.8, false),
);
}),
);
}
yield* beginSlide("See their reactions");
yield* all(
date().fontSize(0, 0.5),
date().opacity(0, 0.65),
...people.map((person) => person.opacity(0, 0.5)),
);
});
|
