4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 52:T1c5d,'use client'; import { animate, motion, useMotionValue } from 'motion/react'; import React, { useEffect, useRef, useState } from 'react'; export const items = [ { id: 6, url: 'https://images.unsplash.com/photo-1760389005000-bf02bf24f463?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1123', title: 'DONM FLY', }, { id: 5, url: 'https://images.unsplash.com/photo-1761078980679-e89e25fe279b?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=687', title: 'SONYPOO', }, { id: 3, url: 'https://images.unsplash.com/photo-1761882725885-d3d8bd2032d1?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=687', title: 'AUSIZE MAM', }, { id: 4, url: 'https://images.unsplash.com/photo-1761775915848-467e41c1c4db?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=689', title: 'RECLKTIKA', }, { id: 1, url: 'https://images.unsplash.com/photo-1761882835101-02ab45ac0726?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=690', title: 'MAXX PHAM', }, { id: 2, url: 'https://images.unsplash.com/photo-1661980494567-40a5e01b699b?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=685', title: 'BOXIEN BAY', }, { id: 7, url: 'https://images.unsplash.com/photo-1761165307495-56bd564d322f?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=663', title: 'Snowy Mountain Highway', }, { id: 8, url: 'https://images.unsplash.com/photo-1756299792672-157811bf1005?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1074', title: 'FOGGY FOLS', }, { id: 9, url: 'https://images.unsplash.com/photo-1572851899646-a1f69c664e1e?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1170', title: 'DIM DARKO', }, { id: 10, url: 'https://images.unsplash.com/photo-1759247178379-0e8eba83a4a6?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=687', title: 'BEALIVE', }, { id: 11, url: 'https://images.unsplash.com/photo-1754968230523-052635c98f99?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=736', title: 'DOMEDOM ROME', }, { id: 12, url: 'https://images.unsplash.com/photo-1643037508102-46fb319979c5?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=764', title: 'IKEIMON POVE', }, ]; export default function FramerDraggableCarousel() { const [index, setIndex] = useState(0); const [isDragging, setIsDragging] = useState(false); const containerRef = useRef(null); const x = useMotionValue(0); useEffect(() => { if (!isDragging && containerRef.current) { const containerWidth = containerRef.current.offsetWidth || 1; const targetX = -index * containerWidth; animate(x, targetX, { type: 'spring', stiffness: 300, damping: 30, }); } }, [index, x, isDragging]); return (

setIsDragging(true)} onDragEnd={(e, info) => { setIsDragging(false); const containerWidth = containerRef.current?.offsetWidth || 1; const offset = info.offset.x; const velocity = info.velocity.x; let newIndex = index; // If fast swipe, use velocity if (Math.abs(velocity) > 500) { newIndex = velocity > 0 ? index - 1 : index + 1; } // Otherwise use offset threshold (30% of container width) else if (Math.abs(offset) > containerWidth * 0.3) { newIndex = offset > 0 ? index - 1 : index + 1; } // Clamp index newIndex = Math.max(0, Math.min(items.length - 1, newIndex)); setIndex(newIndex); }} style={{ x }} > {items.map((item) => (

))} {/* Navigation Buttons */} setIndex((i) => Math.max(0, i - 1))} className={`absolute left-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full flex items-center justify-center shadow-lg transition-transform z-10 ${ index === 0 ? 'opacity-40 cursor-not-allowed' : 'bg-white hover:scale-110 hover:opacity-100 opacity-70' }`} > {/* Next Button */} setIndex((i) => Math.min(items.length - 1, i + 1))} className={`absolute right-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full flex items-center justify-center shadow-lg transition-transform z-10 ${ index === items.length - 1 ? 'opacity-40 cursor-not-allowed' : 'bg-white hover:scale-110 hover:opacity-100 opacity-70' }`} > {/* Progress Indicator */}

