An image comparison slider with a spring-animated divider that follows the cursor on hover to reveal before/after images.
"use client";
import { SideBySideSlide } from "@/components/ui/side-by-side-slide";
interface SideBySideSlideDemoProps {
orientation?: "horizontal" | "vertical";
initialPosition?: number;
dividerColor?: string;
dividerWidth?: number;
showHandle?: boolean;
handleSize?: number;
handleColor?: string;
cursor?: "none" | "col-resize" | "row-resize" | "pointer";
stiffness?: number;
damping?: number;
}
export default function SideBySideSlideDemo({
orientation = "horizontal",
initialPosition = 50,
dividerColor = "white",
dividerWidth = 2,
showHandle = true,
handleSize = 40,
handleColor = "white",
cursor = "none",
stiffness = 300,
damping = 30,
}: SideBySideSlideDemoProps) {
return (
<div className="flex items-center justify-center p-8">
<div className="w-full max-w-2xl overflow-hidden rounded-xl">
<SideBySideSlide
beforeImage="https://cdn.21st.dev/assets/mirror/8c/8c1eb5bf7bf730477c5332303fdf13aeb95787ade61b54a7d94fbfba13907a4f.png"
afterImage="https://cdn.21st.dev/assets/mirror/16/165a7ce13698c85d5240f7ce4a34ebef433cec2f2dd57ce4922c06e1fa49524d.png"
beforeAlt="Modern house exterior"
afterAlt="Modern house interior"
orientation={orientation}
initialPosition={initialPosition}
dividerColor={dividerColor}
dividerWidth={dividerWidth}
showHandle={showHandle}
handleSize={handleSize}
handleColor={handleColor}
cursor={cursor}
springOptions={{ stiffness, damping }}
className="aspect-video"
/>
</div>
</div>
);
}