Resources
Desktop app
Marketplace
Community
Developers
Wallpapers
Meetups
Company
Security
Careers
Report
Status
Legal
Blog
Creators
Program
Payouts
Experts
Awards
Events
Brand
Compare
Squarespace
Wordpress
Unbounce
Webflow
Figma
Wix
Solutions
Figma to HTML
Website builder
Portfolio maker
Landing pages
UI/UX design
No-code
Socials
Instagram
X Twitter
YouTube
LinkedIn
Threads
TikTok
    Framer
    EnterprisePricing
    LoginSign up
    Enterprise
    Pricing
    Login
    Sign up
    Marketplace
    TemplatesPluginsComponentsVectors
    Templates
    Plugins
    Components
    Vectors
    Component preview thumbnail
    MarketplaceComponents

    Grid Pattern 3d

    Animated 3D Grid Pattern is a fully editable component for Framer. You can adjust size, colors, speed, and perspective to create dynamic, eye-catching backgrounds with ease.

    Kehinde Clement
    Creator
    1d ago
    Updated
    78
    Views
    Kehinde Clement
    Creator
    1d ago
    Updated
    78
    Views

    Made with Workshop

    Build your own component with AI


    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

    Support
    About ComponentsRefund PolicyContact Creator

    More Components

    See All →
    Thumbnail for Water Drop Wave, a Framer Marketplace template by Pixels.
    Water Drop Wave
    $3
    Pixels
    Thumbnail for Shimmering Effect, a Framer Marketplace template by Fred Moon.
    Shimmering Effect
    $5
    Fred Moon
    Thumbnail for Timer, a Framer Marketplace template by Zeroqode.
    Timer
    $6
    Zeroqode
    Thumbnail for CosmicSpiral, a Framer Marketplace template by Sadman Alam.
    CosmicSpiral
    $12
    Sadman Alam
    Thumbnail for Morph Text, a Framer Marketplace template by Aviral Lakhanpaul.
    Morph Text
    $3
    Aviral Lakhanpaul
    Thumbnail for Floaty, a Framer Marketplace template by 8ighty8.studio.
    Floaty
    $15
    8ighty8.studio
    Thumbnail for CaseFlow, a Framer Marketplace template by Sherif Alabi.
    CaseFlow
    $10
    Sherif Alabi
    Thumbnail for Parallax Mouse FX, a Framer Marketplace template by Nabeel.
    Parallax Mouse FX
    $14
    Nabeel

    More from Kehinde Clement

    See All →
    Thumbnail for Avatar Animations, a Framer Marketplace component by Kehinde Clement.
    Avatar Animations
    component · Free
    Kehinde Clement