# 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 (
)
}
```
## API
### ``
Renders a global `@keyframes` rule. Include once in your ``.
### ``
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 `` code for you.