Dot Background BG

Multi-octave value noise by Karim Saif

Show PreviewBuy for $3
Dot Background BG

About Dot Background BG

DotBG is a customizable canvas background component for Framer designed to generate dynamic, noise-driven dot fields and matrix glyph patterns. Powered by multi-octave value noise, it produces organic liquid motion across customizable geometry and typography, making it ideal for sleek web hero sections, glassmorphism cards, and modern dark-mode layouts.

Live Preview:: https://dotbackground.framer.website/

Key Features

  • 3 Visual Modes: Switch seamlessly between Circle, Square, and custom Glyph / ASCII modes.

  • Procedural Value Noise: Animated multi-octave noise field creates smooth, flowing motion without relying on heavy external video assets.

  • Dynamic Color Palettes: Supports up to 8 custom colors with real-time palette interpolation and bias tuning.

  • Custom Glyph Fields: Render custom character strings (symbols, ASCII, numbers) scaled dynamically by local brightness intensity.

  • Performance Optimized: Features a capped 40 FPS animation loop to minimize CPU/GPU load while keeping motion fluid.

  • Framer Static Renderer Compatible: Fully supports Framer canvas previews and static SSR renders.

  • Crisp HiDPI Canvas: Automatically scales with devicePixelRatio to stay sharp on Retina displays.

Usage

  1. Paste the component code into your Framer project under Assets → Code.

  2. Drag DotBG onto your canvas or inside any Framer frame.

  3. Set width and height to 100% or Fill, and customize the appearance directly from the Framer right-hand property panel.

Support & Feedback

Have questions, requests, or feedback? Reach out anytime: