Skip to the content

Library/ 67 scan-revealNewProImages

Scan Reveal

A line drawing turns into the photo under a scanning line.

A Pro component: the live demo and the code come with Pro.

Settings

Pro
  • trigger
  • direction
  • duration
  • scanColor
  • ruler
  • markers
  • lineSrc
Tune it live with Pro

What it does

Scan Reveal is an image animation ready for your AI assistant, React or plain JavaScript, with no dependencies. Also called scanline reveal, line art to photo, blueprint reveal, architecture reveal or technical drawing.

The image first appears as an ink drawing traced from its own edges. A glowing line with a ruler and running coordinates sweeps across and leaves the photo behind, then pointing at it brings in markers. One image is enough; reduced motion skips the scan.

With Pro

The AI prompt, the React component, the plain JavaScript file and the embed come with Pro, along with the live demo. Every setting is optional: with none, you get the effect as the preview shows it.