Installation
Install dependencies
npm i framer-motion clsx tailwind-mergeInstall Sparkles Dependencies
npm i @tsparticles/react @tsparticles/engine @tsparticles/slimAdd util file
lib/utils.ts
import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}Copy the source code
components/ui/compare.tsx
"use client";
import React, { useState, useEffect, useRef, useCallback } from "react";
import { SparklesCore } from "@/components/ui/sparkles";
import { AnimatePresence, motion } from "framer-motion";
import { cn } from "@/lib/utils";
import { IconDotsVertical } from "@tabler/icons-react";
interface CompareProps {
firstImage?: string;
secondImage?: string;
className?: string;
firstImageClassName?: string;
secondImageClassname?: string;
initialSliderPercentage?: number;
slideMode?: "hover" | "drag";
showHandlebar?: boolean;
autoplay?: boolean;
autoplayDuration?: number;
}
export const Compare = ({
firstImage = "",
secondImage = "",
className,
firstImageClassName,
secondImageClassname,
initialSliderPercentage = 50,
slideMode = "hover",
showHandlebar = true,
autoplay = false,
autoplayDuration = 5000,
}: CompareProps) => {
const [sliderXPercent, setSliderXPercent] = useState(initialSliderPercentage);
const [isDragging, setIsDragging] = useState(false);
const sliderRef = useRef<HTMLDivElement>(null);
const [isMouseOver, setIsMouseOver] = useState(false);
const autoplayRef = useRef<NodeJS.Timeout | null>(null);
const startAutoplay = useCallback(() => {
if (!autoplay) return;
const startTime = Date.now();
const animate = () => {
const elapsedTime = Date.now() - startTime;
const progress =
(elapsedTime % (autoplayDuration * 2)) / autoplayDuration;
const percentage = progress <= 1 ? progress * 100 : (2 - progress) * 100;
setSliderXPercent(percentage);
autoplayRef.current = setTimeout(animate, 16); // ~60fps
};
animate();
}, [autoplay, autoplayDuration]);
const stopAutoplay = useCallback(() => {
if (autoplayRef.current) {
clearTimeout(autoplayRef.current);
autoplayRef.current = null;
}
}, []);
useEffect(() => {
startAutoplay();
return () => stopAutoplay();
}, [startAutoplay, stopAutoplay]);
function mouseEnterHandler() {
setIsMouseOver(true);
stopAutoplay();
}
function mouseLeaveHandler() {
setIsMouseOver(false);
if (slideMode === "hover") {
setSliderXPercent(initialSliderPercentage);
}
if (slideMode === "drag") {
setIsDragging(false);
}
startAutoplay();
}
const handleStart = useCallback(
(clientX: number) => {
if (slideMode === "drag") {
setIsDragging(true);
}
},
[slideMode]
);
const handleEnd = useCallback(() => {
if (slideMode === "drag") {
setIsDragging(false);
}
}, [slideMode]);
const handleMove = useCallback(
(clientX: number) => {
if (!sliderRef.current) return;
if (slideMode === "hover" || (slideMode === "drag" && isDragging)) {
const rect = sliderRef.current.getBoundingClientRect();
const x = clientX - rect.left;
const percent = (x / rect.width) * 100;
requestAnimationFrame(() => {
setSliderXPercent(Math.max(0, Math.min(100, percent)));
});
}
},
[slideMode, isDragging]
);
const handleMouseDown = useCallback(
(e: React.MouseEvent) => handleStart(e.clientX),
[handleStart]
);
const handleMouseUp = useCallback(() => handleEnd(), [handleEnd]);
const handleMouseMove = useCallback(
(e: React.MouseEvent) => handleMove(e.clientX),
[handleMove]
);
const handleTouchStart = useCallback(
(e: React.TouchEvent) => {
if (!autoplay) {
handleStart(e.touches[0].clientX);
}
},
[handleStart, autoplay]
);
const handleTouchEnd = useCallback(() => {
if (!autoplay) {
handleEnd();
}
}, [handleEnd, autoplay]);
const handleTouchMove = useCallback(
(e: React.TouchEvent) => {
if (!autoplay) {
handleMove(e.touches[0].clientX);
}
},
[handleMove, autoplay]
);
return (
<div
ref={sliderRef}
className={cn("w-[400px] h-[400px] overflow-hidden", className)}
style={{
position: "relative",
cursor: slideMode === "drag" ? "grab" : "col-resize",
}}
onMouseMove={handleMouseMove}
onMouseLeave={mouseLeaveHandler}
onMouseEnter={mouseEnterHandler}
onMouseDown={handleMouseDown}
onMouseUp={handleMouseUp}
onTouchStart={handleTouchStart}
onTouchEnd={handleTouchEnd}
onTouchMove={handleTouchMove}
>
<AnimatePresence initial={false}>
<motion.div
className="h-full w-px absolute top-0 m-auto z-30 bg-gradient-to-b from-transparent from-[5%] to-[95%] via-indigo-500 to-transparent"
style={{
left: `${sliderXPercent}%`,
top: "0",
zIndex: 40,
}}
transition={{ duration: 0 }}
>
<div className="w-36 h-full [mask-image:radial-gradient(100px_at_left,white,transparent)] absolute top-1/2 -translate-y-1/2 left-0 bg-gradient-to-r from-indigo-400 via-transparent to-transparent z-20 opacity-50" />
<div className="w-10 h-1/2 [mask-image:radial-gradient(50px_at_left,white,transparent)] absolute top-1/2 -translate-y-1/2 left-0 bg-gradient-to-r from-cyan-400 via-transparent to-transparent z-10 opacity-100" />
<div className="w-10 h-3/4 top-1/2 -translate-y-1/2 absolute -right-10 [mask-image:radial-gradient(100px_at_left,white,transparent)]">
<MemoizedSparklesCore
background="transparent"
minSize={0.4}
maxSize={1}
particleDensity={1200}
className="w-full h-full"
particleColor="#FFFFFF"
/>
</div>
{showHandlebar && (
<div className="h-5 w-5 rounded-md top-1/2 -translate-y-1/2 bg-white z-30 -right-2.5 absolute flex items-center justify-center shadow-[0px_-1px_0px_0px_#FFFFFF40]">
<IconDotsVertical className="h-4 w-4 text-black" />
</div>
)}
</motion.div>
</AnimatePresence>
<div className="overflow-hidden w-full h-full relative z-20 pointer-events-none">
<AnimatePresence initial={false}>
{firstImage ? (
<motion.div
className={cn(
"absolute inset-0 z-20 rounded-2xl flex-shrink-0 w-full h-full select-none overflow-hidden",
firstImageClassName
)}
style={{
clipPath: `inset(0 ${100 - sliderXPercent}% 0 0)`,
}}
transition={{ duration: 0 }}
>
<img
alt="first image"
src={firstImage}
className={cn(
"absolute inset-0 z-20 rounded-2xl flex-shrink-0 w-full h-full select-none",
firstImageClassName
)}
draggable={false}
/>
</motion.div>
) : null}
</AnimatePresence>
</div>
<AnimatePresence initial={false}>
{secondImage ? (
<motion.img
className={cn(
"absolute top-0 left-0 z-[19] rounded-2xl w-full h-full select-none",
secondImageClassname
)}
alt="second image"
src={secondImage}
draggable={false}
/>
) : null}
</AnimatePresence>
</div>
);
};
const MemoizedSparklesCore = React.memo(SparklesCore);components/ui/sparkles.tsx
"use client";
import React, { useId, useMemo } from "react";
import { useEffect, useState } from "react";
import Particles, { initParticlesEngine } from "@tsparticles/react";
import type { Container, SingleOrMultiple } from "@tsparticles/engine";
import { loadSlim } from "@tsparticles/slim";
import { cn } from "@/lib/utils";
import { motion, useAnimation } from "framer-motion";
type ParticlesProps = {
id?: string;
className?: string;
background?: string;
particleSize?: number;
minSize?: number;
maxSize?: number;
speed?: number;
particleColor?: string;
particleDensity?: number;
};
export const SparklesCore = (props: ParticlesProps) => {
const {
id,
className,
background,
minSize,
maxSize,
speed,
particleColor,
particleDensity,
} = props;
const [init, setInit] = useState(false);
useEffect(() => {
initParticlesEngine(async (engine) => {
await loadSlim(engine);
}).then(() => {
setInit(true);
});
}, []);
const controls = useAnimation();
const particlesLoaded = async (container?: Container) => {
if (container) {
controls.start({
opacity: 1,
transition: {
duration: 1,
},
});
}
};
const generatedId = useId();
return (
<motion.div animate={controls} className={cn("opacity-0", className)}>
{init && (
<Particles
id={id || generatedId}
className={cn("h-full w-full")}
particlesLoaded={particlesLoaded}
options={{
background: {
color: {
value: background || "#0d47a1",
},
},
fullScreen: {
enable: false,
zIndex: 1,
},
fpsLimit: 120,
interactivity: {
events: {
onClick: {
enable: true,
mode: "push",
},
onHover: {
enable: false,
mode: "repulse",
},
resize: true as any,
},
modes: {
push: {
quantity: 4,
},
repulse: {
distance: 200,
duration: 0.4,
},
},
},
particles: {
bounce: {
horizontal: {
value: 1,
},
vertical: {
value: 1,
},
},
collisions: {
absorb: {
speed: 2,
},
bounce: {
horizontal: {
value: 1,
},
vertical: {
value: 1,
},
},
enable: false,
maxSpeed: 50,
mode: "bounce",
overlap: {
enable: true,
retries: 0,
},
},
color: {
value: particleColor || "#ffffff",
animation: {
h: {
count: 0,
enable: false,
speed: 1,
decay: 0,
delay: 0,
sync: true,
offset: 0,
},
s: {
count: 0,
enable: false,
speed: 1,
decay: 0,
delay: 0,
sync: true,
offset: 0,
},
l: {
count: 0,
enable: false,
speed: 1,
decay: 0,
delay: 0,
sync: true,
offset: 0,
},
},
},
effect: {
close: true,
fill: true,
options: {},
type: {} as SingleOrMultiple<string> | undefined,
},
groups: {},
move: {
angle: {
offset: 0,
value: 90,
},
attract: {
distance: 200,
enable: false,
rotate: {
x: 3000,
y: 3000,
},
},
center: {
x: 50,
y: 50,
mode: "percent",
radius: 0,
},
decay: 0,
distance: {},
direction: "none",
drift: 0,
enable: true,
gravity: {
acceleration: 9.81,
enable: false,
inverse: false,
maxSpeed: 50,
},
path: {
clamp: true,
delay: {
value: 0,
},
enable: false,
options: {},
},
outModes: {
default: "out",
},
random: false,
size: false,
speed: {
min: 0.1,
max: 1,
},
spin: {
acceleration: 0,
enable: false,
},
straight: false,
trail: {
enable: false,
length: 10,
fill: {},
},
vibrate: false,
warp: false,
},
number: {
density: {
enable: true,
width: 400,
height: 400,
},
limit: {
mode: "delete",
value: 0,
},
value: particleDensity || 120,
},
opacity: {
value: {
min: 0.1,
max: 1,
},
animation: {
count: 0,
enable: true,
speed: speed || 4,
decay: 0,
delay: 0,
sync: false,
mode: "auto",
startValue: "random",
destroy: "none",
},
},
reduceDuplicates: false,
shadow: {
blur: 0,
color: {
value: "#000",
},
enable: false,
offset: {
x: 0,
y: 0,
},
},
shape: {
close: true,
fill: true,
options: {},
type: "circle",
},
size: {
value: {
min: minSize || 1,
max: maxSize || 3,
},
animation: {
count: 0,
enable: false,
speed: 5,
decay: 0,
delay: 0,
sync: false,
mode: "auto",
startValue: "random",
destroy: "none",
},
},
stroke: {
width: 0,
},
zIndex: {
value: 0,
opacityRate: 1,
sizeRate: 1,
velocityRate: 1,
},
destroy: {
bounds: {},
mode: "none",
split: {
count: 1,
factor: {
value: 3,
},
rate: {
value: {
min: 4,
max: 9,
},
},
sizeOffset: true,
},
},
roll: {
darken: {
enable: false,
value: 0,
},
enable: false,
enlighten: {
enable: false,
value: 0,
},
mode: "vertical",
speed: 25,
},
tilt: {
value: 0,
animation: {
enable: false,
speed: 0,
decay: 0,
sync: false,
},
direction: "clockwise",
enable: false,
},
twinkle: {
lines: {
enable: false,
frequency: 0.05,
opacity: 1,
},
particles: {
enable: false,
frequency: 0.05,
opacity: 1,
},
},
wobble: {
distance: 5,
enable: false,
speed: {
angle: 50,
move: 10,
},
},
life: {
count: 0,
delay: {
value: 0,
sync: false,
},
duration: {
value: 0,
sync: false,
},
},
rotate: {
value: 0,
animation: {
enable: false,
speed: 0,
decay: 0,
sync: false,
},
direction: "clockwise",
path: false,
},
orbit: {
animation: {
count: 0,
enable: false,
speed: 1,
decay: 0,
delay: 0,
sync: false,
},
enable: false,
opacity: 1,
rotation: {
value: 45,
},
width: 1,
},
links: {
blink: false,
color: {
value: "#fff",
},
consent: false,
distance: 100,
enable: false,
frequency: 1,
opacity: 1,
shadow: {
blur: 5,
color: {
value: "#000",
},
enable: false,
},
triangles: {
enable: false,
frequency: 1,
},
width: 1,
warp: false,
},
repulse: {
value: 0,
enabled: false,
distance: 1,
duration: 1,
factor: 1,
speed: 1,
},
},
detectRetina: true,
}}
/>
)}
</motion.div>
);
};Examples
Standard
Autoplay
Standard
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| firstImage | string | "" | URL of the first image |
| secondImage | string | "" | URL of the second image |
| className | string | undefined | Additional CSS classes for the container |
| firstImageClassName | string | undefined | Additional CSS classes for the first image |
| secondImageClassname | string | undefined | Additional CSS classes for the second image |
| initialSliderPercentage | number | 50 | Initial position of the slider (0-100) |
| slideMode | "hover" | "drag" | "hover" | Mode of interaction for the slider |
| showHandlebar | boolean | true | Whether to show the slider handle |
| autoplay | boolean | false | Enable automatic sliding |
| autoplayDuration | number | 5000 | Duration of one autoplay cycle in milliseconds |
Get beautiful, hand-crafted templates and components with Aceternity UI Pro
Professional, beautiful and elegant templates for your business. Get the best component packs and templates with Aceternity UI Pro.
Manu is an artist, I didn't know what I wanted when we started, but his intuition and eye for design more than made up for it. We went from “I want something dark theme and high...
John Ferry
President at TAC, CEO at Rogue