WP Manifestindependent plugin directory
manifest / editor / flowfield

FlowField Generator Block

A Gutenberg block that renders an interactive flow field canvas with full parameter control.

by Sladix · github.com/exzenter/flowfield · 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/flowfield/archive/refs/heads/master.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/flowfield ↗

FlowField Generator — WordPress Gutenberg Block

A generative flow field canvas block for WordPress. Renders Perlin-noise-based streamlines (Jobard-Lefer algorithm) directly in the block editor and on the frontend with full parameter control.

Features

  • Live preview inside the Gutenberg editor
  • Seeded, deterministic rendering — same seed = same result
  • Progressive rendering with requestAnimationFrame
  • Hover highlight: strokes thicken on mouseover and fade back
  • Viewport-triggered drawing (starts when ≥30% visible)
  • Click-to-regenerate mode

Block Settings

Dimensions

  • Width — any CSS unit (px, %, vw, em, rem, …)
  • Height — any CSS unit
  • Aspect Ratio — 1:1, 4:3, 16:9, 3:2, 9:16, and more

Interaction

  • Click to regenerate (random seed on click)
  • Draw when in viewport (≥30% threshold via IntersectionObserver)
  • Hover highlight — thickness multiplier, fade duration, multiple simultaneous highlights
  • Highlight color modes: Same, Brighter, Complement, White, Custom

Canvas

  • Format presets: A6, A5, A4, A3, Square, Custom
  • Margin, Seed (with randomize button), Background color

Lines

  • Seed Spacing (dSep), Min Distance (dTest)
  • Step Size, Stroke Width
  • Max Length, Min Segments
  • Optimize for longest lines
  • Progressive rendering

Color Palette

  • Single — stroke color picker
  • Gradient — Color A → B with direction (by order, horizontal, vertical, radial)
  • Noise — noise-modulated gradient
  • Palette — custom multi-color array with inline editor

Super Params

  • Field Scale, Distortion, Twist (°), Noise Layer

Noise Force

  • Weight, Scale, Complexity, Octaves

Installation

npm install
npm run build

Copy the flowfield-block/ folder to wp-content/plugins/, then activate the plugin in WordPress. The block appears under Media → FlowField Generator.

Development

npm start   # watch mode
npm run build   # production build