Grid Pattern 3d

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