5c:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/3jpuro209qqra.js","/creators-assets/_next/static/immutable/chunks/077g_l9cwe8hz.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/2ouyrs2yz196q.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/3orcs6a8eyfvz.js","/creators-assets/_next/static/immutable/chunks/3-tcb9ouhlqkm.js","/creators-assets/_next/static/immutable/chunks/3n0g19afc7srh.js","/creators-assets/_next/static/immutable/chunks/41zrh_r6fdtfq.js","/creators-assets/_next/static/immutable/chunks/120zfy8hqrcwf.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/1p31g3z3kho5v.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/2885u7skzba5_.js","/creators-assets/_next/static/immutable/chunks/1u1uuj9mj0hoo.js","/creators-assets/_next/static/immutable/chunks/1fo1h_o5odhhk.js","/creators-assets/_next/static/immutable/chunks/2iw_-bo8jogap.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/0v-er0xp5q011.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/2rwbpl35w01v4.js","/creators-assets/_next/static/immutable/chunks/37uei1iwbnu3m.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/0djs9po3g19ek.js","/creators-assets/_next/static/immutable/chunks/1_ej2mmnwnp37.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/2_qutx8yar-up.js","/creators-assets/_next/static/immutable/chunks/0bcmpcsc4ih7d.js"],"PostDetailCard"] 5d:T8af,

About

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.

What it does

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.

What you can customize

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.

Great for

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

Share your build

If you build something awesome with this grid, share it on X and tag me @Dulajweb. I love seeing how people push these layouts.

Need help?

Have any feedback or hit a roadblock? Drop me a line at dulajdilshan766@gmail.com or send a DM over on X @Dulajweb.

59:[["$","$L5c",null,{"post":{"id":"019f2b3b-1016-7609-89f0-4b0cb0cf21fb","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"0bce05c0-4760-4da5-b2f4-851230a1db47","name":"Dulaj dilshan","slug":"dulaj-dilshan-gy7b4j","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/132150/avatar-ZgETawWJyCuMuzgHBdPTUADcWJAJWn.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"g1qwQfa30zF6BngiJAE3","resolved":true,"title":"ParallaxDepthGrid","body":"$5d","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"About"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"customHeading","content":[{"type":"text","text":"What it does"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"customHeading","content":[{"type":"text","text":"What you can customize"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Grid Layout:","marks":[{"type":"bold"}]},{"type":"text","text":" Set the exact number of columns, gap spacing, element aspect ratios, container height, and individual corner radiuses."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Depth & Motion:","marks":[{"type":"bold"}]},{"type":"text","text":" Control the perspective depth, parallax intensity, maximum rotation angle, skew amount, scale ranges, and individual layer stagger delays."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Visual Enhancements:","marks":[{"type":"bold"}]},{"type":"text","text":" Add extra polish by tweaking the blur strength, brightness ranges, contrast boosts, or laying down an overlay color with custom opacity."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Marquee & Interaction:","marks":[{"type":"bold"}]},{"type":"text","text":" 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."}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Great for"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative portfolio galleries"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Immersive product and launch pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hero sections that need a strong first impression"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Visual mood boards and brand assets"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive photography layouts"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Share your build"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"If you build something awesome with this grid, share it on X and tag me @Dulajweb. I love seeing how people push these layouts."}]},{"type":"customHeading","content":[{"type":"text","text":"Need help?"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Have any feedback or hit a roadblock? Drop me a line at "},{"type":"text","text":"dulajdilshan766@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:dulajdilshan766@gmail.com","target":"_blank"}}]},{"type":"text","text":" or send a DM over on X @Dulajweb."}]}]},"introduction":"flat grids to life with 3D depth","slug":"parallaxdepthgrid","author":{"framerUserId":"0bce05c0-4760-4da5-b2f4-851230a1db47","name":"Dulaj dilshan","slug":"dulaj-dilshan-gy7b4j","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/132150/avatar-ZgETawWJyCuMuzgHBdPTUADcWJAJWn.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0bce05c0-4760-4da5-b2f4-851230a1db47/ukt99pb8"}],"post":null,"createdAt":"2026-07-04T03:45:18.790Z","updatedAt":"2026-08-28T03:29:21.001Z","publishedAt":"2026-07-04T03:45:18.787Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://parallaxdepthgrid.framer.website/","price":"15","paymentUrl":"https://buy.polar.sh/polar_cl_zp3bSV4lt0cQ08KEtDGueqtFhVK18G49yp3eI1KZRdx","workshop":true,"categories":[{"id":"3a855006-6097-4489-b33b-8024cb26633e","name":"Interactions","slug":"interactions"}],"lastSaveId":"mu5DdPEGUvANdN9HPNRh"}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-04T03:45:18.870Z","updatedAt":"2026-07-04T03:45:18.870Z","reported":false}}],"$L5e"]

Suggested for you