Installation
Install dependencies
npm i motion clsx tailwind-mergeInstall Sparkles Dependencies
npm i @tsparticles/react @tsparticles/engine @tsparticles/slimAdd util file
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 "motion/react";
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 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 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 "motion/react";
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 |
Build websites faster and 10x better than your competitors with Aceternity UI Pro
With the best in class components and templates, stand out from the crowd and get more attention to your website. Trusted by founders and entrepreneurs from all over the world.
I'd highly recommend working with Manu on a site redesign. We came to Manu with a basic website shell. Manu quickly took our rough concept and transformed it into a polished, user-friendly website....
Ray Thai
Head of Product at Fireworks