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

About this Component

Stretch Gallery is a responsive WebGL video carousel for Framer. Browse by wheel, trackpad, drag, arrows, or controls, then open the active video into a smooth full-screen player. As cards cross the left and right edges, a shader-driven stretch effect pulls the rendered pixels through the component boundary for a fluid, cinematic transition.

Perfect For

• Portfolios and showreels • Motion and production studios • Campaign and case study pages • Editorial and experimental websites

Key Features

• Upload full and optional preview videos • WebGL edge-stretch effect with adjustable width, strength, squeeze, curve, and fringe • Smooth drag and wheel navigation • Responsive desktop and mobile sizing/gaps • Full-screen player with animated open/close morph • Hover volume slider, seek controls, mute, credits • Cover/contain playback modes • Optional play artwork • Reduced-motion support • Static-renderer fallback for Framer Canvas/export • Offscreen rendering pause and WebGL cleanup • Organized property controls

How It Works

Add videos in the property panel, customize layout, motion, Stretch Edge, appearance, and player settings, then resize the component to fit your section. Preview videos are optional; when omitted, the full video is used.

Questions?

Reach out at hasanwali6890@gmail.com

Refund Policy

Because this is a digital product, sales are final. Refunds are only available for a confirmed critical technical issue that prevents the component from working as described and cannot be resolved after support. Report the issue with evidence within 14 days of purchase. Refunds are not provided for change of mind, aesthetic preference, compatibility with custom modifications, or misuse.

5a:[["$","$L5d",null,{"post":{"id":"01a114df-f96c-710d-b41b-2b4a9554ad3f","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":"qhlFVZJVwkdKN02uSUux","resolved":true,"title":"WebGL Video 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":"Stretch Gallery is a responsive WebGL video carousel for Framer. Browse by wheel, trackpad, drag, arrows, or controls, then open the active video into a smooth full-screen player. As cards cross the left and right edges, a shader-driven stretch effect pulls the rendered pixels through the component boundary for a fluid, cinematic transition."}]},{"type":"customHeading","content":[{"type":"text","text":"Perfect For"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"• Portfolios and showreels • Motion and production studios • Campaign and case study pages • Editorial and experimental websites"}]},{"type":"customHeading","content":[{"type":"text","text":"Key Features"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"• Upload full and optional preview videos • WebGL edge-stretch effect with adjustable width, strength, squeeze, curve, and fringe • Smooth drag and wheel navigation • Responsive desktop and mobile sizing/gaps • Full-screen player with animated open/close morph • Hover volume slider, seek controls, mute, credits • Cover/contain playback modes • Optional play artwork • Reduced-motion support • Static-renderer fallback for Framer Canvas/export • Offscreen rendering pause and WebGL cleanup • Organized property controls"}]},{"type":"customHeading","content":[{"type":"text","text":"How It Works"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Add videos in the property panel, customize layout, motion, Stretch Edge, appearance, and player settings, then resize the component to fit your section. Preview videos are optional; when omitted, the full video is used."}]},{"type":"customHeading","content":[{"type":"text","text":"Questions?"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"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":"customHeading","content":[{"type":"text","text":"Refund Policy"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Because this is a digital product, sales are final. Refunds are only available for a confirmed critical technical issue that prevents the component from working as described and cannot be resolved after support. Report the issue with evidence within 14 days of purchase. Refunds are not provided for change of mind, aesthetic preference, compatibility with custom modifications, or misuse."}]}]},"introduction":"WebGL video gallery with stretch","slug":"webgl-video-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/01a114df-e7a0-7384-8a54-bff4321cd4bf.png","metadata":{"tint":{"h":60,"s":50,"l":6},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-07T05:39:44.518Z","updatedAt":"2026-10-07T08:04:51.498Z","publishedAt":"2026-10-07T05:39:44.516Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://sensational-instance-007985.framer.app","price":"12","paymentUrl":"https://contra.com/payment-link/4J8eMsEd-web-gl-video-gallery-web-gl-video-gallery-with-stretch","workshop":false,"categories":[{"id":"66bb31f7-cddf-4a3e-8604-95b3467aecc2","name":"Galleries","slug":"galleries"}],"lastSaveId":"7Bm1clc4wdcjiGBxUoZS","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-10-07T05:39:45.132Z","updatedAt":"2026-10-07T05:39:45.132Z","reported":false}}],"$L5f"]

Suggested for you