Staggered Entrance

1import * as React from "react";
2 
3import { cn } from "@/lib/utils";
4 
5import "./staggered-entrance.css";
6 
7type CssVariableStyle = React.CSSProperties & Record<`--${string}`, string>;
8type StaggeredEntranceAxis = "x" | "y";
9type StaggeredEntranceKey<TItem> = (item: TItem, index: number) => React.Key;
10type StaggeredEntranceClassName<TItem> =
11  | string
12  | ((item: TItem, index: number) => string | undefined);
13type StaggeredEntranceStyle<TItem> =
14  | React.CSSProperties
15  | ((item: TItem, index: number) => React.CSSProperties | undefined);
16 
17export type StaggeredEntranceProps<TItem = React.ReactNode> = Omit<
18  React.ComponentProps<"div">,
19  "children"
20> & {
21  as?: React.ElementType;
22  itemAs?: React.ElementType;
23  children?: React.ReactNode;
24  items?: readonly TItem[];
25  renderItem?: (item: TItem, index: number) => React.ReactNode;
26  delay?: number | string;
27  duration?: number | string;
28  initialDelay?: number | string;
29  staggerOffset?: number;
30  axis?: StaggeredEntranceAxis;
31  distance?: number | string;
32  /** Scale each item animates *from* before settling at 1. */
33  fromScale?: number;
34  /** Opacity each item animates *from* before settling at 1. */
35  fromOpacity?: number;
36  reverse?: boolean;
37  disabled?: boolean;
38  getItemKey?: StaggeredEntranceKey<TItem>;
39  itemClassName?: StaggeredEntranceClassName<TItem>;
40  itemStyle?: StaggeredEntranceStyle<TItem>;
41};
42 
43export type StaggeredEntranceItemProps = React.ComponentProps<"div"> & {
44  as?: React.ElementType;
45  index?: number;
46};
47 
48export function StaggeredEntrance<TItem = React.ReactNode>({
49  as: Component = "div",
50  itemAs = "div",
51  children,
52  items,
53  renderItem,
54  getItemKey,
55  delay = 80,
56  duration = 500,
57  initialDelay = 0,
58  staggerOffset = 0,
59  axis = "y",
60  distance = 10,
61  fromScale = 1,
62  fromOpacity = 0,
63  reverse = false,
64  disabled = false,
65  itemClassName,
66  itemStyle,
67  className,
68  style,
69  ...props
70}: StaggeredEntranceProps<TItem>) {
71  const entries = React.useMemo(
72    () =>
73      items
74        ? items.map((item, index) => ({
75            item,
76            content: renderItem
77              ? renderItem(item, index)
78              : (item as React.ReactNode),
79          }))
80        : React.Children.toArray(children).map((child) => ({
81            item: child as TItem,
82            content: child,
83          })),
84    [children, items, renderItem]
85  );
86  const count = entries.length;
87  const resolvedDistance = toCssLength(distance);
88  const staggeredEntranceStyle: CssVariableStyle = {
89// … truncated