CanvasFXPro

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

1. Add the code component to your project and drop it on the canvas.

2. If your parent frame uses auto height, set Layout → Aspect or Min Height.

3. Pick an Effect, tweak FX1–FX4, choose Color mode, and dial Grid/Shapes.

4. For heavy blends or large frames, tune Engine → Quality, MaxTiles, and Mode to keep 60 FPS.