"use client"; /* eslint-disable @next/next/no-img-element -- registry components stay portable outside Next.js */ import { useId, useState } from "react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; export type CarouselSlide = { src?: string; alt?: string; title: string; caption?: string; }; const defaultSlides: CarouselSlide[] = [ { title: "Studio floor", caption: "Morning light across the north-facing workshop." }, { title: "Material library", caption: "Oak, cork, and recycled felt samples for the spring range." }, { title: "Assembly line", caption: "Each chair is finished and inspected by hand." }, ]; type MotionSnapCarouselProps = { slides?: CarouselSlide[]; label?: string; /** Forces reduced motion in addition to the OS preference. */ reducedMotion?: boolean; className?: string; }; export function MotionSnapCarousel({ slides = defaultSlides, label = "Featured work", reducedMotion = false, className = "", }: MotionSnapCarouselProps) { const shouldReduceMotion = Boolean(useReducedMotion()) || reducedMotion; const [[index, direction], setPosition] = useState<[number, number]>([0, 0]); const slideId = useId(); const count = slides.length; const safeIndex = count ? ((index % count) + count) % count : 0; const active = slides[safeIndex]; function goTo(next: number, dir?: number) { if (!count) return; const target = ((next % count) + count) % count; setPosition([target, dir ?? (target > safeIndex ? 1 : -1)]); } if (!active) return null; const offset = shouldReduceMotion ? 0 : 32; const variants = { enter: (dir: number) => ({ opacity: 0, x: dir * offset }), center: { opacity: 1, x: 0 }, exit: (dir: number) => ({ opacity: 0, x: dir * -offset }), }; return (

{active.src ? ( {active.alt

) : null}

{active.title}

{active.caption ?

{active.caption}

: null}

{slides.map((slide, itemIndex) => ( ))}

); }

Registry workbench

Registry workbench