png-sequence-player v1.0.1

PNG Sequence Player

A lightweight React component for playing PNG sequences like a video using a canvas. Supports transparency and custom FPS.

🚀 Installation

npm install png-sequence-player

📖 Usage

🧩 Basic Example:

import { PNGSequence } from 'png-sequence-player';

const MyComponent = () => {
  const images = Array.from({ length: 420 }, (_, i) =>
    `/path-to-images/${String(i + 1).padStart(4, '0')}.png`
  );

  return <PNGSequence images={images} width={800} height={600} fps={30} />;
};

🔧 Props

🛠️ Generating Image Paths:

Use the helper to generate zero-padded file names:

import { generateFileNames } from 'png-sequence-player';

const images = generateFileNames('/path-to-images', 420);

✅ Example Output:

• /path-to-images/0001.png
• /path-to-images/0002.png
• /path-to-images/0420.png

👨‍💻 Author

Created by Manav Oza
GitHub

📄 License

MIT