@5even7/dlc-ui 0.2.10 → 0.2.12

package/dist/color.cjs

@@ -182,9 +182,9 @@ function _unsupportedIterableToArray(r, a) {
   }
 }
 
-/**
- * Tiny event emitter. Accepts any event name so the API stays open for
- * future events (hover, click, custom) without breaking changes.
+/**
+ * Tiny event emitter. Accepts any event name so the API stays open for
+ * future events (hover, click, custom) without breaking changes.
  */
 function createEmitter() {
   // Plain object storage (no Map/Set) so the legacy build has no API
@@ -254,11 +254,17 @@ function dprCapFor(quality) {
   var tier = QUALITY_TIERS[quality] || QUALITY_TIERS.medium;
   return tier.dpr;
 }
+function effectiveDprCap(quality) {
+  var renderScale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+  var scale = Number(renderScale);
+  var normalizedScale = Number.isFinite(scale) ? Math.min(1, Math.max(0.25, scale)) : 1;
+  return Math.max(0.5, dprCapFor(quality) * normalizedScale);
+}
 
-/**
- * Merge defaults < preset < user. Unknown user keys are preserved so the
- * component API can grow (new props, cssVars, callbacks) without a breaking
- * change.
+/**
+ * Merge defaults < preset < user. Unknown user keys are preserved so the
+ * component API can grow (new props, cssVars, callbacks) without a breaking
+ * change.
  */
 function normalizeOptions(defaults, preset, user) {
   // undefined means "not provided" (e.g. Vue $props with unset props):
@@ -276,9 +282,9 @@ function normalizeOptions(defaults, preset, user) {
   return _objectSpread2(_objectSpread2(_objectSpread2({}, defaults), presetOptions), userOptions);
 }
 
-/**
- * 公共色板：NC-01~NC-06 的四色组（底色 / 主色 / 辅色 / 高光色）。
- * Capsule 预置与 dlc-color 等组件共用，新增色板只改这里。
+/**
+ * 公共色板：NC-01~NC-06 的四色组（底色 / 主色 / 辅色 / 高光色）。
+ * Capsule 预置与 dlc-color 等组件共用，新增色板只改这里。
  */
 var PALETTES = {
   original: ['#FFF3EA', '#F5B27A', '#F67BC6', '#A978E8'],
@@ -289,9 +295,9 @@ var PALETTES = {
   plus: ['#FFF0E6', '#F6C26B', '#F98A64', '#E86D74']
 };
 
-/**
- * Capsule 预置：仅星云材质 NC-01~NC-06（NC-07~09 aurora 已移除）。
- * 颜色引用公共色板，seed/speed 决定形态与流速。
+/**
+ * Capsule 预置：仅星云材质 NC-01~NC-06（NC-07~09 aurora 已移除）。
+ * 颜色引用公共色板，seed/speed 决定形态与流速。
  */
 var CAPSULE_PRESETS = [{
   id: 'original',
@@ -407,6 +413,7 @@ var DEFAULTS = {
   capsule: {
     quality: 'auto',
     renderer: 'auto',
+    fps: 60,
     respectReducedMotion: true}};
 
 /**
@@ -665,7 +672,7 @@ var CosmicRenderer = /*#__PURE__*/function () {
       alpha: false,
       antialias: false,
       depth: false,
-      powerPreference: 'high-performance',
+      powerPreference: this.options.powerPreference || 'high-performance',
       preserveDrawingBuffer: false
     });
     if (!this.gl) throw new Error('WebGL2 is not available');
@@ -676,16 +683,19 @@ var CosmicRenderer = /*#__PURE__*/function () {
     this.motion = 0;
     this.motionTarget = 0;
     this.timeOffset = preset.seed * 0.73;
+    this.colors = preset.colors.map(hexToRgb01);
     this.visible = true;
     this.disposed = false;
     _assertClassBrand(_CosmicRenderer_brand, this, _setupGeometry).call(this);
     _assertClassBrand(_CosmicRenderer_brand, this, _bindEvents).call(this);
+    _assertClassBrand(_CosmicRenderer_brand, this, _bindContextEvents).call(this);
     this.resize();
   }
   return _createClass(CosmicRenderer, [{
     key: "setPreset",
     value: function setPreset(preset) {
       this.preset = _objectSpread2({}, preset);
+      this.colors = preset.colors.map(hexToRgb01);
       this.timeOffset = preset.seed * 0.73;
     }
   }, {
@@ -730,15 +740,14 @@ var CosmicRenderer = /*#__PURE__*/function () {
       if (this.canvas.width !== width || this.canvas.height !== height) {
         this.canvas.width = width;
         this.canvas.height = height;
-        this.gl.viewport(0, 0, width, height);
       }
+      this.gl.viewport(0, 0, width, height);
     }
   }, {
     key: "draw",
     value: function draw(elapsedSeconds) {
       var paused = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
       if (this.disposed || !this.visible) return;
-      this.resize();
       var gl = this.gl;
       this.pointer[0] += (this.pointerTarget[0] - this.pointer[0]) * 0.08;
       this.pointer[1] += (this.pointerTarget[1] - this.pointer[1]) * 0.08;
@@ -747,16 +756,15 @@ var CosmicRenderer = /*#__PURE__*/function () {
       gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
       gl.enableVertexAttribArray(this.locations.position);
       gl.vertexAttribPointer(this.locations.position, 2, gl.FLOAT, false, 0, 0);
-      var colors = this.preset.colors.map(hexToRgb01);
       gl.uniform2f(this.locations.resolution, this.canvas.width, this.canvas.height);
       gl.uniform1f(this.locations.time, this.timeOffset + (paused ? 0 : elapsedSeconds * this.preset.speed));
       gl.uniform1f(this.locations.seed, this.preset.seed);
       gl.uniform1f(this.locations.motion, this.motion);
       gl.uniform2f(this.locations.pointer, this.pointer[0], this.pointer[1]);
-      gl.uniform3fv(this.locations.colorA, colors[0]);
-      gl.uniform3fv(this.locations.colorB, colors[1]);
-      gl.uniform3fv(this.locations.colorC, colors[2]);
-      gl.uniform3fv(this.locations.colorD, colors[3]);
+      gl.uniform3fv(this.locations.colorA, this.colors[0]);
+      gl.uniform3fv(this.locations.colorB, this.colors[1]);
+      gl.uniform3fv(this.locations.colorC, this.colors[2]);
+      gl.uniform3fv(this.locations.colorD, this.colors[3]);
       gl.drawArrays(gl.TRIANGLES, 0, 3);
     }
   }, {
@@ -767,6 +775,8 @@ var CosmicRenderer = /*#__PURE__*/function () {
       target.removeEventListener('pointermove', this.onPointerMove);
       target.removeEventListener('pointerdown', this.onPointerMove);
       target.removeEventListener('pointerleave', this.onPointerLeave);
+      this.canvas.removeEventListener('webglcontextlost', this.onContextLost, false);
+      this.canvas.removeEventListener('webglcontextrestored', this.onContextRestored, false);
       this.gl.deleteBuffer(this.buffer);
       this.gl.deleteProgram(this.program);
       var lose = this.gl.getExtension('WEBGL_lose_context');
@@ -823,6 +833,26 @@ function _bindEvents() {
     passive: true
   });
 }
+function _bindContextEvents() {
+  var _this3 = this;
+  this.onContextLost = function (event) {
+    event.preventDefault();
+    if (_this3.disposed) return;
+    _this3.visible = false;
+    if (typeof _this3.options.onContextLost === 'function') _this3.options.onContextLost(event);
+  };
+  this.onContextRestored = function () {
+    if (_this3.disposed) return;
+    _this3.program = createProgram(_this3.gl);
+    _this3.locations = _assertClassBrand(_CosmicRenderer_brand, _this3, _getLocations).call(_this3);
+    _assertClassBrand(_CosmicRenderer_brand, _this3, _setupGeometry).call(_this3);
+    _this3.visible = true;
+    _this3.resize();
+    if (typeof _this3.options.onContextRestored === 'function') _this3.options.onContextRestored();
+  };
+  this.canvas.addEventListener('webglcontextlost', this.onContextLost, false);
+  this.canvas.addEventListener('webglcontextrestored', this.onContextRestored, false);
+}
 
 function rgb(color) {
   var alpha = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
@@ -837,18 +867,20 @@ function rgb(color) {
 }
 var FallbackRenderer = /*#__PURE__*/function () {
   function FallbackRenderer(canvas, preset) {
+    var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
     _classCallCheck(this, FallbackRenderer);
     this.canvas = canvas;
     this.preset = preset;
     this.context = canvas.getContext('2d');
     this.visible = true;
     this.timePhase = 0;
+    this.dprCap = options.dprCap || 1.5;
   }
   return _createClass(FallbackRenderer, [{
     key: "resize",
     value: function resize() {
       var rect = this.canvas.getBoundingClientRect();
-      var dpr = Math.min(window.devicePixelRatio || 1, 1.5);
+      var dpr = Math.min(window.devicePixelRatio || 1, this.dprCap);
       var width = Math.max(2, Math.round(rect.width * dpr));
       var height = Math.max(2, Math.round(rect.height * dpr));
       if (this.canvas.width !== width || this.canvas.height !== height) {
@@ -889,7 +921,6 @@ var FallbackRenderer = /*#__PURE__*/function () {
     key: "draw",
     value: function draw(time) {
       if (!this.visible) return;
-      this.resize();
       this.drawNebula(time);
     }
   }, {
@@ -897,6 +928,12 @@ var FallbackRenderer = /*#__PURE__*/function () {
     value: function setPreset(preset) {
       this.preset = preset;
     }
+  }, {
+    key: "setDprCap",
+    value: function setDprCap(cap) {
+      this.dprCap = cap;
+      this.resize();
+    }
   }, {
     key: "randomize",
     value: function randomize() {
@@ -914,10 +951,10 @@ var FallbackRenderer = /*#__PURE__*/function () {
   }]);
 }();
 
-/**
- * Document-level shared rAF scheduler. Every component instance subscribes
- * its own frame callback; the whole page runs ONE animation loop (like the
- * original demo), which avoids jank from many competing rAF loops.
+/**
+ * Document-level shared rAF scheduler. Every component instance subscribes
+ * its own frame callback; the whole page runs ONE animation loop (like the
+ * original demo), which avoids jank from many competing rAF loops.
  */
 var subscribers = [];
 var running = false;
@@ -925,11 +962,7 @@ var rafId = 0;
 var last = 0;
 function tick(now) {
   if (!running) return;
-  var delta = last ? Math.min((now - last) / 1000, 0.05) : 0;
-  last = now;
-  // Schedule the next frame BEFORE running callbacks so one throwing
-  // subscriber can never kill the whole animation loop.
-  rafId = requestAnimationFrame(tick);
+  var activeItems = [];
   {
     var _iterator = _createForOfIteratorHelper(subscribers.slice()),
       _step;
@@ -937,10 +970,8 @@ function tick(now) {
       for (_iterator.s(); !(_step = _iterator.n()).done;) {
         var item = _step.value;
         try {
-          if (!item.isPaused()) item.onFrame(delta, now);
-        } catch (error) {
-          console.warn('[dlc-ui] frame error:', error);
-        }
+          if (!item.isPaused()) activeItems.push(item);
+        } catch (_unused) {}
       }
     } catch (err) {
       _iterator.e(err);
@@ -948,6 +979,25 @@ function tick(now) {
       _iterator.f();
     }
   }
+  if (activeItems.length === 0) {
+    running = false;
+    rafId = 0;
+    last = 0;
+    return;
+  }
+  var delta = last ? Math.min((now - last) / 1000, 0.05) : 0;
+  last = now;
+  // Schedule the next frame BEFORE running callbacks so one throwing
+  // subscriber can never kill the whole animation loop.
+  rafId = requestAnimationFrame(tick);
+  for (var _i = 0, _activeItems = activeItems; _i < _activeItems.length; _i++) {
+    var _item = _activeItems[_i];
+    try {
+      _item.onFrame(delta, now);
+    } catch (error) {
+      console.warn('[dlc-ui] frame error:', error);
+    }
+  }
   if (subscribers.length === 0) {
     cancelAnimationFrame(rafId);
     running = false;
@@ -960,6 +1010,9 @@ function start() {
   last = 0;
   rafId = requestAnimationFrame(tick);
 }
+function wakeScheduler() {
+  start();
+}
 function subscribeScheduler(onFrame, isPaused) {
   var item = {
     onFrame: onFrame,
@@ -978,11 +1031,12 @@ function subscribeScheduler(onFrame, isPaused) {
   };
 }
 
-/**
- * Gates drawing on "element intersects viewport AND the page tab is visible".
- * Falls back to always-visible when IntersectionObserver is unavailable.
+/**
+ * Gates drawing on "element intersects viewport AND the page tab is visible".
+ * Falls back to always-visible when IntersectionObserver is unavailable.
  */
 function createVisibilityGuard(element) {
+  var onChange = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
   var intersecting = true;
   var pageVisible = typeof document === 'undefined' || !document.hidden;
   var disposed = false;
@@ -992,6 +1046,7 @@ function createVisibilityGuard(element) {
       intersecting = entries.some(function (entry) {
         return entry.isIntersecting;
       });
+      if (typeof onChange === 'function') onChange();
     }, {
       rootMargin: '180px'
     });
@@ -999,6 +1054,7 @@ function createVisibilityGuard(element) {
   }
   var onVisibilityChange = function onVisibilityChange() {
     pageVisible = typeof document !== 'undefined' && !document.hidden;
+    if (typeof onChange === 'function') onChange();
   };
   if (typeof document !== 'undefined') {
     document.addEventListener('visibilitychange', onVisibilityChange);
@@ -1034,22 +1090,100 @@ function nextTick(fn) {
   }
 }
 
-function prefersReducedMotion() {
-  return typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+function normalizeFps(value) {
+  var fallback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 60;
+  var fps = Number(value);
+  if (!Number.isFinite(fps)) return fallback;
+  return Math.min(60, Math.max(1, fps));
+}
+function createFrameGate() {
+  var initialFps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 60;
+  var fps = normalizeFps(initialFps);
+  var elapsed = 0;
+  return {
+    shouldDraw: function shouldDraw(delta) {
+      elapsed += delta;
+      var interval = 1 / fps;
+      if (elapsed + 0.0001 < interval) return false;
+      elapsed %= interval;
+      return true;
+    },
+    setFps: function setFps(value) {
+      fps = normalizeFps(value, fps);
+      elapsed = 0;
+      return fps;
+    },
+    getFps: function getFps() {
+      return fps;
+    }
+  };
+}
+function createReducedMotionPreference(enabled, onChange) {
+  var query = enabled && typeof matchMedia !== 'undefined' ? matchMedia('(prefers-reduced-motion: reduce)') : null;
+  var notify = function notify() {
+    if (typeof onChange === 'function') onChange(Boolean(query && query.matches));
+  };
+  if (query) {
+    if (typeof query.addEventListener === 'function') query.addEventListener('change', notify);else if (typeof query.addListener === 'function') query.addListener(notify);
+  }
+  return {
+    matches: function matches() {
+      return Boolean(query && query.matches);
+    },
+    dispose: function dispose() {
+      if (!query) return;
+      if (typeof query.removeEventListener === 'function') query.removeEventListener('change', notify);else if (typeof query.removeListener === 'function') query.removeListener(notify);
+    }
+  };
+}
+
+function toFiniteNumber(value) {
+  if (value == null || typeof value === 'boolean') return null;
+  if (typeof value === 'string' && value.trim() === '') return null;
+  var number = Number(value);
+  return Number.isFinite(number) ? number : null;
 }
 
-/**
- * Mount the cosmic (nebula) material as a background layer inside `host`.
- *
- * The layer is absolutely positioned and defaults to `z-index: -1`, so it
- * paints behind the host's in-flow content: text/buttons/images inside the
- * host sit on top with zero extra CSS. Host gets `position: relative;
- * isolation: isolate` automatically so the layer can never escape its box
- * (or break stacking outside it).
- *
- * Options: preset (id/code/name or object), colors, seed, speed, quality,
- * renderer, mouseColor, respectReducedMotion, opacity (0-1), fallbackColor
- * (true=preset base color, a hex string, or false to disable).
+var HOST_STYLES = new WeakMap();
+function acquireHostStyles(host) {
+  var active = HOST_STYLES.get(host);
+  if (active) {
+    active.count += 1;
+    return;
+  }
+  var state = {
+    count: 1,
+    position: host.style.position,
+    isolation: host.style.isolation
+  };
+  var computed = getComputedStyle(host);
+  if (computed.position === 'static' || computed.position === '') host.style.position = 'relative';
+  host.style.isolation = 'isolate';
+  HOST_STYLES.set(host, state);
+}
+function releaseHostStyles(host) {
+  var state = HOST_STYLES.get(host);
+  if (!state) return;
+  state.count -= 1;
+  if (state.count > 0) return;
+  host.style.position = state.position;
+  host.style.isolation = state.isolation;
+  HOST_STYLES.delete(host);
+}
+
+/**
+ * Mount the cosmic (nebula) material as a background layer inside `host`.
+ *
+ * The layer is absolutely positioned and defaults to `z-index: -1`, so it
+ * paints behind the host's in-flow content: text/buttons/images inside the
+ * host sit on top with zero extra CSS. Host gets `position: relative;
+ * isolation: isolate` automatically so the layer can never escape its box
+ * (or break stacking outside it).
+ *
+ * Options: preset (literary name), colors, seed, speed, quality,
+ * renderer, renderScale, powerPreference, fps, paused/static, mouseColor,
+ * respectReducedMotion, opacity (0-1), fallbackColor (true=preset base
+ * color, a hex string, or false to disable).
  */
 function createColorBackground(host) {
   var _options$preset;
@@ -1063,18 +1197,29 @@ function createColorBackground(host) {
     renderer: DEFAULTS.capsule.renderer,
     respectReducedMotion: DEFAULTS.capsule.respectReducedMotion,
     mouseColor: true,
+    renderScale: 1,
+    powerPreference: 'high-performance',
+    fps: DEFAULTS.capsule.fps,
+    paused: false,
+    static: false,
     opacity: 1,
     fallbackColor: true
   }, preset, options);
-  var normalizedColors = merged.colors.map(normalizeColor);
-  if (normalizedColors.every(Boolean)) preset.colors = normalizedColors;
-  preset.seed = merged.seed;
-  preset.speed = merged.speed;
-  var computed = getComputedStyle(host);
-  if (computed.position === 'static' || computed.position === '') {
-    host.style.position = 'relative';
-  }
-  host.style.isolation = 'isolate';
+  merged.opacity = Number.isFinite(Number(merged.opacity)) ? Math.min(1, Math.max(0, Number(merged.opacity))) : 1;
+  var normalizedColors = Array.isArray(merged.colors) ? merged.colors.map(normalizeColor) : [];
+  if (normalizedColors.length === 4 && normalizedColors.every(Boolean)) preset.colors = normalizedColors;
+  var initialSeed = toFiniteNumber(merged.seed);
+  var initialSpeed = toFiniteNumber(merged.speed);
+  if (initialSeed !== null) preset.seed = initialSeed;
+  if (initialSpeed !== null) preset.speed = initialSpeed;
+  merged.colors = _toConsumableArray(preset.colors);
+  merged.seed = preset.seed;
+  merged.speed = preset.speed;
+  var optionColors = Array.isArray(options.colors) ? options.colors.map(normalizeColor) : [];
+  var colorOverride = optionColors.length === 4 && optionColors.every(Boolean) ? _toConsumableArray(optionColors) : null;
+  var seedOverride = options.seed !== undefined ? toFiniteNumber(options.seed) : null;
+  var speedOverride = options.speed !== undefined ? toFiniteNumber(options.speed) : null;
+  acquireHostStyles(host);
   var layer = document.createElement('div');
   layer.className = 'dlc-color-layer';
   var syncLayerVars = function syncLayerVars() {
@@ -1089,8 +1234,12 @@ function createColorBackground(host) {
   layer.appendChild(canvas);
   host.appendChild(layer);
   var emitter = createEmitter();
-  var paused = merged.respectReducedMotion && prefersReducedMotion();
+  var manuallyPaused = merged.paused === true;
+  var reducedPaused = false;
+  var staticMode = merged.static === true;
+  var contextLost = false;
   var disposed = false;
+  var renderOnce = function renderOnce() {};
   var dirty = {
     preset: false,
     seed: false,
@@ -1098,19 +1247,37 @@ function createColorBackground(host) {
     colors: false,
     opacity: false,
     fallbackColor: false,
-    mouseColor: false
+    mouseColor: false,
+    quality: false,
+    renderScale: false,
+    paused: false,
+    static: false,
+    fps: false
   };
   var renderer;
   var useWebgl = merged.renderer !== 'canvas2d';
   if (useWebgl) {
     try {
       renderer = new CosmicRenderer(canvas, merged, {
-        dprCap: dprCapFor(merged.quality),
+        dprCap: effectiveDprCap(merged.quality, merged.renderScale),
         mouseColor: merged.mouseColor !== false,
-        eventTarget: host
+        eventTarget: host,
+        powerPreference: merged.powerPreference,
+        onContextLost: function onContextLost() {
+          contextLost = true;
+          emitter.emit('contextlost', {});
+        },
+        onContextRestored: function onContextRestored() {
+          contextLost = false;
+          emitter.emit('contextrestored', {});
+          renderOnce();
+          wakeScheduler();
+        }
       });
     } catch (error) {
-      renderer = new FallbackRenderer(canvas, merged);
+      renderer = new FallbackRenderer(canvas, merged, {
+        dprCap: effectiveDprCap(merged.quality, merged.renderScale)
+      });
       nextTick(function () {
         if (disposed) return;
         emitter.emit('error', {
@@ -1119,19 +1286,37 @@ function createColorBackground(host) {
       });
     }
   } else {
-    renderer = new FallbackRenderer(canvas, merged);
+    renderer = new FallbackRenderer(canvas, merged, {
+      dprCap: effectiveDprCap(merged.quality, merged.renderScale)
+    });
   }
-  var resizeObserver = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(function () {
-    return renderer.resize();
-  }) : null;
-  if (resizeObserver) resizeObserver.observe(host);else window.addEventListener('resize', renderer.resize);
-  var visibility = createVisibilityGuard(layer);
+  renderer.resize();
   var animationTime = 0;
+  var frameGate = createFrameGate(merged.fps);
+  renderOnce = function renderOnce() {
+    return renderer.draw(animationTime);
+  };
+  var resize = function resize() {
+    renderer.resize();
+    if (manuallyPaused || reducedPaused || staticMode) renderOnce();
+  };
+  var resizeObserver = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(resize) : null;
+  if (resizeObserver) resizeObserver.observe(host);else window.addEventListener('resize', resize);
+  var visibility = createVisibilityGuard(layer, wakeScheduler);
+  var motionPreference = createReducedMotionPreference(merged.respectReducedMotion, function (matches) {
+    reducedPaused = matches;
+    if (matches) renderOnce();else wakeScheduler();
+  });
+  reducedPaused = motionPreference.matches();
+  var isMotionPaused = function isMotionPaused() {
+    return manuallyPaused || reducedPaused || staticMode || contextLost;
+  };
+  renderOnce();
   var unsubscribe = subscribeScheduler(function (delta) {
     animationTime += delta;
-    if (visibility.isVisible()) renderer.draw(animationTime);
+    if (frameGate.shouldDraw(delta)) renderer.draw(animationTime);
   }, function () {
-    return paused;
+    return isMotionPaused() || !visibility.isVisible();
   });
   nextTick(function () {
     if (disposed) return;
@@ -1150,11 +1335,15 @@ function createColorBackground(host) {
       var next = getPreset('capsule', ref);
       dirty.preset = true;
       Object.assign(preset, next);
+      if (colorOverride) preset.colors = _toConsumableArray(colorOverride);
+      if (seedOverride !== null) preset.seed = seedOverride;
+      if (speedOverride !== null) preset.speed = speedOverride;
       var nextColors = preset.colors.map(normalizeColor);
       if (nextColors.every(Boolean)) preset.colors = nextColors;
       renderer.setPreset(_objectSpread2({}, preset));
       renderer.resize();
       syncLayerVars();
+      if (isMotionPaused()) renderOnce();
       emitter.emit('presetchange', {
         preset: _objectSpread2({}, preset)
       });
@@ -1166,27 +1355,33 @@ function createColorBackground(host) {
         return !color;
       })) return this;
       dirty.colors = true;
+      colorOverride = _toConsumableArray(next);
       preset.colors = next;
       renderer.setPreset(_objectSpread2(_objectSpread2({}, preset), {}, {
         colors: next
       }));
       syncLayerVars();
+      if (isMotionPaused()) renderOnce();
       return this;
     },
     setSeed: function setSeed(seed) {
-      var value = Number(seed);
-      if (!Number.isFinite(value)) return this;
+      var value = toFiniteNumber(seed);
+      if (value === null) return this;
       dirty.seed = true;
+      seedOverride = value;
       preset.seed = value;
       renderer.setPreset(_objectSpread2({}, preset));
+      if (isMotionPaused()) renderOnce();
       return this;
     },
     setSpeed: function setSpeed(speed) {
-      var value = Number(speed);
-      if (!Number.isFinite(value)) return this;
+      var value = toFiniteNumber(speed);
+      if (value === null) return this;
       dirty.speed = true;
+      speedOverride = value;
       preset.speed = value;
       renderer.setPreset(_objectSpread2({}, preset));
+      if (isMotionPaused()) renderOnce();
       return this;
     },
     setFallbackColor: function setFallbackColor(value) {
@@ -1202,8 +1397,23 @@ function createColorBackground(host) {
       return this;
     },
     setQuality: function setQuality(quality) {
+      dirty.quality = true;
       merged.quality = quality;
-      if (typeof renderer.setDprCap === 'function') renderer.setDprCap(dprCapFor(quality));
+      if (typeof renderer.setDprCap === 'function') {
+        renderer.setDprCap(effectiveDprCap(quality, merged.renderScale));
+      }
+      if (isMotionPaused()) renderOnce();
+      return this;
+    },
+    setRenderScale: function setRenderScale(renderScale) {
+      var value = Number(renderScale);
+      if (!Number.isFinite(value)) return this;
+      dirty.renderScale = true;
+      merged.renderScale = Math.min(1, Math.max(0.25, value));
+      if (typeof renderer.setDprCap === 'function') {
+        renderer.setDprCap(effectiveDprCap(merged.quality, merged.renderScale));
+      }
+      if (isMotionPaused()) renderOnce();
       return this;
     },
     setOpacity: function setOpacity(value) {
@@ -1219,20 +1429,42 @@ function createColorBackground(host) {
       return this;
     },
     pause: function pause() {
-      paused = true;
+      dirty.paused = true;
+      manuallyPaused = true;
+      renderOnce();
       return this;
     },
     resume: function resume() {
-      paused = false;
+      dirty.paused = true;
+      manuallyPaused = false;
+      wakeScheduler();
+      return this;
+    },
+    setPaused: function setPaused(value) {
+      return value ? this.pause() : this.resume();
+    },
+    setStatic: function setStatic(value) {
+      dirty.static = true;
+      staticMode = value === true;
+      merged.static = staticMode;
+      if (staticMode) renderOnce();else wakeScheduler();
+      return this;
+    },
+    setFps: function setFps(fps) {
+      dirty.fps = true;
+      merged.fps = frameGate.setFps(fps);
+      wakeScheduler();
       return this;
     },
     dispose: function dispose() {
       disposed = true;
       unsubscribe();
       visibility.dispose();
-      if (resizeObserver) resizeObserver.disconnect();else window.removeEventListener('resize', renderer.resize);
+      motionPreference.dispose();
+      if (resizeObserver) resizeObserver.disconnect();else window.removeEventListener('resize', resize);
       renderer.dispose();
       layer.remove();
+      releaseHostStyles(host);
     },
     get opacity() {
       return merged.opacity;
@@ -1243,6 +1475,21 @@ function createColorBackground(host) {
     get mouseColor() {
       return merged.mouseColor;
     },
+    get quality() {
+      return merged.quality;
+    },
+    get renderScale() {
+      return merged.renderScale;
+    },
+    get paused() {
+      return manuallyPaused;
+    },
+    get static() {
+      return staticMode;
+    },
+    get fps() {
+      return frameGate.getFps();
+    },
     dirty: dirty
   };
 }