lazy-vfx 1.1.0 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +47 -42
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -5,7 +5,7 @@ _Effortless high-end visual effects for the modern web, built for React & Three.
5
5
  Lazy VFX is a minimal, shader-driven VFX engine designed for modern web apps using React and Three.js. It abstracts away all the math and plumbing for emitters, GPU-accelerated particles, and real-time shaders, so you can stay focused on building cinematic, interactive experiences.
6
6
 
7
7
 
8
- [Live demo](#) - [Fireworks demo](#) - [Wizard Game demo](#)
8
+ [Live demo](https://lazy-vfx.vercel.app/demo) - [Fireworks demo](#) - [Wizard Game demo](#)
9
9
 
10
10
  ---
11
11
 
@@ -48,24 +48,40 @@ Add cinematic particles in seconds to any [React Three Fiber](https://docs.pmnd.
48
48
 
49
49
  ```jsx
50
50
  import { VFXParticals, VFXEmitter } from 'lazy-vfx';
51
+ import {
52
+ Environment,
53
+ OrbitControls,
54
+ Stats,
55
+ useTexture,
56
+ } from "@react-three/drei";
57
+
58
+
51
59
  // Also import your alphaMap or use a texture
52
60
 
53
61
  function Experience() {
62
+ const text = useTexture(
63
+ "https://static.thenounproject.com/png/4312916-200.png",
64
+ );
65
+
54
66
  return (
55
67
  <>
68
+ <Stats />
69
+ <OrbitControls enablePan={false} />
70
+ <Environment preset="sunset" />
71
+
56
72
  {/* Step 1: Define your particle system */}
57
73
  <VFXParticles
58
- name="particles" // A unique identifier for this particle system
74
+ name="sparks" // A unique identifier for this particle system
59
75
  settings={{
60
- nbParticles: 100000, // Maximum number of particles to allocate
61
- gravity: [0, -9.8, 0], // Apply gravity (x, y, z)
62
- fadeSize: [0, 0], // Size fade in/out settings
63
- fadeAlpha: [0, 0], // Opacity fade in/out settings
76
+ nParticals: 10000, // Maximum number of particles to allocate
77
+ intensity: 1, // Brightness multiplier
64
78
  renderMode: "billboard", // "billboard" or "mesh" or "stretchBillboard"
65
- intensity: 3, // Brightness multiplier
66
- appearance: AppearanceMode.Circular, // Define the default appearance to be plane (default) or circular
67
- easeFunction: "easeLinear", // add easing to the particle animations
79
+ fadeAlpha: [0.5, 0.5], // Opacity fade in/out settings
80
+ fadeSize: [0, 0], // Size fade in/out settings
81
+ gravity: [0, -10, 0], // Apply gravity (x, y, z)
68
82
  }}
83
+ alphaMap={text}
84
+ // geometry={<sphereGeometry />}
69
85
  />
70
86
 
71
87
  {/* Step 2: Define your emitter */}
@@ -73,44 +89,41 @@ function Experience() {
73
89
  debug // Show debug visualization
74
90
  emitter="particles" // Target the particle system by name
75
91
  settings={{
76
- loop: true, // Continuously emit particles (only if `spawnMode` is 'time')
77
- duration: 1, // Emission cycle duration in seconds
78
- nbParticles: 100, // Number of particles to emit per cycle
79
- spawnMode: "time", // Emission mode: 'time' or 'burst'
92
+ duration: 4, // Emission cycle duration in seconds
80
93
  delay: 0, // Time delay before starting emission
94
+ nbParticles: 10000, // Number of particles to emit per cycle
95
+ spawnMode: "burst", // Emission mode: 'time' or 'burst'
96
+ loop: true, // Continuously emit particles (only if `spawnMode` is 'time')
81
97
 
82
- // Particle lifetime range [min, max]
83
- particlesLifetime: [0.1, 1],
84
-
85
- // Position range (min/max)
86
- startPositionMin: [-0.1, -0.1, -0.1],
87
- startPositionMax: [0.1, 0.1, 0.1],
98
+ // Position range (min/max)
99
+ startPositionMin: [0, 0, 0],
100
+ startPositionMax: [0, 0, 0],
88
101
 
89
102
  // Rotation range (min/max)
90
103
  startRotationMin: [0, 0, 0],
91
104
  startRotationMax: [0, 0, 0],
92
- // Rotation speed range (min/max)
105
+ // Rotation speed range (min/max)
93
106
  rotationSpeedMin: [0, 0, 0],
94
107
  rotationSpeedMax: [0, 0, 0],
95
108
 
96
- // Direction range (min/max)
97
- directionMin: [-1, 0, -1],
98
- directionMax: [1, 1, 1],
99
-
100
- // Particle size range [min, max]
101
- size: [0.01, 0.25],
109
+ // Particle lifetime range [min, max]
110
+ particlesLifetime: [0.1, 1],
102
111
 
103
112
  // Particle speed range [min, max]
104
- speed: [1, 12],
113
+ speed: [1, 5],
105
114
 
115
+ // Direction range (min/max)
116
+ directionMin: [-0.5, 0, -0.5],
117
+ directionMax: [0.5, 1, 0.5],
118
+
106
119
  // Color at start - an array of strings for random selection
107
- colorStart: ["white", "skyblue"],
120
+ colorStart: ["#ff0000", "#ffffff"],
108
121
 
109
- // Color at end - an array of strings for random selection
110
- colorEnd: ["white", "pink"],
122
+ // Color at end - an array of strings for random selection
123
+ colorEnd: ["#ffffff", "#ffffff"],
111
124
 
112
- // When true, the emitter will emit particles using its local axes (transformed by its world rotation)
113
- useLocalDirection: true,
125
+ // Particle size range [min, max]
126
+ size: [0.1, 0.5],
114
127
  }}
115
128
  />
116
129
  </>
@@ -172,20 +185,15 @@ const CustomParticles = () => {
172
185
 
173
186
  #### VFXParticles Settings
174
187
 
175
- | Setting | Type | Default | Description |
188
+ | Setting | Type | Default | Description |
176
189
  |-----------------|------------------------------|-----------------|--------------------------------------------------------------------------|
177
190
  | nbParticles | number | 1000 | Maximum number of particles |
178
191
  | intensity | number | 1 | Brightness multiplier |
179
- | renderMode | 'billboard' \| 'mesh' \| 'stretchBillboard' | 'mesh' | How particles are rendered |
180
- | stretchScale | number | 1.0 | Stretch factor for stretchBillboard mode |
192
+ | renderMode | 'billboard' \| 'mesh' \| 'stretchBillboard' | 'mesh' | How particles are rendered |
181
193
  | fadeSize | [number, number] | [0.1, 0.9] | Size fade in/out range (0-1 of lifetime) |
182
194
  | fadeAlpha | [number, number] | [0, 1.0] | Opacity fade in/out range |
183
195
  | gravity | [number, number, number] | [0, 0, 0] | Gravity force applied to particles |
184
- | frustumCulled | boolean | true | Whether particles are frustum culled |
185
- | appearance | AppearanceMode | Square | Particle appearance (Square or Circular) |
186
- | easeFunction | EaseFunction | 'easeLinear' | Easing function for particle animations |
187
196
  | blendingMode | THREE.Blending | AdditiveBlending| How particles blend with the scene |
188
- | shadingHooks | object | {} | Custom GLSL shader hooks for advanced rendering effects |
189
197
 
190
198
  ---
191
199
 
@@ -196,8 +204,6 @@ const CustomParticles = () => {
196
204
  | emitter | string | Name of the target particle system |
197
205
  | settings | object | Configuration options for emission behavior |
198
206
  | debug | boolean | Show Leva controls to adjust settings |
199
- | autoStart | boolean | Automatically start emitting |
200
- | localDirection| boolean | Use emitter's local space for directions |
201
207
 
202
208
  #### VFXEmitter Settings
203
209
 
@@ -221,7 +227,6 @@ const CustomParticles = () => {
221
227
  | speed | [number, number] | [1, 12] | Particle speed range [min, max] |
222
228
  | colorStart | string[] | ['white'] | Colors at start (randomly selected) |
223
229
  | colorEnd | string[] | ['white'] | Colors at end (randomly selected) |
224
- | useLocalDirection | boolean | false | Use emitter's local space for directions |
225
230
 
226
231
  ---
227
232
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "lazy-vfx",
3
- "version": "1.1.0",
3
+ "version": "1.1.1",
4
4
  "description": "Effortless high-end visual effects for React and Three.js",
5
5
  "keywords": [
6
6
  "react",