4c:I[267044,["/creators-assets/_next/static/immutable/chunks/1hsplt7jfjgnh.js","/creators-assets/_next/static/immutable/chunks/0ct7__d3eqq0r.js","/creators-assets/_next/static/immutable/chunks/0c-r9a3oxph1w.js","/creators-assets/_next/static/immutable/chunks/3283ev4bymz-y.js","/creators-assets/_next/static/immutable/chunks/1tyeiicl34tqo.js","/creators-assets/_next/static/immutable/chunks/24bk4ojcoor5n.js","/creators-assets/_next/static/immutable/chunks/1co9epfn9jp6v.js","/creators-assets/_next/static/immutable/chunks/1zalsqf-ioaic.js","/creators-assets/_next/static/immutable/chunks/00hohn9l3ocx9.js","/creators-assets/_next/static/immutable/chunks/06p8bv9p94pxh.js","/creators-assets/_next/static/immutable/chunks/2e-sz6cfsc9_9.js","/creators-assets/_next/static/immutable/chunks/1eyot9c9uwocm.js","/creators-assets/_next/static/immutable/chunks/3or5zvywp1ubp.js","/creators-assets/_next/static/immutable/chunks/1k3rwcufrnywl.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3fujn21cf_mt1.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/3uo-268z2xnq9.js","/creators-assets/_next/static/immutable/chunks/0vxt9zvn936s0.js","/creators-assets/_next/static/immutable/chunks/0lx6ikbaymow8.js","/creators-assets/_next/static/immutable/chunks/15z5hu5cixks0.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/102julo6bufcv.js","/creators-assets/_next/static/immutable/chunks/3-v4s4kk6cmds.js","/creators-assets/_next/static/immutable/chunks/0tb62zkq3ytzl.js","/creators-assets/_next/static/immutable/chunks/2_dm0za3asre2.js","/creators-assets/_next/static/immutable/chunks/1gasll1b30-2c.js","/creators-assets/_next/static/immutable/chunks/0y1e6y4tai9kl.js","/creators-assets/_next/static/immutable/chunks/3nzo9vld-4e3c.js","/creators-assets/_next/static/immutable/chunks/1-4qrfj8z2lbh.js","/creators-assets/_next/static/immutable/chunks/0iefpbbgjpqk_.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3un-l23eued0s.js","/creators-assets/_next/static/immutable/chunks/2warb3xv9rce7.js","/creators-assets/_next/static/immutable/chunks/424127942kmt_.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js"],"S"] 4d:T841,

About Passage - 3D Scroll Gallery

Passage is a scroll-driven 3D image gallery for Framer that transforms your work into an immersive space. It allows visitors to navigate through your images using three layouts: ring, tunnel, or helix. As the page scrolls, the section stays pinned and the camera glides through the gallery with smooth inertia, applying visual effects like speed-based bending and reflections on a glossy floor.

Key Features:

Three integrated layouts: Ring, tunnel, and helix.
Scroll-driven camera: Page scroll moves the camera while the section stays pinned, without hijacking the mouse wheel. The page continues once the trip ends.
Adapts to any height: Works with any section height without needing to rework your layout; extra scroll space is added automatically.
Click to zoom & links: A first click moves the image forward into focus. A second click opens an optional link. Use it as a gateway to your projects or a pure visual showcase.
Cinematic controls: Customize floor reflections, fog, vignette, film grain, rounded corners, and background colors.
Motion & layout controls: Adjust scroll length, inertia, cursor tilt, intro animations, image size, spacing, and vertical scatter.
Accessible & lightweight: Images stay in the page for SEO and screen readers. It supports keyboard navigation (Tab), respects reduced-motion preferences, pauses when off-screen, and runs on plain WebGL without extra libraries.

Ideal Uses: Perfect for creative portfolios, agency case studies, photography galleries, fashion lookbooks, product collections, art exhibitions, architecture projects, and brand storytelling.

I hope you enjoy the component. If you have any questions, please contact me at devalfredomoscoso@gmail.com

