react-weather-effects 0.1.0-beta.0 → 0.1.0

package/dist/index.d.ts

@@ -30,14 +30,37 @@ declare function WeatherCanvas({ children, mode, wind, dpr, quality, reducedMoti
 
 interface RainProps {
     intensity?: number;
+    /** Intensity fade duration in milliseconds; 0 (default) applies changes immediately. */
+    transitionDuration?: number;
     angle?: number;
     color?: string;
     speed?: number;
+    /**
+     * Multiplier for raindrop trail length.
+     * Defaults to 1. Values < 1 produce fine drizzle; values > 1 produce longer downpour streaks.
+     */
+    dropLength?: number;
+    length?: number;
+    /**
+     * Multiplier for raindrop stroke thickness.
+     * Defaults to 1. Values < 1 produce delicate droplets; values > 1 produce thick heavy drops.
+     */
+    dropThickness?: number;
+    thickness?: number;
+    /**
+     * Enable animated splashes along the bottom edge of the canvas.
+     * Ideal for contained cards, heroes, or window widgets where raindrops hit the ground.
+     * Defaults to false.
+     */
+    splashes?: boolean;
+    splash?: boolean;
 }
-declare function Rain({ intensity, angle, color, speed, }: RainProps): null;
+declare function Rain({ intensity, transitionDuration, angle, color, speed, dropLength, length, dropThickness, thickness, splashes, splash, }: RainProps): null;
 
 interface SnowProps {
     intensity?: number;
+    /** Intensity fade duration in milliseconds; 0 (default) applies changes immediately. */
+    transitionDuration?: number;
     speed?: number;
     color?: string;
     /**
@@ -49,16 +72,30 @@ interface SnowProps {
     minSize?: number;
     /** Radius in CSS pixels; defaults to 18 for sprites, 4 for built-in flakes. */
     maxSize?: number;
+    /** Enable animated sideways sway and fall flutter. Defaults to true. */
     wobble?: boolean;
+    /**
+     * Enable sprite rotation / spinning.
+     * Defaults to `wobble` (enabled when wobble is enabled).
+     * Set to `false` to let sprites drift without rotating, or `true` with `wobble={false}` to rotate without swaying.
+     */
+    rotation?: boolean;
+    /**
+     * Multiplier for sprite rotation / spinning speed.
+     * Defaults to 1. Set to 0 to freeze rotation.
+     */
+    rotationSpeed?: number;
 }
-declare function Snow({ intensity, speed, color, sprite, minSize, maxSize, wobble, }: SnowProps): null;
+declare function Snow({ intensity, transitionDuration, speed, color, sprite, minSize, maxSize, wobble, rotation, rotationSpeed, }: SnowProps): null;
 
 interface FogProps {
     density?: number;
+    /** Density fade duration in milliseconds; 0 (default) applies changes immediately. */
+    transitionDuration?: number;
     speed?: number;
     color?: string;
     layers?: number;
 }
-declare function Fog({ density, speed, color, layers, }: FogProps): null;
+declare function Fog({ density, transitionDuration, speed, color, layers, }: FogProps): null;
 
 export { type DPRWeight, Fog, type FogProps, type MotionMode, type Quality, Rain, type RainProps, type ReducedMotionProp, type RenderBudget, Snow, type SnowProps, WeatherCanvas, type WeatherCanvasProps };

package/dist/index.mjs

@@ -173,6 +173,7 @@ function WeatherCanvas({
     const frameState = {
       ctx,
       dt,
+      isAnimating: shouldAnimateRef.current,
       width: dimensions.width,
       height: dimensions.height,
       dpr: currentDpr,
@@ -485,6 +486,51 @@ function growParticlePool(pool, count) {
   next.set(pool);
   return next;
 }
+function resolveDuration(duration) {
+  return Number.isFinite(duration) ? Math.max(0, duration) : 0;
+}
+function createTransition(target, duration) {
+  return { target, duration: resolveDuration(duration), remaining: 0 };
+}
+function stepTransition(transition, target, duration, state) {
+  const nextDuration = resolveDuration(duration);
+  if (target !== transition.target || nextDuration !== transition.duration) {
+    transition.target = target;
+    transition.duration = nextDuration;
+    transition.remaining = nextDuration;
+  }
+  if (!state.isAnimating || nextDuration === 0) {
+    transition.remaining = 0;
+    return 1;
+  }
+  if (transition.remaining === 0) return 1;
+  const elapsed = state.dt * 1e3;
+  const step = elapsed + 1e-6 >= transition.remaining ? 1 : elapsed / transition.remaining;
+  transition.remaining = step === 1 ? 0 : transition.remaining - elapsed;
+  return step;
+}
+function createParticleTransition(count, capacity, duration) {
+  const visibility = new Float32Array(capacity);
+  visibility.fill(1, 0, count);
+  return { transition: createTransition(count, duration), visibility, count };
+}
+function updateParticleTransition(particles, targetCount, duration, state) {
+  const capacity = state.budget.maxParticles;
+  if (particles.visibility.length < capacity) {
+    const visibility = new Float32Array(capacity);
+    visibility.set(particles.visibility);
+    particles.visibility = visibility;
+  }
+  if (particles.count > capacity) particles.visibility.fill(0, capacity, particles.count);
+  const count = Math.min(capacity, Math.max(particles.count, targetCount));
+  const step = stepTransition(particles.transition, targetCount, duration, state);
+  for (let i = 0; i < count; i++) {
+    const target = i < targetCount ? 1 : 0;
+    particles.visibility[i] = step === 1 ? target : particles.visibility[i] + (target - particles.visibility[i]) * step;
+  }
+  particles.count = step === 1 ? targetCount : count;
+}
+var SPLASH_STRIDE = 7;
 function seedParticle(pool, i, state, settings, isInitial) {
   const base = i * PARTICLE_STRIDE;
   const angleRad = settings.angle * Math.PI / 180;
@@ -508,7 +554,7 @@ function seedParticleRange(pool, startIndex, endIndex, state, settings) {
     seedParticle(pool, i, state, settings, true);
   }
 }
-function updatePool(pool, count, state, settings) {
+function updatePool(pool, count, state, settings, visibility, splashPool, maxSplashes, splashState) {
   const dt = state.dt;
   const width = state.width;
   const height = state.height;
@@ -517,6 +563,15 @@ function updatePool(pool, count, state, settings) {
   const sinAngle = Math.sin(angleRad);
   const cosAngle = Math.cos(angleRad);
   const response = 1 - Math.exp(-dt * 5);
+  if (splashState.active) {
+    splashState.active = false;
+    for (let s = 0; s < maxSplashes; s++) {
+      const sBase = s * SPLASH_STRIDE;
+      if (splashPool[sBase + 5] === 0 || splashPool[sBase + 2] >= 1) continue;
+      splashPool[sBase + 2] = Math.min(1, splashPool[sBase + 2] + dt * splashPool[sBase + 3]);
+      if (splashPool[sBase + 2] < 1) splashState.active = true;
+    }
+  }
   for (let i = 0; i < count; i++) {
     const base = i * PARTICLE_STRIDE;
     let x = pool[base];
@@ -529,8 +584,28 @@ function updatePool(pool, count, state, settings) {
     const targetVy = cosAngle * speed + state.wind.y * (60 + depth * 50);
     vx += (targetVx - vx) * response;
     vy += (targetVy - vy) * response;
+    const prevY = y;
     x += vx * dt;
     y += vy * dt;
+    if (settings.splashes && prevY < height && y >= height && visibility[i] > 0.05) {
+      const elapsed = (y - height) / vy;
+      const impactX = x - vx * elapsed;
+      if (impactX >= 0 && impactX <= width) {
+        const sBase = splashState.head * SPLASH_STRIDE;
+        splashState.head = (splashState.head + 1) % maxSplashes;
+        if (splashPool[sBase + 5] === 0 || splashPool[sBase + 2] >= 1) {
+          const duration = 0.3 + depth * 0.18;
+          splashState.active = true;
+          splashPool[sBase] = impactX;
+          splashPool[sBase + 1] = Math.max(-40, Math.min(40, vx * 0.04));
+          splashPool[sBase + 2] = elapsed / duration;
+          splashPool[sBase + 3] = 1 / duration;
+          splashPool[sBase + 4] = (2.8 + depth * 4.6) * Math.sqrt(Math.max(0.4, Math.min(3, settings.dropThickness)));
+          splashPool[sBase + 5] = (0.25 + depth * 0.45) * visibility[i];
+          splashPool[sBase + 6] = (depth + i * 0.618) % 1;
+        }
+      }
+    }
     if (x > width + 100 || x < -100) {
       x = ((x + 100) % wrapWidth + wrapWidth) % wrapWidth - 100;
     }
@@ -544,65 +619,162 @@ function updatePool(pool, count, state, settings) {
     }
   }
 }
-function drawPool(pool, count, state, settings) {
-  if (count === 0) return;
+function drawPool(pool, count, state, settings, visibility, splashPool, maxSplashes) {
+  if (count === 0 && (!settings.splashes || maxSplashes === 0)) return;
   const ctx = state.ctx;
   ctx.strokeStyle = settings.color;
   ctx.lineCap = "round";
-  for (let i = 0; i < count; i++) {
-    const base = i * PARTICLE_STRIDE;
-    const x = pool[base];
-    const y = pool[base + 1];
-    const vx = pool[base + 2];
-    const vy = pool[base + 3];
-    const depth = pool[base + 6];
-    const trailFactor = 0.012 + depth * 0.025;
-    const fade = Math.max(0, Math.min(1, (y + 25) / 45, (state.height + 35 - y) / 80));
-    for (let segment = 0; segment < 3; segment++) {
-      const start = segment / 3 * trailFactor;
-      const end = (segment + 1) / 3 * trailFactor;
-      ctx.globalAlpha = pool[base + 4] * fade * Math.pow(1 - segment / 3, 2);
-      ctx.lineWidth = (0.6 + depth * 1.1) * (1 - segment * 0.2);
+  if (count > 0) {
+    for (let i = 0; i < count; i++) {
+      if (visibility[i] === 0) continue;
+      const base = i * PARTICLE_STRIDE;
+      const x = pool[base];
+      const y = pool[base + 1];
+      const vx = pool[base + 2];
+      const vy = pool[base + 3];
+      const depth = pool[base + 6];
+      const trailFactor = (0.012 + depth * 0.025) * settings.dropLength;
+      const fade = Math.max(0, Math.min(1, (y + 25) / 45, (state.height + 35 - y) / 80));
+      for (let segment = 0; segment < 3; segment++) {
+        const start = segment / 3 * trailFactor;
+        const end = (segment + 1) / 3 * trailFactor;
+        ctx.globalAlpha = pool[base + 4] * fade * visibility[i] * Math.pow(1 - segment / 3, 2);
+        ctx.lineWidth = (0.6 + depth * 1.1) * (1 - segment * 0.2) * settings.dropThickness;
+        ctx.beginPath();
+        ctx.moveTo(x - vx * start, y - vy * start);
+        ctx.lineTo(x - vx * end, y - vy * end);
+        ctx.stroke();
+      }
+    }
+  }
+  if (settings.splashes) {
+    ctx.fillStyle = settings.color;
+    const thickness = Math.max(0.4, Math.min(3, settings.dropThickness));
+    for (let s = 0; s < maxSplashes; s++) {
+      const sBase = s * SPLASH_STRIDE;
+      const progress = splashPool[sBase + 2];
+      if (progress >= 1 || splashPool[sBase + 5] === 0) continue;
+      const x = splashPool[sBase];
+      const y = state.height;
+      const size = splashPool[sBase + 4];
+      const alpha = splashPool[sBase + 5];
+      const elapsed = progress / splashPool[sBase + 3];
+      const drift = splashPool[sBase + 1] * elapsed;
+      ctx.globalAlpha = alpha * 0.45 * Math.pow(1 - progress, 1.5);
+      ctx.lineWidth = Math.max(0.35, 0.6 * thickness * (1 - progress * 0.4));
+      const rx = size * (0.25 + 1.9 * (1 - Math.pow(1 - progress, 3)));
+      const ry = Math.max(0.25, rx * 0.19);
       ctx.beginPath();
-      ctx.moveTo(x - vx * start, y - vy * start);
-      ctx.lineTo(x - vx * end, y - vy * end);
+      ctx.ellipse(x, y, rx, ry, 0, Math.PI, Math.PI * 2);
       ctx.stroke();
+      for (let bead = 0; bead < 5; bead++) {
+        const variation = (splashPool[sBase + 6] + bead * 0.37) % 1;
+        const beadProgress = progress / (0.72 + variation * 0.28);
+        if (beadProgress >= 1) continue;
+        const direction = (bead - 2) * 0.5;
+        const peak = size * (0.9 + (1 - Math.abs(direction)) * 1.1 + variation * 0.4);
+        const beadX = x + drift + direction * size * (1.5 + variation * 0.7) * beadProgress;
+        const beadY = y - peak * 4 * beadProgress * (1 - beadProgress);
+        const radius = Math.max(0.3, (0.4 + thickness * 0.35) * (1 - beadProgress * 0.45));
+        ctx.globalAlpha = alpha * Math.pow(1 - beadProgress, 1.25);
+        ctx.beginPath();
+        ctx.arc(beadX, beadY, radius, 0, Math.PI * 2);
+        ctx.fill();
+      }
     }
   }
   ctx.globalAlpha = 1;
 }
 function Rain({
   intensity = 0.7,
+  transitionDuration = 0,
   angle = 10,
   color = "rgba(190, 215, 245, 0.8)",
-  speed = 1
+  speed = 1,
+  dropLength,
+  length,
+  dropThickness,
+  thickness,
+  splashes,
+  splash
 }) {
   const ticker = useContext(TickerCtx);
   if (!ticker) {
     throw new Error("<Rain /> must be used inside <WeatherCanvas>");
   }
-  const settingsRef = useRef({ intensity, angle, color, speed });
+  const effectiveDropLength = dropLength ?? length ?? 1;
+  const effectiveDropThickness = dropThickness ?? thickness ?? 1;
+  const effectiveSplashes = splashes ?? splash ?? false;
+  const settingsRef = useRef({
+    intensity,
+    transitionDuration,
+    angle,
+    color,
+    speed,
+    dropLength: effectiveDropLength,
+    dropThickness: effectiveDropThickness,
+    splashes: effectiveSplashes
+  });
   useEffect(() => {
-    settingsRef.current = { intensity, angle, color, speed };
+    settingsRef.current = {
+      intensity,
+      transitionDuration,
+      angle,
+      color,
+      speed,
+      dropLength: effectiveDropLength,
+      dropThickness: effectiveDropThickness,
+      splashes: effectiveSplashes
+    };
     ticker.invalidate();
-  }, [ticker, intensity, angle, color, speed]);
+  }, [
+    ticker,
+    intensity,
+    transitionDuration,
+    angle,
+    color,
+    speed,
+    effectiveDropLength,
+    effectiveDropThickness,
+    effectiveSplashes
+  ]);
   useEffect(() => {
-    let pool = createParticlePool(ticker.getBudget().maxParticles);
+    const capacity = ticker.getBudget().maxParticles;
+    let pool = createParticlePool(capacity);
+    const particles = createParticleTransition(
+      Math.round(Math.max(0, Math.min(1, settingsRef.current.intensity)) * capacity),
+      capacity,
+      settingsRef.current.transitionDuration
+    );
     let initializedCount = 0;
+    const maxSplashes = Math.min(128, Math.max(32, Math.round(capacity * 0.5)));
+    const splashPool = new Float32Array(maxSplashes * SPLASH_STRIDE);
+    const splashState = { head: 0, active: false };
     const unregister = ticker.register(LAYER.MIDGROUND, (state) => {
       const settings = settingsRef.current;
-      const count = Math.round(
+      const targetCount = Math.round(
         Math.max(0, Math.min(1, settings.intensity)) * state.budget.maxParticles
       );
+      updateParticleTransition(particles, targetCount, settings.transitionDuration, state);
+      const count = particles.count;
       pool = growParticlePool(pool, state.budget.maxParticles);
       if (count > initializedCount) {
         seedParticleRange(pool, initializedCount, count, state, settings);
         initializedCount = count;
       }
       if (state.dt > 0) {
-        updatePool(pool, count, state, settings);
+        updatePool(
+          pool,
+          count,
+          state,
+          settings,
+          particles.visibility,
+          splashPool,
+          maxSplashes,
+          splashState
+        );
       }
-      drawPool(pool, count, state, settings);
+      drawPool(pool, count, state, settings, particles.visibility, splashPool, maxSplashes);
     });
     return unregister;
   }, [ticker]);
@@ -668,12 +840,13 @@ function seedSnowflake(pool, i, state, isInitial) {
       y = -20 - state.random() * 50;
     }
   }
+  const phase = state.random() * Math.PI * 2;
   pool[base] = x;
   pool[base + 1] = y;
-  pool[base + 2] = 0;
+  pool[base + 2] = phase;
   pool[base + 3] = fallSpeed;
   pool[base + 4] = 0.3 + depth * 0.6;
-  pool[base + 5] = state.random() * Math.PI * 2;
+  pool[base + 5] = phase;
   pool[base + 6] = depth;
 }
 function seedSnowRange(pool, startIndex, endIndex, state) {
@@ -691,6 +864,7 @@ function updateSnow(pool, count, state, settings) {
     const base = i * PARTICLE_STRIDE;
     let x = pool[base];
     let y = pool[base + 1];
+    let angle = pool[base + 2];
     let phase = pool[base + 5];
     const baseVy = pool[base + 3];
     const depth = pool[base + 6];
@@ -698,6 +872,11 @@ function updateSnow(pool, count, state, settings) {
       phase += dt * (0.65 + depth * 1.4) * settings.speed;
       pool[base + 5] = phase;
     }
+    if (settings.rotation && settings.rotationSpeed !== 0) {
+      const spinDir = i % 2 === 0 ? 1 : -1;
+      const spinRate = (0.65 + depth * 1.4) * spinDir;
+      angle += dt * spinRate * settings.rotationSpeed;
+    }
     const sway = settings.wobble ? (Math.sin(phase) * (10 + depth * 22) + Math.sin(phase * 0.5) * 8) * settings.speed : 0;
     const vx = sway + state.wind.x * (50 + depth * 80) * gust;
     const flutter = settings.wobble ? 1 + Math.sin(phase * 0.8) * 0.12 : 1;
@@ -712,16 +891,17 @@ function updateSnow(pool, count, state, settings) {
     } else {
       pool[base] = x;
       pool[base + 1] = y;
-      pool[base + 2] = vx;
+      pool[base + 2] = angle;
     }
   }
 }
-function drawSnow(pool, count, state, settings, texture, sprite) {
+function drawSnow(pool, count, state, settings, texture, sprite, visibility) {
   if (count === 0) return;
   const ctx = state.ctx;
   const aspect = sprite ? sprite.aspect : 1;
   ctx.fillStyle = settings.color;
   for (let i = 0; i < count; i++) {
+    if (visibility[i] === 0) continue;
     const base = i * PARTICLE_STRIDE;
     const x = pool[base];
     const y = pool[base + 1];
@@ -729,14 +909,14 @@ function drawSnow(pool, count, state, settings, texture, sprite) {
     const r = Math.max(0, settings.minSize + depth * (settings.maxSize - settings.minSize));
     if (r === 0) continue;
     const fade = Math.max(0, Math.min(1, (y + 20) / 45, (state.height + 20 - y) / 55));
-    ctx.globalAlpha = pool[base + 4] * fade;
+    ctx.globalAlpha = pool[base + 4] * fade * visibility[i];
     if (sprite) {
       const halfWidth = r * Math.min(1, aspect);
       const halfHeight = r / Math.max(1, aspect);
       ctx.save();
       try {
         ctx.translate(x, y);
-        if (settings.wobble) ctx.rotate(Math.sin(pool[base + 5]) * 0.35);
+        if (settings.rotation) ctx.rotate(pool[base + 2]);
         ctx.drawImage(sprite.texture, -halfWidth, -halfHeight, halfWidth * 2, halfHeight * 2);
       } finally {
         ctx.restore();
@@ -754,31 +934,60 @@ function drawSnow(pool, count, state, settings, texture, sprite) {
 }
 function Snow({
   intensity = 0.5,
+  transitionDuration = 0,
   speed = 1,
   color = "rgba(255, 255, 255, 0.85)",
   sprite,
   minSize = sprite ? 6 : 1.5,
   maxSize = sprite ? 18 : 4,
-  wobble = true
+  wobble = true,
+  rotation,
+  rotationSpeed
 }) {
   const ticker = useContext(TickerCtx);
   if (!ticker) {
     throw new Error("<Snow /> must be used inside <WeatherCanvas>");
   }
+  const effectiveRotation = rotation ?? (rotationSpeed !== void 0 ? true : wobble);
+  const effectiveRotationSpeed = rotationSpeed ?? 1;
   const settingsRef = useRef({
     intensity,
+    transitionDuration,
     speed,
     color,
     minSize,
     maxSize,
-    wobble
+    wobble,
+    rotation: effectiveRotation,
+    rotationSpeed: effectiveRotationSpeed
   });
   const textureRef = useRef(null);
   const spriteRef = useRef(null);
   useEffect(() => {
-    settingsRef.current = { intensity, speed, color, minSize, maxSize, wobble };
+    settingsRef.current = {
+      intensity,
+      transitionDuration,
+      speed,
+      color,
+      minSize,
+      maxSize,
+      wobble,
+      rotation: effectiveRotation,
+      rotationSpeed: effectiveRotationSpeed
+    };
     ticker.invalidate();
-  }, [ticker, intensity, speed, color, minSize, maxSize, wobble]);
+  }, [
+    ticker,
+    intensity,
+    transitionDuration,
+    speed,
+    color,
+    minSize,
+    maxSize,
+    wobble,
+    effectiveRotation,
+    effectiveRotationSpeed
+  ]);
   useEffect(() => {
     textureRef.current = createSnowTexture(color);
     ticker.invalidate();
@@ -821,13 +1030,21 @@ function Snow({
     };
   }, [ticker, sprite]);
   useEffect(() => {
-    let pool = createParticlePool(ticker.getBudget().maxParticles);
+    const capacity = ticker.getBudget().maxParticles;
+    let pool = createParticlePool(capacity);
+    const particles = createParticleTransition(
+      Math.round(Math.max(0, Math.min(1, settingsRef.current.intensity)) * capacity),
+      capacity,
+      settingsRef.current.transitionDuration
+    );
     let initializedCount = 0;
     const unregister = ticker.register(LAYER.MIDGROUND, (state) => {
       const settings = settingsRef.current;
-      const count = Math.round(
+      const targetCount = Math.round(
         Math.max(0, Math.min(1, settings.intensity)) * state.budget.maxParticles
       );
+      updateParticleTransition(particles, targetCount, settings.transitionDuration, state);
+      const count = particles.count;
       pool = growParticlePool(pool, state.budget.maxParticles);
       if (count > initializedCount) {
         seedSnowRange(pool, initializedCount, count, state);
@@ -844,7 +1061,7 @@ function Snow({
           spriteRef.current = createSnowSprite(cachedSprite.image, size) ?? cachedSprite;
         }
       }
-      drawSnow(pool, count, state, settings, textureRef.current, spriteRef.current);
+      drawSnow(pool, count, state, settings, textureRef.current, spriteRef.current, particles.visibility);
     });
     return unregister;
   }, [ticker]);
@@ -886,6 +1103,7 @@ function renderRadialGradient(surface, size, color) {
 }
 function Fog({
   density = 0.4,
+  transitionDuration = 0,
   speed = 1,
   color = "rgba(220, 225, 235, 0.35)",
   layers = 3
@@ -894,11 +1112,11 @@ function Fog({
   if (!ticker) {
     throw new Error("<Fog /> must be used inside <WeatherCanvas>");
   }
-  const settingsRef = useRef({ density, speed, color, layers });
+  const settingsRef = useRef({ density, transitionDuration, speed, color, layers });
   useEffect(() => {
-    settingsRef.current = { density, speed, color, layers };
+    settingsRef.current = { density, transitionDuration, speed, color, layers };
     ticker.invalidate();
-  }, [ticker, density, speed, color, layers]);
+  }, [ticker, density, transitionDuration, speed, color, layers]);
   const textureRef = useRef(null);
   const imageBitmapRef = useRef(null);
   useEffect(() => {
@@ -945,13 +1163,18 @@ function Fog({
   }, [ticker, color]);
   useEffect(() => {
     const puffs = [];
+    let currentDensity = Math.max(0, Math.min(1, settingsRef.current.density));
+    const transition = createTransition(currentDensity, settingsRef.current.transitionDuration);
     const unregister = ticker.register(LAYER.BACKGROUND, (state) => {
       const texture = textureRef.current;
       if (!texture) return;
       const settings = settingsRef.current;
       const numLayers = Math.round(Math.max(1, Math.min(6, settings.layers)));
       const count = numLayers * 3;
-      const baseAlpha = Math.max(0, Math.min(1, settings.density));
+      const targetDensity = Math.max(0, Math.min(1, settings.density));
+      const step = stepTransition(transition, targetDensity, settings.transitionDuration, state);
+      currentDensity = step === 1 ? targetDensity : currentDensity + (targetDensity - currentDensity) * step;
+      const baseAlpha = currentDensity;
       if (baseAlpha === 0) return;
       for (let i = puffs.length; i < count; i++) {
         const layer = Math.floor(i / 3);