From c55d9d2832a46d9dc265fec36936b1313f5af6f6 Mon Sep 17 00:00:00 2001 From: Elizabeth Hunt Date: Sun, 11 Feb 2024 20:44:17 -0700 Subject: birthdays --- src/scenes/sad_people.tsx | 99 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 99 insertions(+) create mode 100644 src/scenes/sad_people.tsx (limited to 'src/scenes/sad_people.tsx') diff --git a/src/scenes/sad_people.tsx b/src/scenes/sad_people.tsx new file mode 100644 index 0000000..ccc0479 --- /dev/null +++ b/src/scenes/sad_people.tsx @@ -0,0 +1,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(); + const people: Person[] = []; + const peopleLayout: Layout[] = []; + const peopleText: Txt[] = []; + + view.add( + + + + + {PEOPLE.map((person, i) => ( + + + + + ))} + + , + ); + 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)), + ); +}); -- cgit v1.3