FieldX Waves

🌊 Interactive 3D Wave Pattern Generator & Library

Create beautiful animated wave patterns for your website. Design in the visual editor, export configurations, and embed anywhere via CDN - perfect for Webflow, WordPress, or any HTML site.

🚀 Live Demo

Open Wave Generator →

✨ Features

• Visual Editor - Design wave patterns with real-time preview
• Multiple Base Types - Horizontal, vertical, grid, radial, circular, field patterns
• Wave Functions - Sine, cosine, sawtooth, square, triangle, noise
• Layer System - Combine multiple layers for complex effects
• Presets - 6 built-in presets to get started quickly
• Export/Import - Save and load configurations as JSON
• CDN Ready - Single script file (~500KB) with Three.js bundled
• Webflow Compatible - Copy-paste embed code for Webflow sites
• Responsive - Auto-resizes to container, quality options for mobile

📦 Quick Start (CDN)

Add this to your HTML or Webflow Embed block:

<!-- Container -->
<div id="wave-bg" style="width: 100%; height: 100vh;"></div>

<!-- Load from CDN -->
<script src="https://cdn.jsdelivr.net/npm/fieldx-waves@latest/dist-lib/fieldx-waves.min.js"></script>

<!-- Initialize -->
<script>
  const config = { /* paste exported config here */ };
  const waves = FieldXWaves.FieldXWaves.create('#wave-bg', config);
</script>

🎨 Using the Visual Editor

1. Open the app at fieldx-waves.netlify.app
2. Choose a preset or start from scratch
3. Customize layers - adjust colors, dot sizes, wave parameters
4. Add wave functions - combine multiple waves for complex motion
5. Export - Click "Export / Import" at the bottom of sidebar
6. Copy embed code - Paste into your website

🔧 Configuration

Full Config Structure

const config = {
  layers: [{
    id: "1",
    enabled: true,
    baseType: "horizontal", // horizontal, vertical, grid, radial, circular, field
    params: {
      lineCount: 35,
      pointsPerLine: 300,
      spacing: 0.45,
      spread: 1,
      dotSize: 0.055,
      color: "#66ccff",
      opacity: 0.9,
      xOffset: 0,
      yOffset: 0,
      zOffset: 0,
      rotation: 0
    },
    waveFunctions: [{
      id: "wf1",
      type: "sine",      // sine, cosine, sawtooth, square, triangle, noise
      axis: "y",         // x, y, z, xy, radial
      frequency: 0.35,
      amplitude: 2,
      phase: 0,
      speed: 1.2
    }]
  }],
  background: {
    starCount: 400,
    starColor: "#ffffff",
    starSize: 0.025,
    bgColor: "#020408",
    starOpacity: 0.3
  },
  autoplay: true,
  quality: "medium"  // low, medium, high
};

Base Types

| Type | Description | |------|-------------| | horizontal | Horizontal parallel lines | | vertical | Vertical parallel lines | | grid | Square grid pattern | | radial | Radiating from center | | circular | Spiral/circular pattern | | field | Random scattered points |

Wave Types

| Type | Character | |------|-----------| | sine | 〰️ Smooth, organic | | cosine | ∿ Phase-shifted sine | | sawtooth | 📐 Sharp, aggressive | | square | ⬜ Digital, glitchy | | triangle | 🔺 Retro, 8-bit | | noise | 🌪️ Organic chaos |

🎮 API Methods

const waves = FieldXWaves.FieldXWaves.create('#container', config);

// Playback
waves.play();
waves.pause();
waves.toggle();
waves.isAnimating();

// Configuration
waves.setConfig(newConfig);
waves.setQuality('low');  // 'low', 'medium', 'high'
waves.getConfig();

// Cleanup
waves.destroy();

📱 Performance Tips

| Quality | Best For | |---------|----------| | low | Mobile devices, older hardware | | medium | Most websites (default) | | high | High-end desktops |

// Responsive quality
const isMobile = window.innerWidth < 768;
config.quality = isMobile ? 'low' : 'medium';

🔗 Webflow Integration

1. Add a Div Block with ID wave-bg
2. Set dimensions (100% width, 100VH height)
3. Set position to Absolute, z-index to -1
4. Add an Embed element with the CDN code
5. Paste your exported config

🛠️ Development

# Install dependencies
npm install

# Start dev server
npm run dev

# Build app
npm run build

# Build library for CDN
npm run build:lib

📁 Project Structure

app/
├── src/
│   ├── App.tsx              # Main wave generator app
│   ├── App.css              # Styles
│   └── lib/
│       └── fieldx-waves.ts  # Standalone library
├── dist-lib/                # Built library files
│   ├── fieldx-waves.min.js  # UMD bundle (CDN)
│   └── fieldx-waves.esm.js  # ES module (npm)
└── package.json

🌐 CDN Links

After publishing to npm:

https://cdn.jsdelivr.net/npm/fieldx-waves@latest/dist-lib/fieldx-waves.min.js
https://unpkg.com/fieldx-waves@latest/dist-lib/fieldx-waves.min.js

📄 License

MIT © FieldX

Open Wave Generator → | Full Documentation