"use client"; import { useRef, useState, useEffect } from "react"; import gsap from "gsap"; export interface RindWipeTransitionProps extends React.ComponentPropsWithoutRef<"div"> { global?: boolean; trigger?: boolean; onHalfComplete?: () => void; onComplete?: () => void; gradient?: string; text?: string; textColor?: string; duration?: number; holdDelay?: number; buttonLabel?: string; buttonColor?: string; buttonTextColor?: string; borderColor?: string; demoContent?: React.ReactNode; } export function RindWipeTransition({ global = false, trigger = false, onHalfComplete, onComplete, gradient = "linear-gradient(90deg, #7fff5e 0%, #4dc43f 50%, #7fff5e 100%)", text = "🍉 MelonUI", textColor = "#050505", duration = 0.55, holdDelay = 0.3, buttonLabel = "Trigger Wipe →", buttonColor = "#ff5c71", buttonTextColor = "#050505", borderColor = "#1e1e1e", demoContent = "Page Content Here", className = "", style, ...props }: RindWipeTransitionProps) { const wipeRef = useRef(null); const [isRunning, setIsRunning] = useState(false); const runWipe = () => { if (isRunning || !wipeRef.current) return; setIsRunning(true); const tl = gsap.timeline({ onComplete: () => { setIsRunning(false); onComplete?.(); }, }); // Sweep in tl.set(wipeRef.current, { x: "-100%", display: "flex" }) .to(wipeRef.current, { x: "0%", duration: duration, ease: "power3.inOut", }) .call(() => { onHalfComplete?.(); }) // Hold .to(wipeRef.current, { x: "100%", duration: duration, ease: "power3.inOut", delay: holdDelay, }) .set(wipeRef.current, { display: "none" }); }; useEffect(() => { if (trigger) { runWipe(); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [trigger]); // If in global mode, render only the portal-like full-screen absolute/fixed wipe overlay if (global) { return (

{text}

); } // Local demo container return (

{/* Demo viewport */}

{demoContent}

{/* Wipe element */}

{text}

{/* Rind stripe overlay decoration */}

Click to simulate a route transition

); }

Component Showcase

Choose Installation Method

AI Automation Agent Prompt