# tiny-sprites See [README.md](./README.md) for the API and usage documentation. ## Architecture ### Hono JSX (not React) This project uses Hono's JSX implementation, not React. Key differences: - **Server-side**: `hono/jsx` for the Sprite component (renders to HTML strings) - **Client-side**: `hono/jsx/dom` for the dev tool UI (renders to DOM) - **No hooks**: The Sprite component is pure server-side JSX with zero client JavaScript. No `useState`, no `useEffect`. The dev tool uses vanilla JS with a simple mutable `state` object and manual DOM updates via `render()` calls. ### Dev Tool Styling The dev tool uses [Pico CSS](https://picocss.com) for styling: - Classless styling - semantic HTML gets styled automatically - `

` for the image picker (native open/close, no JS needed) - CSS variables like `var(--pico-primary-background)` for theming ### Interesting Implementation Details **CSS Variables in @keyframes**: Instead of generating unique keyframes per sprite, we define one global keyframe that uses CSS custom properties: ```css @keyframes sprite { from { background-position: var(--x) var(--y) } to { background-position: var(--ex) var(--y) } } ``` Each sprite just sets `--x`, `--y`, `--ex` as inline styles. This avoids `dangerouslySetInnerHTML` entirely. **Frame Detection Algorithm**: The analyzer (`src/dev/analyze.ts`) scans pixel columns to find content regions. It requires a minimum 10px gap between regions to count as separate frames - this handles sprites that have internal empty columns within a frame. **Crop Calculation**: For each frame, we find the bounding box of non-transparent pixels, then union all frames' bounds. This gives a consistent crop that works across all animation frames without the sprite "jumping". **Canvas Pixel Analysis**: We draw the image to a canvas and use `getImageData()` to read pixel alpha values. The alpha byte is at index `(y * width + x) * 4 + 3` in the flat pixel array. --- Default to using Bun instead of Node.js. - Use `bun ` instead of `node ` or `ts-node ` - Use `bun test` instead of `jest` or `vitest` - Use `bun build ` instead of `webpack` or `esbuild` - Use `bun install` instead of `npm install` or `yarn install` or `pnpm install` - Use `bun run ``` With the following `frontend.tsx`: ```tsx#frontend.tsx import React from "react"; import { createRoot } from "react-dom/client"; // import .css files directly and it works import './index.css'; const root = createRoot(document.body); export default function Frontend() { return

Hello, world!

; } root.render(); ``` Then, run index.ts ```sh bun --hot ./index.ts ``` For more information, read the Bun API docs in `node_modules/bun-types/docs/**.mdx`.