@5even7/dlc-ui 0.2.11 → 0.2.12

package/dist/capsule.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
@@ -234,9 +234,9 @@ function createEmitter() {
 
 var UNIT_PATTERN = /^[\d.]+(?:px|%|vw|vh|vmin|vmax|em|rem)$/;
 
-/**
- * Normalize a size option to a CSS length string.
- * Accepts numbers (treated as px) or strings with px/%, vw/vh/vmin/vmax, em/rem.
+/**
+ * Normalize a size option to a CSS length string.
+ * Accepts numbers (treated as px) or strings with px/%, vw/vh/vmin/vmax, em/rem.
  */
 function parseSize(value) {
   if (typeof value === 'number') {
@@ -275,11 +275,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):
@@ -297,9 +303,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'],
@@ -310,9 +316,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',
@@ -430,6 +436,11 @@ var DEFAULTS = {
     height: 160,
     quality: 'auto',
     renderer: 'auto',
+    renderScale: 1,
+    powerPreference: 'high-performance',
+    fps: 60,
+    paused: false,
+    static: false,
     respectReducedMotion: true,
     mouseColor: true,
     textRatio: 39
@@ -700,7 +711,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');
@@ -711,16 +722,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;
     }
   }, {
@@ -765,15 +779,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;
@@ -782,16 +795,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);
     }
   }, {
@@ -802,6 +814,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');
@@ -858,6 +872,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;
@@ -872,18 +906,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) {
@@ -924,7 +960,6 @@ var FallbackRenderer = /*#__PURE__*/function () {
     key: "draw",
     value: function draw(time) {
       if (!this.visible) return;
-      this.resize();
       this.drawNebula(time);
     }
   }, {
@@ -932,6 +967,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() {
@@ -949,10 +990,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;
@@ -960,11 +1001,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;
@@ -972,10 +1009,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);
@@ -983,6 +1018,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;
@@ -995,6 +1049,9 @@ function start() {
   last = 0;
   rafId = requestAnimationFrame(tick);
 }
+function wakeScheduler() {
+  start();
+}
 function subscribeScheduler(onFrame, isPaused) {
   var item = {
     onFrame: onFrame,
@@ -1013,11 +1070,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;
@@ -1027,6 +1085,7 @@ function createVisibilityGuard(element) {
       intersecting = entries.some(function (entry) {
         return entry.isIntersecting;
       });
+      if (typeof onChange === 'function') onChange();
     }, {
       rootMargin: '180px'
     });
@@ -1034,6 +1093,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);
@@ -1069,18 +1129,69 @@ 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 a cosmic (nebula) capsule into `container`.
  *
  * Options: preset (literary name), width, height (number=px or string with
  * px/%/vw/vh/em/rem), colors, seed, speed, textRatio (0-100, text region
  * width in percent), text (HTML string or DOM nodes for the text slot),
  * colorContent (HTML string or DOM nodes for the color slot), quality,
- * renderer, respectReducedMotion, mouseColor, cssVars.
+ * renderer, quality, renderScale, powerPreference, fps, paused/static,
+ * respectReducedMotion, mouseColor, cssVars.
  */
 function createCapsule(container) {
   var _options$preset;
@@ -1090,10 +1201,19 @@ function createCapsule(container) {
   }
   var preset = _objectSpread2({}, getPreset('capsule', (_options$preset = options.preset) !== null && _options$preset !== void 0 ? _options$preset : '初光'));
   var merged = normalizeOptions(DEFAULTS.capsule, preset, options);
-  var normalizedColors = merged.colors.map(normalizeColor);
-  if (normalizedColors.every(Boolean)) preset.colors = normalizedColors;
-  preset.seed = merged.seed;
-  preset.speed = merged.speed;
+  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;
   var customLabel = typeof options.label === 'string' && options.label ? options.label : null;
   var root = document.createElement('div');
   root.className = 'hj-capsule-root hj-capsule-cosmic';
@@ -1145,25 +1265,49 @@ function createCapsule(container) {
   root.appendChild(canvas);
   container.appendChild(root);
   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,
     speed: false,
     colors: false,
     textRatio: false,
-    cssVars: false
+    cssVars: 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,
+        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', {
@@ -1172,8 +1316,15 @@ function createCapsule(container) {
       });
     }
   } else {
-    renderer = new FallbackRenderer(canvas, merged);
+    renderer = new FallbackRenderer(canvas, merged, {
+      dprCap: effectiveDprCap(merged.quality, merged.renderScale)
+    });
   }
+  var animationTime = 0;
+  var frameGate = createFrameGate(merged.fps);
+  renderOnce = function renderOnce() {
+    return renderer.draw(animationTime);
+  };
   var applySize = function applySize() {
     root.style.width = parseSize(merged.width);
     root.style.height = parseSize(merged.height);
@@ -1191,11 +1342,21 @@ function createCapsule(container) {
     renderer.resize();
   };
   applySize();
-  var resizeObserver = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(function () {
-    return renderer.resize();
-  }) : null;
-  if (resizeObserver) resizeObserver.observe(root);else window.addEventListener('resize', renderer.resize);
-  var visibility = createVisibilityGuard(root);
+  var resize = function resize() {
+    renderer.resize();
+    if (manuallyPaused || reducedPaused || staticMode) renderOnce();
+  };
+  var resizeObserver = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(resize) : null;
+  if (resizeObserver) resizeObserver.observe(root);else window.addEventListener('resize', resize);
+  var visibility = createVisibilityGuard(root, 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;
+  };
   root.addEventListener('pointerenter', function () {
     return emitter.emit('pointerenter', {
       preset: _objectSpread2({}, preset)
@@ -1230,12 +1391,12 @@ function createCapsule(container) {
       preset: _objectSpread2({}, preset)
     });
   });
-  var animationTime = 0;
+  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;
@@ -1258,11 +1419,15 @@ function createCapsule(container) {
       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));
       syncTheme();
       renderer.resize();
+      if (isMotionPaused()) renderOnce();
       emitter.emit('presetchange', {
         preset: _objectSpread2({}, next)
       });
@@ -1274,26 +1439,32 @@ function createCapsule(container) {
         return !color;
       })) return this;
       dirty.colors = true;
+      colorOverride = _toConsumableArray(next);
       preset.colors = next;
       renderer.setPreset(_objectSpread2(_objectSpread2({}, preset), {}, {
         colors: next
       }));
+      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;
     },
     setText: function setText(content) {
@@ -1329,6 +1500,7 @@ function createCapsule(container) {
       return this;
     },
     setMouseColor: function setMouseColor(value) {
+      dirty.mouseColor = true;
       merged.mouseColor = value !== false;
       if (typeof renderer.setMouseColor === 'function') renderer.setMouseColor(merged.mouseColor);
       return this;
@@ -1343,6 +1515,7 @@ function createCapsule(container) {
         merged.height = height;
       }
       applySize();
+      if (isMotionPaused()) renderOnce();
       return this;
     },
     randomize: function randomize() {
@@ -1350,23 +1523,59 @@ function createCapsule(container) {
       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;
     },
     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;
     },
     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();
       root.remove();
     },
@@ -1376,6 +1585,24 @@ function createCapsule(container) {
     get cssVars() {
       return merged.cssVars;
     },
+    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
   };
 }