How to Use Sprite Sheets

A sprite sheet is like a comic strip or flip book - it contains multiple frames of an animation arranged in a grid. Instead of having separate image files for each frame, you put them all together in one image. This makes it easier to load and animate characters in games and websites.

There are two main ways to animate sprite sheets: CSS and JavaScript. Both work by showing one frame at a time, but JavaScript gives you more control.

.sprite-animation {
  width: 64px;
  height: 64px;
  background-image: url('your-sprite-sheet.png');
  animation: play 1s steps(9) infinite;
}

@keyframes play {
  0% { background-position: 0 0; }
  100% { background-position: -576px 0; }
}

function SpriteAnimation({ src, size = 64, speed = 150, gridSize = 3 }) {
  const [currentFrame, setCurrentFrame] = useState(0)
  const totalFrames = gridSize * gridSize

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentFrame((prev) => (prev + 1) % totalFrames)
    }, speed)
    return () => clearInterval(interval)
  }, [speed, totalFrames])

  const row = Math.floor(currentFrame / gridSize)
  const col = currentFrame % gridSize
  
  return (
    <div style={{
      width: size,
      height: size,
      backgroundImage: `url(${src})`,
      backgroundSize: `${size * gridSize}px ${size * gridSize}px`,
      backgroundPosition: `-${col * size}px -${row * size}px`
    }} />
  )
}

Here are actual sprite sheets created with our AI generator. Different grid sizes create different animation styles - from simple 2x2 blinking to complex 3x3 movements!

Blinking Blue Eye

Full Sprite Sheet

Animated Result

JavaScript: setCurrentFrame((prev) => (prev + 1) % 4)

Bouncing Ball

Full Sprite Sheet

Animated Result

JavaScript: setCurrentFrame((prev) => (prev + 1) % 9)

Happy Bird

Full Sprite Sheet

Animated Result

JavaScript: setCurrentFrame((prev) => (prev + 1) % 9)

Neon Star

Full Sprite Sheet

Animated Result

JavaScript: setCurrentFrame((prev) => (prev + 1) % 9)

Smiling Emoji

Full Sprite Sheet

Animated Result

JavaScript: setCurrentFrame((prev) => (prev + 1) % 9)

function SpriteAnimation({ src, size = 64, speed = 150 }) {
  const [currentFrame, setCurrentFrame] = useState(0)

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentFrame((prev) => (prev + 1) % 9) // 9 frames
    }, speed)

    return () => clearInterval(interval)
  }, [speed])

  // Calculate frame position (3x3 grid)
  const row = Math.floor(currentFrame / 3)
  const col = currentFrame % 3
  
  return (
    <div
      style={{
        width: size,
        height: size,
        backgroundImage: `url(${src})`,
        backgroundSize: `${size * 3}px ${size * 3}px`,
        backgroundPosition: `-${col * size}px -${row * size}px`,
      }}
    />
  )
}