"use client"; import { useEffect, useState } from "react"; import { AnimatePresence, motion } from "framer-motion"; import { Palette, Waves, Accessibility, ArrowUpRight, X, } from "lucide-react"; import { cn } from "@/lib/utils"; const EASE = [0.16, 1, 0.3, 1] as const; export interface ExpandableStat { label: string; value: string; } export interface ExpandableItem { id: string; title: string; subtitle: string; content: string; icon: React.ReactNode; /** Optional short kicker shown above the title in the expanded view. */ tag?: string; /** Optional numbers shown in the expanded footer. */ stats?: ExpandableStat[]; } /* -------------------------------------------------------------------------- */ /* Ambient aurora, a slow rotating glow that keeps a static preview alive. */ /* -------------------------------------------------------------------------- */ function Aurora({ className }: { className?: string }) { return ( ); } /* -------------------------------------------------------------------------- */ /* Expanded card, morphs from the trigger via a shared layoutId. */ /* -------------------------------------------------------------------------- */ export function ExpandableCard({ item, onClose, }: { item: ExpandableItem | null; onClose: () => void; }) { useEffect(() => { if (!item) return; function onKey(e: KeyboardEvent) { if (e.key === "Escape") onClose(); } window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [item, onClose]); return ( {item && (

{/* thin bright top edge */}

{item.icon}

{item.tag && ( {item.tag} )} {item.title} {item.subtitle} {item.content} {item.stats && item.stats.length > 0 && ( {item.stats.map((s) => (

{s.value}

{s.label}

))} )}

Press{" "} Esc

)} ); } /* -------------------------------------------------------------------------- */ /* Trigger row, a list item that morphs open on click. */ /* When `active`, a conic beam sweeps its border so the preview reads alive. */ /* -------------------------------------------------------------------------- */ export function ExpandableCardTrigger({ item, active = false, onOpen, onHoverStart, onHoverEnd, }: { item: ExpandableItem; active?: boolean; onOpen: (item: ExpandableItem) => void; onHoverStart?: () => void; onHoverEnd?: () => void; }) { return ( onOpen(item)} onHoverStart={onHoverStart} onHoverEnd={onHoverEnd} transition={{ layout: { duration: 0.5, ease: EASE } }} className="relative block w-full overflow-hidden rounded-2xl p-px text-left" > {/* rotating conic beam, only on the active row */} {active && ( )} {item.icon}

{item.title} {item.subtitle}

); } /* -------------------------------------------------------------------------- */ /* Demo */ /* -------------------------------------------------------------------------- */ const items: ExpandableItem[] = [ { id: "tokens", title: "Design tokens", subtitle: "One source for color, space, and type", tag: "Foundations", content: "Every primitive reads from the same token set, so one edit ripples across the whole system without any visual drift.", icon: , stats: [ { label: "Tokens", value: "128" }, { label: "Themes", value: "4" }, { label: "Drift", value: "0" }, ], }, { id: "motion", title: "Motion presets", subtitle: "Springs and easings tuned for feel", tag: "Interaction", content: "Reusable spring and easing configs keep interactions consistent, from a single button press to a full page transition.", icon: , stats: [ { label: "Presets", value: "16" }, { label: "Springs", value: "9" }, { label: "FPS", value: "60" }, ], }, { id: "a11y", title: "Accessible by default", subtitle: "WCAG AA baked into every primitive", tag: "Inclusive", content: "Focus rings, roles, and contrast ratios live inside each component, so accessibility is handled long before review.", icon: , stats: [ { label: "Contrast", value: "AA" }, { label: "Roles", value: "Auto" }, { label: "Audit", value: "100%" }, ], }, ]; export default function Demo() { const [open, setOpen] = useState(null); const [hovered, setHovered] = useState(null); const [cycle, setCycle] = useState(0); // Auto-advance the highlighted row so a static preview stays alive. // Pauses whenever the user is hovering a row or a card is expanded. useEffect(() => { if (open || hovered !== null) return; const id = setInterval(() => { setCycle((c) => (c + 1) % items.length); }, 2600); return () => clearInterval(id); }, [open, hovered]); const activeIndex = open ? -1 : hovered ?? cycle; return (

What ships in every component

Tap a row to expand the details

Live

{items.map((item, i) => ( setHovered(i)} onHoverEnd={() => setHovered(null)} /> ))}

setOpen(null)} />

); }

Expandable Card

What ships in every component

Design tokens

Motion presets

Accessible by default