Corey Johnson a8717733ba docs: add README and CLAUDE.md, use Pico dropdown for image picker

- 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>

2026-01-06 16:37:21 -08:00

1.9 KiB

Raw Permalink Blame History

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.

1.9 KiB Raw Permalink Blame History