feature-list

1import { loadFont } from "@remotion/google-fonts/Inter";
2import { interpolate, useCurrentFrame, useVideoConfig } from "remotion";
3import { CODE_THEMES } from "@/remotion/lib/code-syntax";
4import { getSafeAreaPadding } from "@/remotion/lib/layout";
5import { EASING } from "@/remotion/lib/motion-tokens";
6 
7const { fontFamily } = loadFont("normal", {
8  weights: ["400", "500", "600", "700"],
9  subsets: ["latin"],
10});
11 
12export type FeatureItem = {
13  label: string;
14  /** Second line under the label. */
15  detail?: string;
16};
17 
18export type FeatureListProps = {
19  title?: string;
20  /** Small label above the title. */
21  eyebrow?: string;
22  /** Rows, as plain strings or `{ label, detail }`. */
23  items?: (string | FeatureItem)[];
24  accentColor?: string;
25  backgroundColor?: string;
26  theme?: "dark" | "light";
27  /** Animation speed multiplier. */
28  speed?: number;
29};
30 
31/** Beat plan in seconds. */
32const T = {
33  eyebrow: 0,
34  title: 0.14,
35  /** First row lands here. */
36  rows: 0.55,
37  /** Added per row. */
38  rowStagger: 0.34,
39  /** How long after a row lands its check strokes in. */
40  checkAfter: 0.22,
41} as const;
42 
43const clamp = {
44  extrapolateLeft: "clamp",
45  extrapolateRight: "clamp",
46} as const;
47 
48const CheckGlyph: React.FC<{
49  size: number;
50  color: string;
51  progress: number;
52}> = ({ size, color, progress }) => (
53  <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
54    <path
55      d="M4.8 12.6l4.9 4.9 9.5-10.4"
56      stroke={color}
57      strokeWidth={2.6}
58      strokeLinecap="round"
59      strokeLinejoin="round"
60      strokeDasharray={22}
61      strokeDashoffset={22 * (1 - progress)}
62    />
63  </svg>
64);
65 
66/**
67 * A list being ticked off rather than a stack of bullets fading in: each row
68 * arrives in turn, its rule draws across, and its check strokes in behind it —
69 * so the scene lands on a list that has visibly been worked through.
70 */
71export const FeatureList: React.FC<FeatureListProps> = ({
72  title,
73  eyebrow,
74  items = [],
75  accentColor = "#E8B86D",
76  backgroundColor,
77  theme = "dark",
78  speed = 1,
79}) => {
80  const frame = useCurrentFrame();
81  const { fps, width, height } = useVideoConfig();
82  const palette = CODE_THEMES[theme];
83  const safe = getSafeAreaPadding({ width, height });
84 
85  const at = (seconds: number) => (seconds * fps) / speed;
86  const ease = (from: number, to: number, easing = EASING.enter) =>
87    interpolate(frame, [at(from), at(to)], [0, 1], { easing, ...clamp });
88 
89  const stage = {
90    w: width - safe.paddingLeft - safe.paddingRight,
91// … truncated