Dot Background BG

Multi-octave value noise

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

Multi-octave value noise