Compare

Source: Aceternity UI ↗
Author: Aceternity UI
Licence: Aceternity UI licence (free component)

Loading…

Hover to sweep a sparkling divider between two versions of an image.

Code

"use client";
import React from "react";
import { Compare } from "@/lab/aceternity/ui/compare";
import { Fit } from "./_fit";

export default function CompareDemo() {
  return (
    <Fit width={560} height={560} max={1.3}>
      <div className="flex h-full w-full items-center justify-center">
        <div className="p-4 border rounded-3xl dark:bg-neutral-900 bg-neutral-100 border-neutral-200 dark:border-neutral-800 px-4">
          <Compare
            firstImage="https://assets.aceternity.com/code-problem.png"
            secondImage="https://assets.aceternity.com/code-solution.png"
            firstImageClassName="object-cover object-left-top"
            secondImageClassname="object-cover object-left-top"
            className="h-[500px] w-[500px]"
            slideMode="hover"
          />
        </div>
      </div>
    </Fit>
  );
}

Prompt

Build "Compare", a other animation. What it does: Hover to sweep a sparkling divider between two versions of an image. Write it as a single self-contained React component in TypeScript that fills its parent (w-full h-full), styled with Tailwind CSS, using @tabler/icons-react, motion. Technique: a requestAnimationFrame loop, the Motion library, pointer tracking. It sits on a light background, in a square frame. Respect prefers-reduced-motion with a still state, pause work when the element is off screen, and keep it accessible. Original: https://ui.aceternity.com/components/compare (Aceternity UI, Aceternity UI licence (free component)).