C/280//Layout
Dot & Image Overlay
Full-screen dot-grid or tiled-image background overlay
overlaybackgroundpatterndotsdecorativelayout
By Kaiborg · Verified authorPay once · Own forever
D/01//Description
A configurable full-screen background overlay for Framer. Renders either a crisp dot grid (color, size, spacing) or a tiled pattern of your own image (size + spacing), with offset, opacity, backdrop blur, blend mode, z-index, and an interactive toggle. Drop it on the top layer of any page as a decorative texture or pattern. Fully wired with Framer property controls.
P/02//Source preview · locked
import { addPropertyControls, ControlType } from "framer"
import { useState, useEffect } from "react"
export default function ImageOrDotOverlay(props) {
const [dimensions, setDimensions] = useState({
width: typeof window !== "undefined" ? window.innerWidth : 2000,
// … purchase to unlock the full sourceSource locked
