"use client"; import { useEffect, useState } from "react"; import { motion } from "framer-motion"; import { ArrowUpRight } from "lucide-react"; import { cn } from "@/lib/utils"; const EASE: [number, number, number, number] = [0.16, 1, 0.3, 1]; // Static fractal-noise texture (deterministic, no external asset). const NOISE = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")"; export type FocusCardItem = { /** Headline shown at the bottom of the card, always visible. */ title: string; /** Secondary line revealed when the card is focused. */ meta: string; /** Small pill in the top corner. */ tag: string; /** Full CSS background value used as the card "image". */ gradient: string; /** Two orb colors that drift behind the gradient to keep it alive at rest. */ orbA: string; orbB: string; }; function FocusCard({ item, index, isFocused, onFocus, className, }: { item: FocusCardItem; index: number; isFocused: boolean; onFocus: () => void; className?: string; }) { return ( {/* Blurred imagery layer, sharp only when this card is focused. */} {/* readability scrim + grain */} {/* Highlight ring for the focused card (kept crisp, outside the blur). */} {/* Content */}

{item.tag}

{item.title}

{item.meta} View

); } export function FocusCards({ items, autoCycleMs = 2200, className, }: { items: FocusCardItem[]; /** How long each card holds focus during the idle auto-cycle. */ autoCycleMs?: number; className?: string; }) { const [hovered, setHovered] = useState(null); const [auto, setAuto] = useState(0); // Idle auto-focus: gently sweeps focus across the row so the effect reads // without any interaction. Pauses entirely while the user is hovering. useEffect(() => { if (hovered !== null || items.length <= 1) return; const id = window.setInterval(() => { setAuto((i) => (i + 1) % items.length); }, autoCycleMs); return () => window.clearInterval(id); }, [hovered, items.length, autoCycleMs]); const focused = hovered ?? auto; return (

setHovered(null)} className={cn( "grid w-full grid-cols-2 gap-3 sm:grid-cols-4", className )} > {items.map((item, i) => ( setHovered(i)} /> ))}

); } const DEMO_ITEMS: FocusCardItem[] = [ { title: "Aurora Drift", meta: "Nebula series · Plate 04", tag: "Gradient", gradient: "radial-gradient(130% 130% at 22% 12%, #8b7bff 0%, #4b30b8 38%, #17102e 78%, #0a0812 100%)", orbA: "rgba(124,108,255,0.70)", orbB: "rgba(91,140,255,0.55)", }, { title: "Tidal Glass", meta: "Chroma set · Plate 12", tag: "Motion", gradient: "radial-gradient(130% 130% at 78% 10%, #59b8ff 0%, #2350c8 40%, #0d1636 80%, #080a1c 100%)", orbA: "rgba(91,140,255,0.70)", orbB: "rgba(90,220,255,0.45)", }, { title: "Verdant Flux", meta: "Spectra study · Plate 07", tag: "Texture", gradient: "radial-gradient(130% 130% at 28% 88%, #35d6c4 0%, #0f7d84 38%, #0b2f3a 78%, #071a20 100%)", orbA: "rgba(53,214,196,0.55)", orbB: "rgba(91,140,255,0.42)", }, { title: "Rose Signal", meta: "Aperture · Plate 09", tag: "Editorial", gradient: "radial-gradient(130% 130% at 82% 82%, #ff6fae 0%, #a02f7e 40%, #3a123a 80%, #1a0a1e 100%)", orbA: "rgba(255,111,174,0.52)", orbB: "rgba(124,108,255,0.50)", }, ]; export default function Demo() { return (

Featured collection

Chromatic Studies

Hover to focus a plate

); }

Focus Cards

Chromatic Studies

Aurora Drift

Tidal Glass

Verdant Flux

Rose Signal