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.
Highlights
30+ unique effects including: Swirl, Ripple Rings, Vortex, Turbulence, Lissajous Grid, Wave Curls, Orbit Drift, Radial Saw, Grid Bend, Shockwave (alias “Shakewave”), Plasma, Moiré, Sunburst, Zigzag, and more.
Shape & tile system: squares, rounded, circles, diamonds, rings, hexes, triangles, stars, crosses; gap, radius, stroke, rotation, jitter.
Color & blending: Palette / Linear or Radial Gradient / B&W, global alpha, and blend modes (multiply, screen, overlay, difference, etc.).
Responsive by design: respects the parent frame; optional Aspect (None, 1:1, 16:9, 4:3, 2:1, Custom) and Min Height for auto-height layouts.
Performance first: MaxTiles, Quality downscale, Fast render mode, and angle-on-demand computations for stable FPS.
HiDPI-safe: crisp rendering without cumulative scaling artifacts.
Zero dependencies: pure canvas 2D; just drop it in Framer.
Property Controls (grouped)
Layout: Aspect (None/1:1/16:9/4:3/2:1/Custom), Custom AR, Min Height.
Grid: Density, Gap, Jitter.
Shapes: Shape, Radius (for Rounded), Ring Thickness, Stroke Only, Stroke Width, Rotate (Off/Wave/Random/Spin + Max).
Effect: Type (30+), Edge, Ripple, Tightness, Speed, Field Rotation, FX1–FX4 (extra tuning).
Color: Mode (Palette/Gradient/B&W), 4 Colors, Gradient Angle or Radial, Auto B/W, Blank color, Global Alpha, Blend Mode.
Engine: Seed, FPS cap, Pause, Quality (0.25–1), MaxTiles, Render Mode (Full/Fast).
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
