Image Scanner sweeps a configurable scan line over any image to reveal, highlight, or distort it as the beam passes. Scan pattern, direction, and animation timing are all props, so the same component can read as a medical scanner, a retinal scan, or a loading effect. Built with Framer Motion and Tailwind CSS. Fits AI product screenshots, security themed dashboards, and loading states that need more character than a spinner.

Installation

Example

PreviewCode

Click on the image to scan

Scan images automatically

NORMAL

Main Entrance

Building A - Floor 1

30 FPSManual Scan

AUTO∞

Main Entrance

2 min agonormal

Parking Garage

1 min agowarning

Server Room

3 min agocritical

Reception Area

30 sec agonormal

Usage

import { ImageScanner } from "@/components/ui/image-scanner";

export default function MyComponent() {
  return (
    <div className="w-full max-w-md mx-auto">
      <h1 className="text-2xl font-bold mb-8 text-center">Horizontal Scan</h1>
      <ImageScanner
        image="/path-to-image.png"
        scanType="radar"
        scanColor="emerald"
        autoScan={true}
        loop
      />
    </div>
  );
}

Props

Image Scanner