WP Manifestindependent plugin directory
manifest / performance / stripe-wave-block

Mesh Gradient Block

An Apple-inspired animated mesh gradient effect using WebGL.

by EXZENT · github.com/exzenter/stripe-wave-block · website

★ 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/stripe-wave-block/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/stripe-wave-block ↗

An Apple-inspired animated mesh gradient WordPress block using WebGL. Replicates the fluid, multi-color gradient animation seen on Stripe.com and other premium sites.

Features

  • Animated Mesh Gradient: Smooth, high-performance WebGL rendering.
  • Configurable Colors: Choose up to 4 gradient colors with individual toggles.
  • Stripe Mode:
    • Skew Both Edges: Classic skew transform for a slanted block.
    • Cut Top/Bottom Edge: Diagonal cuts on specific edges using clip-path.
    • Page Anchoring: Anchor the gradient to the very top: 0 or bottom: 0 of the page with fixed positioning.
  • Advanced Controls:
    • Wave Amplitude & Frequency: Fine-tune the "liquidity" and pattern density.
    • Mesh Density: Balance between visual detail and performance.
    • Animation Speed: From static to high-speed motion.
    • Seed: Regenerate random patterns instantly.
  • Performance Optimized: Auto-pauses animation when the block scrolls out of the viewport.
  • Responsive: Controls for height in px, vh, and rem.

Installation

  1. Clone or download this repository.
  2. Place the mesh-gradient-block folder into your standard WordPress wp-content/plugins directory.
  3. Activate the plugin "Mesh Gradient Block" through the WordPress Plugins menu.

Development

The block is built using @wordpress/scripts.

Commands

  • npm install: Install dependencies.
  • npm run start: Starts the build for development.
  • npm run build: Generates the production build.

Credits

Based on the mesh gradient logic by Mikhail Mogilnikov.