# Sprite

`Sprite` from `@pibbl/core/sprites` draws an immutable frame returned by
`loadSpriteSheet`. `frame` accepts a literal or signal. Its source sheet must remain
alive until all consumers unmount.

```tsx
import { Sprite, type SpriteFrame } from "@pibbl/core/sprites";
function Avatar({
  frame,
  facingLeft,
}: {
  frame: SpriteFrame;
  facingLeft: boolean;
}) {
  return (
    <Sprite
      frame={frame}
      sampling="nearest"
      flipX={facingLeft}
      anchor={{ x: 0.5, y: 1 }}
      style={{ width: 48, height: 64 }}
    />
  );
}
```

`sampling` defaults to linear. `anchor` defaults to top-left and uses normalized
original frame dimensions. `flipX` and `flipY` default to false. Width/height default
to the original untrimmed frame dimensions. Packing rotation and trim offsets are
handled by drawing; hit bounds stay logical. Use explicit physics colliders.

See the [sprite guide](/guides/sprites/) and [sprite types](/reference/types/sprites/).

Related types: [SpriteProps](/reference/types/sprites/#spriteprops), [SpriteStyle](/reference/types/sprites/#spritestyle), [SpriteFrame](/reference/types/sprites/#spriteframe).

## API details from source

<span id="api-Sprite"></span>

Draw a shared atlas frame, preserving its logical geometry across frame changes. See SpriteFrame.

```ts
Sprite: PibblPrimitiveComponent<SpriteProps, PrimitiveInput<SpriteProps, SpriteStyle>>
```

Related API: [Sprite](/reference/components/sprite/), [PibblPrimitiveComponent](/reference/types/elements-components/#pibblprimitivecomponent), [SpriteProps](/reference/types/sprites/#spriteprops), [PrimitiveInput](/reference/types/styles/#primitiveinput), [SpriteStyle](/reference/types/sprites/#spritestyle).

[View source — packages/core/src/features/sprites/sprite.ts:18](/source/packages/core/src/features/sprites/sprite-ts/#L18)

## Implementation guidance for agents

Read the [Authoring, signals, and lifecycle companion](/agents/topics/lifecycle/) for ownership, adaptation, failure modes, and verification. [Agent start](/agents/) provides the version-selection workflow.

## Complete minimal examples

- [Animated sprite atlas](/minimal-examples/sprites/atlas/): Generate a two-frame atlas, animate a shared sheet, and dispose it after unmounting. [Plain source](/minimal/sprites/atlas.tsx)
## Documentation version

Documentation built with @pibbl/core 0.0.2, revision 272a94a. ALPHA — NOT FOR PRODUCTION USE.