---
title: "3D Shutter Reveal — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Design Kuthir · Effects. About this Component: 3D Shutter Reveal is a premium image animation component that transforms ordinary visuals into cinematic experiences."
canonical: "https://framer.elliotli.dev/component/3d-shutter-reveal"
---

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

# 3D Shutter Reveal

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

![3D Shutter Reveal preview image 1](https://framer.elliotli.dev/og/component/3d-shutter-reveal/9db9b9d3e2ffa5fd/1600x1200.jpg)

## Summary

About this Component: 3D Shutter Reveal is a premium image animation component that transforms ordinary visuals into cinematic experiences.

## Description

## About this Component:

**3D Shutter Reveal** is a premium image animation component that transforms ordinary visuals into cinematic experiences. It reveals images through a series of vertical shutters, enhanced with realistic 3D depth and smooth motion transitions. The effect captures the essence of modern web design — elegant, dynamic, and immersive.

Built with **Framer Motion**, it’s fully customizable — letting you adjust the number of panels, animation speed, easing, and perspective. Perfect for hero sections, portfolios, and landing pages that need to make a strong first impression.

## Key Features:

-   **Front Image —** Upload the primary image for the front layer of the shutters.
    
-   **Back Image —** Upload the background image for the back layer of the shutters.
    
-   **Rows —** Determines the number of vertical rows of shutters.
    
-   **Columns —** Determines the number of horizontal columns of shutters.
    
-   **Gap —** Controls the spacing or gap between shutters.
    
-   **Flip Duration —** Sets the duration of the shutter flip animation.
    
-   **Stagger Duration —**Sets the delay between staggered shutter animations.
    
-   **Trigger —** Defines the trigger for the animation: Scroll, Hover, or Click.
    
-   **Stagger Direction —** Sets the direction of the staggered animation: Diagonal.
    
-   **Border Radius —** Rounds the corners of the shutters.
    
-   **Customization —** Can be enhanced by adding slit count, stagger timing, or background color via code modifications.
    

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

-   All · #5802

## 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