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:T92d,

About

3D Perspective Scroll brings dynamic depth and fluid interactivity to your Framer showcase. Built with an ultra smooth layout system, it allows visitors to scroll through your featured work with real time perspective tilt, floating typography, and subtle RGB effects. Perfect for creative studios, designers, and developers looking to add an immersive experience to their site.

What it does

Renders a custom vertical media stack with dynamic 3D perspective rotation, scroll physics, and interactive hover mechanics. As users navigate the list, rows tilt along a 3D plane, floating titles react to cursor movement, and smooth inertia physics deliver an award winning browsing experience. Features a progress indicator, project counter, dynamic background overlays, and optional scroll hints.

What you can customize

3D Perspective & Motion: Tweak perspective strength, scroll tilt, mouse tilt response, depth offset, speed multipliers, and inertia drift.
Visual Effects: Adjust RGB chromatic aberration, stretch intensity, title drift, parallax strength, image zoom, opacity dimming, grayscale toggles, and background overlay colors.
Typography & Styling: Full control over title and meta fonts, sizes, letter spacing, uppercase toggles, hover states, and meta accent colors.
UI Controls: Toggle the progress bar, project counter, and custom scroll hint text on or off with custom color controls.

Great for

Creative agency landing pages
Design and developer portfolio showcases
Product launch teasers and feature highlights
Interactive case studies and work archives
High impact hero sections

Share your build

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

Need help?

Have questions, suggestions, or feedback? Feel free to reach out anytime via email at dulajdilshan766@gmail.com or on X @Dulajweb.

59:[["$","$L5c",null,{"post":{"id":"019f94d5-85d1-778a-948e-aa0c797f6e61","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":"JWsKiBB4zwtNQssHs3Re","resolved":true,"title":"ActiveTheoryScroll","body":"$5d","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"About","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"3D Perspective Scroll brings dynamic depth and fluid interactivity to your Framer showcase. Built with an ultra smooth layout system, it allows visitors to scroll through your featured work with real time perspective tilt, floating typography, and subtle RGB effects. Perfect for creative studios, designers, and developers looking to add an immersive experience to their site."}]},{"type":"customHeading","content":[{"type":"text","text":"What it does","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Renders a custom vertical media stack with dynamic 3D perspective rotation, scroll physics, and interactive hover mechanics. As users navigate the list, rows tilt along a 3D plane, floating titles react to cursor movement, and smooth inertia physics deliver an award winning browsing experience. Features a progress indicator, project counter, dynamic background overlays, and optional scroll hints."}]},{"type":"customHeading","content":[{"type":"text","text":"What you can customize","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"3D Perspective & Motion:","marks":[{"type":"bold"}]},{"type":"text","text":" Tweak perspective strength, scroll tilt, mouse tilt response, depth offset, speed multipliers, and inertia drift."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Visual Effects:","marks":[{"type":"bold"}]},{"type":"text","text":" Adjust RGB chromatic aberration, stretch intensity, title drift, parallax strength, image zoom, opacity dimming, grayscale toggles, and background overlay colors."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Typography & Styling:","marks":[{"type":"bold"}]},{"type":"text","text":" Full control over title and meta fonts, sizes, letter spacing, uppercase toggles, hover states, and meta accent colors."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"UI Controls:","marks":[{"type":"bold"}]},{"type":"text","text":" Toggle the progress bar, project counter, and custom scroll hint text on or off with custom color controls."}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Great for","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative agency landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Design and developer portfolio showcases"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product launch teasers and feature highlights"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive case studies and work archives"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"High impact hero sections"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Share your build","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"If you build something cool with this component, drop it on X and tag me @Dulajweb or send a message over. I would love to see what you craft."}]},{"type":"customHeading","content":[{"type":"text","text":"Need help?","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Have questions, suggestions, or feedback? Feel free to 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 on X @Dulajweb."}]}]},"introduction":"Smooth 3D interactive portfolio","slug":"activetheoryscroll","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/019f94d5-4345-7103-a6d1-3f3253b9ccec.png"}],"post":null,"createdAt":"2026-07-24T15:54:08.917Z","updatedAt":"2026-08-22T11:39:39.387Z","publishedAt":"2026-07-24T15:54:08.913Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://activetheoryscroll.framer.website/","price":"8","paymentUrl":"https://buy.polar.sh/polar_cl_tg70GiPlOd3pYsx63nGW08UdW2TyiEc9uD5532Nl1ww","workshop":false,"categories":[{"id":"3a855006-6097-4489-b33b-8024cb26633e","name":"Interactions","slug":"interactions"}],"lastSaveId":"3xytyK2HbNxpjAJDYIJE"}}],"contests":[],"categories":[],"tags":[],"likes":{"count":11,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-24T15:54:09.233Z","updatedAt":"2026-07-24T15:54:09.233Z","reported":false}}],"$L5e"]

Suggested for you