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

Add an interactive, fluid WebGL media grid featuring cursor-driven zoom, video playback, and cinematic depth to showcase portfolios and visual work.

Features

Interactive pointer proximity scaling with smooth damping
Real-time grayscale-to-color focal reveal shader
High-performance instanced mesh rendering in vanilla Three.js
Smart video queueing with bounded GPU memory management
Built-in pagination and auto-sizing grid math
Support for mixed image and video file assets
Seamless static fallback mode for fast site loads
Native drag-and-drop file upload support for live demos
Fully responsive layout recalculations via ResizeObserver
Deep customization for scale factor, hover radius, and spacing

Customization Options

Grid spacing, density, and card size
Hover scale multiplier for portrait and landscape
Interaction radius and animation speed
Grayscale intensity and image fit mode (stretch or cover)
Resolution pixel ratio and texture size capping
Active video limits and playback distance modes
Visitor drag-and-drop upload toggling
Custom image and video URL or upload arrays

How to Use

Drag and drop the component directly onto your Framer canvas
Set the sizing to Fill or Fixed depending on your layout section
Add your image or video links inside the Media property panel
Tweak spacing, hover scale, and radius to match your brand style
Hit publish to launch a silky-smooth, interactive WebGL gallery

Use Cases

Creative director and photographer portfolios
Studio design agency showcases
High-fashion lookbooks and product galleries
Video production showreels
SaaS visual asset showcases
Interactive hero section backgrounds
Brand moodboards and curated archives
Modern editorial editorial features
Case study preview matrices
Dark-mode creative landing pages

5a:[["$","$L5d",null,{"post":{"id":"01a11331-0219-7604-b7fa-b1d2b041c4a3","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"b98a0c6d-195f-46fb-9abf-090b475fe09e","name":"Ameva","slug":"ameva","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/b98a0c6d-195f-46fb-9abf-090b475fe09e/q91oiwbx","followed":false,"followsYou":false},"media":[],"resources":[{"id":"gJ1JL05CGmPWFbHs7b45","resolved":true,"title":"Media Hover Grid","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Add an interactive, fluid WebGL media grid featuring cursor-driven zoom, video playback, and cinematic depth to showcase portfolios and visual work."}]},{"type":"customHeading","content":[{"type":"text","text":"Features","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive pointer proximity scaling with smooth damping"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Real-time grayscale-to-color focal reveal shader"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"High-performance instanced mesh rendering in vanilla Three.js"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smart video queueing with bounded GPU memory management"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Built-in pagination and auto-sizing grid math"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Support for mixed image and video file assets"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Seamless static fallback mode for fast site loads"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Native drag-and-drop file upload support for live demos"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fully responsive layout recalculations via ResizeObserver"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Deep customization for scale factor, hover radius, and spacing"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Customization Options","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Grid spacing, density, and card size"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hover scale multiplier for portrait and landscape"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interaction radius and animation speed"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Grayscale intensity and image fit mode (stretch or cover)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Resolution pixel ratio and texture size capping"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Active video limits and playback distance modes"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Visitor drag-and-drop upload toggling"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom image and video URL or upload arrays"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"How to Use","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drag and drop the component directly onto your Framer canvas"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Set the sizing to Fill or Fixed depending on your layout section"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Add your image or video links inside the Media property panel"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Tweak spacing, hover scale, and radius to match your brand style"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hit publish to launch a silky-smooth, interactive WebGL gallery"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Use Cases","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative director and photographer portfolios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Studio design agency showcases"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"High-fashion lookbooks and product galleries"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Video production showreels"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"SaaS visual asset showcases"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive hero section backgrounds"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Brand moodboards and curated archives"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Modern editorial editorial features"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Case study preview matrices"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dark-mode creative landing pages"}]}]}]}]},"introduction":"Dynamic WebGL media & video grid.","slug":"media-hover-grid","author":{"framerUserId":"b98a0c6d-195f-46fb-9abf-090b475fe09e","name":"Ameva","slug":"ameva","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/b98a0c6d-195f-46fb-9abf-090b475fe09e/q91oiwbx","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/b98a0c6d-195f-46fb-9abf-090b475fe09e/01a11330-e04e-72db-9f60-6cefff696caf.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-06T21:49:00.685Z","updatedAt":"2026-10-06T21:49:00.685Z","publishedAt":"2026-10-06T21:49:00.681Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://sienna-approach-083006.framer.app/","price":"5","paymentUrl":"https://madebymariam.lemonsqueezy.com/checkout/buy/5231c38d-a57f-452d-a1f5-269d880a184c","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"LF74nopaVTya8ktbn3Zx","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-06T21:49:01.338Z","updatedAt":"2026-10-06T21:49:01.338Z","reported":false}}],"$L5f"]

Suggested for you