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

About this Component

Snake Gallery is an interactive media gallery that transforms between a fluid trailing “snake” and a focused scrolling list. Upload images or videos, drag the leading tile, switch views, and fine-tune the motion directly in Framer.

Perfect For

• Creative portfolios • Agency and studio websites • Project showcases • Editorial galleries • Experimental landing pages

Key Features

• Supports uploaded images and videos • Two interactive views: Snake and List • Smooth drag, inertia, snapping, and bend distortion • Optional first-card media cycling • Separate desktop and mobile list sizing and spacing • Adjustable tile size, radius, speed, follow, trail gap, and motion timing • Flexible control positioning with horizontal/vertical alignment plus X/Y offsets • Custom labels, colors, blend mode, and typography • Keyboard navigation and reduced-motion support • Static-renderer and offscreen performance optimizations • Fully responsive with adjustable mobile breakpoint

How It Works

Add your media, choose the starting view, then customize the Snake, List, Motion, Appearance, and Controls sections. Visitors can drag the gallery, use the mouse wheel in List view, or switch between both layouts using the built-in controls.

Questions?

Need help setting it up? Reach out at hasanwali6890@gmail.com

Refund Policy

All sales are final as this is a non-tangible digital product. A refund is offered only for a confirmed critical technical failure that prevents the component’s core function and cannot be resolved within a reasonable timeframe. Refunds are not issued for change of mind, aesthetic preference, incorrect setup, or modifications made after purchase. Please report confirmed technical issues with evidence within 14 days.

5a:[["$","$L5d",null,{"post":{"id":"01a0e8d8-1495-712e-bb8e-eee96b2622c1","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","slug":"hasan-wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"JL3JsfmYQsGpZF4mFkJr","resolved":true,"title":"Snake Gallery","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"About this Component"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Snake Gallery is an interactive media gallery that transforms between a fluid trailing “snake” and a focused scrolling list. Upload images or videos, drag the leading tile, switch views, and fine-tune the motion directly in Framer."}]},{"type":"customHeading","content":[{"type":"text","text":"Perfect For"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"• Creative portfolios • Agency and studio websites • Project showcases • Editorial galleries • Experimental landing pages"}]},{"type":"customHeading","content":[{"type":"text","text":"Key Features"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"• Supports uploaded images and videos • Two interactive views: Snake and List • Smooth drag, inertia, snapping, and bend distortion • Optional first-card media cycling • Separate desktop and mobile list sizing and spacing • Adjustable tile size, radius, speed, follow, trail gap, and motion timing • Flexible control positioning with horizontal/vertical alignment plus X/Y offsets • Custom labels, colors, blend mode, and typography • Keyboard navigation and reduced-motion support • Static-renderer and offscreen performance optimizations • Fully responsive with adjustable mobile breakpoint"}]},{"type":"customHeading","content":[{"type":"text","text":"How It Works"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Add your media, choose the starting view, then customize the Snake, List, Motion, Appearance, and Controls sections. Visitors can drag the gallery, use the mouse wheel in List view, or switch between both layouts using the built-in controls."}]},{"type":"customHeading","content":[{"type":"text","text":"Questions?"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Need help setting it up? Reach out at "},{"type":"text","text":"hasanwali6890@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:hasanwali6890@gmail.com","target":"_blank"}},{"type":"bold"}]}]},{"type":"customHeading","content":[{"type":"text","text":"Refund Policy"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"All sales are final as this is a non-tangible digital product. A refund is offered only for a confirmed critical technical failure that prevents the component’s core function and cannot be resolved within a reasonable timeframe. Refunds are not issued for change of mind, aesthetic preference, incorrect setup, or modifications made after purchase. Please report confirmed technical issues with evidence within 14 days."}]}]},"introduction":"Fluid snake-to-list media gallery","slug":"snake-gallery","author":{"framerUserId":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","slug":"hasan-wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/10767168-8381-4f2b-9206-2d6c344aae23/01a0e8d7-ef90-726a-8e10-e0571b4d954c.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-28T16:27:49.754Z","updatedAt":"2026-09-28T16:27:49.754Z","publishedAt":"2026-09-28T16:27:49.750Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://generous-luxury-990960.framer.app","price":"13","paymentUrl":"https://contra.com/payment-link/9C9N3EV8-snake-gallery-fluid-snake-to-list-media-gallery","workshop":false,"categories":[{"id":"66bb31f7-cddf-4a3e-8604-95b3467aecc2","name":"Galleries","slug":"galleries"}],"lastSaveId":"JoaG5v1XTfuo8k0xOE8j","tags":[]}}],"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-09-28T16:27:50.293Z","updatedAt":"2026-09-28T16:27:50.293Z","reported":false}}],"$L5f"]

Suggested for you