Liquid Progress

"use client";

import { useEffect, useMemo, useState, type ReactNode } from "react";
import { motion, useMotionValueEvent, useReducedMotion, useSpring, useTransform } from "motion/react";
import NumberFlow from "@number-flow/react";
import { IconCircleCheckFilled } from "@tabler/icons-react";
import { cn } from "@/lib/utils";

// A plain progress bar with a liquid feel. The fill is a run of tones of one
// colour pinned to the track, so it brightens as it reaches further; a soft
// shine along its top reads as a rounded surface, and the front eases in on a
// spring that only just overshoots, so it settles with a small wobble when
// progress pauses. Only clip-path moves, so nothing lays out while it runs.
// When the fill reaches the end, the label turns into a completed status with
// a check, and one pass of light runs along the bar to mark the moment.

const EASE_OUT = [0.23, 1, 0.32, 1] as const;

export type LiquidProgressProps = {
  /** Progress from 0 to 100. */
  value: number;
  /** Names what's loading. Also the progress bar's accessible name. */
  label?: string;
  /** Status shown with a check once the fill reaches the end. */