Skip to content

component

Stacked Layer Effect

By Valentin Pecorale

Details

Summary

Stacked Layer Effect brings your Framer sections to life with a dual-input parallax system.

Description

Stacked Layer Effect brings your Framer sections to life with a dual-input parallax system. Layers respond to both cursor movement and scroll position simultaneously, each at its own depth and speed โ€” creating a smooth, cinematic 3D illusion. Key features ๐Ÿ–ฑ๏ธ Cursor-reactive โ€” layers shift fluidly as your mouse moves across the screen ๐Ÿ“œ Scroll-driven โ€” each layer moves independently as the user scrolls ๐ŸŽš๏ธ Per-layer speed control โ€” set individual cursor and scroll speed multipliers for each image ๐ŸŒ— Per-layer opacity โ€” fine-tune the transparency of each layer independently ๐ŸŽจ Per-layer saturation โ€” go full color, desaturated, or anywhere in between ๐Ÿ“ Fill & Fixed modes โ€” global setting to switch the entire component between fill and fixed positioning ๐Ÿ”Œ No code required โ€” everything configurable directly in Framer's property panel Best used for Hero sections, landing page headers, product showcases, portfolio covers, and any section where you want to create visual depth and a premium feel. How to use Insert the component into your Framer project Add your images to each layer slot Per layer, adjust cursor speed, scroll speed, opacity, and saturation Set the global Fill or Fixed mode to match your layout Preview in the browser to experience the full parallax effectRefund Policy: All sales are final. I do not offer refunds, exchanges, or returns on Framer components. For technical support or implementation questions, contact me at pecoralev@gmail.com

Introduction

Parallax layers. Follows cursor & scroll

Rank history

Daily rank per list, from the first snapshot โ€” lower is better.

125015001750183498/148/228/309/79/15
  • All ยท #8349