| assets | ||
| docs/plans | ||
| public | ||
| src | ||
| .gitignore | ||
| bun.lock | ||
| CLAUDE.md | ||
| package.json | ||
| README.md | ||
| tsconfig.json | ||
tiny-sprites
A tiny CSS sprite animation component for Hono JSX. Pure CSS animations with zero runtime JavaScript.
Installation
bun add tiny-sprites
Usage
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
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.
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.