Check List

1"use client";
2 
3import { useCurrentFrame } from "remotion";
4import { Handwrite, handwriteDuration } from "@/components/remocn/handwrite";
5import { DEFAULT_STEP, hashRange, steppedRamp } from "@/lib/remocn/stop-motion";
6 
7const easeOutCubic = (t: number) => 1 - (1 - t) ** 3;
8 
9const DEFAULT_PER_STEP = 1.6;
10 
11export type CheckListItem = {
12  text: string;
13  checked?: boolean;
14};
15 
16export type CheckListEntry = {
17  text: string;
18  checked: boolean;
19};
20 
21export type CheckListGeometry = {
22  boxSize: number;
23  boxGap: number;
24  rowHeight: number;
25  labelWidth: number;
26};
27 
28export type CheckListBeat = {
29  boxFrom: number;
30  boxTo: number;
31  labelAt: number;
32  labelEnd: number;
33  tickFrom?: number;
34  tickTo?: number;
35  strikeFrom?: number;
36  strikeTo?: number;
37};
38 
39export type CheckListTiming = {
40  delay?: number;
41  itemGap?: number;
42  perStep?: number;
43  step?: number;
44  closeGap?: number;
45};
46 
47export function normalizeCheckListItems(
48  items: (string | CheckListItem)[],
49): CheckListEntry[] {
50  return items.map((item) =>
51    typeof item === "string"
52      ? { text: item, checked: true }
53      : { text: item.text, checked: item.checked ?? true },
54  );
55}
56 
57export function checkListGeometry(
58  width: number,
59  fontSize: number,
60): CheckListGeometry {
61  const boxSize = Math.round(fontSize * 0.62);
62  const boxGap = Math.round(fontSize * 0.4);
63  return {
64    boxSize,
65    boxGap,
66    rowHeight: Math.round(fontSize * 1.15),
67    labelWidth: Math.max(fontSize * 2, width - boxSize - boxGap),
68  };
69}
70 
71export function checkListRowWidth(width: number, fontSize: number): number {
72  const { boxSize, boxGap, labelWidth } = checkListGeometry(width, fontSize);
73  return boxSize + boxGap + labelWidth;
74}
75 
76export function checkListEnterEnd(
77  items: (string | CheckListItem)[],
78  options?: CheckListTiming,
79): number {
80  const step = options?.step ?? DEFAULT_STEP;
81  const delay = options?.delay ?? 0;
82  const itemGap = options?.itemGap ?? step * 6;
83  const perStep = options?.perStep ?? DEFAULT_PER_STEP;
84 
85  return normalizeCheckListItems(items).reduce(
86    (end, item, i) =>
87      Math.max(
88        end,
89        delay +
90          i * itemGap +
91          step * 2 +
92          handwriteDuration(item.text, { perStep, step }),
93      ),
94    delay,
95  );
96}
97 
98export function checkListSchedule(
99  items: (string | CheckListItem)[],
100  options?: CheckListTiming,
101): CheckListBeat[] {
102  const step = options?.step ?? DEFAULT_STEP;
103  const delay = options?.delay ?? 0;
104  const itemGap = options?.itemGap ?? step * 6;
105// … truncated