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.
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.
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.
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.
Design Kuthir
