ITmaroon Back Anime is a collection of Gutenberg blocks that add decorative background animations to your content.\nThis plugin is designed for modern block themes and the Site Editor.\nIt has been tested with WordPress 7.0.4.<\/p>\n\n
Included blocks (current version):\n* Particle Background Block (tsParticles v3)\n* Wave Background Block (Canvas-based wave animation)<\/p>\n\n
Performance-minded loading:\n* Front-end scripts are registered through block.json and loaded only when the block exists on the page (viewScript).\n* No runtime CDN is required for animation libraries.<\/p>\n\n
tsParticles (v3) integration:\n* The Particle Background Block is powered by tsParticles v3 and uses the following npm packages which are bundled into the plugin build:\n - @tsparticles\/engine (^3.9.1)\n - @tsparticles\/slim (^3.9.1)\n - @tsparticles\/shape-image (^3.9.1)\n - @tsparticles\/pjs (^3.9.1)\n - itmar-block-packages\n* The slim bundle is used for smaller footprint while keeping common particle features.\n* Particle options are generated in a tsParticles v3 compatible format (not legacy particles.js format).<\/p>\n\n
Mobile \/ Desktop responsive settings:\n* The Wave Background Block supports separate values for desktop and mobile (e.g., wave height and wave sizes).\n* In the editor, the responsive preview switches based on viewport size.\n* On the front-end, the responsive behavior is applied using a screen-width check (matchMedia) to mirror the editor logic.<\/p>\n\n
Privacy:\n* This plugin does not collect personal data.\n* This plugin does not send data to external services.<\/p>\n\n
The human-readable TypeScript source code and build configuration are included with this plugin and are also available in the public GitHub repository:\nhttps:\/\/github.com\/itmaroon\/itmaroon-back-anime<\/p>\n\n
This project is developed in a shared npm environment. Common development packages, including @wordpress\/scripts, TypeScript, and itmar-block-packages, are installed in the wp-content directory and resolved from wp-content\/node_modules by each plugin.<\/p>\n\n
Install the shared development packages in the WordPress wp-content directory:<\/p>\n\n
npm install --save-dev @wordpress\/scripts typescript<\/p>\n\n
npm install itmar-block-packages<\/p><\/li>\n
Install this plugin's dependencies in the plugin directory:<\/p>\n\n
npm install<\/p><\/li>\n
Run the TypeScript type check and production build:<\/p>\n\n
npm run typecheck<\/p>\n\n
npm run build<\/p><\/li>\n<\/ol>\n\n
This plugin includes built assets generated from npm dependencies.\nThe Particle Background Block uses tsParticles v3 packages:\n* @tsparticles\/engine (^3.9.1)\n* @tsparticles\/slim (^3.9.1)\n* @tsparticles\/shape-image (^3.9.1)\n* @tsparticles\/pjs (^3.9.1)\n* itmar-block-packages<\/p>\n\n
Notes:\n* Background animation blocks are typically used inside containers (e.g., Group\/Cover\/Section-like blocks) to decorate content behind other blocks.\n* For best results, ensure the parent\/container block has a visible area (height\/spacing) where the animation should appear.<\/p>\n\n\n
No. The animation library for particles is bundled in the plugin build via npm packages (@tsparticles\/engine, @tsparticles\/slim, @tsparticles\/shape-image, @tsparticles\/pjs).\nFront-end scripts are loaded only when the relevant block is present on the page.<\/p><\/dd>\n
No. Front-end scripts are registered via block.json viewScript and are loaded only when the block is rendered on the page.<\/p><\/dd>\n
Yes. The blocks are intended to work in both the post editor and the Site Editor.<\/p><\/dd>\n
The Wave block supports separate desktop\/mobile values (e.g., wave height and wave sizes).\nIn the editor, the preview switches by viewport size. On the front-end, the plugin applies a screen-width based selection so mobile devices can use different values than desktop.<\/p><\/dd>\n
The canvas animations are decorative backgrounds. Canvas elements are output with aria-hidden=\"true\" so they are not announced to assistive technologies.<\/p><\/dd>\n\n<\/dl>\n\n\n
first publish<\/p>\n\n