WP Manifestindependent plugin directory
manifest / editor / eased-sine-gradient

Eased Sine Scrim Gradient Animation

An animated poster block featuring staggered sine-eased scrim gradient rows that glide back and forth with a smooth yoyo motion. Includes editable title and subtitle overlays, customisable colours, aspect ratios, and interactive mouse-hover effects such as magnetic repel, speed warp, hue shift, and wave distortion.

by moijto · github.com/exzenter/eased-sine-gradient

★ 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/eased-sine-gradient/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/eased-sine-gradient ↗

A WordPress block plugin that renders an animated poster with staggered sine-eased scrim gradient rows. The rows glide back and forth in a smooth yoyo motion powered by GSAP, overlaid with a fractal-noise SVG filter for a tactile, printed feel.

Originally based on a CodePen by Pete Barr, recreating an animation by Loïc Gaudiello.

Features

  • Fully configurable Gutenberg block with live preview in the editor
  • Editable title and subtitle with RichText
  • Customisable background colour, gradient colour, noise opacity, padding
  • Aspect ratio presets (A4, 9:16, 3:4, 1:1, 4:3, 16:9) or custom values
  • Adjustable row count, row height, font size, letter spacing, font family
  • Fine-grained animation controls: stagger, fade duration, move duration, move range, initial seek

Interactive Hover Effects

Four optional mouse-hover effects that can be toggled and tuned individually:

Effect Description Setting
Magnetic Repel Rows push away from the cursor vertically Strength 10–200 px
Speed Warp Animation accelerates while hovering Factor 1.5–8×
Color Shift Mouse X position rotates the gradient hue 0–360° Toggle on/off
Wave Distortion Rows near the cursor stretch vertically Max scaleY 1.2–5×

All effects reset smoothly on mouse leave. They can be combined freely.

Installation

  1. Clone or download this repository into wp-content/plugins/
  2. Install dependencies and build:
    npm install
npm run build
  3. Activate Eased Sine Scrim Gradient Animation in the WordPress admin
  4. Add the Eased Sine Gradient block from the block inserter (category: Media)

Development

npm start     # watch mode with hot reload
npm run build # production build

The block source lives in block-src/ with a separate frontend entry point at block-src/frontend/index.js. The build output goes to build/ and block.json is copied there automatically.

Dependencies

License

MIT – see LICENSE.txt. Original animation concept by Pete Barr / Loïc Gaudiello.