---
title: "Scanner effect — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Istiaq (EV Studio) · Interactive. Bring your visuals to life with Image Scanner, a dynamic Framer component that smoothly reveals before-and-after images…"
canonical: "https://framer.elliotli.dev/component/scanner-effect"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Scanner effect

# Scanner effect

[View on Framer](https://framer.com/marketplace/components/scanner-effect/?via=elliot-li)

![Scanner effect preview image 1](https://framer.elliotli.dev/og/component/scanner-effect/ae3e0ae10d1ff372/1600x1200.jpg)

## Summary

Bring your visuals to life with Image Scanner, a dynamic Framer component that smoothly reveals before-and-after images through a scanning line animation.

## Description

Bring your visuals to life with **Image Scanner**, a dynamic Framer component that smoothly reveals before-and-after images through a **scanning line animation**.

Ideal for **product showcases**, **photo retouching**, **design comparisons**, and **case studies**, Image Scanner lets you visually demonstrate transformations in a clean, tech-inspired style.

The component includes complete customization controls for scan direction, speed, color, glow, and mouse interactivity—giving you full creative control without writing a single line of code.

Effortless, modern, and visually striking — elevate your visuals with an animated scanning experience that feels alive.

**Key Features**

-   **Before & After Display** – Seamlessly compare two images with animation.
    
-   **Auto & Manual Scan** – Choose between automated motion or mouse-follow scanning.
    
-   **Fully Customizable** – Control brightness, contrast, scan direction, speed, and glow.
    
-   **Scanner Effects** – Adjust color, width, opacity, and glow intensity.
    
-   **Smooth Interaction** – Mouse tracking for engaging, responsive behavior.
    
-   **No Code Setup** – Simple drag-and-drop configuration for Framer creators.
    

**Customization Options**

-   Upload before & after images
    
-   Adjust brightness and contrast
    
-   Choose scan direction (horizontal / vertical)
    
-   Enable auto scan or mouse follow
    
-   Control scan line speed and smoothness
    
-   Customize scanner color, glow, and opacity
    
-   Set background color and line width
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #4535

## Details

- **Author**: Istiaq (EV Studio)
- **Price**: $10.00
- **Published**: 2025-10-10
- **Updated**: 2025-10-10
- **Added**: 2025-10-06
- **Categories**: Interactive

## More like this

-   [Velvet Curtain](/component/velvet-curtain) — Sarthak Prakash · $12 — Cinematic curtain reveal effect
-   [Image-Compare Slider](/component/image-compare-slider) — Studio Digital · Free — Reveal what changed, beautifully
-   [Lesson Packages](/component/lesson-packages) — Shelfless Studio · $9 — Lesson bundles with savings shown
-   [Deskbell AI Chatbot](/component/deskbell-ai-chatbot) — NS. Studio · Free — AI site chat, works with Chatbase