Designers commonly need procedural wave / field / dot-grid animations on hero sections, scroll backgrounds, or as ambient texture. The shipping options today are all the wrong shape:
The right shape is a library: install or include via CDN, configure with a JSON object, runs in the browser at 60fps. So that's what I built.
Wave algorithm design. Each visible "wave field" is composed of one or more layers. A layer has:
horizontal, vertical, grid, radial, circular, field) defining the spatial arrangement of dotssine, cosine, sawtooth, square, triangle, noise), an axis (x, y, z, xy, radial), and frequency / amplitude / phase / speed knobsWave functions on a layer compose additively (multiple sines along different axes for complex motion), and layers stack so a final field can have e.g. a slow base ripple + a fast horizontal ribbon + a noise-distorted overlay all in the same scene.
Rendering. Three.js + a custom point-cloud renderer. Each dot is a single point primitive with a sprite shader, batched into a single draw call per layer for performance. Camera is a parallax-light ortho/perspective hybrid so the field reads as 3D without making designers think about cameras. A starfield background layer is included with its own colour/size/opacity controls because hero sections always seem to want one.
Quality presets. Three knobs — low, medium, high — that scale point counts and pixel ratio. The library exposes setQuality() so the host page can detect mobile and downshift on the fly:
const isMobile = window.innerWidth < 768;
config.quality = isMobile ? 'low' : 'medium';
This is the part designers don't think about and developers always need.
Visual editor. React 19 + Vite + Tailwind + shadcn/ui (Radix-based components — accordions, sliders, popovers, colour pickers, tabs, the lot). Real-time preview via React Three Fiber. Six built-in presets for cold-start. A complete Export / Import flow: design in the editor, click Export, get a JSON config + the CDN embed snippet pre-filled, paste anywhere.
Library build. The single deliverable that matters is dist-lib/fieldx-waves.min.js — a UMD bundle that includes Three.js itself, ~500 KB, served from jsDelivr / unpkg. Designers paste two lines into a Webflow Embed block and it works:
<div id="wave-bg" style="width:100%;height:100vh;"></div>
<script src="https://cdn.jsdelivr.net/npm/fieldx-waves@1.0.2/dist-lib/fieldx-waves.min.js"></script>
<script>
const waves = FieldXWaves.FieldXWaves.create('#wave-bg', { /* config */ });
</script>
A separate ESM build (fieldx-waves.esm.js) + TypeScript declarations target frontend devs who're already in a bundled React/Vue/Svelte project and want the slimmer install.
API surface. Tiny on purpose — create(), play(), pause(), toggle(), setConfig(), setQuality(), getConfig(), destroy(). Every config field is documented in the README with default values and a description. The library auto-resizes to its container and cleans up GPU resources on destroy().
Webflow integration guide. A specific section in the README walks through the four-step Webflow recipe (Div Block → ID → dimensions → Embed block with CDN) because that's the deployment path for ~80% of users.
fieldx-waves@1.0.2