Interactive 3D Grid

Add a tactile 3D interactive pin wave background to landing pages, hero headers, and feature sections with responsive pointer tracking, physically based shading, and cinematic depth.

Features

• Real-time pointer-tracking kinetic wave ripples

• Physically based scatter and shadow shading

• Smooth lerp and exponential follow damping

• Instanced mesh architecture for 60fps performance

• Mobile touch tracking and keyboard navigation

• Built-in reduced motion and visibility pausing

• Dynamic color interpolation on hover and click

• Zero external assets or CDN dependencies

• Native Framer static preview fallback support

• Seamless responsive canvas scaling

Customization Options

• Grid pin density and layout spacing

• Wave ripple speed, depth, and reach radius

• Pointer follow rate and smoothing damping

• Pin surface metalness, roughness, and clearcoat

• Background and resting pin colors

• Dynamic active 3-color palette

• Key and fill light colors and intensities

• Shadow map toggle and soft shadow rendering

• Device pixel ratio limit for performance control

• Canvas editor live preview toggle

How to Use

• Drop the component onto your Framer canvas

• Set width and height to 100% or your desired frame size

• Choose your resting pin and background colors

• Tune the 3-step active wave color palette

• Adjust wave depth, speed, and follow smoothness

• Publish for an instant high-end 3D visual experience

Use Cases

• SaaS landing page hero backgrounds

• AI and developer tool showcase headers

• Interactive dark-mode feature backdrops

• Modern tech portfolio hero sections

• Agency showcase landing blocks

• High-conversion CTA section backgrounds

• Futuristic web product experiences

• Tactile interactive canvas displays