52:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T3351,// npm i embla-carousel-autoplay framer-motion lucide-react // npx shadcn@latest add carousel "use client" import React, { useCallback, useEffect, useMemo, useState } from "react" import Image from "next/image" import Autoplay from "embla-carousel-autoplay" import { ChevronRight } from "lucide-react" import { AnimatePresence, motion, useReducedMotion, type Variants, } from "motion/react" import { cn } from "@/lib/utils" import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type CarouselApi, } from "@/components/ui/carousel" interface Tip { text: string image: string url?: string } interface LoadingCarouselProps { tips?: Tip[] className?: string autoplayInterval?: number showNavigation?: boolean showIndicators?: boolean showProgress?: boolean aspectRatio?: "video" | "square" | "wide" textPosition?: "top" | "bottom" onTipChange?: (index: number) => void backgroundTips?: boolean backgroundGradient?: boolean shuffleTips?: boolean } const defaultTips: Tip[] = [ { text: "Backend snippets. Shadcn style headless components.. but for your backend.", image: "/placeholders/cult-snips.png", url: "https://www.newcult.co/backend", }, { text: "Create your first directory app today. AI batch scripts to process 100s of urls in seconds.", image: "/placeholders/cult-dir.png", url: "https://www.newcult.co/templates/cult-seo", }, { text: "Cult landing page template. Framer motion, shadcn, and tailwind.", image: "/placeholders/cult-rune.png", url: "https://www.newcult.co/templates/cult-landing-page", }, { text: "Vector embeddings, semantic search, and chat based vector retrieval on easy mode.", image: "/placeholders/cult-manifest.png", url: "https://www.newcult.co/templates/manifest", }, { text: "SEO analysis app. Scraping, analysis, insights, and AI recommendations.", image: "/placeholders/cult-seo.png", url: "https://www.newcult.co/templates/cult-seo", }, ] function shuffleArray(array: T[]): T[] { const shuffled = [...array] for (let i = shuffled.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)) ;[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]] } return shuffled } function getTipKey(tip: Tip): string { return `${tip.text}-${tip.image}` } const carouselVariants: Variants = { enter: (direction: number) => ({ x: direction > 0 ? "100%" : "-100%", opacity: 0, }), center: { x: 0, opacity: 1, }, exit: (direction: number) => ({ x: direction < 0 ? "100%" : "-100%", opacity: 0, }), } const textVariants: Variants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { delay: 0.3, duration: 0.5 } }, } const aspectRatioClasses = { video: "aspect-video", square: "aspect-square", wide: "aspect-[2/1]", } export function LoadingCarousel({ onTipChange, className, tips = defaultTips, showProgress = true, aspectRatio = "video", showNavigation = false, showIndicators = true, backgroundTips = false, textPosition = "bottom", autoplayInterval = 4500, backgroundGradient = false, shuffleTips = false, }: LoadingCarouselProps) { const [api, setApi] = useState() const [current, setCurrent] = useState(0) const [direction, setDirection] = useState(0) const prefersReducedMotion = useReducedMotion() const [displayTips] = useState(() => shuffleTips ? shuffleArray(tips) : tips ) const autoplay = useMemo( () => Autoplay({ delay: autoplayInterval, stopOnInteraction: false, }), [autoplayInterval] ) useEffect(() => { if (!api) { return } setCurrent(api.selectedScrollSnap()) setDirection( api.scrollSnapList().indexOf(api.selectedScrollSnap()) - current ) const onSelect = () => { const newIndex = api.selectedScrollSnap() setCurrent(newIndex) setDirection(api.scrollSnapList().indexOf(newIndex) - current) onTipChange?.(newIndex) } api.on("select", onSelect) return () => { api.off("select", onSelect) } }, [api, current, onTipChange]) const handleSelect = useCallback( (index: number) => { api?.scrollTo(index) }, [api] ) return (

{(displayTips || []).map((tip) => ( {`Visual

{backgroundGradient && (

)} {backgroundTips ? ( {displayTips[current]?.url ? (

{tip.text}

) : (

{tip.text}

)} ) : null} ))} {showNavigation && ( <> )}

{showIndicators && (

{(displayTips || []).map((tip, index) => { const isActive = index === current const isComplete = index < current return ( ) })}

)}

{backgroundTips ? ( Tip {current + 1}/{displayTips?.length || 0} ) : (

{displayTips[current]?.url ? ( {displayTips[current]?.text} ) : ( {displayTips[current]?.text} )}

)} {backgroundTips && (

) } export default LoadingCarousel 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","embla-carousel-autoplay",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/embla-carousel-autoplay","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","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":"min-w-0 break-all text-xs font-medium","children":"embla-carousel-autoplay"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","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":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","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":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L52",null,{"namespace":"@cult-ui","registryDependencies":["carousel"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/default/ui/loading-carousel.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]