3D Shutter Reveal

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.