Sprite Animation

A sprite animation component that animates through frames from a sprite sheet using CSS background-image, background-size, and background-position.

// Code for sprite-animation/basic

// Code for sprite-animation/basic

Usage

import { SpriteAnimation } from "@/components/pluto-ui/sprite-animation"

<SpriteAnimation
  src="/assets/an1.png"
  totalFrames={50}
  rows={5}
  columns={10}
  loop={true}
  fps={22}
  width={200}
  height={200}
/>

Props

Prop	Type	Default	Description
`src`	`string`	Required	Path to the sprite sheet image
`totalFrames`	`number`	Required	Total number of frames in the animation
`rows`	`number`	Required	Number of rows in the sprite sheet grid
`columns`	`number`	Required	Number of columns in the sprite sheet grid
`loop`	`boolean`	`true`	Whether the animation should loop continuously
`fps`	`number`	`22`	Frames per second for the animation
`width`	`number \| string`	`"100%"`	Width of the animation container
`height`	`number \| string`	`"100%"`	Height of the animation container
`className`	`string`	-	Additional CSS classes
`onAnimationEnd`	`() => void`	-	Callback function called when a non-looping animation completes

The component uses CSS background-image, background-size, and background-position to display individual frames from a sprite sheet. The sprite sheet is expected to be arranged in a grid layout with frames reading left-to-right, top-to-bottom.

Sprite Sheet Layout

For a sprite sheet with 50 frames, 5 rows, and 10 columns:

Row 1: Frames 0-9
Row 2: Frames 10-19
Row 3: Frames 20-29
Row 4: Frames 30-39
Row 5: Frames 40-49

The component automatically calculates the correct frame position based on the current frame index, row, and column values.

Examples

Basic Animation

// Code for sprite-animation/basic

// Code for sprite-animation/basic

Non-Looping Animation

// Code for sprite-animation/non-looping

// Code for sprite-animation/non-looping

Custom FPS

// Code for sprite-animation/custom-fps

// Code for sprite-animation/custom-fps