"use client"; import { useEffect, useRef, useState } from "react"; import { motion, useMotionValue, useTransform } from "framer-motion"; import { GripVertical } from "lucide-react"; import { cn } from "@/lib/utils"; export function CompareSlider({ before, after, beforeLabel = "Before", afterLabel = "After", className, }: { before: React.ReactNode; after: React.ReactNode; beforeLabel?: string; afterLabel?: string; className?: string; }) { const ref = useRef(null); const [dragging, setDragging] = useState(false); const x = useMotionValue(50); const clipPath = useTransform(x, (v) => `inset(0 0 0 ${v}%)`); // Idle auto-sweep so the comparison is visible without dragging. useEffect(() => { if (dragging) return; let t = 0; const id = setInterval(() => { t += 1; x.set(Math.round((50 + 24 * Math.sin(t * 0.045)) * 100) / 100); }, 40); return () => clearInterval(id); }, [dragging, x]); function updateFromClientX(clientX: number) { const rect = ref.current?.getBoundingClientRect(); if (!rect) return; const pct = ((clientX - rect.left) / rect.width) * 100; x.set(Math.min(100, Math.max(0, pct))); } return (

dragging && updateFromClientX(e.clientX)} onMouseUp={() => setDragging(false)} onMouseLeave={() => setDragging(false)} onTouchMove={(e) => { if (dragging && e.touches[0]) updateFromClientX(e.touches[0].clientX); }} onTouchEnd={() => setDragging(false)} > {/* After (base layer, shows on the left of the divider) */}

{after}

{afterLabel} {/* Before (clipped layer, shows on the right of the divider) */} {before} {beforeLabel} {/* Handle */} `${v}%`) }} >

setDragging(true)} onTouchStart={() => setDragging(true)} className="absolute flex h-9 w-9 items-center justify-center rounded-full border border-white/30 bg-white text-void shadow-lg" >

); } /** A tiny mock UI that reads as flat/plain (before) or vivid/polished (after). */ function MockUi({ enhanced }: { enhanced: boolean }) { return (

{enhanced && ( <>

)}

); } export default function Demo() { return (

} after={} />

); }

Compare Slider