Back to articles

wawa-vfx: Open-Source VFX + Particle System for React Three Fiber Projects

Add visual effects, particles, and trails to your 3D web apps with ease with wawa-vfx engine.

wawa-vfx is a lightweight, composable, and performance-focused visual effects engine tailored for React Three Fiber. Ideal if you're building a game, a product configurator, or an interactive 3D website, this library helps you adding GPU-accelerated particles, bursts, and trails with minimal effort.

Preview of the wawa-vfx engine in action!

💡 Why wawa-vfx Exists

Through multiple projects, I found myself needing a simple yet powerful VFX engine that could easily integrate with Three.js and React Three Fiber. I wanted to create stunning visual effects without the complexity of traditional game engines or the steep learning curve of shader programming.

I often found myself re-inventing the wheel, creating custom shaders and effects from scratch. This was time-consuming and inefficient, while the code was often very similar across projects. I wanted to focus on building experiences rather than getting bogged down in the technical details of VFX.

During my course development, I realized there was a real need for a modular, React-friendly VFX system that doesn't rely on bulky engines or require advanced shader knowledge. So I built wawa-vfx to teach core VFX concepts while keeping it practical, performant, and production-ready.

This is the VFX engine we build together in this lesson from my course: React Three Fiber: The Ultimate Guide to 3D Web Development.

Then, I dedicated two lessons to learn how to leverage the engine to create lovely vfx.

The first one is the Fireworks lesson 🎇 where we create a landing page allowing us to trigger different types of fireworks.

Preview of the Fireworks lesson or follow this link to try it out yourself!

The second one is the Wizard Game in which we create a game where you can shoot different spells (Fire, Ice, Void) to fight orcs. 🧙

Preview of the Wizard Game lesson or follow this link to try it out yourself!

---

⚡ Features

Here is what the wawa-vfx engine offers:

• 💻 Built for React Three Fiber (R3F-first design)

• ✨ Declarative effects like particles, bursts, and trails

• ⚙️ GPU-powered and optimized for real-time rendering

• 🧱 Custom geometries

• 🎓 Fully explained in my course for complete understanding

• 🤝 Open to contributions and community-driven improvements

---

📦 Installation

Copy

npm install wawa-vfx

or

Copy

yarn add wawa-vfx

---

Usage

To use the wawa-vfx engine, you need to use the two main components: VFXParticles and VFXEmitter.

• VFXParticles: Defines the particle system and its rendering properties

• VFXEmitter: Controls where, when and how particles are emitted into the scene

Basic Example

Copy

import { VFXEmitter, VFXParticles } from "wawa-vfx";


const MyEffect = () => {

  return (

    <>

      {/* Step 1: Define your particle system */}

      <VFXParticles

        name="particles" // A unique identifier for this particle system

        settings={{

          nbParticles: 100000, // Maximum number of particles to allocate

          gravity: [0, -9.8, 0], // Apply gravity (x, y, z)

          fadeSize: [0, 0], // Size fade in/out settings

          fadeOpacity: [0, 0], // Opacity fade in/out settings

          renderMode: "billboard", // "billboard" or "mesh"

          intensity: 3, // Brightness multiplier

        }}

      ></VFXParticles>


      {/* Step 2: Define your emitter */}

      <VFXEmitter

        debug // Show debug visualization

        emitter="particles" // Target the particle system by name

        settings={{

          loop: true, // Continuously emit particles (only if `spawnMode` is 'time')

          duration: 1, // Emission cycle duration in seconds

          nbParticles: 100, // Number of particles to emit per cycle

          spawnMode: "time", // Emission mode: 'time' or 'burst'

          delay: 0, // Time delay before starting emission


          // Particle lifetime range [min, max]

          particlesLifetime: [0.1, 1],


          // Position range (min/max)

          startPositionMin: [-0.1, -0.1, -0.1],

          startPositionMax: [0.1, 0.1, 0.1],


          // Rotation range (min/max)

          startRotationMin: [0, 0, 0],

          startRotationMax: [0, 0, 0],

          // Rotation speed range (min/max)

          rotationSpeedMin: [0, 0, 0],

          rotationSpeedMax: [0, 0, 0],


          // Direction range (min/max)

          directionMin: [-1, 0, -1],

          directionMax: [1, 1, 1],


          // Particle size range [min, max]

          size: [0.01, 0.25],


          // Particle speed range [min, max]

          speed: [1, 12],


          // Color at start - an array of strings for random selection

          colorStart: ["white", "skyblue"],


          // Color at end - an array of strings for random selection

          colorEnd: ["white", "pink"],

        }}

      ></VFXEmitter>

    </>

  );

};

Explore the source code of the examples you can find on the demo page of the VFXEngine to see how to use the engine in different scenarios.

🚀 Open for Contributions

The project is open-source and community-driven!

Feel free to check out the repo, submit issues, contribute ideas, or open pull requests.

🔗 GitHub Repository