@vvedantb/ui 0.29.1 → 0.30.1

package/src/ui/confetti-burst.tsx

@@ -0,0 +1,131 @@
+import { useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+
+const PIECE_COUNT = 90;
+const DURATION_MS = 1800;
+/** The last share of the burst fades out instead of cutting. */
+const FADE_FROM = 0.65;
+const GRAVITY = 0.32;
+const DRAG = 0.985;
+/** Theme chart colours (RGB triplets), so the burst follows the accent. */
+const DEFAULT_COLOR_VARS = ["--chart-1", "--chart-2", "--chart-3", "--chart-4", "--chart-5"];
+const FALLBACK_COLOR = "rgb(120 120 120)";
+
+interface Piece {
+  x: number;
+  y: number;
+  vx: number;
+  vy: number;
+  angle: number;
+  spin: number;
+  flutter: number;
+  width: number;
+  height: number;
+  color: string;
+}
+
+function resolveColors(colors: readonly string[] | undefined): string[] {
+  if (colors && colors.length > 0) return [...colors];
+  const style = getComputedStyle(document.documentElement);
+  const fromTheme = DEFAULT_COLOR_VARS.map((name) => style.getPropertyValue(name).trim())
+    .filter((value) => value.length > 0)
+    .map((value) => `rgb(${value})`);
+  return fromTheme.length > 0 ? fromTheme : [FALLBACK_COLOR];
+}
+
+function spawnPieces(originX: number, originY: number, colors: string[]): Piece[] {
+  return Array.from({ length: PIECE_COUNT }, (_, index) => {
+    // A fan pointing down and out of the anchor, wider than it is deep.
+    const angle = Math.PI / 2 + (Math.random() - 0.5) * Math.PI * 0.9;
+    const speed = 6 + Math.random() * 9;
+    return {
+      x: originX,
+      y: originY,
+      vx: Math.cos(angle) * speed,
+      vy: Math.sin(angle) * speed * 0.6 - 4,
+      angle: Math.random() * Math.PI * 2,
+      spin: (Math.random() - 0.5) * 0.4,
+      flutter: Math.random() * Math.PI * 2,
+      width: 5 + Math.random() * 5,
+      height: 8 + Math.random() * 6,
+      color: colors[index % colors.length] ?? FALLBACK_COLOR,
+    };
+  });
+}
+
+/**
+ * One confetti burst from the bottom centre of `anchor`, drawn on a
+ * full-window canvas that ignores the pointer. Calls `onDone` when the last
+ * piece has faded, so the caller can unmount it.
+ *
+ * Keep it for rare moments (a merge, a first success): delight should grow as
+ * frequency falls. Key it by a counter to replay. `colors` defaults to the
+ * theme's `--chart-1` … `--chart-5`.
+ */
+export function ConfettiBurst({
+  anchor,
+  onDone,
+  colors,
+}: {
+  anchor: HTMLElement;
+  onDone: () => void;
+  colors?: readonly string[];
+}) {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const context = canvas?.getContext("2d");
+    if (!canvas || !context) return;
+    const ratio = window.devicePixelRatio || 1;
+    canvas.width = window.innerWidth * ratio;
+    canvas.height = window.innerHeight * ratio;
+    context.scale(ratio, ratio);
+
+    const rect = anchor.getBoundingClientRect();
+    const pieces = spawnPieces(rect.left + rect.width / 2, rect.bottom, resolveColors(colors));
+    const start = performance.now();
+    let frame = 0;
+
+    function draw(now: number) {
+      if (!context) return;
+      const progress = (now - start) / DURATION_MS;
+      if (progress >= 1) {
+        onDone();
+        return;
+      }
+      context.clearRect(0, 0, window.innerWidth, window.innerHeight);
+      context.globalAlpha = progress < FADE_FROM ? 1 : 1 - (progress - FADE_FROM) / (1 - FADE_FROM);
+      for (const piece of pieces) {
+        piece.vx *= DRAG;
+        piece.vy = piece.vy * DRAG + GRAVITY;
+        piece.x += piece.vx;
+        piece.y += piece.vy;
+        piece.angle += piece.spin;
+        piece.flutter += 0.2;
+        context.save();
+        context.translate(piece.x, piece.y);
+        context.rotate(piece.angle);
+        // Squash on one axis so each piece seems to turn over as it falls.
+        context.scale(1, Math.cos(piece.flutter));
+        context.fillStyle = piece.color;
+        context.fillRect(-piece.width / 2, -piece.height / 2, piece.width, piece.height);
+        context.restore();
+      }
+      frame = requestAnimationFrame(draw);
+    }
+
+    frame = requestAnimationFrame(draw);
+    return () => cancelAnimationFrame(frame);
+  }, [anchor, onDone, colors]);
+
+  return createPortal(
+    <canvas
+      ref={canvasRef}
+      aria-hidden
+      data-testid="confetti-burst"
+      className="pointer-events-none fixed inset-0 z-50 size-full"
+    />,
+    document.body,
+  );
+}

