Displays a beautiful AI Image Compare.
npm install framer-motionimport { ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
| Prop | Type | Description |
|---|---|---|
| firstImage | string | first image for compare |
| secondImage | string | second image for compare |
| className | string | the class name |
| slideMode | string | "hover" |
| autoplay | bolean | Enable automatic sliding, default false |
| initialSliderPercentage | number | Initial position of the slider, default 60 |
| autoplayDuration | number | Duration of one autoplay cycle in milliseconds, default 6000 |
| showHandlebar | boolean | Show handlebar, default true |
export function CompareDemo() {
return (
<div className="w-full h-[60vh] px-1 md:px-8 flex items-center justify-center [perspective:800px] [transform-style:preserve-3d]">
<div className="p-1 md:p-4 border rounded-3xl dark:bg-neutral-900 bg-neutral-100 border-neutral-200 dark:border-neutral-800 mx-auto w-3/4 h-1/2 md:h-3/4">
<Compare
firstImage="/placeholder.svg"
secondImage="/home.jpg"
className="size-full rounded-[22px] md:rounded-lg"
slideMode="hover"
autoplay={true}
/>
</div>
</div>
)
}