About this plugin
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.
4.
Included blocks (current version):
* Particle Background Block (tsParticles v3)
* Wave Background Block (Canvas-based wave animation)
Performance-minded loading:
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:
1)
1)
1)
1)
– itmar-block-packages
* The slim bundle is used for smaller footprint while keeping common particle features.
js format).
Mobile / Desktop responsive settings:
, 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:
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:
1)
1)
1)
1)
* itmar-block-packages
Development dependencies and source code
- ITmaroon Back Anime on GitHub
- block-class-package on GitHub
- block-class-package on Packagist
- itmar-block-packages on npm
- itmar-block-packages on GitHub