5c:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/1rdgef59pv3cw.js","/creators-assets/_next/static/immutable/chunks/0zdv1ssrxkrvj.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/0gxswkth5mc6b.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/41zrh_r6fdtfq.js","/creators-assets/_next/static/immutable/chunks/36invrtoq879v.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/0j6nyijn0flqd.js","/creators-assets/_next/static/immutable/chunks/2b15v_9ruhnys.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/3h1dt97hv5ik0.js","/creators-assets/_next/static/immutable/chunks/39xjxvqtwa0x7.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/1u1uuj9mj0hoo.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/2iw_-bo8jogap.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/0w757zrv0hi6k.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/37uei1iwbnu3m.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/27vyv0cqm_295.js","/creators-assets/_next/static/immutable/chunks/3n0g19afc7srh.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/1h-r9oggqjick.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3sa-o_ztvtkwe.js","/creators-assets/_next/static/immutable/chunks/2051y-i4b0nnm.js"],"PostDetailCard"] 5d:Tb08,

Interactive Gallery is a visually engaging Framer component that creates dynamic mouse-driven image animations with realistic falling and bouncing motion effects. As users move their cursor or swipe on touch devices, images are smoothly spawned and animated with elastic physics, rotation, scaling, and natural movement, creating an immersive interactive gallery experience.

Built for modern websites, creative portfolios, landing pages, showcases, and experimental interfaces, the component combines performance-focused animations with fully customizable styling controls. Users can easily upload images or use image URLs, adjust image size, border radius, motion sensitivity, and background styling directly from Framer property controls — no coding required.

The component is optimized for both desktop and mobile interactions, supporting mouse movement and touch gestures while maintaining smooth responsive performance. It also includes viewport detection for improved efficiency by preventing unnecessary animations when the component is outside the visible screen area.

Features

Mouse-driven interactive image spawning
Smooth falling and bouncing physics animations
Elastic scaling and rotation effects
Touch support for mobile devices
Upload images or use image URLs
Adjustable motion sensitivity controls
Customizable image size and border radius
Responsive and performance optimized
Viewport visibility detection
Clean and modern visual experience
Fully customizable through Framer controls

Perfect For

Creative portfolios
Interactive hero sections
Modern landing pages
Product showcases
Experimental web experiences
Photography galleries
Agency websites
Fashion and art presentations
Interactive backgrounds
Visual storytelling experiences

Why You'll Love It

Creates an eye-catching interactive experience instantly
Adds motion and personality to modern websites
Makes galleries feel alive and immersive
Enhances user engagement with reactive animations
Works smoothly across desktop and mobile devices
Easy to customize without writing code

Customization Options

Change background colors
Adjust image sizes
Control animation sensitivity
Modify image corner radius
Use image URLs or uploaded assets
Fine-tune interaction behavior

59:[["$","$L5c",null,{"post":{"id":"019eb112-bb97-7487-b0dd-d7139890e35a","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"0412f842-fca5-456f-b801-c84139673b67","name":"Motion Lab","slug":"motion-lab-space","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2431349/avatar-WNkgnug1VXazTgLRq9leRMUuivwRpO.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"F5eCZBXlSs6mCc1pWWrq","resolved":true,"title":"InteractiveGallery","body":"$5d","bodyJson":null,"introduction":"Interactive image gallery effects","slug":"interactivegallery","author":{"framerUserId":"0412f842-fca5-456f-b801-c84139673b67","name":"Motion Lab","slug":"motion-lab-space","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2431349/avatar-WNkgnug1VXazTgLRq9leRMUuivwRpO.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/F5eCZBXlSs6mCc1pWWrq/interactivegallery-FeG0WYTwEvFakse7TcIkcQUXMTd1en","metadata":{"tint":"hsl(0 0% 9%)","aspectRatio":1.3333333333333333}}],"post":null,"createdAt":"2026-06-06T13:42:28.260Z","updatedAt":"2026-06-16T12:37:52.832Z","publishedAt":"2026-06-10T10:27:35.447Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://interactivegallery.framer.website/","price":"10","paymentUrl":"https://buy.polar.sh/polar_cl_fG1BQsQV0jgpJCUxlOP9OVx1PxZ0fpNb7B9wd2LMjCM","workshop":true,"categories":[{"id":"3a855006-6097-4489-b33b-8024cb26633e","name":"Interactions","slug":"interactions"}],"lastSaveId":"kCM00Fi6rKi0hgBR6HOp"}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-10T10:27:35.447Z","updatedAt":"2026-06-10T10:27:35.447Z","reported":false}}],"$L5e"]

Suggested for you