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

[wawa-vfx](https://github.com/wass08/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.

<video src="https://assets.wawasensei.dev/react-three-fiber/vfx-engine/wawa-vfx-trailer.mp4" width="100%" controls></video>

_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](https://wawasensei.dev/courses/react-three-fiber/lessons/vfx-engine) from my course: [React Three Fiber: The Ultimate Guide to 3D Web Development](https://wawasensei.dev/courses/react-three-fiber).

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

The first one is the [Fireworks lesson](https://wawasensei.dev/courses/react-three-fiber/lessons/fireworks) 🎇 where we create a **landing page** allowing us to trigger different types of fireworks.

<video src="https://assets.wawasensei.dev/react-three-fiber/fireworks/final-result.mp4" width="100%" controls></video>

_Preview of the Fireworks lesson or [follow this link](https://fireworks.wawasensei.dev/) to try it out yourself!_

The second one is the [Wizard Game](https://wawasensei.dev/courses/react-three-fiber/lessons/wizard) in which we create a **game** where you can shoot different spells (Fire, Ice, Void) to fight orcs. 🧙

<video src="https://assets.wawasensei.dev/react-three-fiber/wizard/wizard-game-preview.mp4?v=2" width="100%" controls></video>

_Preview of the Wizard Game lesson or [follow this link](https://wizard.wawasensei.dev/) to try it out yourself!_

---

## ⚡ Features

Here is what the [wawa-vfx](https://github.com/wass08/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

```bash
npm install wawa-vfx
```

or

```bash
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

```jsx
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](https://github.com/wass08/wawa-vfx/tree/main/examples) you can find on the [demo page](https://wawa-vfx.wawasensei.dev/) 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](https://github.com/wass08/wawa-vfx)


A plug-and-play VFX engine made for R3F devs. Build real-time effects in your apps, open-source and community-driven!

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

**From flat pages to immersive digital worlds, here’s what makes a 3D website — and why they’re shaping the future of the web.**

## 🆚 2D vs. 3D Websites

Most websites you use every day — blogs, shops, social platforms — are 2D. They present content like text, images, and videos in a scrollable, flat layout. You view information, click links, and move from one page to another.

But with **3D websites**, you don’t just scroll — **you explore**. These experiences add **depth, interaction, and immersion**, creating a digital space you can move through, like a virtual environment or game.

---

## 🧠 What Makes a Website 3D?

Despite the name, 3D websites don’t need to be fully three-dimensional. They can be a mix of 2D and 3D elements, but they all share a few key features:

- **3D Models**: Objects created in 3D software (like Blender or Maya) that can be manipulated and viewed from different angles.
- **Interactive Elements**: Users can click, drag, or hover over objects to trigger animations or changes in the scene.
- **Dynamic Lighting and Shadows**: Real-time lighting effects that change based on the scene and user interactions, adding depth and realism.
- **Animations**: Objects can move, rotate, or change shape in response to user actions or events.
- **Camera Controls**: Users can navigate the scene using mouse or touch controls, allowing them to explore the environment from different perspectives.
- **Advanced Rendering Techniques**: 3D can be used to create advanced sliders, carousels, and other UI elements that feel more alive and engaging.

### 🎨 Interactive Visual Experience

![Wawa Sensei Virtual Teacher](https://assets.wawasensei.dev/react-three-fiber-landing/project-videos/thumbnails/AI%20teacher.webp)

_Learning with a virtual teacher_

- **Realistic lighting, textures, and materials**

  Instead of static images, 3D websites use real-time lighting and rich textures to create scenes that feel tangible — like walking into a showroom or gallery.

- **Explore virtual objects and environments**

  Imagine rotating a 3D product, zooming into a design, or walking through a digital building — all in your browser.

- **Immersion that feels like a digital world**

  Users don’t just observe — they experience. This kind of depth and interaction makes content far more engaging.

---

### 🕹️ Enhanced User Engagement

![3D Car Slider](https://assets.wawasensei.dev/react-three-fiber-landing/project-videos/thumbnails/Tesla%203D%20Car%20Slideshow.webp)

_3D car slider_

- **Real-time interactions make content feel alive**

  3D websites respond dynamically to user input, allowing people to **move around, manipulate objects, or follow interactive stories**.

- **Control the experience**

  From custom camera views to clickable 3D elements, users feel more in control of their journey through the site.

- **Increased engagement and retention**

  The more engaging your website is, the longer people stay — and the more likely they are to remember your brand or product.

---

### 🔧 Powered by Modern Web Technologies

- **Built using WebGL/WebGPU**

  Technologies like [WebGL](https://get.webgl.org/), [WebGPU](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API) allows our browsers to render 3D graphics directly, without needing plugins or special software.

  Frameworks like [Three.js](https://threejs.org/), [React Three Fiber](https://r3f.docs.pmnd.rs/) and [Babylon.js](https://www.babylonjs.com/) make it easy to create complex 3D scenes that run smoothly in the browser.

- **No plugins or downloads needed**

  Everything runs natively in the browser — no special software or extensions required.

- **Responsive across devices**

  Whether on desktop or mobile, 3D websites can be optimized for performance and accessibility.

---

## 🎓 Want to Build One Yourself?

If you’re excited by the idea of creating your own interactive 3D website — **you can absolutely learn to do it**.

Check out my course:  
👉 [React Three Fiber: The Ultimate Guide to 3D Web Development](https://wawasensei.dev/courses/react-three-fiber)

In it, I walk you through the process of building fully interactive 3D experiences using **React Three Fiber**, even if you’re new to 3D or React.

Through project-based learning, you’ll gain hands-on experience with the tools and techniques used to create stunning 3D websites:

- 3D fundamentals
- Cameras, lights, shadows, and materials
- How to find, prepare, and import 3D models
- Interactivity & animations
- Performance optimization
- Shaders, VFX & post-processing
- New technologies WebGPU and Three.js Shading Language (TSL)

<video src="https://assets.wawasensei.dev/react-three-fiber-landing/project-videos/Iphone.mp4" width="100%" controls></video>

_Preview of the camera controls lesson_

<video src="https://assets.wawasensei.dev/react-three-fiber-landing/project-videos/Image%20slider.mp4" width="100%" controls></video>

_Preview of the image slider lesson_

To finish by building a [professional 3D website portfolio](https://r3f-ultimate-portfolio-u4.vm.elestio.app/) that showcases your work and skills.

<video src="https://assets.wawasensei.dev/react-three-fiber-landing/project-videos/Portfolio.mp4" width="100%" controls></video>

_The portfolio we build together in the course!_

---

## 🧭 Conclusion

3D websites are opening the door to a new kind of digital experience — one that’s immersive, interactive, and deeply engaging. As more businesses and creators seek to stand out online, the demand for 3D web experiences will only grow.

With the right tools and a bit of curiosity, anyone can start building their own.  
Start exploring, start building — and maybe, your next website won’t just be seen — **it’ll be experienced**.

---

🔗 _Want to get started?_  
Join hundreds of developers learning React Three Fiber today:  
👉 [https://wawasensei.dev/courses/react-three-fiber](https://wawasensei.dev/courses/react-three-fiber)


Discover what 3D websites are, how they differ from traditional 2D websites, and why they’re becoming a game-changer in web design. Learn how to create your own using tools like Three.js and React Three Fiber — even as a beginner.

Blog

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

What is a 3D website? Explanation for beginners