/* ! Add the following to your .globals.css .animated-cards::before { @apply pointer-events-none absolute select-none rounded-3xl opacity-0 transition-opacity duration-300 hover:opacity-100; background: radial-gradient( 1000px circle at var(--x) var(--y), #c9ee80 0, #eebbe2 10%, #adc0ec 25%, #c9ee80 35%, rgba(255, 255, 255, 0) 50%, transparent 80% ); z-index: -1; content: ""; inset: -1px; } */ "use client" import { forwardRef, useCallback, useEffect, useRef, useState, type MouseEvent, } from "react" import Image, { type StaticImageData } from "next/image" import clsx from "clsx" import { AnimatePresence, motion, useMotionTemplate, useMotionValue, type MotionStyle, type MotionValue, type Variants, } from "motion/react" import Balancer from "react-wrap-balancer" import { cn } from "@/lib/utils" // Types type WrapperStyle = MotionStyle & { "--x": MotionValue "--y": MotionValue } interface CardProps { title: string description: string bgClass?: string } interface ImageSet { step1dark1?: StaticImageData | string step1dark2?: StaticImageData | string step1light1: StaticImageData | string step1light2: StaticImageData | string step2dark1?: StaticImageData | string step2dark2?: StaticImageData | string step2light1: StaticImageData | string step2light2: StaticImageData | string step3dark?: StaticImageData | string step3light: StaticImageData | string step4light: StaticImageData | string alt: string } interface FeatureCarouselProps extends CardProps { step1img1Class?: string step1img2Class?: string step2img1Class?: string step2img2Class?: string step3imgClass?: string step4imgClass?: string image: ImageSet } interface StepImageProps { src: StaticImageData | string alt: string className?: string style?: React.CSSProperties width?: number height?: number } interface Step { id: string name: string title: string description: string } // Constants const TOTAL_STEPS = 4 const steps = [ { id: "1", name: "Step 1", title: "Feature 1", description: "Feature 1 description ", }, { id: "2", name: "Step 2", title: "Feature 2", description: "Feature 2 description", }, { id: "3", name: "Step 3", title: "Feature 3", description: "Feature 3 description", }, { id: "4", name: "Step 4", title: "Feature 4", description: "Feature 4 description", }, ] as const /** * Animation presets for reusable motion configurations. * Each preset defines the initial, animate, and exit states, * along with spring physics parameters for smooth transitions. */ const ANIMATION_PRESETS = { fadeInScale: { initial: { opacity: 0, scale: 0.95 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.95 }, transition: { type: "spring", stiffness: 300, // Higher value = more rigid spring damping: 25, // Higher value = less oscillation mass: 0.5, // Lower value = faster movement }, }, slideInRight: { initial: { opacity: 0, x: 20 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: -20 }, transition: { type: "spring", stiffness: 300, damping: 25, mass: 0.5, }, }, slideInLeft: { initial: { opacity: 0, x: -20 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: 20 }, transition: { type: "spring", stiffness: 300, damping: 25, mass: 0.5, }, }, } as const type AnimationPreset = keyof typeof ANIMATION_PRESETS interface AnimatedStepImageProps extends StepImageProps { preset?: AnimationPreset delay?: number onAnimationComplete?: () => void } /** * Custom hook for managing cyclic transitions with auto-play functionality. * Handles both automatic cycling and manual transitions between steps. */ function useNumberCycler( totalSteps: number = TOTAL_STEPS, interval: number = 3000 ) { const [currentNumber, setCurrentNumber] = useState(0) const [isManualInteraction, setIsManualInteraction] = useState(false) const timerRef = useRef(null) // Setup timer function const setupTimer = useCallback(() => { console.log("Setting up timer") // Clear any existing timer if (timerRef.current) { clearTimeout(timerRef.current) } timerRef.current = setTimeout(() => { console.log("Timer triggered, advancing to next step") setCurrentNumber((prev) => (prev + 1) % totalSteps) setIsManualInteraction(false) // Recursively setup next timer setupTimer() }, interval) }, [interval, totalSteps]) // Handle manual increment const increment = useCallback(() => { console.log("Manual increment triggered") setIsManualInteraction(true) setCurrentNumber((prev) => (prev + 1) % totalSteps) // Reset timer on manual interaction setupTimer() }, [totalSteps, setupTimer]) // Initial timer setup and cleanup useEffect(() => { console.log("Initial timer setup") setupTimer() return () => { console.log("Cleaning up timer") if (timerRef.current) { clearTimeout(timerRef.current) } } }, [setupTimer]) // Debug logging useEffect(() => { console.log("Current state:", { currentNumber, isManualInteraction, hasTimer: !!timerRef.current, }) }, [currentNumber, isManualInteraction]) return { currentNumber, increment, isManualInteraction, } } function useIsMobile() { const [isMobile, setIsMobile] = useState(false) useEffect(() => { const userAgent = navigator.userAgent const isSmall = window.matchMedia("(max-width: 768px)").matches const isMobile = Boolean( /Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i.exec( userAgent ) ) const isDev = process.env.NODE_ENV !== "production" if (isDev) setIsMobile(isSmall || isMobile) setIsMobile(isSmall && isMobile) }, []) return isMobile } // Components function IconCheck({ className, ...props }: React.ComponentProps<"svg">) { return ( ) } const stepVariants: Variants = { inactive: { scale: 0.8, opacity: 0.5, }, active: { scale: 1, opacity: 1, }, } const StepImage = forwardRef< HTMLImageElement, StepImageProps & { [key: string]: any } >( ( { src, alt, className, style, width = 1200, height = 630, ...props }, ref ) => { return ( {alt}

) } ) StepImage.displayName = "StepImage" const MotionStepImage = motion(StepImage) /** * Wrapper component for StepImage that applies animation presets. * Simplifies the application of complex animations through preset configurations. */ const AnimatedStepImage = ({ preset = "fadeInScale", delay = 0, onAnimationComplete, ...props }: AnimatedStepImageProps) => { const presetConfig = ANIMATION_PRESETS[preset] return ( ) } /** * Main card component that handles mouse tracking for gradient effect. * Uses motion values to create an interactive gradient that follows the cursor. */ function FeatureCard({ bgClass, children, step, }: CardProps & { children: React.ReactNode step: number }) { const [mounted, setMounted] = useState(false) const mouseX = useMotionValue(0) const mouseY = useMotionValue(0) const isMobile = useIsMobile() function handleMouseMove({ currentTarget, clientX, clientY }: MouseEvent) { if (isMobile) return const { left, top } = currentTarget.getBoundingClientRect() mouseX.set(clientX - left) mouseY.set(clientY - top) } useEffect(() => { setMounted(true) }, []) return (

{steps[step].title}

{steps[step].description}

{mounted ? children : null}

) } /** * Progress indicator component that shows current step and completion status. * Handles complex state transitions and animations for step indicators. */ function Steps({ steps, current, onChange, }: { steps: readonly Step[] current: number onChange: (index: number) => void }) { return (

onChange(stepIdx)} > {isCompleted ? ( ) : ( {stepIdx + 1} )} {step.name}

) } const defaultClasses = { step1img1: "pointer-events-none w-[50%] border border-border-100/10 transition-all duration-500 dark:border-border-700/50 rounded-2xl", step1img2: "pointer-events-none w-[60%] border border-border-100/10 dark:border-border-700/50 transition-all duration-500 overflow-hidden rounded-2xl", step2img1: "pointer-events-none w-[50%] border border-border-100/10 transition-all duration-500 dark:border-border-700 rounded-2xl overflow-hidden", step2img2: "pointer-events-none w-[40%] border border-border-100/10 dark:border-border-700 transition-all duration-500 rounded-2xl overflow-hidden", step3img: "pointer-events-none w-[90%] border border-border-100/10 dark:border-border-700 rounded-2xl transition-all duration-500 overflow-hidden", step4img: "pointer-events-none w-[90%] border border-border-100/10 dark:border-border-700 rounded-2xl transition-all duration-500 overflow-hidden", } as const /** * Main component that orchestrates the multi-step animation sequence. * Manages state transitions, handles animation timing, and prevents * animation conflicts through the isAnimating flag. */ export function FeatureCarousel({ image, step1img1Class = defaultClasses.step1img1, step1img2Class = defaultClasses.step1img2, step2img1Class = defaultClasses.step2img1, step2img2Class = defaultClasses.step2img2, step3imgClass = defaultClasses.step3img, step4imgClass = defaultClasses.step4img, ...props }: FeatureCarouselProps) { const { currentNumber: step, increment } = useNumberCycler() const [isAnimating, setIsAnimating] = useState(false) const handleIncrement = () => { if (isAnimating) return setIsAnimating(true) increment() } const handleAnimationComplete = () => { setIsAnimating(false) } const renderStepContent = () => { const content = () => { switch (step) { case 0: /** * Layout: Two images side by side * - Left image (step1img1): 50% width, positioned left * - Right image (step1img2): 60% width, positioned right * Animation: * - Left image slides in from left * - Right image slides in from right with 0.1s delay * - Both use spring animation for smooth motion */ return ( ) case 1: /** * Layout: Two images with overlapping composition * - First image (step2img1): 50% width, positioned left * - Second image (step2img2): 40% width, overlaps first image * Animation: * - Both images fade in and scale up from 95% * - Second image has 0.1s delay for staggered effect * - Uses spring physics for natural motion */ return ( ) case 2: /** * Layout: Single centered image * - Full width image (step3img): 90% width, centered * Animation: * - Fades in and scales up from 95% * - Uses spring animation for smooth scaling * - Triggers animation complete callback */ return ( ) case 3: /** * Layout: Final showcase layout * - Container: Centered, 60% width on desktop * - Image (cult): 90% width, positioned slightly up * Animation: * - Container fades in and scales up * - Image follows with 0.1s delay * - Both use spring physics for natural motion */ return ( ) default: return null } } return ( {content()} ) } return ( {renderStepContent()} {}} steps={steps} /> ) } export default FeatureCarousel

Feature Carousel

Instalação

Dependências