Corey Johnson
a8717733ba
- README: API docs, usage example, dev tool instructions - CLAUDE.md: architecture notes on Hono JSX, Pico CSS, implementation details - Image picker now uses Pico's <details> dropdown pattern 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
79 lines
1.9 KiB
Markdown
79 lines
1.9 KiB
Markdown
# 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.
|