Event Feed

"use client";

// A live feed card: every few seconds a new event drops in at the top with a
// brief highlight, the rest slide down, and the oldest fades out past the
// bottom edge. Times count up as they age. It only runs while on screen;
// reduced motion shows a still list.

import { AnimatePresence, motion, useInView, 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 SPRING = { type: "spring", duration: 0.5, bounce: 0 } as const;
const ROW = 60;

export type FeedEvent = {
  /** Who or what, e.g. a customer name. */
  title: string;
  /** Second line, e.g. the plan or source. */
  detail?: string;
  /** Right-hand value, e.g. an amount. */
  value?: string;
};