[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-81452":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":15,"stars7d":16,"stars30d":16,"stars90d":15,"forks30d":15,"starsTrendScore":15,"compositeScore":17,"rankGlobal":10,"rankLanguage":10,"license":18,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":21,"topics":22,"createdAt":10,"pushedAt":10,"updatedAt":23,"readmeContent":24,"aiSummary":25,"trendingCount":15,"starSnapshotCount":15,"syncStatus":13,"lastSyncTime":26,"discoverSource":27},81452,"codex-pets-react","backnotprop\u002Fcodex-pets-react","backnotprop","Declarative React wrapper for Codex pet spritesheets","https:\u002F\u002Fbacknotprop.github.io\u002Fcodex-pets-react\u002F",null,"TypeScript",33,2,32,0,1,42.03,"MIT License",false,"main",true,[],"2026-06-12 04:01:33","# Codex Pets React\n\nDeclarative React components and state helpers for Codex pet spritesheets.\n\nBrought to you by [Plannotator](https:\u002F\u002Fgithub.com\u002Fbacknotprop\u002Fplannotator), the review surface for agent work: use it before an agent starts to sharpen plans, and after an agent finishes to review code.\n\nThe package includes:\n\n- `SpriteAnimator` for atlas row\u002Fframe playback.\n- `PetWidget` for fixed-position rendering, dragging, pinning, and animation completion events.\n- `petReducer` and `usePetController` for state-driven app integration.\n- A shared `codexPetAtlas` and `CodexPetAnimationName` contract for Codex pet spritesheets.\n\n## Install\n\n```bash\nnpm install codex-pets-react\n```\n\n## Example App\n\nThe plannotator pet playground lives in `examples\u002Fplannotator-pet`.\n\n```bash\nnpm install\nnpm run dev\n```\n\nThe example loads Tater from `\u002Fpets\u002Ftater\u002Fspritesheet.webp`, exposes animation actions, screen pinning, dragging, a simulation toggle, automatic waiting, frame pausing, nudging, scaling, and a live state\u002Fevent view.\n\n## Importing Codex Pets\n\nCodex pets live on your machine under:\n\n```text\n~\u002F.codex\u002Fpets\u002F\u003Cpet-id>\u002F\n├── pet.json\n└── spritesheet.webp\n```\n\nFor example, the included playground uses:\n\n```text\n\u002FUsers\u002Framos\u002F.codex\u002Fpets\u002Ftater\u002F\n├── pet.json\n└── spritesheet.webp\n```\n\nTo use one in a web app, copy the pet folder into your app's public assets and pass the public spritesheet URL to `PetWidget`:\n\n```bash\nmkdir -p public\u002Fpets\u002Ftater\ncp ~\u002F.codex\u002Fpets\u002Ftater\u002Fpet.json public\u002Fpets\u002Ftater\u002Fpet.json\ncp ~\u002F.codex\u002Fpets\u002Ftater\u002Fspritesheet.webp public\u002Fpets\u002Ftater\u002Fspritesheet.webp\n```\n\nCodex pets share the same atlas contract, so render the copied spritesheet with `codexPetAtlas`:\n\n```tsx\n\u003CPetWidget\n  src=\"\u002Fpets\u002Ftater\u002Fspritesheet.webp\"\n  atlas={codexPetAtlas}\n  animation={pet.animation}\n  position={pet.position}\n  pin={pet.pin}\n  draggable\n  onAction={petDispatch}\n\u002F>\n```\n\nThe `pet.json` file identifies the pet and its spritesheet path. The React wrapper needs the browser-accessible `src` plus `codexPetAtlas`, which describes the shared grid, frame rows, and frame durations.\n\n## Usage\n\n```tsx\nimport {\n  PetWidget,\n  codexPetAtlas,\n  usePetController,\n  type CodexPetAnimationName\n} from \"codex-pets-react\";\n\nexport function PetLayer() {\n  const { pet, petDispatch } = usePetController\u003CCodexPetAnimationName>({\n    initialState: {\n      animation: { name: \"idle\", mode: \"loop\" },\n      pin: \"bottom-right\"\n    },\n    defaultAnimation: \"idle\",\n    waitingAnimation: \"waiting\",\n    waitingAfterMs: 6000\n  });\n\n  return (\n    \u003CPetWidget\n      src=\"\u002Fpets\u002Ftater\u002Fspritesheet.webp\"\n      atlas={codexPetAtlas}\n      animation={pet.animation}\n      position={pet.position}\n      pin={pet.pin}\n      draggable\n      onAction={petDispatch}\n    \u002F>\n  );\n}\n```\n\nDispatch actions to drive the pet from app state:\n\n```ts\npetDispatch({\n  type: \"animation.play\",\n  animation: \"waving\",\n  mode: \"once\",\n  then: \"idle\"\n});\n\npetDispatch({ type: \"pin.set\", pin: \"bottom-right\" });\npetDispatch({ type: \"position.set\", position: { x: 240, y: 420 } });\npetDispatch({ type: \"animation.set\", animation: \"waiting\" });\n```\n\n## Drag Gesture Animations\n\nKeep gesture animation opt-in by observing pet actions and dispatching follow-up animation actions:\n\n```tsx\nconst observeDragGesture = usePetDragGestureAnimations\u003CCodexPetAnimationName>({\n  enabled: true,\n  animations: {\n    left: \"running-left\",\n    right: \"running-right\",\n    up: \"jumping\",\n    down: \"waving\"\n  },\n  restAnimation: \"idle\",\n  minimumDistance: 16,\n  axisBias: 1.12,\n  onGestureAction: petDispatch\n});\n\nconst onAction = (action: PetAction\u003CCodexPetAnimationName>) => {\n  petDispatch(action);\n  observeDragGesture(action);\n};\n```\n\n`minimumDistance` filters pointer jitter. `axisBias` requires one axis to clearly dominate before changing animations, so diagonal or shaky drags do not flicker between states.\n\n## Build\n\n```bash\nnpm run build\n```\n\nThis typechecks the repo, emits library declarations to `dist\u002Ftypes`, builds the library to `dist\u002Flib`, and builds the example to `dist\u002Fexamples\u002Fplannotator-pet`.\n","Codex Pets React 是一个用于Codex宠物精灵图的声明式React封装库。该项目提供了`SpriteAnimator`组件来实现精灵图集行\u002F帧回放，以及`PetWidget`组件支持固定位置渲染、拖拽、固定和动画完成事件。此外，还包含`petReducer`和`usePetController`钩子，方便将状态驱动的应用集成到项目中。Codex Pets React 适用于需要在Web应用中以交互方式展示和控制虚拟宠物或角色的场景，如游戏开发、在线教育平台等，通过简单的配置即可实现丰富的动画效果与用户互动。","2026-06-11 04:05:06","CREATED_QUERY"]