package/src/ui/confirm-dialog-parts.tsx

@@ -17,9 +17,25 @@ import {
   DialogTitle,
 } from "./dialog";
 import { Input } from "./input";
+import { useUiConfig } from "./ui-config";
 
 export type ConfirmDialogSize = "default" | "sm" | "md";
 
+/**
+ * App-wide classes for the confirm dialog parts, merged after each part's
+ * size classes (so an app can tighten `md`'s padding or widen its content).
+ */
+export interface ConfirmDialogConfig {
+  classes?: {
+    content?: string;
+    header?: string;
+    title?: string;
+    description?: string;
+    body?: string;
+    footer?: string;
+  };
+}
+
 type ConfirmDialogContextValue = {
   size: ConfirmDialogSize;
   alert: boolean;
@@ -133,8 +149,9 @@ export type ConfirmDialogContentProps = React.ComponentProps<typeof DialogConten
 /** Alert or plain dialog content (from Root `alert`); `sm` and `md` cap the width. */
 function Content({ className, ...props }: ConfirmDialogContentProps) {
   const { size, alert } = useConfirmDialog();
+  const extra = useUiConfig("ConfirmDialog")?.classes?.content;
   const Comp = alert ? AlertDialogContent : DialogContent;
-  return <Comp {...props} className={cn(size !== "default" && "sm:max-w-96", className)} />;
+  return <Comp {...props} className={cn(size !== "default" && "sm:max-w-96", extra, className)} />;
 }
 Content.displayName = "ConfirmDialog.Content";
 
@@ -142,7 +159,8 @@ export type ConfirmDialogHeaderProps = React.HTMLAttributes<HTMLDivElement>;
 
 function Header({ className, ...props }: ConfirmDialogHeaderProps) {
   const { size } = useConfirmDialog();
-  return <DialogHeader {...props} className={cn(size === "md" && "pb-4", className)} />;
+  const extra = useUiConfig("ConfirmDialog")?.classes?.header;
+  return <DialogHeader {...props} className={cn(size === "md" && "pb-4", extra, className)} />;
 }
 Header.displayName = "ConfirmDialog.Header";
 
@@ -150,7 +168,8 @@ export type ConfirmDialogTitleProps = React.ComponentProps<typeof DialogTitle>;
 
 function Title({ className, ...props }: ConfirmDialogTitleProps) {
   const { size } = useConfirmDialog();
-  return <DialogTitle {...props} className={cn(size === "sm" && "mb-2 text-sm font-medium", className)} />;
+  const extra = useUiConfig("ConfirmDialog")?.classes?.title;
+  return <DialogTitle {...props} className={cn(size === "sm" && "mb-2 text-sm font-medium", extra, className)} />;
 }
 Title.displayName = "ConfirmDialog.Title";
 
@@ -158,12 +177,14 @@ export type ConfirmDialogDescriptionProps = React.ComponentProps<typeof DialogDe
 
 function Description({ className, ...props }: ConfirmDialogDescriptionProps) {
   const { size } = useConfirmDialog();
+  const extra = useUiConfig("ConfirmDialog")?.classes?.description;
   return (
     <DialogDescription
       {...props}
       className={cn(
         size === "sm" && "mb-4 text-sm text-muted-foreground",
         size === "md" && "py-6 text-muted-foreground",
+        extra,
         className,
       )}
     />
@@ -174,9 +195,10 @@ Description.displayName = "ConfirmDialog.Description";
 
 export type ConfirmDialogBodyProps = React.ComponentProps<"div">;
 
-/** Plain `<div>` for extra content. No default classes. */
-function Body(props: ConfirmDialogBodyProps) {
-  return <div {...props} />;
+/** Plain `<div>` for extra content. No default classes (`UiConfig.ConfirmDialog.classes.body` if set). */
+function Body({ className, ...props }: ConfirmDialogBodyProps) {
+  const extra = useUiConfig("ConfirmDialog")?.classes?.body;
+  return <div {...props} className={cn(extra, className) || undefined} />;
 }
 Body.displayName = "ConfirmDialog.Body";
 
@@ -194,11 +216,12 @@ export type ConfirmDialogFooterProps = React.HTMLAttributes<HTMLDivElement> & {
 
 function Footer({ row = false, className, ...props }: ConfirmDialogFooterProps) {
   const { size } = useConfirmDialog();
-  if (size === "sm") return <div {...props} className={cn("flex justify-end gap-2", className)} />;
+  const extra = useUiConfig("ConfirmDialog")?.classes?.footer;
+  if (size === "sm") return <div {...props} className={cn("flex justify-end gap-2", extra, className)} />;
   return (
     <DialogFooter
       {...props}
-      className={cn(size === "md" && "pt-4", row && "justify-end flex-row!", className)}
+      className={cn(size === "md" && "pt-4", row && "justify-end flex-row!", extra, className)}
     />
   );
 }

package/src/ui/confirm-dialog.tsx

@@ -6,6 +6,7 @@ export type {
   ConfirmDialogActionProps,
   ConfirmDialogBodyProps,
   ConfirmDialogCancelProps,
+  ConfirmDialogConfig,
   ConfirmDialogContentProps,
   ConfirmDialogDescriptionProps,
   ConfirmDialogFieldProps,
@@ -20,6 +21,13 @@ export type ConfirmDialogProps = Omit<
   ConfirmDialogRootProps,
   "size" | "alert" | "pending" | "confirmPhrase"
 > & {
+  /**
+   * While `true`, the confirm button shows a spinner beside `confirmLabel`,
+   * Cancel is disabled and close requests wait (see `ConfirmDialog.Root`).
+   */
+  pending?: boolean;
+  /** Extra content after the description, inside the dialog. `children` stays outside (for a trigger). */
+  body?: React.ReactNode;
   title: React.ReactNode;
   description?: React.ReactNode;
   /** Legacy (still supported): compose `ConfirmDialog.Cancel` instead. */
@@ -53,6 +61,8 @@ function LegacyConfirmDialog({
   variant = "default",
   confirmDisabled,
   size = "default",
+  pending,
+  body,
   children,
   ...props
 }: ConfirmDialogProps) {
@@ -60,7 +70,7 @@ function LegacyConfirmDialog({
   const descriptionNode =
     description != null ? <Parts.Description>{description}</Parts.Description> : null;
   return (
-    <Parts.Root {...props} size={size}>
+    <Parts.Root {...props} size={size} pending={pending}>
       {children}
       <Parts.Content>
         {size === "sm" ? (
@@ -79,12 +89,18 @@ function LegacyConfirmDialog({
             {descriptionNode}
           </Parts.Header>
         )}
+        {body != null ? <Parts.Body>{body}</Parts.Body> : null}
         <Parts.Footer>
           {/* The alert cancel passes the click event on; sm and md call onCancel bare. */}
           <Parts.Cancel onClick={size === "default" ? onCancel : () => onCancel?.()}>
             {cancelLabel}
           </Parts.Cancel>
-          <Parts.Action variant={variant} disabled={confirmDisabled} onClick={onConfirm}>
+          <Parts.Action
+            variant={variant}
+            disabled={confirmDisabled}
+            onClick={onConfirm}
+            pendingLabel={confirmLabel}
+          >
             {confirmLabel}
           </Parts.Action>
         </Parts.Footer>

package/src/ui/copy-link-menu-item.tsx

@@ -0,0 +1,29 @@
+import { IconLink } from "@tabler/icons-react";
+import { DropdownMenuItem } from "./dropdown-menu";
+
+/**
+ * A "Copy link" item for a More menu: copies the current page URL. Pass `path`
+ * when the current URL is not the link to share (a per-user route that shows
+ * different content to each person, say); it resolves against the origin.
+ */
+export function CopyLinkMenuItem({
+  iconSize = 14,
+  path,
+  label = "Copy link",
+}: {
+  iconSize?: number;
+  path?: string;
+  label?: string;
+}) {
+  return (
+    <DropdownMenuItem
+      onClick={() => {
+        const href = path ? new URL(path, window.location.origin).href : window.location.href;
+        void navigator.clipboard.writeText(href);
+      }}
+    >
+      <IconLink size={iconSize} />
+      {label}
+    </DropdownMenuItem>
+  );
+}

package/src/ui/count-pop.tsx

@@ -65,3 +65,21 @@ export function UnreadDot({ show, className }: { show: boolean; className?: stri
     </CountPop>
   );
 }
+
+/**
+ * Shape and placement of a count badge hung off a tile's bottom-right corner.
+ * Put the tile in a `relative` box; add one tone class (e.g. a live colour).
+ */
+export const CORNER_BADGE_CLASS =
+  "absolute -bottom-0.5 -right-0.5 flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-semibold leading-none";
+
+/** An unread count on a tile's corner: `CountPop` in the primary tone, "99+" above 99. */
+export function UnreadCornerBadge({ count, className }: { count: number | undefined; className?: string }) {
+  const cn = useCn();
+  return (
+    <CountPop
+      label={countLabel(count)}
+      className={cn(CORNER_BADGE_CLASS, "bg-primary text-primary-foreground", className)}
+    />
+  );
+}

package/src/ui/empty-state.tsx

@@ -1,34 +1,102 @@
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
+import { m, type Variants } from "motion/react";
+import { motionEase } from "../motion/presets";
+import { useUiConfig } from "./ui-config";
 import { cn } from "../utils/cn";
 
 // `default`: open centred block, large bare icon, one muted line (a page or list body).
 // `panel`: filled rounded block with the icon in a tile (a detail panel or modal section).
 export type EmptyStateVariant = "default" | "panel";
 
-const EmptyStateContext = React.createContext<EmptyStateVariant>("default");
+/**
+ * App-wide look for `EmptyState`. `classes` merge after each part's built-in
+ * classes. `classes.iconWrap` puts the `default` icon in a wrapper (a circle,
+ * say) and drops the icon's own margin. `enter` turns on the staggered
+ * entrance for every Root that does not set `enter` itself.
+ */
+export interface EmptyStateConfig {
+  classes?: {
+    root?: string;
+    iconWrap?: string;
+    icon?: string;
+    title?: string;
+    description?: string;
+    actions?: string;
+  };
+  enter?: boolean;
+}
+
+const EmptyStateContext = React.createContext<{ variant: EmptyStateVariant; enter: boolean }>({
+  variant: "default",
+  enter: false,
+});
+
+const CONTAINER_VARIANTS: Variants = {
+  hidden: {},
+  show: { transition: { staggerChildren: 0.04 } },
+};
+
+const ITEM_VARIANTS: Variants = {
+  hidden: { opacity: 0, y: 8 },
+  show: { opacity: 1, y: 0, transition: { duration: 0.22, ease: motionEase } },
+};
 
 export type EmptyStateRootProps = React.ComponentProps<"div"> & {
   /** Layout for the other parts. Default `"default"`. */
   variant?: EmptyStateVariant;
+  /**
+   * Parts rise and fade in one after another. Default `UiConfig.EmptyState.enter`,
+   * else `false`. Pass `false` for an empty state that flashes often (a filter
+   * with no results). Uses `m`, so it needs `LazyMotion`.
+   */
+  enter?: boolean;
 };
 
-function Root({ variant = "default", className, ...props }: EmptyStateRootProps) {
+function Root({ variant = "default", enter: enterProp, className, ...props }: EmptyStateRootProps) {
+  const config = useUiConfig("EmptyState");
+  const enter = enterProp ?? config?.enter ?? false;
+  const classes = cn(
+    "flex flex-col items-center justify-center text-center",
+    variant === "panel" ? "rounded-lg bg-surface-secondary px-4 py-10" : "px-4 py-20",
+    config?.classes?.root,
+    className,
+  );
   return (
-    <EmptyStateContext value={variant}>
-      <div
-        {...props}
-        className={cn(
-          "flex flex-col items-center justify-center text-center",
-          variant === "panel" ? "rounded-lg bg-surface-secondary px-4 py-10" : "px-4 py-20",
-          className,
-        )}
-      />
+    <EmptyStateContext value={{ variant, enter }}>
+      {enter ? (
+        <m.div
+          {...stripMotionConflicts(props)}
+          className={classes}
+          variants={CONTAINER_VARIANTS}
+          initial="hidden"
+          animate="show"
+        />
+      ) : (
+        <div {...props} className={classes} />
+      )}
     </EmptyStateContext>
   );
 }
 Root.displayName = "EmptyState.Root";
 
+// The DOM drag and animation handlers clash with Motion's own prop types.
+function stripMotionConflicts(props: React.ComponentProps<"div">) {
+  const {
+    onDrag: _onDrag,
+    onDragStart: _onDragStart,
+    onDragEnd: _onDragEnd,
+    onAnimationStart: _onAnimationStart,
+    ...rest
+  } = props;
+  return rest;
+}
+
+/** A part's own element: `m.*` with the item variants while the Root enters. */
+function useItemMotion() {
+  return React.use(EmptyStateContext).enter ? { variants: ITEM_VARIANTS } : null;
+}
+
 export type EmptyStateIconProps = {
   /** Icon component, e.g. a Tabler icon. */
   icon: React.ComponentType<{ size?: number | string; stroke?: number | string; className?: string }>;
@@ -41,25 +109,43 @@ export type EmptyStateIconProps = {
 };
 
 function Icon({ icon: IconComponent, size, stroke, className }: EmptyStateIconProps) {
-  if (React.use(EmptyStateContext) === "panel") {
-    return (
-      <div
-        className={cn(
-          "mb-3 flex h-11 w-11 items-center justify-center rounded-lg bg-surface-tertiary",
-          className,
-        )}
-      >
-        <IconComponent size={size ?? 22} className="text-muted-foreground" stroke={stroke ?? 1.5} />
-      </div>
+  const { variant } = React.use(EmptyStateContext);
+  const config = useUiConfig("EmptyState");
+  const itemMotion = useItemMotion();
+  if (variant === "panel") {
+    const tileClass = cn(
+      "mb-3 flex h-11 w-11 items-center justify-center rounded-lg bg-surface-tertiary",
+      className,
+    );
+    const glyph = <IconComponent size={size ?? 22} className="text-muted-foreground" stroke={stroke ?? 1.5} />;
+    return itemMotion ? (
+      <m.div {...itemMotion} className={tileClass}>
+        {glyph}
+      </m.div>
+    ) : (
+      <div className={tileClass}>{glyph}</div>
     );
   }
-  return (
+  const wrapClass = config?.classes?.iconWrap;
+  if (wrapClass !== undefined) {
+    const glyph = <IconComponent size={size ?? 40} stroke={stroke} className={config?.classes?.icon} />;
+    const outer = cn(wrapClass, className);
+    return itemMotion ? (
+      <m.div {...itemMotion} className={outer}>
+        {glyph}
+      </m.div>
+    ) : (
+      <div className={outer}>{glyph}</div>
+    );
+  }
+  const glyph = (
     <IconComponent
       size={size ?? 40}
       stroke={stroke}
-      className={cn("mb-3 text-muted-foreground", className)}
+      className={cn("mb-3 text-muted-foreground", config?.classes?.icon, className)}
     />
   );
+  return itemMotion ? <m.div {...itemMotion}>{glyph}</m.div> : glyph;
 }
 Icon.displayName = "EmptyState.Icon";
 
@@ -69,40 +155,57 @@ export type EmptyStateTitleProps = React.ComponentProps<"p"> & {
 };
 
 function Title({ asChild = false, className, ...props }: EmptyStateTitleProps) {
-  const Comp = asChild ? Slot : "p";
-  return (
-    <Comp
-      {...props}
-      className={cn(
-        "text-sm font-medium text-foreground",
-        React.use(EmptyStateContext) === "default" && "mb-1",
-        className,
-      )}
-    />
+  const { variant } = React.use(EmptyStateContext);
+  const config = useUiConfig("EmptyState");
+  const itemMotion = useItemMotion();
+  const classes = cn(
+    "text-sm font-medium text-foreground",
+    variant === "default" && "mb-1",
+    config?.classes?.title,
+    className,
   );
+  if (asChild) return <Slot {...props} className={classes} />;
+  if (itemMotion) return <m.p {...stripPConflicts(props)} {...itemMotion} className={classes} />;
+  return <p {...props} className={classes} />;
 }
 Title.displayName = "EmptyState.Title";
 
+function stripPConflicts(props: React.ComponentProps<"p">) {
+  const {
+    onDrag: _onDrag,
+    onDragStart: _onDragStart,
+    onDragEnd: _onDragEnd,
+    onAnimationStart: _onAnimationStart,
+    ...rest
+  } = props;
+  return rest;
+}
+
 export type EmptyStateDescriptionProps = React.ComponentProps<"p">;
 
 function Description({ className, ...props }: EmptyStateDescriptionProps) {
-  return (
-    <p
-      {...props}
-      className={cn(
-        React.use(EmptyStateContext) === "panel" && "mt-1 max-w-[240px]",
-        "text-sm text-muted-foreground",
-        className,
-      )}
-    />
+  const { variant } = React.use(EmptyStateContext);
+  const config = useUiConfig("EmptyState");
+  const itemMotion = useItemMotion();
+  const classes = cn(
+    variant === "panel" && "mt-1 max-w-[240px]",
+    "text-sm text-muted-foreground",
+    config?.classes?.description,
+    className,
   );
+  if (itemMotion) return <m.p {...stripPConflicts(props)} {...itemMotion} className={classes} />;
+  return <p {...props} className={classes} />;
 }
 Description.displayName = "EmptyState.Description";
 
 export type EmptyStateActionsProps = React.ComponentProps<"div">;
 
 function Actions({ className, ...props }: EmptyStateActionsProps) {
-  return <div {...props} className={cn("mt-4", className)} />;
+  const config = useUiConfig("EmptyState");
+  const itemMotion = useItemMotion();
+  const classes = cn("mt-4", config?.classes?.actions, className);
+  if (itemMotion) return <m.div {...stripMotionConflicts(props)} {...itemMotion} className={classes} />;
+  return <div {...props} className={classes} />;
 }
 Actions.displayName = "EmptyState.Actions";
 

package/src/ui/rolling-number.tsx

@@ -0,0 +1,62 @@
+import { m } from "motion/react";
+import { springTransition } from "../motion/presets";
+import { useCn } from "./ui-config";
+
+const DIGITS = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"] as const;
+
+function isDigit(char: string): boolean {
+  return char >= "0" && char <= "9";
+}
+
+/**
+ * Shows an already formatted value ("1m 05s", "42%", "$1.20") and rolls each
+ * digit to its new value instead of jumping. Use it for numbers that tick
+ * while the user watches (timers, meters, running totals). `CountPop` is for a
+ * badge that changes while the user looks elsewhere.
+ *
+ * Format the value first: only the characters it gets are animated. Columns
+ * are keyed from the right, so "9s" → "10s" rolls the units column and mounts
+ * only the new tens column. Uses `m`, so the app must render it inside
+ * `LazyMotion`.
+ */
+export function RollingNumber({ value, className }: { value: string; className?: string }) {
+  const cn = useCn();
+  const chars = [...value];
+  return (
+    <span className={cn("inline-flex tabular-nums", className)}>
+      <span className="sr-only">{value}</span>
+      {chars.map((char, index) => {
+        const key = chars.length - index;
+        return isDigit(char) ? (
+          <DigitColumn key={key} digit={Number(char)} />
+        ) : (
+          <span key={key} aria-hidden className="whitespace-pre">
+            {char}
+          </span>
+        );
+      })}
+    </span>
+  );
+}
+
+function DigitColumn({ digit }: { digit: number }) {
+  return (
+    <span aria-hidden className="relative inline-block h-[1lh] overflow-hidden">
+      {/* Holds the width of one digit; the moving column is absolute. */}
+      <span className="invisible">0</span>
+      <m.span
+        className="absolute inset-x-0 top-0 flex flex-col"
+        initial={false}
+        // The column is ten rows tall, so one row is 10% of its height.
+        animate={{ y: `${-digit * 10}%` }}
+        transition={springTransition}
+      >
+        {DIGITS.map((d) => (
+          <span key={d} className="h-[1lh]">
+            {d}
+          </span>
+        ))}
+      </m.span>
+    </span>
+  );
+}