chore: tiny-sprites v1 complete

- Format code with prettier
- Add .gitignore

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

.gitignore

@@ -0,0 +1,34 @@
+# dependencies (bun install)
+node_modules
+
+# output
+out
+dist
+*.tgz
+
+# code coverage
+coverage
+*.lcov
+
+# logs
+logs
+_.log
+report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# caches
+.eslintcache
+.cache
+*.tsbuildinfo
+
+# IntelliJ based IDEs
+.idea
+
+# Finder (MacOS) folder config
+.DS_Store

package.json

@@ -16,5 +16,9 @@
   },
   "devDependencies": {
     "bun-types": "latest"
+  },
+  "prettier": {
+    "semi": false,
+    "printWidth": 100
   }
 }

src/sprite.tsx

@@ -10,17 +10,19 @@ type SpriteProps = {
   playing?: boolean
 }
 
-export const Sprite = ({
+export const Sprite = (props: SpriteProps) => {
-  src,
+  const {
-  width,
+    src,
-  height,
+    width,
-  frames,
+    height,
-  frameDuration,
+    frames,
-  columns,
+    frameDuration,
-  class: className,
+    columns,
-  style,
+    class: className,
-  playing = true,
+    style,
-}: SpriteProps) => {
+    playing = true,
+  } = props
+
   const isGrid = columns !== undefined
   const rows = isGrid ? Math.ceil(frames / columns!) : 1
   const cols = isGrid ? columns! : frames
@@ -29,7 +31,9 @@ export const Sprite = ({
   const sheetHeight = rows * height
   const totalDuration = frames * frameDuration
 
-  const keyframeId = `sprite-${Bun.hash(`${src}-${width}-${height}-${frames}-${frameDuration}-${columns}`).toString(36)}`
+  const keyframeId = `sprite-${Bun.hash(
+    `${src}-${width}-${height}-${frames}-${frameDuration}-${columns}`
+  ).toString(36)}`
 
   const keyframes = isGrid
     ? generateGridKeyframes(keyframeId, width, height, frames, columns!)
@@ -41,9 +45,11 @@ export const Sprite = ({
     `background-image:url('${src}')`,
     `background-size:${sheetWidth}px ${sheetHeight}px`,
     `animation:${keyframeId} ${totalDuration}ms steps(${frames}) infinite`,
-    playing ? '' : 'animation-play-state:paused',
+    playing ? "" : "animation-play-state:paused",
     style,
-  ].filter(Boolean).join(';')
+  ]
+    .filter(Boolean)
+    .join(";")
 
   return (
     <>
@@ -56,7 +62,13 @@ export const Sprite = ({
 const generateStripKeyframes = (id: string, sheetWidth: number): string =>
   `@keyframes ${id}{from{background-position:0 0}to{background-position:-${sheetWidth}px 0}}`
 
-const generateGridKeyframes = (id: string, width: number, height: number, frames: number, columns: number): string => {
+const generateGridKeyframes = (
+  id: string,
+  width: number,
+  height: number,
+  frames: number,
+  columns: number
+): string => {
   const steps: string[] = []
   for (let i = 0; i < frames; i++) {
     const col = i % columns
@@ -66,5 +78,5 @@ const generateGridKeyframes = (id: string, width: number, height: number, frames
     const percent = (i / frames) * 100
     steps.push(`${percent}%{background-position:${x}px ${y}px}`)
   }
-  return `@keyframes ${id}{${steps.join('')}}`
+  return `@keyframes ${id}{${steps.join("")}}`
 }