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.
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.
Otvos
