{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "carousel-coverflow", "title": "Coverflow carousel", "description": "Styled carousel: the Coverflow set. 5 decorative carousel variations (FlowCarousel, DeepCarousel, TiltCarousel, FanCarousel, StackCarousel) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.", "dependencies": [ "motion@^12.42.2", "lucide-react@^1.23.0" ], "registryDependencies": [ "@ai2/tokens" ], "files": [ { "path": "registry/ai2/styled/carousel-coverflow.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeft, ChevronRight } from \"lucide-react\"\nimport { motion, useReducedMotion } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Coverflow carousel family: 5 self-contained 3D perspective sliders (NO embla,\n NO radix). The active slide sits in front and stays flat; the neighbouring\n slides are pushed back with rotateY + scale + translateZ. Each export is a\n complete carousel: it holds the slide index internally, and the arrows + dots\n change it. Deterministic (index-based, no Date.now or Math.random). The root\n carries data-slot=\"styled-carousel\" and role=\"region\". Color comes ONLY from\n semantic tokens; the active dot is primary, via alpha color-mix. Gated on\n framer's useReducedMotion: under reduced motion there is no 3D transform and\n the slide changes instantly. */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\nconst trackHeight: Record = {\n sm: \"h-40\",\n md: \"h-56\",\n lg: \"h-72\",\n xl: \"h-96\",\n}\n\nconst focusRing =\n \"outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50\"\n\nconst arrowBtn =\n \"absolute top-1/2 z-30 inline-flex size-9 -translate-y-1/2 items-center justify-center rounded-full border border-border bg-[color-mix(in_oklab,var(--color-background)_72%,transparent)] text-foreground shadow-sm transition-colors supports-[backdrop-filter]:backdrop-blur hover:bg-background [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none\"\n\n/* Token-surfaced, numbered placeholder panels - for prop-less rendering. */\nconst panelTones = [\"bg-surface-2\", \"bg-surface-3\", \"bg-muted\", \"bg-accent\"]\n\nfunction defaultSlides(count = 4): React.ReactNode[] {\n return Array.from({ length: count }, (_, i) => (\n \n {i + 1}\n \n ))\n}\n\nfunction resolveSlides(slides?: React.ReactNode[]): React.ReactNode[] {\n return slides && slides.length > 0 ? slides : defaultSlides()\n}\n\n/* Ortak index state: sonsuz sarma (wrap) ile prev/next ve dogrudan jump. */\nfunction useCarousel(count: number) {\n const [index, setIndex] = React.useState(0)\n const total = Math.max(count, 1)\n const wrap = React.useCallback((i: number) => ((i % total) + total) % total, [total])\n const go = React.useCallback((i: number) => setIndex(wrap(i)), [wrap])\n const next = React.useCallback(() => setIndex((p) => wrap(p + 1)), [wrap])\n const prev = React.useCallback(() => setIndex((p) => wrap(p - 1)), [wrap])\n return { index: Math.min(index, total - 1), setIndex: go, next, prev }\n}\n\n/* Shared dot group: the active one widens and turns primary. */\nfunction CarouselDots({\n count,\n index,\n onSelect,\n className,\n}: {\n count: number\n index: number\n onSelect: (i: number) => void\n className?: string\n}) {\n const reduce = useReducedMotion()\n return (\n \n {Array.from({ length: count }, (_, i) => {\n const active = i === index\n return (\n onSelect(i)}\n className={cn(\n \"relative inline-flex h-6 min-w-6 shrink-0 items-center justify-center rounded-full\",\n focusRing\n )}\n >\n \n \n )\n })}\n \n )\n}\n\ninterface CarouselProps {\n className?: string\n size?: StyledSize\n slides?: React.ReactNode[]\n}\n\n/* The setting set that decides the 3D intensity. gap: the neighbouring slide's horizontal shift (a percentage of its own width), angle: the rotateY degrees, scaleStep: the shrink per step, minScale: the lower bound, z: the translateZ pull-back (px), perspective: the scene depth, visible: how many neighbours are visible, width: the slide width. */\ninterface CoverflowConfig {\n gap: number\n angle: number\n scaleStep: number\n minScale: number\n z: number\n perspective: string\n visible: number\n width: string\n}\n\nfunction Coverflow({\n className,\n size = \"md\",\n slides,\n config,\n}: CarouselProps & { config: CoverflowConfig }) {\n const reduce = useReducedMotion()\n const items = resolveSlides(slides)\n const { index, setIndex, next, prev } = useCarousel(items.length)\n return (\n \n \n
\n {items.map((slide, i) => {\n const offset = i - index\n const abs = Math.abs(offset)\n const active = offset === 0\n const target = reduce\n ? { x: \"-50%\", rotateY: 0, scale: 1, z: 0, opacity: active ? 1 : 0 }\n : {\n x: `calc(-50% + ${offset * config.gap}%)`,\n rotateY: -offset * config.angle,\n scale: active ? 1 : Math.max(config.minScale, 1 - abs * config.scaleStep),\n z: active ? 0 : -abs * config.z,\n opacity: abs > config.visible ? 0 : 1,\n }\n return (\n \n setIndex(i)}\n className={cn(\"block h-full w-full\", focusRing)}\n >\n {slide}\n \n \n )\n })}\n
\n \n \n \n \n \n )\n}\n\n/* Flow: dengeli coverflow, orta yogunlukta rotateY + geri cekilme. */\nexport function FlowCarousel(props: CarouselProps) {\n return (\n \n )\n}\n\n/* Deep: guclu perspektif, komsular derine cekilir ve daha cok kuculur. */\nexport function DeepCarousel(props: CarouselProps) {\n return (\n \n )\n}\n\n/* Tilt: hafif, ince egim; genis aralik, dusuk aci. */\nexport function TiltCarousel(props: CarouselProps) {\n return (\n \n )\n}\n\n/* Fan: genis yelpaze, buyuk aci ile uc komsu birden gorunur. */\nexport function FanCarousel(props: CarouselProps) {\n return (\n \n )\n}\n\n/* Stack: komsular merkezin arkasina istiflenir; az yatay, cok derinlik. */\nexport function StackCarousel(props: CarouselProps) {\n return (\n \n )\n}\n", "type": "registry:component", "target": "components/ui/carousel-coverflow.tsx" } ], "categories": [ "styled", "carousel" ], "type": "registry:component" }