"use client"; import { motion } from "framer-motion"; import { useEffect, useState } from "react"; // Types export type CardDetails = { /** Unique value used by React to track the card while the stack is reordered. */ id: number, /** Heading displayed above the card image. */ title: string, /** Supporting text displayed below the card image. */ desc: string, /** Optional image URL displayed in the card. */ img?: string, /** Dark-mode gradient starting color. Accepts any valid CSS color. */ bgFromColor?: string, /** Dark-mode gradient ending color. Accepts any valid CSS color. */ bgToColor?: string, /** Dark-mode border color. Accepts any valid CSS color. */ borderColor?: string, /** Dark-mode title color. Accepts any valid CSS color. */ titleTextColor?: string, /** Dark-mode description color. Accepts any valid CSS color. */ descriptionTextColor?: string, /** Light-mode gradient starting color. Uses the light palette when omitted. */ lightBgFromColor?: string, /** Light-mode gradient ending color. Uses the light palette when omitted. */ lightBgToColor?: string, /** Light-mode border color. Uses the light palette when omitted. */ lightBorderColor?: string, /** Light-mode title color. Uses the light palette when omitted. */ lightTitleTextColor?: string, /** Light-mode description color. Uses the light palette when omitted. */ lightDescriptionTextColor?: string, }; export type StackedCardShuffleProps = { /** Cards to display and rotate through, in their initial stack order. */ cardList: CardDetails[], /** Time between automatic card flips, in milliseconds. Defaults to 3000. */ shuffleInterval?: number, /** Duration of the card-flip animation, in seconds. Defaults to 0.8. */ speed?: number, /** Uniform visual scale of the entire stack. Defaults to 1. */ scale?: number, }; export type CardProps = { card: CardDetails, index: number, total: number, isMoving: boolean, isDarkMode: boolean, speed: number, onExitComplete: () => void, }; // Constants const TEXT_COLOR = "#ffff" const CARDS: CardDetails[] = [ { id: 1, title: "Title 1", desc: "Short description", img: "https://zrin42ohur.ufs.sh/f/h3KOuUpmyE5zv1Llol0ardxe31tPS74ynfLZmRqb89w6guNU", titleTextColor: TEXT_COLOR, descriptionTextColor: TEXT_COLOR }, { id: 2, title: "Title 2", desc: "Short description", img: "https://zrin42ohur.ufs.sh/f/h3KOuUpmyE5zj18qcaGaMb0DR7IYGlvq5VQuNOBsX6rkCiS9", titleTextColor: TEXT_COLOR, descriptionTextColor: TEXT_COLOR }, { id: 3, title: "Title 3", desc: "Short description", img: "https://zrin42ohur.ufs.sh/f/h3KOuUpmyE5zpFZfLlouKw7ioeGXQt4RDUF385SdmOaEslz6", titleTextColor: TEXT_COLOR, descriptionTextColor: TEXT_COLOR }, { id: 4, title: "Title 4", desc: "Short description", img: "https://zrin42ohur.ufs.sh/f/h3KOuUpmyE5zO6AYiG5IFGmzUMDYQX4eagn7bl8C2jLus6hx", titleTextColor: TEXT_COLOR, descriptionTextColor: TEXT_COLOR }, ]; const THEME_COLORS = { dark: { bgFrom: "#35577D", bgTo: "#141E30", border: "#4B5563", title: "#FFFFFF", description: "#E5E7EB", }, light: { bgFrom: "#FFFFFF", bgTo: "#DBEAFE", border: "#94A3B8", title: "#0F172A", description: "#334155", }, } as const; // Components export function StackedCardShuffle({ cardList, shuffleInterval = 3000, speed = 0.8, scale = 1, }: StackedCardShuffleProps) { const [cards, setCards] = useState(cardList); const [isMoving, setIsMoving] = useState(false); const [isDarkMode, setIsDarkMode] = useState(() => typeof window === "undefined" ? true : window.matchMedia("(prefers-color-scheme: dark)").matches ); const handleShuffle = () => { setCards((prev) => { const [first, ...rest] = prev; return [...rest, first]; }); setIsMoving(false); }; useEffect(() => { const interval = setInterval(() => { setIsMoving((current) => (current ? current : true)); }, shuffleInterval); return () => clearInterval(interval); }, [shuffleInterval]); useEffect(() => { const colorScheme = window.matchMedia("(prefers-color-scheme: dark)"); const handleColorSchemeChange = (event: MediaQueryListEvent) => { setIsDarkMode(event.matches); }; colorScheme.addEventListener("change", handleColorSchemeChange); return () => { colorScheme.removeEventListener("change", handleColorSchemeChange); }; }, []); return (

{cards?.map((card, i) => { return ( ); })}

); } export function Card({ card, index, total, isMoving, isDarkMode, speed, onExitComplete, }: CardProps) { const targetRotationWhileMoving = (index - 1) * -6; const isTop = index === 0; const isShown = index === 1; const theme = isDarkMode ? THEME_COLORS.dark : THEME_COLORS.light; const bgFromColor = isDarkMode ? card.bgFromColor ?? theme.bgFrom : card.lightBgFromColor ?? theme.bgFrom; const bgToColor = isDarkMode ? card.bgToColor ?? theme.bgTo : card.lightBgToColor ?? theme.bgTo; const borderColor = isDarkMode ? card.borderColor ?? theme.border : card.lightBorderColor ?? theme.border; const titleTextColor = isDarkMode ? card.titleTextColor ?? theme.title : card.lightTitleTextColor ?? theme.title; const descriptionTextColor = isDarkMode ? card.descriptionTextColor ?? theme.description : card.lightDescriptionTextColor ?? theme.description; return ( { if (isTop && isMoving) onExitComplete(); }} transition={{ type: "spring", duration: speed, bounce: 0.2, }} className={` absolute grid aspect-[4/6] max-w-80 grid-rows-[auto_1fr_auto] rounded-3xl border p-3 shadow-2xl shadow-gray-600/40 `} style={{ width: "min(20rem, calc(100% - 3rem), calc((100vh - 3rem) * 0.8))", backgroundImage: `radial-gradient(circle at -10% 0%, ${bgFromColor} 0%, ${bgToColor} 70%)`, borderColor, }} > {isShown && (

)}

{card.title}

{card.desc}

); } export default function Shuffle() { return (<> ); }

Flipping Cards

Commentaires1