Grid Pattern 3d

Animated 3D Grid Pattern Transform your website projects with this highly customizable, animated retro-style grid component.

Animated 3D Grid Pattern Transform your website projects with this highly customizable, animated retro-style grid component. This component is Perfect for creating modern hero sections backgrounds, retro-style websites, or subtle animated textures Features Three Grid Styles : Choose between Standard square grid, Diamond pattern, or Diagonal lines Smooth 3D Animation : Infinite scrolling grid with adjustable speed and direction Adjustable 3D Perspective : Control depth and viewing angle from 0° to 90° for dramatic effects Customizable Fade Gradient : Seamlessly blend the grid into your background with adjustable fade height Fully Customizable : Control every aspect from colors to perspective angle Multi-Directional Animation : Choose horizontal, vertical, or diagonal movement patterns Flexible Cell Size: Customize grid cell from 10px by 10px to 200px by 200px spacing. Variable Opacity Control : Fine-tune visibility from subtle (0.1) to bold (1.0) in 0.05 increments How to Use Add to Canvas : Drag the Grid component onto your Framer canvas Position & Size : Resize the component to fit your design Customize : Use the properties panel to adjust settings to match your aesthetic Layer it : Place content on top of the grid for stunning visual depth Customization Properties Visual Style Grid Cell Size (10-200px): Adjust spacing between grid lines Line Color : Change the grid line color Background Color : Set the base background Opacity (0-1): Control grid visibility 3D Effect Perspective Angle (0-90°): Tilt the grid (65° recommended for classic look) 3D Perspective (50-1000px): Adjust depth perception Fade Effect Fade Height (0-100%): Control how much of the bottom fades out Fade Color : Match your page background for seamless blending Grid Types Standard : Classic square grid with interactive cells Diamond : Rotated squares for geometric pattern Diagonal : 45° angled lines for dynamic effect Animation Settings Direction Controls Horizontal : Grid moves left to right Vertical : Grid moves top to bottom Both : Diagonal movement (most dynamic) Speed Adjustment Range: 0.5s - 5s per cycle Lower = faster, Higher = slower Best Use Cases Landing page hero sections Product showcase backgrounds Portfolio headers Presentation slides