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
Valentin Pecorale
