The component works by placing a small invisible sensor inside a frame. It then automatically animates the surrounding elements based on pointer movement while keeping full compatibility with Framer’s transform system.
Perfect for hero sections, product showcases, layered illustrations, and interactive layouts.
Tracking Area (Property)
Defines whether motion responds to the entire viewport or only the parent container.
Tilt (Section)
Adds a cursor-based 3D rotation across X, Y, and Z axes with adjustable perspective and origin.
Distance (Section)
Defines how far elements move along the X and Y axes. Supports manual values with responsive units or automatic distance modes.
Children (Section
Applies separate distance and tilt behavior to child elements of the affected layers.
Motion (Section)
Controls whether motion uses native movement or smooth spring-based animation.
Apply On (Property)
Controls whether the effect starts on page load or only after the cursor moves.
Reset on Exit (Property)
Resets elements to their original position when the cursor leaves the tracking area.
Place Floating Parallax inside a frame.
Add other elements in the same container.
The component will automatically target the sibling layers of that frame.
Adjust distance, tilt, and tracking settings in the properties panel.
Preview the page and move the cursor to see the parallax effect.
No manual wiring or layer selection required!
Optimized for desktop pointer interactions.
Touch devices automatically disable the effect for better performance.
Several Floating Parallax components can stack on the same layout without interfering with each other.
Due to the nature of digital products, we do not offer refunds. Once a component is purchased, it cannot be returned. Please review the details before purchasing.
If you need any clarification about the component, happy to help beforehand:
hello-arkus[at]protonmail[dot]com
Arkuš Design
