@petx/vue

Vue renderer for animated Codex pet spritesheets.

npm i @petx/vue

<script setup lang="ts">
import { PetX } from '@petx/vue';
import '@petx/vue/styles.css';
</script>

<template>
  <PetX src="/pets/frieren/spritesheet.webp" animation="waving" :size="192" />
</template>

Use animation, frame, playing, frameInterval, atlas, animations, offsetX, and offsetY to tune playback and alignment. For V2, pass a pet manifest containing spriteVersionNumber: 2 (or :sprite-version-number="2" with src) and set look-direction to clockwise degrees or a screen-space { x, y } vector. V1 remains the default when the version is omitted.