4b:["$","$L4c",null,{"value":{"fallback":{"$inf$activity-creator-d26ef067-2e3a-4bc0-b266-df5b7f31d6d1-all:/unified/creator/d26ef067-2e3a-4bc0-b266-df5b7f31d6d1/activity/":[{"data":[{"id":"01a159d3-8162-7254-a7af-40ef2a571a91","type":"component.created","target":{"type":"component","id":"dzFv75JWppdHGq33w1kE","preview":"Passage","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d26ef067-2e3a-4bc0-b266-df5b7f31d6d1/01a159cd-34ac-76e2-8f7f-4202a7faa4f5.png","targetDeleted":false,"owned":false,"feedItemType":null,"actions":null},"context":null,"actors":[{"id":"d26ef067-2e3a-4bc0-b266-df5b7f31d6d1","name":"Alfredo Moscoso","avatar":"https://framerusercontent.com/avatars/users/d26ef067-2e3a-4bc0-b266-df5b7f31d6d1/gJ500nH-z","slug":"alfredo-moscoso","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-10-20T14:59:55.874Z","latestAt":"2026-10-20T14:59:55.874Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:d26ef067-2e3a-4bc0-b266-df5b7f31d6d1:/unified/posts/?creator=d26ef067-2e3a-4bc0-b266-df5b7f31d6d1&with=reposts":[{"data":[{"id":"01a159d3-7ec0-750c-a437-f3d42d840054","title":null,"body":"

Just launched Passage, a 3D scroll gallery for Framer

Instead of scrolling past your work, visitors travel through it.

The section stays pinned while the camera glides through your

images: in a ring, down a tunnel, or along a helix.

Built from scratch in plain WebGL, no extra libraries. It works

on phones too, and you set it up in Framer without code.

Live demo: https://passage-3d.framer.website

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Just launched Passage, a 3D scroll gallery for Framer "}]},{"type":"paragraph","content":[{"type":"text","text":"Instead of scrolling past your work, visitors travel through it."}]},{"type":"paragraph","content":[{"type":"text","text":"The section stays pinned while the camera glides through your"}]},{"type":"paragraph","content":[{"type":"text","text":"images: in a ring, down a tunnel, or along a helix."}]},{"type":"paragraph","content":[{"type":"text","text":"Built from scratch in plain WebGL, no extra libraries. It works"}]},{"type":"paragraph","content":[{"type":"text","text":"on phones too, and you set it up in Framer without code."}]},{"type":"paragraph","content":[{"type":"text","text":"Live demo: "},{"type":"text","text":"https://passage-3d.framer.website","marks":[{"type":"link","attrs":{"href":"https://passage-3d.framer.website","target":"_blank","rel":"noopener noreferrer nofollow"}}]}]}]},"author":{"framerUserId":"d26ef067-2e3a-4bc0-b266-df5b7f31d6d1","name":"Alfredo Moscoso","slug":"alfredo-moscoso","avatar":"https://framerusercontent.com/avatars/users/d26ef067-2e3a-4bc0-b266-df5b7f31d6d1/gJ500nH-z","followed":false,"followsYou":false},"media":[],"resources":[{"id":"dzFv75JWppdHGq33w1kE","resolved":true,"title":"Passage","body":"$4d","bodyJson":{"type":"doc","content":[{"type":"customHeading","attrs":{"level":2},"content":[{"type":"text","text":"About Passage - 3D Scroll Gallery","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Passage is a scroll-driven 3D image gallery for Framer that transforms your work into an immersive space. It allows visitors to navigate through your images using three layouts: ring, tunnel, or helix. As the page scrolls, the section stays pinned and the camera glides through the gallery with smooth inertia, applying visual effects like speed-based bending and reflections on a glossy floor."}]},{"type":"paragraph","content":[{"type":"text","text":"Key Features:","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Three integrated layouts:","marks":[{"type":"bold"}]},{"type":"text","text":" Ring, tunnel, and helix."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Scroll-driven camera:","marks":[{"type":"bold"}]},{"type":"text","text":" Page scroll moves the camera while the section stays pinned, without hijacking the mouse wheel. The page continues once the trip ends."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adapts to any height:","marks":[{"type":"bold"}]},{"type":"text","text":" Works with any section height without needing to rework your layout; extra scroll space is added automatically."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Click to zoom & links:","marks":[{"type":"bold"}]},{"type":"text","text":" A first click moves the image forward into focus. A second click opens an optional link. Use it as a gateway to your projects or a pure visual showcase."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Cinematic controls:","marks":[{"type":"bold"}]},{"type":"text","text":" Customize floor reflections, fog, vignette, film grain, rounded corners, and background colors."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Motion & layout controls:","marks":[{"type":"bold"}]},{"type":"text","text":" Adjust scroll length, inertia, cursor tilt, intro animations, image size, spacing, and vertical scatter."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Accessible & lightweight:","marks":[{"type":"bold"}]},{"type":"text","text":" Images stay in the page for SEO and screen readers. It supports keyboard navigation (Tab), respects reduced-motion preferences, pauses when off-screen, and runs on plain WebGL without extra libraries."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Ideal Uses:","marks":[{"type":"bold"}]},{"type":"text","text":" Perfect for creative portfolios, agency case studies, photography galleries, fashion lookbooks, product collections, art exhibitions, architecture projects, and brand storytelling."}]},{"type":"paragraph","content":[{"type":"text","text":"I hope you enjoy the component. If you have any questions, please contact me at "},{"type":"text","text":"devalfredomoscoso@gmail.com","marks":[{"type":"link","attrs":{"href":"mailto:devalfredomoscoso@gmail.com","target":"_blank","rel":"noopener noreferrer nofollow"}}]}]}]},"introduction":"A scroll-driven 3D gallery","slug":"passage","author":{"framerUserId":"d26ef067-2e3a-4bc0-b266-df5b7f31d6d1","name":"Alfredo Moscoso","slug":"alfredo-moscoso","avatar":"https://framerusercontent.com/avatars/users/d26ef067-2e3a-4bc0-b266-df5b7f31d6d1/gJ500nH-z","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d26ef067-2e3a-4bc0-b266-df5b7f31d6d1/01a159cd-34ac-76e2-8f7f-4202a7faa4f5.png","metadata":{"tint":{"h":0,"s":0,"l":9},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-20T14:59:54.476Z","updatedAt":"2026-10-20T14:59:54.476Z","publishedAt":"2026-10-20T14:59:54.473Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://passage-3d.framer.website/","price":"16","paymentUrl":"https://contra.com/payment-link/YGl9ZUV2-passage-3-d-scroll-gallery-for-framer","workshop":false,"categories":[{"id":"66bb31f7-cddf-4a3e-8604-95b3467aecc2","name":"Galleries","slug":"galleries"}],"lastSaveId":"mdD48U4vi3qubyUgNnWl","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":7},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-20T14:59:55.200Z","updatedAt":"2026-10-20T14:59:55.200Z","type":"post"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L4e"}]