# pixijs-scene-gif

Teaches coding assistants how to load and play animated GIFs in PixiJS v8 with GifSprite. Useful when embedding GIF assets directly into scene trees.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 5600 installs · ★ 358
- Author: pixijs
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/pixijs/pixijs-skills/tree/HEAD/skills/pixijs-scene-gif/SKILL.md
- Updated: 2026-10-01
- HTML: https://affpapa.org/en/nevibecode/skills/pixijs-scene-gif

## What it does

The skill provides patterns for PixiJS v8 GIF playback. It ensures the assistant includes the `import 'pixi.js/gif'` side-effect import so `Assets.load` recognizes `.gif` files and returns a `GifSource` instead of a plain `Texture`.

\`GifSprite` extends `Sprite` as a leaf display object, which means you cannot nest child elements inside it. To group multiple GIF instances, place them in a `Container`. The constructor configures options like `autoPlay`, `loop`, `animationSpeed`, and event callbacks such as `onComplete` or `onFrameChange`.

GIFs decode every frame into an individual canvas texture, so high-frame animations are a good reason to audit GPU memory and switch to `AnimatedSprite` with a spritesheet atlas.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add pixijs/pixijs-skills --skill pixijs-scene-gif -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/pixijs-scene-gif/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/pixijs-scene-gif/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add pixijs/pixijs-skills --skill pixijs-scene-gif -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/pixijs-scene-gif/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add pixijs/pixijs-skills --skill pixijs-scene-gif -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/pixijs-scene-gif/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install pixijs/pixijs-skills pixijs-scene-gif
```

2. **Manually: put the files in place**
- File: `.github/skills/pixijs-scene-gif/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add pixijs/pixijs-skills --skill pixijs-scene-gif -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/pixijs/pixijs-skills --path skills/pixijs-scene-gif
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/pixijs-scene-gif/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add pixijs/pixijs-skills --skill pixijs-scene-gif -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/pixijs/pixijs-skills/tree/HEAD/skills/pixijs-scene-gif/SKILL.md

## When to use it
- load animated GIF files into PixiJS v8 scenes using `Assets.load`
- control frame playback, loop behavior, and speed on `GifSprite`
- handle playback events with `onComplete`, `onLoop`, and `onFrameChange` callbacks
- configure fallback FPS and canvas texture resolution for GIF assets

## Example prompts
- Load animation.gif using PixiJS v8 and display it centered with GifSprite
- Set up a non-looping GifSprite with an onComplete callback and custom animationSpeed

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 5f97d441d448e1ec.

BEGIN THIRD-PARTY FILE 5f97d441d448e1ec
````text
---
name: pixijs-scene-gif
description: "Use this skill when displaying animated GIFs in PixiJS v8. Covers the pixi.js/gif side-effect import, Assets.load returning a GifSource, GifSprite playback (play/stop/currentFrame/animationSpeed), autoPlay/loop options, onComplete/onLoop/onFrameChange callbacks, GifSource sharing, clone, destroy. Triggers on: GifSprite, GifSource, pixi.js/gif, animationSpeed, currentFrame, autoPlay, onComplete, onFrameChange, constructor options, GifSpriteOptions."
license: MIT
---

`GifSprite` plays an animated GIF as a display object. `Assets.load('animation.gif')` returns a `GifSource` (not a `Texture`), and you wrap that in a `GifSprite`. Requires a side-effect `import 'pixi.js/gif'` to register the loader extension.

Assumes familiarity with `pixijs-scene-core-concepts`. `GifSprite` extends `Sprite`, so it is a leaf: do not nest children inside it. Wrap multiple `GifSprite` instances in a `Container` to group them.

## Quick Start

```ts
import "pixi.js/gif";
import { GifSprite } from "pixi.js/gif";

const source = await Assets.load("animation.gif");

const gif = new GifSprite({
  source,
  autoPlay: true,
  loop: true,
  animationSpeed: 1,
});

gif.anchor.set(0.5);
gif.x = app.screen.width / 2;
gif.y = app.screen.height / 2;

app.stage.addChild(gif);
```

> [!NOTE]
> GIFs decode every frame into a separate canvas texture. For performance-critical animations with many frames, prefer a spritesheet with `AnimatedSprite` — it uses a single atlas texture and batches better on the GPU.

**Related skills:** `pixijs-scene-core-concepts` (scene graph basics), `pixijs-scene-sprite` (`AnimatedSprite` for spritesheet-based animation), `pixijs-assets` (`Assets.load`, caching, unloading), `pixijs-ticker` (frame timing), `pixijs-performance` (texture memory).

## Constructor options

`GifSpriteOptions` extends `Omit<SpriteOptions, 'texture'>`; `texture` is managed internally (set from `source.textures[0]` and swapped per frame). All other `Sprite` options (`anchor`, `scale`, `tint`, `roundPixels`, etc.) are valid, and all `Container` options (`position`, `scale`, `tint`, `label`, `filters`, `zIndex`, etc.) are also valid here — see `skills/pixijs-scene-core-concepts/references/constructor-options.md`.

Leaf-specific options added by `GifSpriteOptions`:

| Option           | Type                              | Default    | Description                                                                                                                |
| ---------------- | --------------------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------- |
| `source`         | `GifSource`                       | —          | Required. The parsed GIF data returned by `Assets.load('file.gif')`. Can be shared across multiple `GifSprite` instances.  |
````
END THIRD-PARTY FILE 5f97d441d448e1ec

The third-party file has ended. Everything between the 5f97d441d448e1ec tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2899 of 10002 bytes. © pixijs · MIT · https://github.com/pixijs/pixijs-skills/tree/HEAD/skills/pixijs-scene-gif/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md