cutout-card

1"use client"
2 
3import {
4  createContext,
5  useCallback,
6  useContext,
7  useMemo,
8  type ComponentProps,
9  type HTMLAttributes,
10  type MouseEventHandler,
11} from "react"
12import Image from "next/image"
13import { useControllableState } from "@radix-ui/react-use-controllable-state"
14import { motion, useReducedMotion } from "motion/react"
15 
16import { cn } from "@/lib/utils"
17 
18// ============================================================================
19// Tokens — optional chrome for demos / quick styling
20// ============================================================================
21 
22/** Border + shadow stack using theme tokens so elevation reads in light and dark. */
23export const cutoutCardSurfaceShadowClassName = cn(
24  "border border-border/80 dark:border-border/60",
25  "shadow-[0px_1px_2px_-1px_color-mix(in_oklab,var(--foreground)_8%,transparent),0px_4px_8px_-2px_color-mix(in_oklab,var(--foreground)_6%,transparent),0px_8px_16px_-4px_color-mix(in_oklab,var(--foreground)_5%,transparent)]",
26  "transition-[box-shadow,border-color] duration-500 ease-[cubic-bezier(0.23,1,0.32,1)]",
27  "hover:border-border hover:shadow-[0px_2px_4px_-1px_color-mix(in_oklab,var(--foreground)_10%,transparent),0px_8px_16px_-4px_color-mix(in_oklab,var(--foreground)_8%,transparent),0px_16px_32px_-8px_color-mix(in_oklab,var(--foreground)_6%,transparent)]"
28)
29 
30export const cutoutCardSurfaceClassName = cn(
31  "group/cutout relative cursor-pointer overflow-hidden rounded-[28px] bg-card text-card-foreground",
32  cutoutCardSurfaceShadowClassName
33)
34 
35/** Staggered text/footer entrance inside `CutoutCardContent` — use with `motion.div` children. */
36export function useCutoutContentStaggerVariants() {
37  const reduceMotion = useReducedMotion()
38 
39  return useMemo(() => {
40    if (reduceMotion) {
41      return {
42        container: {
43          hidden: {},
44          show: {
45            transition: { staggerChildren: 0.03, delayChildren: 0 },
46          },
47        },
48        item: {
49          hidden: { opacity: 0 },
50          show: {
51            opacity: 1,
52            transition: { duration: 0.2, ease: [0.23, 1, 0.32, 1] },
53          },
54        },
55      } as const
56    }
57 
58    return {
59      container: {
60        hidden: {},
61        show: {
62          transition: { staggerChildren: 0.055, delayChildren: 0.06 },
63        },
64      },
65      item: {
66        hidden: { opacity: 0, y: 12, filter: "blur(5px)" },
67        show: {
68          opacity: 1,
69          y: 0,
70          filter: "blur(0px)",
71// … truncated