"use client"; import * as m from "motion/react-m"; import Image from "next/image"; import { useCallback, useEffect, useRef, useState } from "react"; import { cn } from "@/lib/utils"; import Image1 from "@/public/demos/image-comparison/image-1.jpg"; import Image2 from "@/public/demos/image-comparison/image-2.jpg"; const THRESHOLD = 5; const DEFAULT_POSITION = 50; const MIN_POSITION = 6; const MAX_POSITION = 94; export default function ImageComparisonDemo() { const [position, setPosition] = useState(DEFAULT_POSITION); const [isDragging, setIsDragging] = useState(false); const [isFocused, setIsFocused] = useState(false); const containerRef = useRef(null); const activePointerId = useRef(null); const isDraggingRef = useRef(false); const updatePosition = useCallback((clientX: number) => { const container = containerRef.current; if (!container) return; const { left, width } = container.getBoundingClientRect(); const clamped = Math.min( Math.max(((clientX - left) / width) * 100, 0), 100, ); setPosition(clamped); }, []); const updatePositionRef = useRef(updatePosition); const resetPosition = useCallback(() => { setPosition(DEFAULT_POSITION); }, []); const handlePointerDown = (e: React.PointerEvent) => { e.currentTarget.setPointerCapture(e.pointerId); activePointerId.current = e.pointerId; isDraggingRef.current = true; setIsDragging(true); updatePosition(e.clientX); }; const handlePointerMove = (e: React.PointerEvent) => { if (!isDraggingRef.current || activePointerId.current !== e.pointerId) { return; } updatePosition(e.clientX); }; useEffect(() => { updatePositionRef.current = updatePosition; }, [updatePosition]); useEffect(() => { const handleMove = (event: PointerEvent) => { if (!isDraggingRef.current || activePointerId.current === null) return; updatePositionRef.current(event.clientX); }; const handleUp = () => { isDraggingRef.current = false; setIsDragging(false); activePointerId.current = null; }; window.addEventListener("pointermove", handleMove); window.addEventListener("pointerup", handleUp); window.addEventListener("pointercancel", handleUp); return () => { window.removeEventListener("pointermove", handleMove); window.removeEventListener("pointerup", handleUp); window.removeEventListener("pointercancel", handleUp); }; }, []); const handleKeyDown = (event: React.KeyboardEvent) => { const step = event.shiftKey ? 10 : 4; if (event.key === "ArrowLeft") { event.preventDefault(); setPosition((current) => Math.max(MIN_POSITION, current - step)); } if (event.key === "ArrowRight") { event.preventDefault(); setPosition((current) => Math.min(MAX_POSITION, current + step)); } if (event.key === "Home") { event.preventDefault(); setPosition(MIN_POSITION); } if (event.key === "End") { event.preventDefault(); setPosition(MAX_POSITION); } }; return (

Before / after comparison

Drag the handle, use the keyboard, or reset to compare both images.

setIsFocused(true)} onBlur={() => setIsFocused(false)} onKeyDown={handleKeyDown} className={cn( "group relative isolate aspect-16/10 min-h-[320px] overflow-hidden rounded-3xl bg-neutral-950", "touch-none select-none", isFocused && "ring-1 ring-white/50 ring-offset-2 ring-offset-black", )} style={{ cursor: isDragging ? "grabbing" : "col-resize" }} onPointerDown={handlePointerDown} onPointerMove={handlePointerMove} >

{position <= THRESHOLD ? null : ( Before )} {position >= 100 - THRESHOLD ? null : ( After )}

); } function HandleIcon() { return ( ); }

Image Comparison