Physicks

Physicks lets you build interactive canvas compositions powered by real-time physics. Using a visual drag-and-drop editor, you can create dynamic layouts with animated objects that respond to gravity, bouncing, dragging, and cursor interaction — then embed them anywhere on your site with a simple shortcode.

Key Features

Editor

• Visual canvas editor — place, resize, rotate, and style objects directly in the WordPress admin
• Full undo/redo history
• Desktop and Mobile canvas views — design separate layouts for each viewport
• Raw JSON mode — copy, paste, and transfer entire compositions between projects
• Clone objects, align freely, snap guides for precise placement

Objects

• 8 built-in shapes: squares, circles, triangles, hexagons, pentagons, rhombuses, trapezoids, and parallelograms
• Per-object customisation: background color/image, text color, padding, border radius, rotation
• Hover and Active states — define separate colors and images for each interaction state
• Border controls: width, color, stroke position (inside/centered/outside), line join, line cap, dash patterns
• Content editor — add rich text or HTML inside any object
• Click actions: open link, open in new tab
• Custom CSS class per object for theme-level styling

Physics & Motion

• Falling physics powered by Matter.js — drop on load or drop on click
• Configurable gravity, bounce (restitution), and friction
• Floating motion — objects drift gently around the canvas
• Collision physics — objects bounce off each other and canvas walls
• Cursor repulsion / attraction — objects react to cursor position with configurable radius and force
• Border animation — animated stroking effects cycle through object borders
• Drag & drop objects on the frontend canvas

Responsive & Performance

• Canvas scales proportionally to fit any container width
• Separate mobile canvas with configurable breakpoint
• Assets loaded only on pages where a composition is embedded
• Minified JS files in production (admin toggle to use unminified for debugging)
• Vendor libraries bundled locally — no external CDN requests

Compatibility

• Works with Elementor, Divi, WPBakery, and any theme/page builder that supports shortcodes
• Compatible with WPML, Loco Translate, and Polylang
• Import/export compositions as JSON for easy migration
• SVG upload support with server-side sanitisation

Bundled Libraries

• Matter.js v0.19.0 — MIT Licence
• poly-decomp.js v0.3.0 — MIT Licence

Privacy

Physicks does not collect any visitor data. All physics processing happens in the visitor’s browser. No cookies are set for site visitors.

External Services

Google Fonts (optional, disabled by default)

If you enable the Google Fonts option in Physicks → Settings → Performance, the plugin will load font files from Google’s servers on the pages where a composition is embedded:

• Service: Google Fonts (fonts.googleapis.com, fonts.gstatic.com)
• When: On frontend page load, only on pages containing a Physicks composition, only if the option is enabled
• Data sent: Standard HTTP request (IP address, browser user agent, referring URL)
• Disabled by default — no Google Fonts requests are made unless you explicitly enable this setting
• Google Privacy Policy: https://policies.google.com/privacy
• Google Fonts Privacy: https://developers.google.com/fonts/faq/privacy

Build Tools

Physicks ships minified JavaScript for production performance. All unminified source files are included in the plugin ZIP alongside the minified versions (assets/js/*.js are the sources; assets/js/*.min.js are the compiled outputs).

To rebuild the minified files from source, run npm install && npm run build in the plugin root. Node.js 18+ and npm are required.