Dot Grid Background brings your Framer canvas to life with a physics-inspired cursor interaction. As visitors hover, surrounding dots break from the grid and begin orbiting in randomized 3D planes — each dot tilted at a unique inclination and rotational axis, creating the layered depth of an atomic orbital model rather than a flat 2D swirl.
Every dot on the grid has three permanent orbital parameters assigned at render time: an inclination angle (how tilted its orbital plane is), an ascension angle (how that plane is rotated around the viewer axis), and a phase offset (where on the orbit it starts). A single global clock drives all orbits at a constant speed, so cursor movement never affects orbit velocity — only position determines which dots are pulled in. When the cursor leaves, orbits wind down with a smooth ease-out decay rather than cutting off abruptly.
Dot Color — supports plain hex, RGB values, and Framer color styles with full light/dark theme awareness
Dot Size — dot radius from 1px to 12px
Grid Spacing — controls density of the dot grid from tight (12px) to airy (80px)
Enable Orbiting — toggle the 3D orbit effect on or off; when off, dots still scale and brighten under the cursor
Orbit Speed — how fast dots revolve in their orbital planes (hidden when orbiting is off)
Impact Radius — how far from the cursor the effect reaches, from 20px to 400px
Scale on Hover — how much dots enlarge at the center of the impact zone
Color styles defined in Framer's color system are resolved live against the component element every animation frame using getComputedStyle. This means the dot color correctly switches between your light and dark theme tokens the moment the theme changes — no re-mount required.
Rendered entirely on a hardware-accelerated <canvas> element using requestAnimationFrame. The grid rebuilds automatically on resize via ResizeObserver. The component is resolution-aware and renders at the device's native pixel ratio for crisp output on all screens including high-DPI displays.
By purchasing this Framer component, you acknowledge and agree to the following:
Immediate Delivery: You will receive instant access to the digital assets upon purchase. Consequently, we do not offer refunds, returns, or exchanges for "change of mind" or accidental purchases.
Compatibility: It is the buyer's responsibility to ensure they have a functional Framer account and the technical proficiency to use the component.
Technical Issues: If you encounter a genuine technical defect or a discrepancy between the live preview and the delivered file, please contact us within 7 days. We will provide a fix or support; if the issue remains unresolved, a refund may be issued at our sole discretion.
Dot Grid Background brings your Framer canvas to life with a physics-inspired cursor interaction. As visitors hover, surrounding dots break from the grid and begin orbiting in randomized 3D planes — each dot tilted at a unique inclination and rotational axis, creating the layered depth of an atomic orbital model rather than a flat 2D swirl.
Every dot on the grid has three permanent orbital parameters assigned at render time: an inclination angle (how tilted its orbital plane is), an ascension angle (how that plane is rotated around the viewer axis), and a phase offset (where on the orbit it starts). A single global clock drives all orbits at a constant speed, so cursor movement never affects orbit velocity — only position determines which dots are pulled in. When the cursor leaves, orbits wind down with a smooth ease-out decay rather than cutting off abruptly.
Dot Color — supports plain hex, RGB values, and Framer color styles with full light/dark theme awareness
Dot Size — dot radius from 1px to 12px
Grid Spacing — controls density of the dot grid from tight (12px) to airy (80px)
Enable Orbiting — toggle the 3D orbit effect on or off; when off, dots still scale and brighten under the cursor
Orbit Speed — how fast dots revolve in their orbital planes (hidden when orbiting is off)
Impact Radius — how far from the cursor the effect reaches, from 20px to 400px
Scale on Hover — how much dots enlarge at the center of the impact zone
Color styles defined in Framer's color system are resolved live against the component element every animation frame using getComputedStyle. This means the dot color correctly switches between your light and dark theme tokens the moment the theme changes — no re-mount required.
Rendered entirely on a hardware-accelerated <canvas> element using requestAnimationFrame. The grid rebuilds automatically on resize via ResizeObserver. The component is resolution-aware and renders at the device's native pixel ratio for crisp output on all screens including high-DPI displays.
By purchasing this Framer component, you acknowledge and agree to the following:
Immediate Delivery: You will receive instant access to the digital assets upon purchase. Consequently, we do not offer refunds, returns, or exchanges for "change of mind" or accidental purchases.
Compatibility: It is the buyer's responsibility to ensure they have a functional Framer account and the technical proficiency to use the component.
Technical Issues: If you encounter a genuine technical defect or a discrepancy between the live preview and the delivered file, please contact us within 7 days. We will provide a fix or support; if the issue remains unresolved, a refund may be issued at our sole discretion.
