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