CanvasFXPro

Generative canvas backgrounds

CanvasFX Pro lets you design living, on-brand backgrounds and hero visuals directly in Framer—no external libs, no shaders. Pick from 30+ effects (swirls, rings, turbulence, plasma, moiré, shockwave, and more), choose a shape style (square, rounded, circle, diamond, ring, hex, triangle, star, cross), then fine-tune tiles, color, blending, and motion. Everything is container-responsive with optional aspect ratio and min height so it behaves perfectly in auto-layout pages. Under the hood, CanvasFX Pro is built for real-world performance: MaxTiles caps tile count intelligently, Quality renders at a scaled back buffer, Fast mode trims per-tile rotations, gradients are computed once per frame, and calculations run only when needed. The result: rich motion graphics that still feel snappy in Framer preview and on your published site. Recommended performance presets Smooth & light: Engine → Mode Fast , Quality 0.75 , MaxTiles 8000 ; Grid → Density 36–50 ; Color → Blend source-over . Glow look: Color → Blend screen or lighter ; keep Density ≤ 48 ; Engine → Quality 0.8 . Graphic/crisp: Shapes → Square/Rounded, Stroke Off, Color → Palette, Alpha 1.0, Blend source-over . Usage Add the code component to your project and drop it on the canvas. If your parent frame uses auto height, set Layout → Aspect or Min Height . Pick an Effect , tweak FX1–FX4 , choose Color mode, and dial Grid/Shapes . For heavy blends or large frames, tune Engine → Quality , MaxTiles , and Mode to keep 60 FPS.

Generative canvas backgrounds