{items.map((_, i) => (

); } 53:T477d,'use client'; import { cn } from '@/lib/utils'; import type { EmblaCarouselType, EmblaEventType, EmblaOptionsType } from 'embla-carousel'; import useEmblaCarousel from 'embla-carousel-react'; import { AnimatePresence, motion } from 'motion/react'; import type React from 'react'; import { createContext, forwardRef, useCallback, useContext, useEffect, useId, useRef, useState, } from 'react'; // ============= TYPES ============= interface CarouselProps extends React.HTMLAttributes { options?: EmblaOptionsType; plugins?: Parameters[1]; isScale?: boolean; } interface CarouselContextType { emblaApi: EmblaCarouselType | undefined; emblaThumbsApi: EmblaCarouselType | undefined; emblaRef: ReturnType[0]; emblaThumbsRef: ReturnType[0]; prevBtnDisabled: boolean; nextBtnDisabled: boolean; onPrevButtonClick: () => void; onNextButtonClick: () => void; selectedIndex: number; scrollSnaps: number[]; onDotButtonClick: (index: number) => void; scrollProgress: number; selectedSnap: number; snapCount: number; isScale: boolean; slidesArr: string[]; setSlidesArr: React.Dispatch>; onThumbClick: (index: number) => void; carouselId: string; orientation: 'vertical' | 'horizontal'; direction: 'ltr' | 'rtl' | undefined; handleKeyDown: (event: React.KeyboardEvent) => void; } // ============= CONTEXT ============= const CarouselContext = createContext(undefined); export const useCarousel = () => { const context = useContext(CarouselContext); if (!context) { throw new Error('useCarousel must be used within a Carousel component'); } return context; }; // ============= UTILITIES ============= const TWEEN_FACTOR_BASE = 0.52; const numberWithinRange = (number: number, min: number, max: number): number => Math.min(Math.max(number, min), max); // ============= MAIN CAROUSEL COMPONENT ============= export const Carousel = forwardRef( ({ children, options = {}, plugins = [], className, isScale = false, dir, ...props }, ref) => { const carouselId = useId(); const [slidesArr, setSlidesArr] = useState([]); const orientation = options.axis === 'y' ? 'vertical' : 'horizontal'; const direction = options.direction ?? (dir as 'ltr' | 'rtl' | undefined); // Main carousel const [emblaRef, emblaApi] = useEmblaCarousel( { ...options, axis: orientation === 'vertical' ? 'y' : 'x', direction, }, plugins ); // Thumbnails carousel const [emblaThumbsRef, emblaThumbsApi] = useEmblaCarousel({ containScroll: 'keepSnaps', dragFree: true, axis: orientation === 'vertical' ? 'y' : 'x', direction, }); // State const [prevBtnDisabled, setPrevBtnDisabled] = useState(true); const [nextBtnDisabled, setNextBtnDisabled] = useState(true); const [selectedIndex, setSelectedIndex] = useState(0); const [scrollSnaps, setScrollSnaps] = useState([]); const [scrollProgress, setScrollProgress] = useState(0); const [snapCount, setSnapCount] = useState(0); // Navigation callbacks const onPrevButtonClick = useCallback(() => { emblaApi?.scrollPrev(); }, [emblaApi]); const onNextButtonClick = useCallback(() => { emblaApi?.scrollNext(); }, [emblaApi]); const onDotButtonClick = useCallback( (index: number) => { emblaApi?.scrollTo(index); }, [emblaApi] ); const onThumbClick = useCallback( (index: number) => { if (!emblaApi || !emblaThumbsApi) return; emblaApi.scrollTo(index); }, [emblaApi, emblaThumbsApi] ); // Keyboard navigation const handleKeyDown = useCallback( (event: React.KeyboardEvent) => { if (!emblaApi) return; switch (event.key) { case 'ArrowLeft': event.preventDefault(); if (orientation === 'horizontal') { direction === 'rtl' ? onNextButtonClick() : onPrevButtonClick(); } break; case 'ArrowRight': event.preventDefault(); if (orientation === 'horizontal') { direction === 'rtl' ? onPrevButtonClick() : onNextButtonClick(); } break; case 'ArrowUp': event.preventDefault(); if (orientation === 'vertical') onPrevButtonClick(); break; case 'ArrowDown': event.preventDefault(); if (orientation === 'vertical') onNextButtonClick(); break; } }, [emblaApi, orientation, direction, onPrevButtonClick, onNextButtonClick] ); // Selection handler const onSelect = useCallback(() => { if (!emblaApi) return; setSelectedIndex(emblaApi.selectedScrollSnap()); setPrevBtnDisabled(!emblaApi.canScrollPrev()); setNextBtnDisabled(!emblaApi.canScrollNext()); emblaThumbsApi?.scrollTo(emblaApi.selectedScrollSnap()); }, [emblaApi, emblaThumbsApi]); // Scroll progress handler const onScroll = useCallback((emblaApi: EmblaCarouselType) => { const progress = Math.max(0, Math.min(1, emblaApi.scrollProgress())); setScrollProgress(progress * 100); }, []); // Scale animation for isScale mode const tweenFactor = useRef(0); const tweenNodes = useRef([]); const setTweenNodes = useCallback( (emblaApi: EmblaCarouselType): void => { if (!isScale) return; tweenNodes.current = emblaApi .slideNodes() .map((slideNode) => slideNode.querySelector('.slider_content')) as HTMLElement[]; }, [isScale] ); const setTweenFactor = useCallback( (emblaApi: EmblaCarouselType) => { if (!isScale) return; tweenFactor.current = TWEEN_FACTOR_BASE * emblaApi.scrollSnapList().length; }, [isScale] ); const tweenScale = useCallback( (emblaApi: EmblaCarouselType, eventName?: EmblaEventType) => { if (!isScale) return; const engine = emblaApi.internalEngine(); const scrollProgress = emblaApi.scrollProgress(); const slidesInView = emblaApi.slidesInView(); const isScrollEvent = eventName === 'scroll'; emblaApi.scrollSnapList().forEach((scrollSnap, snapIndex) => { let diffToTarget = scrollSnap - scrollProgress; const slidesInSnap = engine.slideRegistry[snapIndex]; slidesInSnap.forEach((slideIndex) => { if (isScrollEvent && !slidesInView.includes(slideIndex)) return; if (engine.options.loop) { engine.slideLooper.loopPoints.forEach((loopItem) => { const target = loopItem.target(); if (slideIndex === loopItem.index && target !== 0) { const sign = Math.sign(target); if (sign === -1) { diffToTarget = scrollSnap - (1 + scrollProgress); } if (sign === 1) { diffToTarget = scrollSnap + (1 - scrollProgress); } } }); } const tweenValue = 1 - Math.abs(diffToTarget * tweenFactor.current); const scale = numberWithinRange(tweenValue, 0, 1).toString(); const tweenNode = tweenNodes.current[slideIndex]; if (tweenNode) { tweenNode.style.transform = `scale(${scale})`; } }); }); }, [isScale] ); // Effects useEffect(() => { if (!emblaApi) return; setScrollSnaps(emblaApi.scrollSnapList()); setSnapCount(emblaApi.scrollSnapList().length); onSelect(); onScroll(emblaApi); emblaApi .on('reInit', onSelect) .on('select', onSelect) .on('reInit', onScroll) .on('scroll', onScroll); if (isScale) { setTweenNodes(emblaApi); setTweenFactor(emblaApi); tweenScale(emblaApi); emblaApi .on('reInit', setTweenNodes) .on('reInit', setTweenFactor) .on('reInit', tweenScale) .on('scroll', tweenScale); } }, [emblaApi, onSelect, onScroll, isScale, setTweenNodes, setTweenFactor, tweenScale]); return (

{children}

); } ); Carousel.displayName = 'Carousel'; // ============= SLIDER CONTAINER ============= export const SliderContainer = forwardRef>( ({ className, children, ...props }, ref) => { const { emblaRef, orientation } = useCarousel(); return (

