5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T895,

About

Parallax Matrix 3D lets you create immersive, interactive floating image and object scenes in Framer. Perfect for modern hero sections, creative agency portfolios, or interactive showcases, it allows elements to react fluidly as visitors scroll, move their mouse, or tilt their mobile device. Give your layouts immediate depth and a premium dynamic feel without writing a single line of code.

What it does

Renders a custom collection of 3D objects with realistic depth blur, scaling, and entrance animations. It tracks page scrolling and mouse position to move elements smoothly along a dynamic parallax grid. Features built in support for mobile device tilt, gentle idle floating effects, and staggered entrance timing so your elements reveal themselves in a natural, eye catching sequence.

What you can customize

Core controls: Add custom objects, control scroll parallax intensity, and switch scroll direction between up or down.
3D depth & effects: Adjust scale strength, automatic depth blur for background items, and global 3D perspective depth.
Interactions: Toggle mouse parallax with custom movement strength, enable phone/tablet device tilt, and activate subtle idle floating with speed and amplitude controls.
Entrance style: Enable staggered entrance animations with customizable delay timing between elements.

Great for

Modern hero sections and landing page banners
Portfolio showcases and creative agency sites
Interactive product feature highlights
App presentation screens and landing pages
Creative background visuals that respond to user motion

Share your build

If you build something cool with this component, drop a link on X and tag me @Dulajweb or send it over. I would love to check out what you create.

Need help?

Got questions or suggestions? Reach out anytime via email at dulajdilshan766@gmail.com or send a message on X @Dulajweb.

5a:[["$","$L5d",null,{"post":{"id":"019f9766-7824-76c2-8a15-5e7d78676d77","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"0bce05c0-4760-4da5-b2f4-851230a1db47","name":"Dulaj Design","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":"McIeRUsDFVG1zNscWL2i","resolved":true,"title":"ScrollRocks3D","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"About"}]},{"type":"paragraph","content":[{"type":"text","text":"Parallax Matrix 3D lets you create immersive, interactive floating image and object scenes in Framer. Perfect for modern hero sections, creative agency portfolios, or interactive showcases, it allows elements to react fluidly as visitors scroll, move their mouse, or tilt their mobile device. Give your layouts immediate depth and a premium dynamic feel without writing a single line of code."}]},{"type":"paragraph","content":[{"type":"text","text":"What it does"}]},{"type":"paragraph","content":[{"type":"text","text":"Renders a custom collection of 3D objects with realistic depth blur, scaling, and entrance animations. It tracks page scrolling and mouse position to move elements smoothly along a dynamic parallax grid. Features built in support for mobile device tilt, gentle idle floating effects, and staggered entrance timing so your elements reveal themselves in a natural, eye catching sequence."}]},{"type":"paragraph","content":[{"type":"text","text":"What you can customize"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Core controls:","marks":[{"type":"bold"}]},{"type":"text","text":" Add custom objects, control scroll parallax intensity, and switch scroll direction between up or down."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"3D depth & effects:","marks":[{"type":"bold"}]},{"type":"text","text":" Adjust scale strength, automatic depth blur for background items, and global 3D perspective depth."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactions:","marks":[{"type":"bold"}]},{"type":"text","text":" Toggle mouse parallax with custom movement strength, enable phone/tablet device tilt, and activate subtle idle floating with speed and amplitude controls."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Entrance style:","marks":[{"type":"bold"}]},{"type":"text","text":" Enable staggered entrance animations with customizable delay timing between elements."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Great for"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Modern hero sections and landing page banners"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Portfolio showcases and creative agency sites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive product feature highlights"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"App presentation screens and landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative background visuals that respond to user motion"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Share your build"}]},{"type":"paragraph","content":[{"type":"text","text":"If you build something cool with this component, drop a link on X and tag me @Dulajweb or send it over. I would love to check out what you create."}]},{"type":"paragraph","content":[{"type":"text","text":"Need help?"}]},{"type":"paragraph","content":[{"type":"text","text":"Got questions or suggestions? Reach out anytime via email 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 message on X @Dulajweb."}]}]},"introduction":"Bring interactive 3D depth","slug":"scrollrocks3d","author":{"framerUserId":"0bce05c0-4760-4da5-b2f4-851230a1db47","name":"Dulaj Design","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/019f9766-5de2-70ff-85f2-fac2bb37b651.png","metadata":{"tint":{"h":180,"s":50,"l":6},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-07-25T03:51:42.445Z","updatedAt":"2026-08-28T03:49:02.455Z","publishedAt":"2026-07-25T03:51:42.442Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://scrollrocks3d.framer.website/","price":"15","paymentUrl":"https://buy.polar.sh/polar_cl_OX7dKUGPpJMuPPqumNXo2Qm6ZCH4EIWPUdJwT2ysHao","workshop":false,"categories":[{"id":"323e97d6-f443-488c-8661-794a9a83a20f","name":"Effects","slug":"effects"}],"lastSaveId":"0fZprmMH5VpQ99l2ETjd","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-25T03:51:42.884Z","updatedAt":"2026-07-25T03:51:42.884Z","reported":false}}],"$L5f"]

Suggested for you