mason-sprite 0.1.0 → 0.1.2

package/README.md

@@ -1,9 +1,42 @@
 # mason-sprite
 
-Lightweight sprite sheet animation for **React**, **Vue**, and **Svelte** — one package, subpath imports.
+[![npm version](https://img.shields.io/npm/v/mason-sprite.svg)](https://www.npmjs.com/package/mason-sprite)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](./LICENSE)
+
+**v0.1.2** — Lightweight sprite sheet animation for **React**, **Vue**, and **Svelte** — one package, subpath imports.
 
 Drop in a PNG or WebP sprite sheet, set `rows`, `cols`, and `fps` — and you're done. No Lottie, no timeline editor. Just a simple **CSS** or **Canvas** sprite player.
 
+**Demo & docs:** [mason-sprite.com](https://mason-sprite.com)
+
+## Preview
+
+One sprite sheet, a few props — animation on screen.
+
+<table>
+  <tr>
+    <td align="center" width="50%">
+      <strong>Sprite sheet</strong><br />
+      <code>img-cat-run.webp</code> · 2 rows × 5 cols
+      <br /><br />
+      <img src="./docs/assets/readme/img-cat-run.webp" alt="Cat run sprite sheet — 2 rows, 5 columns" width="420" />
+    </td>
+    <td align="center" width="50%">
+      <strong>Rendered with mason-sprite</strong><br />
+      <code>rows={2}</code> · <code>cols={5}</code> · <code>fps={10}</code>
+      <br /><br />
+      <img src="./docs/assets/readme/img-cat-run.gif" alt="Cat run animation rendered by mason-sprite" width="140" />
+    </td>
+  </tr>
+</table>
+
+```
+img-cat-run.webp  →  rows × cols  →  looping animation
+ (WebP sheet)         (2 × 5)          (CSS or Canvas)
+```
+
+Try it live on **[mason-sprite.com](https://mason-sprite.com)**.
+
 ## Install
 
 ```bash
@@ -26,13 +59,13 @@ Peer dependencies (install only what you use):
 import { SpriteAnimator } from 'mason-sprite';
 
 const animator = new SpriteAnimator({
-  src: '/sprites/hero.png',
+  src: '/sprites/cat-run.webp',
   rows: 2,
   cols: 5,
   fps: 10,
   loop: true,
-  width: 140,
-  height: 140,
+  width: '8rem',
+  height: '8rem',
 });
 
 animator.attach(document.getElementById('sprite')!);
@@ -45,13 +78,13 @@ animator.play();
 import { Sprite } from 'mason-sprite/react';
 
 <Sprite
-  src="/sprites/hero.png"
+  src="/sprites/cat-run.webp"
   rows={2}
   cols={5}
   fps={10}
   loop
-  width={140}
-  height={140}
+  width="8rem"
+  height="8rem"
 />
 ```
 
@@ -64,13 +97,13 @@ import { Sprite } from 'mason-sprite/vue';
 
 <template>
   <Sprite
-    src="/sprites/hero.png"
+    src="/sprites/cat-run.webp"
     :rows="2"
     :cols="5"
     :fps="10"
     :loop="true"
-    :width="140"
-    :height="140"
+    width="8rem"
+    height="8rem"
   />
 </template>
 ```
@@ -83,13 +116,13 @@ import { Sprite } from 'mason-sprite/vue';
 </script>
 
 <Sprite
-  src="/sprites/hero.png"
+  src="/sprites/cat-run.webp"
   rows={2}
   cols={5}
   fps={10}
   loop
-  width={140}
-  height={140}
+  width="8rem"
+  height="8rem"
 />
 ```
 
@@ -106,6 +139,8 @@ import { Sprite } from 'mason-sprite/vue';
 
 - PNG / WebP sprite sheet support
 - CSS or Canvas rendering
+- Responsive sizing — `width` / `height` accept CSS lengths (`rem`, `em`, `%`, `vw`, etc.)
+- Canvas mode uses `ResizeObserver` and `devicePixelRatio` for sharp rendering
 - `play`, `pause`, `stop`, `goToFrame` controls
 - Works with any uniform grid sprite sheet (`rows × cols`)
 

package/dist/index.cjs

@@ -24,7 +24,8 @@ __export(core_exports, {
   SpriteAnimator: () => SpriteAnimator,
   getBackgroundPositionPercent: () => getBackgroundPositionPercent,
   getFramePosition: () => getFramePosition,
-  getTotalFrames: () => getTotalFrames
+  getTotalFrames: () => getTotalFrames,
+  toCssLength: () => toCssLength
 });
 module.exports = __toCommonJS(core_exports);
 
@@ -39,6 +40,9 @@ var SPRITE_ANIMATION_DEFAULTS = {
 };
 
 // src/core/utils.ts
+function toCssLength(size) {
+  return typeof size === "number" ? `${size}px` : size;
+}
 function getTotalFrames(rows, cols) {
   return rows * cols;
 }
@@ -56,15 +60,24 @@ function getBackgroundPositionPercent(frameIndex, rows, cols) {
 }
 
 // src/core/canvas-renderer.ts
-function drawCanvasFrame(canvas, image, frameIndex, rows, cols, width, height) {
+function drawCanvasFrame(canvas, image, frameIndex, rows, cols) {
   const ctx = canvas.getContext("2d");
   if (!ctx) return;
+  const displayWidth = canvas.clientWidth;
+  const displayHeight = canvas.clientHeight;
+  if (displayWidth === 0 || displayHeight === 0) return;
+  const dpr = window.devicePixelRatio || 1;
+  const pixelWidth = Math.round(displayWidth * dpr);
+  const pixelHeight = Math.round(displayHeight * dpr);
+  if (canvas.width !== pixelWidth || canvas.height !== pixelHeight) {
+    canvas.width = pixelWidth;
+    canvas.height = pixelHeight;
+  }
   const frameWidth = image.naturalWidth / cols;
   const frameHeight = image.naturalHeight / rows;
   const { row, col } = getFramePosition(frameIndex, cols);
-  canvas.width = width;
-  canvas.height = height;
-  ctx.clearRect(0, 0, width, height);
+  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+  ctx.clearRect(0, 0, displayWidth, displayHeight);
   ctx.drawImage(
     image,
     col * frameWidth,
@@ -73,8 +86,8 @@ function drawCanvasFrame(canvas, image, frameIndex, rows, cols, width, height) {
     frameHeight,
     0,
     0,
-    width,
-    height
+    displayWidth,
+    displayHeight
   );
 }
 
@@ -85,8 +98,8 @@ function applyCssFrame(target, src, frameIndex, rows, cols, width, height) {
   target.style.backgroundRepeat = "no-repeat";
   target.style.backgroundSize = `${cols * 100}% ${rows * 100}%`;
   target.style.backgroundPosition = `${x}% ${y}%`;
-  target.style.width = `${width}px`;
-  target.style.height = `${height}px`;
+  target.style.width = toCssLength(width);
+  target.style.height = toCssLength(height);
   target.style.display = "inline-block";
 }
 function resetCssRenderer(target) {
@@ -106,6 +119,7 @@ var SpriteAnimator = class {
     this.target = null;
     this.listeners = /* @__PURE__ */ new Set();
     this.destroyed = false;
+    this.resizeObserver = null;
     this.tick = (timestamp) => {
       if (!this.isPlaying || this.destroyed) return;
       if (this.lastTimestamp === 0) {
@@ -129,6 +143,8 @@ var SpriteAnimator = class {
   }
   attach(target) {
     this.target = target;
+    this.applyCanvasDisplaySize();
+    this.setupResizeObserver();
     if (this.isLoaded) {
       this.render();
     }
@@ -182,6 +198,7 @@ var SpriteAnimator = class {
   updateOptions(partial) {
     const prevSrc = this.options.src;
     const prevFps = this.options.fps;
+    const prevRenderer = this.options.renderer;
     this.options = { ...this.options, ...partial };
     if (partial.src !== void 0 && partial.src !== prevSrc) {
       this.loadImage();
@@ -191,10 +208,18 @@ var SpriteAnimator = class {
     if (partial.fps !== void 0 && partial.fps !== prevFps) {
       this.accumulatedTime = 0;
     }
+    if (partial.width !== void 0 || partial.height !== void 0) {
+      this.applyCanvasDisplaySize();
+    }
+    if (partial.renderer !== void 0 && partial.renderer !== prevRenderer) {
+      this.setupResizeObserver();
+    }
   }
   destroy() {
     this.destroyed = true;
     this.pause();
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = null;
     this.listeners.clear();
     if (this.target && this.options.renderer === "css") {
       resetCssRenderer(this.target);
@@ -252,7 +277,7 @@ var SpriteAnimator = class {
     if (!this.target || !this.isLoaded) return;
     const { src, rows, cols, width, height, renderer } = this.options;
     if (renderer === "canvas" && this.target instanceof HTMLCanvasElement && this.image) {
-      drawCanvasFrame(this.target, this.image, this.currentFrame, rows, cols, width, height);
+      drawCanvasFrame(this.target, this.image, this.currentFrame, rows, cols);
     } else if (renderer === "css" && this.target instanceof HTMLElement) {
       applyCssFrame(this.target, src, this.currentFrame, rows, cols, width, height);
     }
@@ -261,6 +286,26 @@ var SpriteAnimator = class {
     const state = this.getState();
     this.listeners.forEach((listener) => listener(state));
   }
+  applyCanvasDisplaySize() {
+    if (this.options.renderer !== "canvas" || !(this.target instanceof HTMLCanvasElement)) {
+      return;
+    }
+    this.target.style.width = toCssLength(this.options.width);
+    this.target.style.height = toCssLength(this.options.height);
+  }
+  setupResizeObserver() {
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = null;
+    if (this.options.renderer !== "canvas" || !(this.target instanceof HTMLCanvasElement) || typeof ResizeObserver === "undefined") {
+      return;
+    }
+    this.resizeObserver = new ResizeObserver(() => {
+      if (this.isLoaded) {
+        this.render();
+      }
+    });
+    this.resizeObserver.observe(this.target);
+  }
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -268,6 +313,7 @@ var SpriteAnimator = class {
   SpriteAnimator,
   getBackgroundPositionPercent,
   getFramePosition,
-  getTotalFrames
+  getTotalFrames,
+  toCssLength
 });
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/core/index.ts","../src/core/constants.ts","../src/core/utils.ts","../src/core/canvas-renderer.ts","../src/core/css-renderer.ts","../src/core/sprite-animator.ts"],"sourcesContent":["export { SPRITE_ANIMATION_DEFAULTS } from './constants.js';\nexport { SpriteAnimator } from './sprite-animator.js';\nexport type {\n  FramePosition,\n  RendererMode,\n  SpriteAnimationOptions,\n  SpriteAnimationState,\n} from './types.js';\nexport {\n  getBackgroundPositionPercent,\n  getFramePosition,\n  getTotalFrames,\n} from './utils.js';\n","import type { RendererMode } from './types.js';\n\nexport const SPRITE_ANIMATION_DEFAULTS = {\n  fps: 12,\n  loop: true,\n  width: 128,\n  height: 128,\n  autoPlay: true,\n  renderer: 'css' as RendererMode,\n} as const;\n","import type { FramePosition } from './types.js';\n\nexport function getTotalFrames(rows: number, cols: number): number {\n  return rows * cols;\n}\n\nexport function getFramePosition(frameIndex: number, cols: number): FramePosition {\n  return {\n    row: Math.floor(frameIndex / cols),\n    col: frameIndex % cols,\n  };\n}\n\nexport function getBackgroundPositionPercent(\n  frameIndex: number,\n  rows: number,\n  cols: number,\n): { x: number; y: number } {\n  const { row, col } = getFramePosition(frameIndex, cols);\n  const x = cols <= 1 ? 0 : (col / (cols - 1)) * 100;\n  const y = rows <= 1 ? 0 : (row / (rows - 1)) * 100;\n  return { x, y };\n}\n","import { getFramePosition } from './utils.js';\n\nexport function drawCanvasFrame(\n  canvas: HTMLCanvasElement,\n  image: HTMLImageElement,\n  frameIndex: number,\n  rows: number,\n  cols: number,\n  width: number,\n  height: number,\n): void {\n  const ctx = canvas.getContext('2d');\n  if (!ctx) return;\n\n  const frameWidth = image.naturalWidth / cols;\n  const frameHeight = image.naturalHeight / rows;\n  const { row, col } = getFramePosition(frameIndex, cols);\n\n  canvas.width = width;\n  canvas.height = height;\n\n  ctx.clearRect(0, 0, width, height);\n  ctx.drawImage(\n    image,\n    col * frameWidth,\n    row * frameHeight,\n    frameWidth,\n    frameHeight,\n    0,\n    0,\n    width,\n    height,\n  );\n}\n","import { getBackgroundPositionPercent } from './utils.js';\n\nexport interface CssRendererTarget {\n  style: CSSStyleDeclaration;\n}\n\nexport function applyCssFrame(\n  target: CssRendererTarget,\n  src: string,\n  frameIndex: number,\n  rows: number,\n  cols: number,\n  width: number,\n  height: number,\n): void {\n  const { x, y } = getBackgroundPositionPercent(frameIndex, rows, cols);\n\n  target.style.backgroundImage = `url(\"${src}\")`;\n  target.style.backgroundRepeat = 'no-repeat';\n  target.style.backgroundSize = `${cols * 100}% ${rows * 100}%`;\n  target.style.backgroundPosition = `${x}% ${y}%`;\n  target.style.width = `${width}px`;\n  target.style.height = `${height}px`;\n  target.style.display = 'inline-block';\n}\n\nexport function resetCssRenderer(target: CssRendererTarget): void {\n  target.style.backgroundImage = '';\n}\n","import { SPRITE_ANIMATION_DEFAULTS } from './constants.js';\nimport { drawCanvasFrame } from './canvas-renderer.js';\nimport { applyCssFrame, resetCssRenderer } from './css-renderer.js';\nimport type { SpriteAnimationOptions, SpriteAnimationState } from './types.js';\nimport { getTotalFrames } from './utils.js';\n\ntype StateListener = (state: SpriteAnimationState) => void;\n\ntype ResolvedSpriteAnimationOptions = Required<\n  Pick<SpriteAnimationOptions, 'src' | 'rows' | 'cols'>\n> &\n  Required<Pick<SpriteAnimationOptions, 'fps' | 'loop' | 'width' | 'height' | 'autoPlay' | 'renderer'>> &\n  Pick<SpriteAnimationOptions, 'onComplete' | 'onFrameChange'>;\n\nexport class SpriteAnimator {\n  private options: ResolvedSpriteAnimationOptions;\n  private currentFrame = 0;\n  private isPlaying = false;\n  private isLoaded = false;\n  private rafId: number | null = null;\n  private lastTimestamp = 0;\n  private accumulatedTime = 0;\n  private image: HTMLImageElement | null = null;\n  private target: HTMLElement | HTMLCanvasElement | null = null;\n  private listeners = new Set<StateListener>();\n  private destroyed = false;\n\n  constructor(options: SpriteAnimationOptions) {\n    this.options = {\n      ...SPRITE_ANIMATION_DEFAULTS,\n      ...options,\n    };\n    this.loadImage();\n  }\n\n  attach(target: HTMLElement | HTMLCanvasElement): void {\n    this.target = target;\n    if (this.isLoaded) {\n      this.render();\n    }\n    if (this.options.autoPlay) {\n      this.play();\n    }\n  }\n\n  play(): void {\n    if (this.destroyed || this.isPlaying) return;\n    this.isPlaying = true;\n    this.lastTimestamp = 0;\n    this.accumulatedTime = 0;\n    this.rafId = requestAnimationFrame(this.tick);\n    this.notify();\n  }\n\n  pause(): void {\n    if (!this.isPlaying) return;\n    this.isPlaying = false;\n    if (this.rafId !== null) {\n      cancelAnimationFrame(this.rafId);\n      this.rafId = null;\n    }\n    this.notify();\n  }\n\n  stop(): void {\n    this.pause();\n    this.currentFrame = 0;\n    this.render();\n    this.notify();\n  }\n\n  goToFrame(frame: number): void {\n    const total = this.getTotalFrames();\n    this.currentFrame = Math.max(0, Math.min(frame, total - 1));\n    this.render();\n    this.options.onFrameChange?.(this.currentFrame);\n    this.notify();\n  }\n\n  getState(): SpriteAnimationState {\n    return {\n      currentFrame: this.currentFrame,\n      totalFrames: this.getTotalFrames(),\n      isPlaying: this.isPlaying,\n      isLoaded: this.isLoaded,\n    };\n  }\n\n  subscribe(listener: StateListener): () => void {\n    this.listeners.add(listener);\n    listener(this.getState());\n    return () => this.listeners.delete(listener);\n  }\n\n  updateOptions(partial: Partial<SpriteAnimationOptions>): void {\n    const prevSrc = this.options.src;\n    const prevFps = this.options.fps;\n    this.options = { ...this.options, ...partial };\n\n    if (partial.src !== undefined && partial.src !== prevSrc) {\n      this.loadImage();\n    } else if (this.isLoaded) {\n      this.render();\n    }\n\n    if (partial.fps !== undefined && partial.fps !== prevFps) {\n      this.accumulatedTime = 0;\n    }\n  }\n\n  destroy(): void {\n    this.destroyed = true;\n    this.pause();\n    this.listeners.clear();\n    if (this.target && this.options.renderer === 'css') {\n      resetCssRenderer(this.target);\n    }\n    this.target = null;\n    this.image = null;\n  }\n\n  private getTotalFrames(): number {\n    return getTotalFrames(this.options.rows, this.options.cols);\n  }\n\n  private loadImage(): void {\n    this.isLoaded = false;\n    const img = new Image();\n    img.crossOrigin = 'anonymous';\n    img.onload = () => {\n      if (this.destroyed) return;\n      this.image = img;\n      this.isLoaded = true;\n\n      if (!this.options.width || !this.options.height) {\n        const frameWidth = img.naturalWidth / this.options.cols;\n        const frameHeight = img.naturalHeight / this.options.rows;\n        this.options.width = frameWidth;\n        this.options.height = frameHeight;\n      }\n\n      this.render();\n      this.notify();\n\n      if (this.options.autoPlay && this.target) {\n        this.play();\n      }\n    };\n    img.onerror = () => {\n      console.error(`[SpriteAnimator] Failed to load image: ${this.options.src}`);\n    };\n    img.src = this.options.src;\n  }\n\n  private tick = (timestamp: number): void => {\n    if (!this.isPlaying || this.destroyed) return;\n\n    if (this.lastTimestamp === 0) {\n      this.lastTimestamp = timestamp;\n    }\n\n    const delta = timestamp - this.lastTimestamp;\n    this.lastTimestamp = timestamp;\n    this.accumulatedTime += delta;\n\n    const frameDuration = 1000 / this.options.fps;\n    while (this.accumulatedTime >= frameDuration) {\n      this.accumulatedTime -= frameDuration;\n      this.advanceFrame();\n    }\n\n    this.rafId = requestAnimationFrame(this.tick);\n  };\n\n  private advanceFrame(): void {\n    const total = this.getTotalFrames();\n    const next = this.currentFrame + 1;\n\n    if (next >= total) {\n      if (this.options.loop) {\n        this.currentFrame = 0;\n      } else {\n        this.currentFrame = total - 1;\n        this.pause();\n        this.options.onComplete?.();\n      }\n    } else {\n      this.currentFrame = next;\n    }\n\n    this.render();\n    this.options.onFrameChange?.(this.currentFrame);\n    this.notify();\n  }\n\n  private render(): void {\n    if (!this.target || !this.isLoaded) return;\n\n    const { src, rows, cols, width, height, renderer } = this.options;\n\n    if (renderer === 'canvas' && this.target instanceof HTMLCanvasElement && this.image) {\n      drawCanvasFrame(this.target, this.image, this.currentFrame, rows, cols, width, height);\n    } else if (renderer === 'css' && this.target instanceof HTMLElement) {\n      applyCssFrame(this.target, src, this.currentFrame, rows, cols, width, height);\n    }\n  }\n\n  private notify(): void {\n    const state = this.getState();\n    this.listeners.forEach((listener) => listener(state));\n  }\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/core/index.ts","../src/core/constants.ts","../src/core/utils.ts","../src/core/canvas-renderer.ts","../src/core/css-renderer.ts","../src/core/sprite-animator.ts"],"sourcesContent":["export { SPRITE_ANIMATION_DEFAULTS } from './constants.js';\nexport { SpriteAnimator } from './sprite-animator.js';\nexport type {\n  FramePosition,\n  RendererMode,\n  SpriteAnimationOptions,\n  SpriteAnimationState,\n  SpriteSize,\n} from './types.js';\nexport {\n  getBackgroundPositionPercent,\n  getFramePosition,\n  getTotalFrames,\n  toCssLength,\n} from './utils.js';\n","import type { RendererMode } from './types.js';\n\nexport const SPRITE_ANIMATION_DEFAULTS = {\n  fps: 12,\n  loop: true,\n  width: 128,\n  height: 128,\n  autoPlay: true,\n  renderer: 'css' as RendererMode,\n} as const;\n","import type { FramePosition, SpriteSize } from './types.js';\n\n/** Converts a SpriteSize to a CSS length string. Numbers become `px`; strings pass through. */\nexport function toCssLength(size: SpriteSize): string {\n  return typeof size === 'number' ? `${size}px` : size;\n}\n\nexport function getTotalFrames(rows: number, cols: number): number {\n  return rows * cols;\n}\n\nexport function getFramePosition(frameIndex: number, cols: number): FramePosition {\n  return {\n    row: Math.floor(frameIndex / cols),\n    col: frameIndex % cols,\n  };\n}\n\nexport function getBackgroundPositionPercent(\n  frameIndex: number,\n  rows: number,\n  cols: number,\n): { x: number; y: number } {\n  const { row, col } = getFramePosition(frameIndex, cols);\n  const x = cols <= 1 ? 0 : (col / (cols - 1)) * 100;\n  const y = rows <= 1 ? 0 : (row / (rows - 1)) * 100;\n  return { x, y };\n}\n","import { getFramePosition } from './utils.js';\n\nexport function drawCanvasFrame(\n  canvas: HTMLCanvasElement,\n  image: HTMLImageElement,\n  frameIndex: number,\n  rows: number,\n  cols: number,\n): void {\n  const ctx = canvas.getContext('2d');\n  if (!ctx) return;\n\n  const displayWidth = canvas.clientWidth;\n  const displayHeight = canvas.clientHeight;\n  if (displayWidth === 0 || displayHeight === 0) return;\n\n  const dpr = window.devicePixelRatio || 1;\n  const pixelWidth = Math.round(displayWidth * dpr);\n  const pixelHeight = Math.round(displayHeight * dpr);\n\n  if (canvas.width !== pixelWidth || canvas.height !== pixelHeight) {\n    canvas.width = pixelWidth;\n    canvas.height = pixelHeight;\n  }\n\n  const frameWidth = image.naturalWidth / cols;\n  const frameHeight = image.naturalHeight / rows;\n  const { row, col } = getFramePosition(frameIndex, cols);\n\n  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n  ctx.clearRect(0, 0, displayWidth, displayHeight);\n  ctx.drawImage(\n    image,\n    col * frameWidth,\n    row * frameHeight,\n    frameWidth,\n    frameHeight,\n    0,\n    0,\n    displayWidth,\n    displayHeight,\n  );\n}\n","import type { SpriteSize } from './types.js';\nimport { getBackgroundPositionPercent, toCssLength } from './utils.js';\n\nexport interface CssRendererTarget {\n  style: CSSStyleDeclaration;\n}\n\nexport function applyCssFrame(\n  target: CssRendererTarget,\n  src: string,\n  frameIndex: number,\n  rows: number,\n  cols: number,\n  width: SpriteSize,\n  height: SpriteSize,\n): void {\n  const { x, y } = getBackgroundPositionPercent(frameIndex, rows, cols);\n\n  target.style.backgroundImage = `url(\"${src}\")`;\n  target.style.backgroundRepeat = 'no-repeat';\n  target.style.backgroundSize = `${cols * 100}% ${rows * 100}%`;\n  target.style.backgroundPosition = `${x}% ${y}%`;\n  target.style.width = toCssLength(width);\n  target.style.height = toCssLength(height);\n  target.style.display = 'inline-block';\n}\n\nexport function resetCssRenderer(target: CssRendererTarget): void {\n  target.style.backgroundImage = '';\n}\n","import { SPRITE_ANIMATION_DEFAULTS } from './constants.js';\nimport { drawCanvasFrame } from './canvas-renderer.js';\nimport { applyCssFrame, resetCssRenderer } from './css-renderer.js';\nimport type { SpriteAnimationOptions, SpriteAnimationState } from './types.js';\nimport { getTotalFrames, toCssLength } from './utils.js';\n\ntype StateListener = (state: SpriteAnimationState) => void;\n\ntype ResolvedSpriteAnimationOptions = Required<\n  Pick<SpriteAnimationOptions, 'src' | 'rows' | 'cols'>\n> &\n  Required<Pick<SpriteAnimationOptions, 'fps' | 'loop' | 'width' | 'height' | 'autoPlay' | 'renderer'>> &\n  Pick<SpriteAnimationOptions, 'onComplete' | 'onFrameChange'>;\n\nexport class SpriteAnimator {\n  private options: ResolvedSpriteAnimationOptions;\n  private currentFrame = 0;\n  private isPlaying = false;\n  private isLoaded = false;\n  private rafId: number | null = null;\n  private lastTimestamp = 0;\n  private accumulatedTime = 0;\n  private image: HTMLImageElement | null = null;\n  private target: HTMLElement | HTMLCanvasElement | null = null;\n  private listeners = new Set<StateListener>();\n  private destroyed = false;\n  private resizeObserver: ResizeObserver | null = null;\n\n  constructor(options: SpriteAnimationOptions) {\n    this.options = {\n      ...SPRITE_ANIMATION_DEFAULTS,\n      ...options,\n    };\n    this.loadImage();\n  }\n\n  attach(target: HTMLElement | HTMLCanvasElement): void {\n    this.target = target;\n    this.applyCanvasDisplaySize();\n    this.setupResizeObserver();\n    if (this.isLoaded) {\n      this.render();\n    }\n    if (this.options.autoPlay) {\n      this.play();\n    }\n  }\n\n  play(): void {\n    if (this.destroyed || this.isPlaying) return;\n    this.isPlaying = true;\n    this.lastTimestamp = 0;\n    this.accumulatedTime = 0;\n    this.rafId = requestAnimationFrame(this.tick);\n    this.notify();\n  }\n\n  pause(): void {\n    if (!this.isPlaying) return;\n    this.isPlaying = false;\n    if (this.rafId !== null) {\n      cancelAnimationFrame(this.rafId);\n      this.rafId = null;\n    }\n    this.notify();\n  }\n\n  stop(): void {\n    this.pause();\n    this.currentFrame = 0;\n    this.render();\n    this.notify();\n  }\n\n  goToFrame(frame: number): void {\n    const total = this.getTotalFrames();\n    this.currentFrame = Math.max(0, Math.min(frame, total - 1));\n    this.render();\n    this.options.onFrameChange?.(this.currentFrame);\n    this.notify();\n  }\n\n  getState(): SpriteAnimationState {\n    return {\n      currentFrame: this.currentFrame,\n      totalFrames: this.getTotalFrames(),\n      isPlaying: this.isPlaying,\n      isLoaded: this.isLoaded,\n    };\n  }\n\n  subscribe(listener: StateListener): () => void {\n    this.listeners.add(listener);\n    listener(this.getState());\n    return () => this.listeners.delete(listener);\n  }\n\n  updateOptions(partial: Partial<SpriteAnimationOptions>): void {\n    const prevSrc = this.options.src;\n    const prevFps = this.options.fps;\n    const prevRenderer = this.options.renderer;\n    this.options = { ...this.options, ...partial };\n\n    if (partial.src !== undefined && partial.src !== prevSrc) {\n      this.loadImage();\n    } else if (this.isLoaded) {\n      this.render();\n    }\n\n    if (partial.fps !== undefined && partial.fps !== prevFps) {\n      this.accumulatedTime = 0;\n    }\n\n    if (partial.width !== undefined || partial.height !== undefined) {\n      this.applyCanvasDisplaySize();\n    }\n\n    if (partial.renderer !== undefined && partial.renderer !== prevRenderer) {\n      this.setupResizeObserver();\n    }\n  }\n\n  destroy(): void {\n    this.destroyed = true;\n    this.pause();\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = null;\n    this.listeners.clear();\n    if (this.target && this.options.renderer === 'css') {\n      resetCssRenderer(this.target);\n    }\n    this.target = null;\n    this.image = null;\n  }\n\n  private getTotalFrames(): number {\n    return getTotalFrames(this.options.rows, this.options.cols);\n  }\n\n  private loadImage(): void {\n    this.isLoaded = false;\n    const img = new Image();\n    img.crossOrigin = 'anonymous';\n    img.onload = () => {\n      if (this.destroyed) return;\n      this.image = img;\n      this.isLoaded = true;\n\n      if (!this.options.width || !this.options.height) {\n        const frameWidth = img.naturalWidth / this.options.cols;\n        const frameHeight = img.naturalHeight / this.options.rows;\n        this.options.width = frameWidth;\n        this.options.height = frameHeight;\n      }\n\n      this.render();\n      this.notify();\n\n      if (this.options.autoPlay && this.target) {\n        this.play();\n      }\n    };\n    img.onerror = () => {\n      console.error(`[SpriteAnimator] Failed to load image: ${this.options.src}`);\n    };\n    img.src = this.options.src;\n  }\n\n  private tick = (timestamp: number): void => {\n    if (!this.isPlaying || this.destroyed) return;\n\n    if (this.lastTimestamp === 0) {\n      this.lastTimestamp = timestamp;\n    }\n\n    const delta = timestamp - this.lastTimestamp;\n    this.lastTimestamp = timestamp;\n    this.accumulatedTime += delta;\n\n    const frameDuration = 1000 / this.options.fps;\n    while (this.accumulatedTime >= frameDuration) {\n      this.accumulatedTime -= frameDuration;\n      this.advanceFrame();\n    }\n\n    this.rafId = requestAnimationFrame(this.tick);\n  };\n\n  private advanceFrame(): void {\n    const total = this.getTotalFrames();\n    const next = this.currentFrame + 1;\n\n    if (next >= total) {\n      if (this.options.loop) {\n        this.currentFrame = 0;\n      } else {\n        this.currentFrame = total - 1;\n        this.pause();\n        this.options.onComplete?.();\n      }\n    } else {\n      this.currentFrame = next;\n    }\n\n    this.render();\n    this.options.onFrameChange?.(this.currentFrame);\n    this.notify();\n  }\n\n  private render(): void {\n    if (!this.target || !this.isLoaded) return;\n\n    const { src, rows, cols, width, height, renderer } = this.options;\n\n    if (renderer === 'canvas' && this.target instanceof HTMLCanvasElement && this.image) {\n      drawCanvasFrame(this.target, this.image, this.currentFrame, rows, cols);\n    } else if (renderer === 'css' && this.target instanceof HTMLElement) {\n      applyCssFrame(this.target, src, this.currentFrame, rows, cols, width, height);\n    }\n  }\n\n  private notify(): void {\n    const state = this.getState();\n    this.listeners.forEach((listener) => listener(state));\n  }\n\n  private applyCanvasDisplaySize(): void {\n    if (this.options.renderer !== 'canvas' || !(this.target instanceof HTMLCanvasElement)) {\n      return;\n    }\n    this.target.style.width = toCssLength(this.options.width);\n    this.target.style.height = toCssLength(this.options.height);\n  }\n\n  private setupResizeObserver(): void {\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = null;\n\n    if (\n      this.options.renderer !== 'canvas' ||\n      !(this.target instanceof HTMLCanvasElement) ||\n      typeof ResizeObserver === 'undefined'\n    ) {\n      return;\n    }\n\n    this.resizeObserver = new ResizeObserver(() => {\n      if (this.isLoaded) {\n        this.render();\n      }\n    });\n    this.resizeObserver.observe(this.target);\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEO,IAAM,4BAA4B;AAAA,EACvC,KAAK;AAAA,EACL,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,UAAU;AACZ;;;ACNO,SAAS,YAAY,MAA0B;AACpD,SAAO,OAAO,SAAS,WAAW,GAAG,IAAI,OAAO;AAClD;AAEO,SAAS,eAAe,MAAc,MAAsB;AACjE,SAAO,OAAO;AAChB;AAEO,SAAS,iBAAiB,YAAoB,MAA6B;AAChF,SAAO;AAAA,IACL,KAAK,KAAK,MAAM,aAAa,IAAI;AAAA,IACjC,KAAK,aAAa;AAAA,EACpB;AACF;AAEO,SAAS,6BACd,YACA,MACA,MAC0B;AAC1B,QAAM,EAAE,KAAK,IAAI,IAAI,iBAAiB,YAAY,IAAI;AACtD,QAAM,IAAI,QAAQ,IAAI,IAAK,OAAO,OAAO,KAAM;AAC/C,QAAM,IAAI,QAAQ,IAAI,IAAK,OAAO,OAAO,KAAM;AAC/C,SAAO,EAAE,GAAG,EAAE;AAChB;;;ACzBO,SAAS,gBACd,QACA,OACA,YACA,MACA,MACM;AACN,QAAM,MAAM,OAAO,WAAW,IAAI;AAClC,MAAI,CAAC,IAAK;AAEV,QAAM,eAAe,OAAO;AAC5B,QAAM,gBAAgB,OAAO;AAC7B,MAAI,iBAAiB,KAAK,kBAAkB,EAAG;AAE/C,QAAM,MAAM,OAAO,oBAAoB;AACvC,QAAM,aAAa,KAAK,MAAM,eAAe,GAAG;AAChD,QAAM,cAAc,KAAK,MAAM,gBAAgB,GAAG;AAElD,MAAI,OAAO,UAAU,cAAc,OAAO,WAAW,aAAa;AAChE,WAAO,QAAQ;AACf,WAAO,SAAS;AAAA,EAClB;AAEA,QAAM,aAAa,MAAM,eAAe;AACxC,QAAM,cAAc,MAAM,gBAAgB;AAC1C,QAAM,EAAE,KAAK,IAAI,IAAI,iBAAiB,YAAY,IAAI;AAEtD,MAAI,aAAa,KAAK,GAAG,GAAG,KAAK,GAAG,CAAC;AACrC,MAAI,UAAU,GAAG,GAAG,cAAc,aAAa;AAC/C,MAAI;AAAA,IACF;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;;;ACnCO,SAAS,cACd,QACA,KACA,YACA,MACA,MACA,OACA,QACM;AACN,QAAM,EAAE,GAAG,EAAE,IAAI,6BAA6B,YAAY,MAAM,IAAI;AAEpE,SAAO,MAAM,kBAAkB,QAAQ,GAAG;AAC1C,SAAO,MAAM,mBAAmB;AAChC,SAAO,MAAM,iBAAiB,GAAG,OAAO,GAAG,KAAK,OAAO,GAAG;AAC1D,SAAO,MAAM,qBAAqB,GAAG,CAAC,KAAK,CAAC;AAC5C,SAAO,MAAM,QAAQ,YAAY,KAAK;AACtC,SAAO,MAAM,SAAS,YAAY,MAAM;AACxC,SAAO,MAAM,UAAU;AACzB;AAEO,SAAS,iBAAiB,QAAiC;AAChE,SAAO,MAAM,kBAAkB;AACjC;;;ACfO,IAAM,iBAAN,MAAqB;AAAA,EAc1B,YAAY,SAAiC;AAZ7C,SAAQ,eAAe;AACvB,SAAQ,YAAY;AACpB,SAAQ,WAAW;AACnB,SAAQ,QAAuB;AAC/B,SAAQ,gBAAgB;AACxB,SAAQ,kBAAkB;AAC1B,SAAQ,QAAiC;AACzC,SAAQ,SAAiD;AACzD,SAAQ,YAAY,oBAAI,IAAmB;AAC3C,SAAQ,YAAY;AACpB,SAAQ,iBAAwC;AA8IhD,SAAQ,OAAO,CAAC,cAA4B;AAC1C,UAAI,CAAC,KAAK,aAAa,KAAK,UAAW;AAEvC,UAAI,KAAK,kBAAkB,GAAG;AAC5B,aAAK,gBAAgB;AAAA,MACvB;AAEA,YAAM,QAAQ,YAAY,KAAK;AAC/B,WAAK,gBAAgB;AACrB,WAAK,mBAAmB;AAExB,YAAM,gBAAgB,MAAO,KAAK,QAAQ;AAC1C,aAAO,KAAK,mBAAmB,eAAe;AAC5C,aAAK,mBAAmB;AACxB,aAAK,aAAa;AAAA,MACpB;AAEA,WAAK,QAAQ,sBAAsB,KAAK,IAAI;AAAA,IAC9C;AA7JE,SAAK,UAAU;AAAA,MACb,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AACA,SAAK,UAAU;AAAA,EACjB;AAAA,EAEA,OAAO,QAA+C;AACpD,SAAK,SAAS;AACd,SAAK,uBAAuB;AAC5B,SAAK,oBAAoB;AACzB,QAAI,KAAK,UAAU;AACjB,WAAK,OAAO;AAAA,IACd;AACA,QAAI,KAAK,QAAQ,UAAU;AACzB,WAAK,KAAK;AAAA,IACZ;AAAA,EACF;AAAA,EAEA,OAAa;AACX,QAAI,KAAK,aAAa,KAAK,UAAW;AACtC,SAAK,YAAY;AACjB,SAAK,gBAAgB;AACrB,SAAK,kBAAkB;AACvB,SAAK,QAAQ,sBAAsB,KAAK,IAAI;AAC5C,SAAK,OAAO;AAAA,EACd;AAAA,EAEA,QAAc;AACZ,QAAI,CAAC,KAAK,UAAW;AACrB,SAAK,YAAY;AACjB,QAAI,KAAK,UAAU,MAAM;AACvB,2BAAqB,KAAK,KAAK;AAC/B,WAAK,QAAQ;AAAA,IACf;AACA,SAAK,OAAO;AAAA,EACd;AAAA,EAEA,OAAa;AACX,SAAK,MAAM;AACX,SAAK,eAAe;AACpB,SAAK,OAAO;AACZ,SAAK,OAAO;AAAA,EACd;AAAA,EAEA,UAAU,OAAqB;AAC7B,UAAM,QAAQ,KAAK,eAAe;AAClC,SAAK,eAAe,KAAK,IAAI,GAAG,KAAK,IAAI,OAAO,QAAQ,CAAC,CAAC;AAC1D,SAAK,OAAO;AACZ,SAAK,QAAQ,gBAAgB,KAAK,YAAY;AAC9C,SAAK,OAAO;AAAA,EACd;AAAA,EAEA,WAAiC;AAC/B,WAAO;AAAA,MACL,cAAc,KAAK;AAAA,MACnB,aAAa,KAAK,eAAe;AAAA,MACjC,WAAW,KAAK;AAAA,MAChB,UAAU,KAAK;AAAA,IACjB;AAAA,EACF;AAAA,EAEA,UAAU,UAAqC;AAC7C,SAAK,UAAU,IAAI,QAAQ;AAC3B,aAAS,KAAK,SAAS,CAAC;AACxB,WAAO,MAAM,KAAK,UAAU,OAAO,QAAQ;AAAA,EAC7C;AAAA,EAEA,cAAc,SAAgD;AAC5D,UAAM,UAAU,KAAK,QAAQ;AAC7B,UAAM,UAAU,KAAK,QAAQ;AAC7B,UAAM,eAAe,KAAK,QAAQ;AAClC,SAAK,UAAU,EAAE,GAAG,KAAK,SAAS,GAAG,QAAQ;AAE7C,QAAI,QAAQ,QAAQ,UAAa,QAAQ,QAAQ,SAAS;AACxD,WAAK,UAAU;AAAA,IACjB,WAAW,KAAK,UAAU;AACxB,WAAK,OAAO;AAAA,IACd;AAEA,QAAI,QAAQ,QAAQ,UAAa,QAAQ,QAAQ,SAAS;AACxD,WAAK,kBAAkB;AAAA,IACzB;AAEA,QAAI,QAAQ,UAAU,UAAa,QAAQ,WAAW,QAAW;AAC/D,WAAK,uBAAuB;AAAA,IAC9B;AAEA,QAAI,QAAQ,aAAa,UAAa,QAAQ,aAAa,cAAc;AACvE,WAAK,oBAAoB;AAAA,IAC3B;AAAA,EACF;AAAA,EAEA,UAAgB;AACd,SAAK,YAAY;AACjB,SAAK,MAAM;AACX,SAAK,gBAAgB,WAAW;AAChC,SAAK,iBAAiB;AACtB,SAAK,UAAU,MAAM;AACrB,QAAI,KAAK,UAAU,KAAK,QAAQ,aAAa,OAAO;AAClD,uBAAiB,KAAK,MAAM;AAAA,IAC9B;AACA,SAAK,SAAS;AACd,SAAK,QAAQ;AAAA,EACf;AAAA,EAEQ,iBAAyB;AAC/B,WAAO,eAAe,KAAK,QAAQ,MAAM,KAAK,QAAQ,IAAI;AAAA,EAC5D;AAAA,EAEQ,YAAkB;AACxB,SAAK,WAAW;AAChB,UAAM,MAAM,IAAI,MAAM;AACtB,QAAI,cAAc;AAClB,QAAI,SAAS,MAAM;AACjB,UAAI,KAAK,UAAW;AACpB,WAAK,QAAQ;AACb,WAAK,WAAW;AAEhB,UAAI,CAAC,KAAK,QAAQ,SAAS,CAAC,KAAK,QAAQ,QAAQ;AAC/C,cAAM,aAAa,IAAI,eAAe,KAAK,QAAQ;AACnD,cAAM,cAAc,IAAI,gBAAgB,KAAK,QAAQ;AACrD,aAAK,QAAQ,QAAQ;AACrB,aAAK,QAAQ,SAAS;AAAA,MACxB;AAEA,WAAK,OAAO;AACZ,WAAK,OAAO;AAEZ,UAAI,KAAK,QAAQ,YAAY,KAAK,QAAQ;AACxC,aAAK,KAAK;AAAA,MACZ;AAAA,IACF;AACA,QAAI,UAAU,MAAM;AAClB,cAAQ,MAAM,0CAA0C,KAAK,QAAQ,GAAG,EAAE;AAAA,IAC5E;AACA,QAAI,MAAM,KAAK,QAAQ;AAAA,EACzB;AAAA,EAsBQ,eAAqB;AAC3B,UAAM,QAAQ,KAAK,eAAe;AAClC,UAAM,OAAO,KAAK,eAAe;AAEjC,QAAI,QAAQ,OAAO;AACjB,UAAI,KAAK,QAAQ,MAAM;AACrB,aAAK,eAAe;AAAA,MACtB,OAAO;AACL,aAAK,eAAe,QAAQ;AAC5B,aAAK,MAAM;AACX,aAAK,QAAQ,aAAa;AAAA,MAC5B;AAAA,IACF,OAAO;AACL,WAAK,eAAe;AAAA,IACtB;AAEA,SAAK,OAAO;AACZ,SAAK,QAAQ,gBAAgB,KAAK,YAAY;AAC9C,SAAK,OAAO;AAAA,EACd;AAAA,EAEQ,SAAe;AACrB,QAAI,CAAC,KAAK,UAAU,CAAC,KAAK,SAAU;AAEpC,UAAM,EAAE,KAAK,MAAM,MAAM,OAAO,QAAQ,SAAS,IAAI,KAAK;AAE1D,QAAI,aAAa,YAAY,KAAK,kBAAkB,qBAAqB,KAAK,OAAO;AACnF,sBAAgB,KAAK,QAAQ,KAAK,OAAO,KAAK,cAAc,MAAM,IAAI;AAAA,IACxE,WAAW,aAAa,SAAS,KAAK,kBAAkB,aAAa;AACnE,oBAAc,KAAK,QAAQ,KAAK,KAAK,cAAc,MAAM,MAAM,OAAO,MAAM;AAAA,IAC9E;AAAA,EACF;AAAA,EAEQ,SAAe;AACrB,UAAM,QAAQ,KAAK,SAAS;AAC5B,SAAK,UAAU,QAAQ,CAAC,aAAa,SAAS,KAAK,CAAC;AAAA,EACtD;AAAA,EAEQ,yBAA+B;AACrC,QAAI,KAAK,QAAQ,aAAa,YAAY,EAAE,KAAK,kBAAkB,oBAAoB;AACrF;AAAA,IACF;AACA,SAAK,OAAO,MAAM,QAAQ,YAAY,KAAK,QAAQ,KAAK;AACxD,SAAK,OAAO,MAAM,SAAS,YAAY,KAAK,QAAQ,MAAM;AAAA,EAC5D;AAAA,EAEQ,sBAA4B;AAClC,SAAK,gBAAgB,WAAW;AAChC,SAAK,iBAAiB;AAEtB,QACE,KAAK,QAAQ,aAAa,YAC1B,EAAE,KAAK,kBAAkB,sBACzB,OAAO,mBAAmB,aAC1B;AACA;AAAA,IACF;AAEA,SAAK,iBAAiB,IAAI,eAAe,MAAM;AAC7C,UAAI,KAAK,UAAU;AACjB,aAAK,OAAO;AAAA,MACd;AAAA,IACF,CAAC;AACD,SAAK,eAAe,QAAQ,KAAK,MAAM;AAAA,EACzC;AACF;","names":[]}

package/dist/index.d.cts

@@ -1,4 +1,6 @@
 type RendererMode = 'css' | 'canvas';
+/** CSS length (e.g. `128`, `'8rem'`, `'50%'`, `'10vw'`) */
+type SpriteSize = number | string;
 interface SpriteAnimationOptions {
     /** Sprite sheet image URL (PNG, WebP, etc.) */
     src: string;
@@ -10,10 +12,10 @@ interface SpriteAnimationOptions {
     fps?: number;
     /** Whether to loop the animation (default: true) */
     loop?: boolean;
-    /** Display width in pixels */
-    width?: number;
-    /** Display height in pixels */
-    height?: number;
+    /** Display width — number (px) or any CSS length (`rem`, `em`, `%`, `vw`, etc.) */
+    width?: SpriteSize;
+    /** Display height — number (px) or any CSS length (`rem`, `em`, `%`, `vw`, etc.) */
+    height?: SpriteSize;
     /** Start playing automatically (default: true) */
     autoPlay?: boolean;
     /** Rendering mode: CSS background-position or Canvas (default: 'css') */
@@ -56,6 +58,7 @@ declare class SpriteAnimator {
     private target;
     private listeners;
     private destroyed;
+    private resizeObserver;
     constructor(options: SpriteAnimationOptions);
     attach(target: HTMLElement | HTMLCanvasElement): void;
     play(): void;
@@ -72,8 +75,12 @@ declare class SpriteAnimator {
     private advanceFrame;
     private render;
     private notify;
+    private applyCanvasDisplaySize;
+    private setupResizeObserver;
 }
 
+/** Converts a SpriteSize to a CSS length string. Numbers become `px`; strings pass through. */
+declare function toCssLength(size: SpriteSize): string;
 declare function getTotalFrames(rows: number, cols: number): number;
 declare function getFramePosition(frameIndex: number, cols: number): FramePosition;
 declare function getBackgroundPositionPercent(frameIndex: number, rows: number, cols: number): {
@@ -81,4 +88,4 @@ declare function getBackgroundPositionPercent(frameIndex: number, rows: number,
     y: number;
 };
 
-export { type FramePosition, type RendererMode, SPRITE_ANIMATION_DEFAULTS, type SpriteAnimationOptions, type SpriteAnimationState, SpriteAnimator, getBackgroundPositionPercent, getFramePosition, getTotalFrames };
+export { type FramePosition, type RendererMode, SPRITE_ANIMATION_DEFAULTS, type SpriteAnimationOptions, type SpriteAnimationState, SpriteAnimator, type SpriteSize, getBackgroundPositionPercent, getFramePosition, getTotalFrames, toCssLength };

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 type RendererMode = 'css' | 'canvas';
+/** CSS length (e.g. `128`, `'8rem'`, `'50%'`, `'10vw'`) */
+type SpriteSize = number | string;
 interface SpriteAnimationOptions {
     /** Sprite sheet image URL (PNG, WebP, etc.) */
     src: string;
@@ -10,10 +12,10 @@ interface SpriteAnimationOptions {
     fps?: number;
     /** Whether to loop the animation (default: true) */
     loop?: boolean;
-    /** Display width in pixels */
-    width?: number;
-    /** Display height in pixels */
-    height?: number;
+    /** Display width — number (px) or any CSS length (`rem`, `em`, `%`, `vw`, etc.) */
+    width?: SpriteSize;
+    /** Display height — number (px) or any CSS length (`rem`, `em`, `%`, `vw`, etc.) */
+    height?: SpriteSize;
     /** Start playing automatically (default: true) */
     autoPlay?: boolean;
     /** Rendering mode: CSS background-position or Canvas (default: 'css') */
@@ -56,6 +58,7 @@ declare class SpriteAnimator {
     private target;
     private listeners;
     private destroyed;
+    private resizeObserver;
     constructor(options: SpriteAnimationOptions);
     attach(target: HTMLElement | HTMLCanvasElement): void;
     play(): void;
@@ -72,8 +75,12 @@ declare class SpriteAnimator {
     private advanceFrame;
     private render;
     private notify;
+    private applyCanvasDisplaySize;
+    private setupResizeObserver;
 }
 
+/** Converts a SpriteSize to a CSS length string. Numbers become `px`; strings pass through. */
+declare function toCssLength(size: SpriteSize): string;
 declare function getTotalFrames(rows: number, cols: number): number;
 declare function getFramePosition(frameIndex: number, cols: number): FramePosition;
 declare function getBackgroundPositionPercent(frameIndex: number, rows: number, cols: number): {
@@ -81,4 +88,4 @@ declare function getBackgroundPositionPercent(frameIndex: number, rows: number,
     y: number;
 };
 
-export { type FramePosition, type RendererMode, SPRITE_ANIMATION_DEFAULTS, type SpriteAnimationOptions, type SpriteAnimationState, SpriteAnimator, getBackgroundPositionPercent, getFramePosition, getTotalFrames };
+export { type FramePosition, type RendererMode, SPRITE_ANIMATION_DEFAULTS, type SpriteAnimationOptions, type SpriteAnimationState, SpriteAnimator, type SpriteSize, getBackgroundPositionPercent, getFramePosition, getTotalFrames, toCssLength };

package/dist/index.js

@@ -9,6 +9,9 @@ var SPRITE_ANIMATION_DEFAULTS = {
 };
 
 // src/core/utils.ts
+function toCssLength(size) {
+  return typeof size === "number" ? `${size}px` : size;
+}
 function getTotalFrames(rows, cols) {
   return rows * cols;
 }
@@ -26,15 +29,24 @@ function getBackgroundPositionPercent(frameIndex, rows, cols) {
 }
 
 // src/core/canvas-renderer.ts
-function drawCanvasFrame(canvas, image, frameIndex, rows, cols, width, height) {
+function drawCanvasFrame(canvas, image, frameIndex, rows, cols) {
   const ctx = canvas.getContext("2d");
   if (!ctx) return;
+  const displayWidth = canvas.clientWidth;
+  const displayHeight = canvas.clientHeight;
+  if (displayWidth === 0 || displayHeight === 0) return;
+  const dpr = window.devicePixelRatio || 1;
+  const pixelWidth = Math.round(displayWidth * dpr);
+  const pixelHeight = Math.round(displayHeight * dpr);
+  if (canvas.width !== pixelWidth || canvas.height !== pixelHeight) {
+    canvas.width = pixelWidth;
+    canvas.height = pixelHeight;
+  }
   const frameWidth = image.naturalWidth / cols;
   const frameHeight = image.naturalHeight / rows;
   const { row, col } = getFramePosition(frameIndex, cols);
-  canvas.width = width;
-  canvas.height = height;
-  ctx.clearRect(0, 0, width, height);
+  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+  ctx.clearRect(0, 0, displayWidth, displayHeight);
   ctx.drawImage(
     image,
     col * frameWidth,
@@ -43,8 +55,8 @@ function drawCanvasFrame(canvas, image, frameIndex, rows, cols, width, height) {
     frameHeight,
     0,
     0,
-    width,
-    height
+    displayWidth,
+    displayHeight
   );
 }
 
@@ -55,8 +67,8 @@ function applyCssFrame(target, src, frameIndex, rows, cols, width, height) {
   target.style.backgroundRepeat = "no-repeat";
   target.style.backgroundSize = `${cols * 100}% ${rows * 100}%`;
   target.style.backgroundPosition = `${x}% ${y}%`;
-  target.style.width = `${width}px`;
-  target.style.height = `${height}px`;
+  target.style.width = toCssLength(width);
+  target.style.height = toCssLength(height);
   target.style.display = "inline-block";
 }
 function resetCssRenderer(target) {
@@ -76,6 +88,7 @@ var SpriteAnimator = class {
     this.target = null;
     this.listeners = /* @__PURE__ */ new Set();
     this.destroyed = false;
+    this.resizeObserver = null;
     this.tick = (timestamp) => {
       if (!this.isPlaying || this.destroyed) return;
       if (this.lastTimestamp === 0) {
@@ -99,6 +112,8 @@ var SpriteAnimator = class {
   }
   attach(target) {
     this.target = target;
+    this.applyCanvasDisplaySize();
+    this.setupResizeObserver();
     if (this.isLoaded) {
       this.render();
     }
@@ -152,6 +167,7 @@ var SpriteAnimator = class {
   updateOptions(partial) {
     const prevSrc = this.options.src;
     const prevFps = this.options.fps;
+    const prevRenderer = this.options.renderer;
     this.options = { ...this.options, ...partial };
     if (partial.src !== void 0 && partial.src !== prevSrc) {
       this.loadImage();
@@ -161,10 +177,18 @@ var SpriteAnimator = class {
     if (partial.fps !== void 0 && partial.fps !== prevFps) {
       this.accumulatedTime = 0;
     }
+    if (partial.width !== void 0 || partial.height !== void 0) {
+      this.applyCanvasDisplaySize();
+    }
+    if (partial.renderer !== void 0 && partial.renderer !== prevRenderer) {
+      this.setupResizeObserver();
+    }
   }
   destroy() {
     this.destroyed = true;
     this.pause();
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = null;
     this.listeners.clear();
     if (this.target && this.options.renderer === "css") {
       resetCssRenderer(this.target);
@@ -222,7 +246,7 @@ var SpriteAnimator = class {
     if (!this.target || !this.isLoaded) return;
     const { src, rows, cols, width, height, renderer } = this.options;
     if (renderer === "canvas" && this.target instanceof HTMLCanvasElement && this.image) {
-      drawCanvasFrame(this.target, this.image, this.currentFrame, rows, cols, width, height);
+      drawCanvasFrame(this.target, this.image, this.currentFrame, rows, cols);
     } else if (renderer === "css" && this.target instanceof HTMLElement) {
       applyCssFrame(this.target, src, this.currentFrame, rows, cols, width, height);
     }
@@ -231,12 +255,33 @@ var SpriteAnimator = class {
     const state = this.getState();
     this.listeners.forEach((listener) => listener(state));
   }
+  applyCanvasDisplaySize() {
+    if (this.options.renderer !== "canvas" || !(this.target instanceof HTMLCanvasElement)) {
+      return;
+    }
+    this.target.style.width = toCssLength(this.options.width);
+    this.target.style.height = toCssLength(this.options.height);
+  }
+  setupResizeObserver() {
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = null;
+    if (this.options.renderer !== "canvas" || !(this.target instanceof HTMLCanvasElement) || typeof ResizeObserver === "undefined") {
+      return;
+    }
+    this.resizeObserver = new ResizeObserver(() => {
+      if (this.isLoaded) {
+        this.render();
+      }
+    });
+    this.resizeObserver.observe(this.target);
+  }
 };
 export {
   SPRITE_ANIMATION_DEFAULTS,
   SpriteAnimator,
   getBackgroundPositionPercent,
   getFramePosition,
-  getTotalFrames
+  getTotalFrames,
+  toCssLength
 };
 //# sourceMappingURL=index.js.map