{children}

); } ); SliderContainer.displayName = 'SliderContainer'; // ============= SLIDER ITEM ============= interface SliderProps extends React.HTMLAttributes { thumbnailSrc?: string; } export const Slider = forwardRef( ({ children, className, thumbnailSrc, ...props }, ref) => { const { isScale, setSlidesArr, orientation } = useCarousel(); useEffect(() => { if (thumbnailSrc) { setSlidesArr((prev) => { if (!prev.includes(thumbnailSrc)) { return [...prev, thumbnailSrc]; } return prev; }); } }, [thumbnailSrc, setSlidesArr]); return (

{isScale ?

{children}

: children}

); } ); Slider.displayName = 'Slider'; // ============= NAVIGATION BUTTONS ============= export const SliderPrevButton = forwardRef< HTMLButtonElement, React.ButtonHTMLAttributes >(({ children, className, ...props }, ref) => { const { onPrevButtonClick, prevBtnDisabled } = useCarousel(); return ( ); }); SliderPrevButton.displayName = 'SliderPrevButton'; export const SliderNextButton = forwardRef< HTMLButtonElement, React.ButtonHTMLAttributes >(({ children, className, ...props }, ref) => { const { onNextButtonClick, nextBtnDisabled } = useCarousel(); return ( ); }); SliderNextButton.displayName = 'SliderNextButton'; // ============= PROGRESS BAR ============= export const SliderProgress = forwardRef>( ({ className, ...props }, ref) => { const { scrollProgress } = useCarousel(); return (

); } ); SliderProgress.displayName = 'SliderProgress'; // ============= SNAP DISPLAY ============= export const SliderSnapDisplay = forwardRef>( ({ className, ...props }, ref) => { const { selectedSnap, snapCount } = useCarousel(); const prevSnapRef = useRef(selectedSnap); const direction = selectedSnap > prevSnapRef.current ? 1 : -1; useEffect(() => { prevSnapRef.current = selectedSnap; }, [selectedSnap]); return (

