Show HN: Embed your Codex pets in React apps
Plannotator has released a React package called Codex Pets React for integrating Codex pet spritesheets into web applications with declarative components and state management. The package provides tools like SpriteAnimator, PetWidget, and state hooks for animation and interaction. An example app demonstrates features like dragging, pinning, animation control, and live state viewing.
- ▪Codex Pets React includes components like SpriteAnimator and PetWidget for rendering and animating pet spritesheets.
- ▪The package comes with a Tater atlas preset and supports state-driven integration via petReducer and usePetController.
- ▪Users must copy pet assets from ~/.codex/pets/ into their app's public directory for browser access.
- ▪The example app showcases animation actions, dragging gestures, pinning, and live state/event visualization.
- ▪The build process generates type declarations, library code, and example app output in designated directories.
Opening excerpt (first ~120 words) tap to expand
Codex Pets React Declarative React components and state helpers for Codex pet spritesheets. Brought to you by Plannotator, the review surface for agent work: use it before an agent starts to sharpen plans, and after an agent finishes to review code. The package includes: SpriteAnimator for atlas row/frame playback. PetWidget for fixed-position rendering, dragging, pinning, and animation completion events. petReducer and usePetController for state-driven app integration. A Tater atlas preset that matches the packaged Codex pet asset. Install npm install codex-pets-react Example App The plannotator pet playground lives in examples/plannotator-pet.
…
Excerpt limited to ~120 words for fair-use compliance. The full article is at GitHub.