manifest / performance / fluidgradientthreejs

Liquid Gradient Block

Interactive liquid gradient background block using Three.js.

by Antigravity · github.com/exzenter/fluidgradientthreejs

★ 1stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/exzenter/fluidgradientthreejs/archive/refs/heads/main.zip

No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.

Readme github.com/exzenter/fluidgradientthreejs ↗

An interactive liquid gradient background block for WordPress, built with Three.js. This block features smooth, animated gradients with mouse interaction support, customizable colors, speed, intensity, and zoom settings.

Features

Interactive Liquid Distortion: Gradient flows and reacts to mouse movements.
Customizable Colors: Up to 6 color stops for complex, vibrant gradients.
Animation Controls: Adjust speed and intensity of the liquid effect.
Advanced Settings: Control gradient size, count, and color weights.
Responsive Design: Supports various aspect ratios (1:1, 4:3, 16:9, 21:9) and free-form height.
InnerBlocks Support: Add any WordPress blocks on top of the animated background.

Installation

Upload the plugin files to the /wp-content/plugins/fluid-gradient-threejs directory, or install the plugin through the WordPress plugins screen directly.
Activate the plugin through the 'Plugins' screen in WordPress.

Development

This block is built using @wordpress/scripts.

Available Scripts

`npm start`

Starts the build process in watch mode for development.

`npm run build`

Builds the production-ready code.

`npm run format`

Formats the source code using WordPress coding standards.

`npm run lint:js` / `npm run lint:css`

Lints JavaScript and CSS files.

License

GPL-2.0-or-later