# tiny-sprites

A tiny CSS sprite animation component for Hono JSX. Pure CSS animations with zero runtime JavaScript.

## Installation

```bash
bun add tiny-sprites
```

## Usage

```tsx
import { Sprite, SpriteStyles } from "tiny-sprites"

export default function Page() {
  return (
    <html>
      <head>
        <SpriteStyles />
      </head>
      <body>
        <Sprite
          src="/sprites/player.png"
          frames={4}
          frameDuration={100}
          sheetWidth={128}
          sheetHeight={32}
        />
      </body>
    </html>
  )
}
```

## API

### `<SpriteStyles />`

Renders a global `@keyframes` rule. Include once in your `<head>`.

### `<Sprite />`

Renders an animated sprite.

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `src` | `string` | Yes | | URL to the spritesheet image |
| `frames` | `number` | Yes | | Number of frames in the animation |
| `frameDuration` | `number` | Yes | | Duration of each frame in milliseconds |
| `sheetWidth` | `number` | Yes | | Width of the spritesheet in pixels |
| `sheetHeight` | `number` | Yes | | Height of the spritesheet in pixels |
| `crop` | `Crop` | No | | Crop each frame to a smaller region |
| `scale` | `number` | No | `1` | Scale factor for rendering |
| `class` | `string` | No | | CSS class name |
| `style` | `string` | No | | Additional inline styles |
| `playing` | `boolean` | No | `true` | Whether the animation is playing |

#### Crop

```ts
type Crop = {
  x: number      // X offset within each frame
  y: number      // Y offset within each frame
  width: number  // Cropped width
  height: number // Cropped height
}
```

## Dev Tool

A dev server is included to help tune sprite animations and auto-detect frame counts and crop bounds.

```bash
bunx tiny-sprites ./path/to/assets
```

Then open http://localhost:3000 to select spritesheets and configure animations. The tool generates the `<Sprite>` code for you.
