---
title: "Shutter Image Reveal — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Design Kuthir · Effects. Details The \"Shutter Image Reveal\" is an elegant and highly customizable image animation effect, drawing inspiration from vertical…"
canonical: "https://framer.elliotli.dev/component/shutter-image-reveal"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/Shutter Image Reveal

# Shutter Image Reveal

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

![Shutter Image Reveal preview image 1](https://framer.elliotli.dev/og/component/shutter-image-reveal/fd0bb5fbe7195bd9/1600x1200.jpg)

## Summary

Details The "Shutter Image Reveal" is an elegant and highly customizable image animation effect, drawing inspiration from vertical curtain transitions commonly seen in cinematic…

## Description

## Details

The "Shutter Image Reveal" is an elegant and highly customizable image animation effect, drawing inspiration from vertical curtain transitions commonly seen in cinematic or modern web design. This component allows an image to be unveiled progressively through a series of evenly divided vertical slits, creating a captivating and dynamic visual experience. It is designed to enhance user engagement by offering a unique reveal mechanism that can be tailored to fit various creative needs, making it a standout feature for websites seeking to impress visitors with innovative design elements.

## Features of SlitReveal Component

-   **Slit Width:** Adjustable slit width (default: 30px) for controlling the size of each vertical slit.
    
-   **Animation Speed:** Customizable duration (default: 1 second) for the reveal effect.
    
-   **Direction:** Option to reveal from left or right (default: left).
    
-   **Trigger Options:** Supports hover, inView, or click to initiate the animation (default: hover).
    
-   **Image Upload:** Accepts any image URL
    
-   **Responsiveness:** Fully adaptable to different screen sizes.
    
-   **Overlay Customization:** Allows background image or color adjustment for the slit overlay.
    
-   **Usage:** Perfect for hero sections, gallery reveals, or storytelling visuals on websites.
    
-   **Customization:** Can be enhanced by adding slit count, stagger timing, or background color via code modifications.
    
-   **Technical Notes:** Built with Framer Motion, requiring a motion div and image elements for functionality.
    

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

-   All · #6359

## Details

- **Author**: Design Kuthir
- **Price**: $10.00
- **Published**: 2026-05-20
- **Updated**: 2026-05-14
- **Added**: 2025-10-07
- **Categories**: Effects

## More like this

-   [Particle Image](/component/particle-image) — Jamik · $12 — Logos and photos as 3D points
-   [Ascii Portrait](/component/ascii-portrait) — The Black Sheep · Free — Photos that dissolve into ASCII
-   [Sandfall](/component/sandfall) — Cyedi Creative Studio · $5 — Your headline, buried in coloured
-   [Still Water](/component/still-water) — DariStudio · $9 — Water ripples over any photo