@ga1az/react-pixel-motion v0.0.18

React Pixel Motion

A lightweight React component for creating smooth, pixelated sprite animations. Perfect for games, retro-style interfaces, and pixel art animations. Totally inspired by react-sprite-animation.

Features

• 🎮 Simple API for sprite sheet animations
• 🖼️ Support horizontal, vertical and grid sprite sheets
• 🔄 Control over animation speed, scale, and direction
• 📱 Responsive and lightweight

Sprite Sheet example supports

Installation

# Using npm
npm install @ga1az/react-pixel-motion

# Using yarn
yarn add @ga1az/react-pixel-motion

# Using pnpm
pnpm add @ga1az/react-pixel-motion

# Using bun
bun add @ga1az/react-pixel-motion

Usage

import { PixelMotion } from "@ga1az/react-pixel-motion";
import characterSprite from './assets/character.svg'; // or any other image format
import warrior from './assets/warrior.png';

function App() {
  return (
    <PixelMotion
      sprite={characterSprite}
      width={24} // Width of each frame in pixels (required)
      height={31} // Height of each frame in pixels (required)
      frameCount={3} // Total number of frames in the sprite sheet (optional)
      fps={10} // Frames per second for the animation (optional)
      scale={5} // Scale factor for the sprite (optional)
      startFrame={0} // Initial frame to start the animation (optional)
      loop={true} // Whether the animation should loop (optional)
      shouldAnimate={true} // Whether the animation should play (optional)
      direction="horizontal" // Direction of the sprite sheet (optional)
      imageRendering={false} // Whether the image should be rendered in pixelated mode (optional - default is true)
      onAnimationEnd={() => console.log('Animation ended')} // Callback when animation ends (optional)
      onAnimationStart={() => console.log('Animation started')} // Callback when animation starts (optional)
    />
    // Grid 4x4 example
    <PixelMotion
      sprite={warrior}
      width={30}
      height={30}
      scale={5}
      fps={5}
      shouldAnimate={true}
      direction="grid" // Direction of the sprite sheet (optional)
      gridOptions={{
        columns: 4, // Total columns in the sprite sheet (required)
        rows: 4, // Total rows in the sprite sheet (required)
        rowIndex: 0, // Index of the row to animate (optional)
      }}
      onFrameChange={(frameIndex) => console.log(`Current frame: ${frameIndex}`)} // Callback for each frame change (optional)
    />

    // Example with specific frame callback
    <PixelMotion
      sprite={characterSprite}
      width={24}
      height={31}
      frameCount={3}
      fps={10}
      scale={5}
      shouldAnimate={true}
      onSpecificFrame={{
        frame: [1, 2], // Trigger on frames 1 and 2
        callback: (frameIndex) => console.log(`Special action on frame ${frameIndex}`) // Callback for specific frames (optional)
      }}
    />
  );
}

API

Props

Grid Options

Development

bun install
bun run dev # to run the demo
bun run build # to build the library