PerspectiveGrid brings a dynamic, immersive 3D depth effect to your Framer projects. Drop it into your portfolio, product showcases, or landing pages to give visitors an interactive visual experience that responds smoothly to their mouse movement. It transforms flat image arrays into multi-layered grids that bend, scale, and shift as users explore your site.
It displays a multi-column image grid complete with advanced perspective calculations. As the cursor moves, the component dynamically tracks its coordinates to calculate real-time skew, rotation, and staggering delays across your media items. This creates a striking sense of physical depth while keeping your layout fully responsive and fluid.
Grid Layout: Set the exact number of columns, gap spacing, element aspect ratios, container height, and individual corner radiuses.
Depth & Motion: Control the perspective depth, parallax intensity, maximum rotation angle, skew amount, scale ranges, and individual layer stagger delays.
Visual Enhancements: Add extra polish by tweaking the blur strength, brightness ranges, contrast boosts, or laying down an overlay color with custom opacity.
Marquee & Interaction: Toggle a scrolling text marquee directly within the layout, adjusting its speed, font size, background, and colors. You can also assign custom click URLs to make elements completely interactive.
Creative portfolio galleries
Immersive product and launch pages
Hero sections that need a strong first impression
Visual mood boards and brand assets
Interactive photography layouts
If you build something awesome with this grid, share it on X and tag me @Dulajweb. I love seeing how people push these layouts.
Have any feedback or hit a roadblock? Drop me a line at dulajdilshan766@gmail.com or send a DM over on X @Dulajweb.
PerspectiveGrid brings a dynamic, immersive 3D depth effect to your Framer projects. Drop it into your portfolio, product showcases, or landing pages to give visitors an interactive visual experience that responds smoothly to their mouse movement. It transforms flat image arrays into multi-layered grids that bend, scale, and shift as users explore your site.
It displays a multi-column image grid complete with advanced perspective calculations. As the cursor moves, the component dynamically tracks its coordinates to calculate real-time skew, rotation, and staggering delays across your media items. This creates a striking sense of physical depth while keeping your layout fully responsive and fluid.
Grid Layout: Set the exact number of columns, gap spacing, element aspect ratios, container height, and individual corner radiuses.
Depth & Motion: Control the perspective depth, parallax intensity, maximum rotation angle, skew amount, scale ranges, and individual layer stagger delays.
Visual Enhancements: Add extra polish by tweaking the blur strength, brightness ranges, contrast boosts, or laying down an overlay color with custom opacity.
Marquee & Interaction: Toggle a scrolling text marquee directly within the layout, adjusting its speed, font size, background, and colors. You can also assign custom click URLs to make elements completely interactive.
Creative portfolio galleries
Immersive product and launch pages
Hero sections that need a strong first impression
Visual mood boards and brand assets
Interactive photography layouts
If you build something awesome with this grid, share it on X and tag me @Dulajweb. I love seeing how people push these layouts.
Have any feedback or hit a roadblock? Drop me a line at dulajdilshan766@gmail.com or send a DM over on X @Dulajweb.
Dulaj dilshan