({ y: d * 20, opacity: 0 })} animate={{ y: 0, opacity: 1 }} // @ts-expect-error exit={(d: number) => ({ y: d * -20, opacity: 0 })} > {selectedSnap + 1} / {snapCount}

); } ); SliderSnapDisplay.displayName = 'SliderSnapDisplay'; // ============= DOT BUTTONS ============= interface SliderDotButtonProps extends React.HTMLAttributes { activeClass?: string; } export const SliderDotButton = forwardRef( ({ className, activeClass, ...props }, ref) => { const { selectedIndex, scrollSnaps, orientation, onDotButtonClick, carouselId } = useCarousel(); return (

{scrollSnaps.map((_, index) => ( ))}

); } ); SliderDotButton.displayName = 'SliderDotButton'; // ============= CAROUSEL INDICATORS ============= interface CarouselIndicatorProps extends React.ButtonHTMLAttributes { index: number; } export const CarouselIndicator = forwardRef( ({ className, index, ...props }, ref) => { const { selectedIndex, onDotButtonClick } = useCarousel(); const isActive = selectedIndex === index; return ( ); } ); CarouselIndicator.displayName = 'CarouselIndicator'; // Auto-generate thumbnails from slides export const ThumbsSlider = forwardRef< HTMLDivElement, React.HTMLAttributes & { thumbsClassName?: string; thumbsSliderClassName?: string; } >(({ className, thumbsClassName, thumbsSliderClassName, ...props }, ref) => { const { slidesArr, selectedIndex, onThumbClick, orientation, emblaThumbsRef } = useCarousel(); if (slidesArr.length === 0) return null; return (

{slidesArr.map((src, index) => (

onThumbClick(index)} className={cn( 'shrink-0 cursor-pointer transition-opacity', 'border-2 rounded-md', orientation === 'vertical' ? 'basis-[15%] h-20' : 'basis-[15%] h-24', selectedIndex === index ? 'opacity-100 border-primary' : 'opacity-30 border-transparent', thumbsSliderClassName )} > {`Thumbnail

))}

); }); ThumbsSlider.displayName = 'ThumbsSlider'; // Alias for backward compatibility 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L4f",null,{"registryDependencies":[]}]]}],["$","$L50",null,{"sourceUrl":"https://ui-layouts.com/r/framer-draggable-carousel.json","proxyUrl":"https://shadcnregistry.com/r/ui-layouts/framer-draggable-carousel","itemId":"@ui-layouts/framer-draggable-carousel"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"./registry/components/carousel/framer/framer-draggable-carousel.tsx","content":"$52","type":"registry:component"},{"path":"./components/ui/carousel.tsx","content":"$53","type":"registry:component"}]}]]}],"$L54"]}]

Framer Draggable Carousel

Installation

Files

components

Styles