Scroll Card Fan

"use client";

import * as React from "react";
import { motion, useMotionValue, useReducedMotion, useScroll, useTransform, type MotionValue } from "framer-motion";
import { cn } from "@/lib/utils";

function useReducedMotionSafe() {
  const prefersReduced = useReducedMotion();
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => setMounted(true), []);
  return mounted ? !!prefersReduced : false;
}

/**
 * Full-width scroll section: a neat stack of cards fans open like a hand of
 * playing cards as the section's own scroll progress advances, and folds
 * back up if you scroll back.
 */

export interface FanCard {
  label: string;
  value: string;