Suction Gallery

An interactive multi-column 3D WebGL image grid featuring cursor suction distortion, independent column momentum scrolling, and custom GLSL visual shaders.

Features

• Real-time cursor vacuum, bulge, and pixel vortex distortion shaders

• Independent column wheel and touch momentum scrolling

• Hardware-accelerated Three.js rendering pipeline

• Infinite wrapping layout for continuous vertical browsing

• Responsive canvas auto-resizing with dynamic camera scaling

• Built-in viewport intersection detection to preserve frame rates

• Static renderer fallback for fast, seamless site publishing

• Grouped property controls for layout and distortion fine-tuning

• Zero-dependency asset delivery with custom texture preloading

• Fluid mouse tracking with interpolated damping physics

Customization Options

• Column count (1 to 10 columns)

• Card dimensions (custom width and height in pixels)

• Grid gap and stagger vertical offsets

• Inertia scroll velocity and physics damping

• Camera zoom distance scaling

• Shader styles: Vacuum Grid, RGB Bulge, and Pixel Vortex

• Suction radius and suction power

• Grid dot and pixelation density

• Custom image array input

• Live editor preview toggle

How to Use

• Drag and drop the component onto your Framer canvas

• Set the dimensions to fill or fixed sizing

• Add your image links to the images property array

• Choose between Vacuum Grid, RGB Bulge, or Pixel Vortex effects

• Tune the column count, stagger offset, and scroll damping to taste

• Publish your site for high-performance interactive 3D interactions

Use Cases

• High-end portfolio hero showcases

• Creative studio work archives

• Fashion lookbooks and editorial galleries

• Modern digital agency homepages

• Interactive product feature grids

• Photography and visual art indexes

• Futuristic dark-mode landing pages

• Dynamic case study highlights