Spritesheet Sequencer

Component 11

About

A component that animates a squared grid-based spritesheet image using the Web Animations API, playing back stepped frames like a coin spin or pixel-art sprite loop.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Spritesheet Sequencer to your project and fits it to your theme.

Code

How Spritesheet Sequencer is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { SpritesheetSequencer } from "@/components/ui/spritesheet-sequencer";

export default function SpritesheetSequencerDemo() {
  return (
    <div className="flex h-screen w-full items-center justify-center bg-background">
      <div className="size-24">
        <SpritesheetSequencer
          src="https://cdn.21st.dev/assets/localized/a83436834b75eab4ae52f0e0b46bb7a07bae9dadfe7e1b7f9148cf0c6a03d3c1.png"
          frameCount={3}
          frameDuration={150}
          className="[image-rendering:pixelated]"
        />
      </div>
    </div>
  );
}