---
title: "Dot Background — Free Framer component · Best of Framer"
description: "Free Framer component · by Saadat Ali · Backgrounds. Reactive 3D grid interaction system"
canonical: "https://framer.elliotli.dev/component/dot-background"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Dot Background

# Dot Background

Reactive 3D grid interaction system

[View on Framer](https://framer.com/marketplace/components/dot-background/?via=elliot-li)

![Dot Background preview image 1](https://framer.elliotli.dev/og/component/dot-background/2b38cc0e3185823c/1600x1200.jpg)

## Summary

Reactive 3D grid interaction system

## Description

\-----------------------------------------------------------------------------------------------

Add Premium Components To Your Projects:

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-g094t2v1-8wrj2R4JsfS8dz3uRkUmPxMk3a0JAx)](https://marketplace.framer.com/@saadat-ali-designsbysadat/)

## Features

-   Real-time interactive 3D grid powered by WebGL and Three.js
    
-   Responsive cursor-based distortion with smooth physics interactions
    
-   Multiple interaction modes including Pull, Push, Twist, and Lens
    
-   Dynamic node scaling and depth-based motion effects
    
-   Cinematic parallax tilt movement with immersive perspective
    
-   High-density procedural mesh rendering with optimized performance
    
-   Fully responsive fullscreen grid architecture
    
-   Premium shader-driven visuals with smooth interaction blending
    

## Customization Options

-   Customize grid density and world scale size
    
-   Adjust node colors, line colors, and opacity levels
    
-   Control interaction radius and force strength
    
-   Switch between multiple interaction behaviors
    
-   Fine-tune node size and visual intensity
    
-   Customize radial background gradients
    
-   Optimize visuals for subtle or dramatic motion effects
    
-   Fully responsive across screen sizes and layouts
    

## Use Cases

-   Interactive hero backgrounds
    
-   AI and SaaS landing pages
    
-   Futuristic interface sections
    
-   Creative developer portfolios
    
-   Gaming and tech website visuals
    
-   Immersive motion-driven experiences
    
-   Premium dashboard and product showcase layouts
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #679

## Details

- **Author**: Saadat Ali
- **Published**: 2026-05-30
- **Updated**: 2026-06-15
- **Added**: 2026-05-23
- **Categories**: Backgrounds

## More like this

-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background
-   [Fractal Glass Wave](/component/fractal-glass-wave) — Hienn Ng · $3 — Dynamic Fractal Glass Background
-   [Particle Flow Pro](/component/particle-flow-pro) — Interface Studio · $10 — Bring Your Background to Life
-   [Silk Gradient](/component/silk-gradient) — Kaisa A · Free — Silk Gradient Background