{"id":26829634,"url":"https://github.com/ga1az/react-pixel-motion","last_synced_at":"2025-04-30T06:07:27.148Z","repository":{"id":282626130,"uuid":"949192682","full_name":"ga1az/react-pixel-motion","owner":"ga1az","description":"A lightweight React component for creating smooth, pixelated sprite animations. Perfect for games, retro-style interfaces, and pixel art animations.","archived":false,"fork":false,"pushed_at":"2025-03-27T22:07:36.000Z","size":821,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-30T06:07:25.825Z","etag":null,"topics":["pixel-animation","react","sprite-animation","spritesheet"],"latest_commit_sha":null,"homepage":"https://react-pixel-motion.ga1az.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ga1az.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-03-15T22:04:44.000Z","updated_at":"2025-03-27T22:07:37.000Z","dependencies_parsed_at":"2025-04-30T06:07:25.663Z","dependency_job_id":null,"html_url":"https://github.com/ga1az/react-pixel-motion","commit_stats":null,"previous_names":["ga1az/react-pixel-motion"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ga1az%2Freact-pixel-motion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ga1az%2Freact-pixel-motion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ga1az%2Freact-pixel-motion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ga1az%2Freact-pixel-motion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ga1az","download_url":"https://codeload.github.com/ga1az/react-pixel-motion/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251651231,"owners_count":21621715,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["pixel-animation","react","sprite-animation","spritesheet"],"created_at":"2025-03-30T13:17:58.866Z","updated_at":"2025-04-30T06:07:27.110Z","avatar_url":"https://github.com/ga1az.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Pixel Motion\n\nA 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](https://github.com/jcblw/react-sprite-animator).\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./src/assets/demo.gif\" alt=\"Demo\" width=\"50\" /\u003e\n\u003c/div\u003e\n\n\n## Features\n\n- 🎮 Simple API for sprite sheet animations\n- 🖼️ Support horizontal, vertical and grid sprite sheets\n- 🔄 Control over animation speed, scale, and direction\n- 📱 Responsive and lightweight\n\n## Sprite Sheet example supports\n\n\u003cdiv align=\"center\" style=\"display: flex; gap: 10px; justify-content: center; font-weight: bold;\"\u003e\n  \u003cdiv style=\"display: flex; flex-direction: column; align-items: center;\"\u003e\n    \u003cp\u003eSprite 1 row x 3 columns\u003c/p\u003e\n    \u003cimg src=\"./src/assets/guardbot1.svg\" alt=\"Sprite Sheet Example\" width=\"100\" height=\"100\" /\u003e\n  \u003c/div\u003e\n  \u003cdiv style=\"display: flex; flex-direction: column; align-items: center;\"\u003e\n    \u003cp\u003eSprite 1 rows x 1 columns\u003c/p\u003e\n    \u003cimg src=\"./src/assets/skeleton.png\" alt=\"Sprite Sheet Example\" width=\"100\" height=\"100\" /\u003e\n  \u003c/div\u003e\n  \u003cdiv style=\"display: flex; flex-direction: column; align-items: center;\"\u003e\n    \u003cp\u003eSprite 4 rows x 4 columns\u003c/p\u003e\n    \u003cimg src=\"./src/assets/warrior.png\" alt=\"Sprite Sheet Example\" width=\"100\" height=\"100\" /\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n## Installation\n\n```bash\n# Using npm\nnpm install @ga1az/react-pixel-motion\n\n# Using yarn\nyarn add @ga1az/react-pixel-motion\n\n# Using pnpm\npnpm add @ga1az/react-pixel-motion\n\n# Using bun\nbun add @ga1az/react-pixel-motion\n```\n\n## Usage\n\n```tsx\nimport { PixelMotion } from \"@ga1az/react-pixel-motion\";\nimport characterSprite from './assets/character.svg'; // or any other image format\nimport warrior from './assets/warrior.png';\n\nfunction App() {\n  return (\n    \u003cPixelMotion\n      sprite={characterSprite}\n      width={24} // Width of each frame in pixels (required)\n      height={31} // Height of each frame in pixels (required)\n      frameCount={3} // Total number of frames in the sprite sheet (optional)\n      fps={10} // Frames per second for the animation (optional)\n      scale={5} // Scale factor for the sprite (optional)\n      startFrame={0} // Initial frame to start the animation (optional)\n      loop={true} // Whether the animation should loop (optional)\n      shouldAnimate={true} // Whether the animation should play (optional)\n      direction=\"horizontal\" // Direction of the sprite sheet (optional)\n      imageRendering={false} // Whether the image should be rendered in pixelated mode (optional - default is true)\n      onAnimationEnd={() =\u003e console.log('Animation ended')} // Callback when animation ends (optional)\n      onAnimationStart={() =\u003e console.log('Animation started')} // Callback when animation starts (optional)\n    /\u003e\n    // Grid 4x4 example\n    \u003cPixelMotion\n      sprite={warrior}\n      width={30}\n      height={30}\n      scale={5}\n      fps={5}\n      shouldAnimate={true}\n      direction=\"grid\" // Direction of the sprite sheet (optional)\n      gridOptions={{\n        columns: 4, // Total columns in the sprite sheet (required)\n        rows: 4, // Total rows in the sprite sheet (required)\n        rowIndex: 0, // Index of the row to animate (optional)\n      }}\n      onFrameChange={(frameIndex) =\u003e console.log(`Current frame: ${frameIndex}`)} // Callback for each frame change (optional)\n    /\u003e\n\n    // Example with specific frame callback\n    \u003cPixelMotion\n      sprite={characterSprite}\n      width={24}\n      height={31}\n      frameCount={3}\n      fps={10}\n      scale={5}\n      shouldAnimate={true}\n      onSpecificFrame={{\n        frame: [1, 2], // Trigger on frames 1 and 2\n        callback: (frameIndex) =\u003e console.log(`Special action on frame ${frameIndex}`) // Callback for specific frames (optional)\n      }}\n    /\u003e\n  );\n}\n```\n\n## API\n\n### Props\n\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `sprite` | `string` \\| `StaticImageData` | *Required* | URL or import of the sprite sheet image |\n| `width` | `number` | *Required* | Width of each frame in pixels |\n| `height` | `number` | *Required* | Height of each frame in pixels |\n| `frameCount` | `number` | `1` | Total number of frames in the sprite sheet |\n| `fps` | `number` | `60` | Frames per second for the animation |\n| `direction` | `'horizontal'` \\| `'vertical'` \\| `'grid'` | `'horizontal'` | Direction of the sprite sheet |\n| `shouldAnimate` | `boolean` | `false` | Whether the animation should play |\n| `scale` | `number` | `1` | Scale factor for the sprite |\n| `startFrame` | `number` | `0` | Initial frame to start the animation |\n| `loop` | `boolean` | `true` | Whether the animation should loop |\n| `imageRendering` | `boolean` | `true` | Whether the image should be rendered in pixelated mode |\n| `gridOptions` | `object` | `undefined` | Options for grid sprite sheets (see Grid Options table) |\n| `onAnimationEnd` | `() =\u003e void` | `undefined` | Callback function when animation ends (only if loop=false) |\n| `onAnimationStart` | `() =\u003e void` | `undefined` | Callback function when animation starts |\n| `onFrameChange` | `(frameIndex: number) =\u003e void` | `undefined` | Callback function for each frame change |\n| `onSpecificFrame` | `{ frame: number \\| number[], callback: (frameIndex: number) =\u003e void }` | `undefined` | Callback for specific frames |\n\n### Grid Options\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `columns` | `number` | *Required* | Number of columns in the grid |\n| `rows` | `number` | *Required* | Number of rows in the grid |\n| `rowIndex` | `number` | `undefined` | Index of the row to animate (animate horizontally) |\n| `columnIndex` | `number` | `undefined` | Index of the column to animate (animate vertically) |\n| `gap` | `number` | `0` | Gap between frames in pixels |\n\n## Development\n\n```bash\nbun install\nbun run dev # to run the demo\nbun run build # to build the library\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fga1az%2Freact-pixel-motion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fga1az%2Freact-pixel-motion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fga1az%2Freact-pixel-motion/lists"}