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
Paste the component code into your Framer project under Assets → Code.
Drag DotBG onto your canvas or inside any Framer frame.
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:
Email: karimsaif010@gmail.com
X (Twitter): @Karim Saif
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
Paste the component code into your Framer project under Assets → Code.
Drag DotBG onto your canvas or inside any Framer frame.
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:
Email: karimsaif010@gmail.com
X (Twitter): @Karim Saif
