Deploy Pipeline

"use client";

// A deploy card that runs itself: each step spins, ticks its own timer, then
// checks off while a line fills down the rail to the next one. When the last
// step lands the card turns Ready and shows the live URL. It runs when scrolled
// into view and, if looping, resets and runs again. Reduced motion shows it finished.

import { AnimatePresence, motion, useInView, useMotionValue, useReducedMotion } from "motion/react";
import { useEffect, useRef, useState } from "react";
import { cn } from "@/lib/utils";

const EASE_OUT: [number, number, number, number] = [0.23, 1, 0.32, 1];
const ROW = 44;

export type DeployStep = {
  label: string;
  /** Seconds this step takes to run in the animation. */
  duration?: number;
};

export type DeployPipelineProps = {
  steps?: readonly DeployStep[];
  /** Shown in the header, e.g. the branch or environment. */
  environment?: string;