Interactive Box Grid

Add a premium interactive 3D wave grid to your site with fluid hover physics, dynamic cinematic lighting, and custom brand logo integration.

Features

• Real-time 3D wave ripple hover physics

• Premium WebGL-powered interactive grid

• Dynamic procedural box geometry (3 to 12 sides)

• Smooth ambient floor glow and cinematic lighting

• Smart auto-contrast for embedded logos

• Highly optimized Three.js rendering

• Responsive dynamic resize handling

• Works perfectly for hero sections and premium portfolios

• Customizable grid size, box shape, colors, and wave speed

Customization Options

• Grid layout (rows, columns, and spacing)

• Box shape (corners, size, rounding, and thickness)

• Fluid gradient mesh colors (4 custom colors)

• Wave physics (peak lift, wave radius, and fluid speed)

• Upload custom SVG brand logos

• Environment lighting and ambient floor glow

• Clickable URL links for interactive routing

How to Use

• Drop the component onto your Framer canvas

• Adjust the grid columns, rows, and box shape

• Upload your SVGs or client logos

• Customize the 4-color fluid mesh gradient

• Tune the wave ripple speed and peak lift height

• Publish for a premium 3D interactive experience

Use Cases

• Premium agency websites

• Interactive client logo showcases

• SaaS product landing pages

• Modern 3D portfolio layouts

• Futuristic Web3 and AI interfaces

• Dynamic hero background sections