Description
ITmaroon Back Anime is a collection of Gutenberg blocks that add decorative background animations to your content.
This plugin is designed for modern block themes and the Site Editor.
It has been tested with WordPress 7.0.4.
Included blocks (current version):
* Particle Background Block (tsParticles v3)
* Wave Background Block (Canvas-based wave animation)
Performance-minded loading:
* Front-end scripts are registered through block.json and loaded only when the block exists on the page (viewScript).
* No runtime CDN is required for animation libraries.
tsParticles (v3) integration:
* The Particle Background Block is powered by tsParticles v3 and uses the following npm packages which are bundled into the plugin build:
– @tsparticles/engine (^3.9.1)
– @tsparticles/slim (^3.9.1)
– @tsparticles/shape-image (^3.9.1)
– @tsparticles/pjs (^3.9.1)
– itmar-block-packages
* The slim bundle is used for smaller footprint while keeping common particle features.
* Particle options are generated in a tsParticles v3 compatible format (not legacy particles.js format).
Mobile / Desktop responsive settings:
* The Wave Background Block supports separate values for desktop and mobile (e.g., wave height and wave sizes).
* In the editor, the responsive preview switches based on viewport size.
* On the front-end, the responsive behavior is applied using a screen-width check (matchMedia) to mirror the editor logic.
Privacy:
* This plugin does not collect personal data.
* This plugin does not send data to external services.
Development / Source Code
The human-readable TypeScript source code and build configuration are included with this plugin and are also available in the public GitHub repository:
https://github.com/itmaroon/itmaroon-back-anime
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.
Build
-
Install the shared development packages in the WordPress wp-content directory:
npm install –save-dev @wordpress/scripts typescript
npm install itmar-block-packages
-
Install this plugin’s dependencies in the plugin directory:
npm install
-
Run the TypeScript type check and production build:
npm run typecheck
npm run build
This plugin includes built assets generated from npm dependencies.
The Particle Background Block uses tsParticles v3 packages:
* @tsparticles/engine (^3.9.1)
* @tsparticles/slim (^3.9.1)
* @tsparticles/shape-image (^3.9.1)
* @tsparticles/pjs (^3.9.1)
* itmar-block-packages
Development dependencies and source code
Screenshots
Blocks
This plugin provides 2 blocks.
- Falling
- Wave
Installation
- Upload the plugin folder to the /wp-content/plugins/ directory, or install it through the WordPress Plugins screen.
- Activate the plugin through the ‘Plugins’ screen in WordPress.
- In the block editor or Site Editor, search for the “Falling” or “Wave” block and insert it into your layout.
- Adjust animation settings in the block sidebar (Inspector).
Notes: * Background animation blocks are typically used inside containers (e.g., Group/Cover/Section-like blocks) to decorate content behind other blocks. * For best results, ensure the parent/container block has a visible area (height/spacing) where the animation should appear.
FAQ
-
Does this plugin load external scripts (CDN)?
-
No. The animation library for particles is bundled in the plugin build via npm packages (@tsparticles/engine, @tsparticles/slim, @tsparticles/shape-image, @tsparticles/pjs).
Front-end scripts are loaded only when the relevant block is present on the page. -
Will the scripts run on pages that do not use these blocks?
-
No. Front-end scripts are registered via block.json viewScript and are loaded only when the block is rendered on the page.
-
Is this plugin compatible with the Site Editor (Full Site Editing)?
-
Yes. The blocks are intended to work in both the post editor and the Site Editor.
-
How does mobile support work for the Wave block?
-
The Wave block supports separate desktop/mobile values (e.g., wave height and wave sizes).
In 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. -
Does this plugin affect accessibility?
-
The canvas animations are decorative backgrounds. Canvas elements are output with aria-hidden=”true” so they are not announced to assistive technologies.
Reviews
There are no reviews for this plugin.
Contributors & Developers
“ITmaroon Back Anime” is open source software. The following people have contributed to this plugin.
Contributors
Translate “ITmaroon Back Anime” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
1.0.1
first publish
0.1.0
- Release
- Added Particle Background Block powered by tsParticles v3
- Added Wave Background Block with responsive desktop/mobile values
- Front-end scripts are loaded only when blocks are present (block.json viewScript)