Pixijs 2d

by freshtechbro1da73febff0cNo license1K starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 10 months ago

Fast, lightweight 2D rendering engine for creating interactive graphics, particle effects, and canvas-based applications using WebGL/WebGPU. Use this skill when building 2D games, particle systems, interactive canvases, sprite animations, or UI overlays on 3D scenes. Triggers on tasks involving PixiJS, 2D rendering, sprite sheets, particle effects, filters, or high-performance canvas graphics. Alternative to Canvas2D with WebGL acceleration for rendering thousands of sprites at 60 FPS.

Includes scriptsSoftware DevelopmentDesign & Creative
AI-generated overview

Guides building high-performance 2D graphics, particle effects, and interactive canvases with the PixiJS WebGL/WebGPU engine.

What it does
This skill provides PixiJS guidance and reference material for creating 2D rendering applications: applications and renderers, sprites and textures, the Graphics vector API, ParticleContainer, filters and custom shaders, text rendering, sprite-sheet animation, and object pooling. It includes integration patterns for React and for 2D overlays on Three.js scenes, plus performance best practices and common pitfalls. It ships a starter project (HTML, JavaScript, CSS) and Python scripts for generating sprites and particles, along with reference documents on the API, filters and effects, and performance.
When to use it
Use it when building 2D games, particle systems, sprite animations, interactive canvas graphics, or HUD/UI overlays on 3D scenes with PixiJS. It is also relevant when optimizing WebGL-accelerated rendering of large numbers of sprites or applying visual filters. It is not intended for 3D graphics, simple animations, or basic DOM manipulation.
Requirements
Requires a JavaScript runtime with the pixi.js package installed, and a browser environment with WebGL or WebGPU support for rendering. Image and sprite-sheet assets are loaded at runtime. The skill ships executable scripts (Python sprite and particle builders) and a starter PixiJS project; the Python scripts require a Python runtime.

PixiJS 2D Rendering Skill

Fast, lightweight 2D rendering engine for creating interactive graphics, particle effects, and canvas-based applications using WebGL/WebGPU.

When to Use This Skill

Trigger this skill when you encounter:

  • "Create 2D particle effects" or "animated particles"
  • "2D sprite animation" or "sprite sheet handling"
  • "Interactive canvas graphics" or "2D game"
  • "UI overlays on 3D scenes" or "HUD layer"
  • "Draw shapes programmatically" or "vector graphics API"
  • "Optimize rendering performance" or "thousands of sprites"
  • "Apply visual filters" or "blur/displacement effects"
  • "Lightweight 2D engine" or "alternative to Canvas2D"

Use PixiJS for: High-performance 2D rendering (up to 100,000+ sprites), particle systems, interactive UI, 2D games, data visualization with WebGL acceleration.

Don't use for: 3D graphics (use Three.js/R3F), simple animations (use Motion/GSAP), basic DOM manipulation.

Core Concepts

1. Application & Renderer

The entry point for PixiJS applications:

javascript
import { Application } from 'pixi.js';
const app = new Application();
await app.init({  width: 800,  height: 600,  backgroundColor: 0x1099bb,  antialias: true,  // Smooth edges  resolution: window.devicePixelRatio || 1});
document.body.appendChild(app.canvas);

Key Properties:

  • app.stage: Root container for all display objects
  • app.renderer: WebGL/WebGPU renderer instance
  • app.ticker: Update loop for animations
  • app.screen: Canvas dimensions

2. Sprites & Textures

Core visual elements loaded from images:

javascript
import { Assets, Sprite } from 'pixi.js';
// Load textureconst texture = await Assets.load('path/to/image.png');
// Create spriteconst sprite = new Sprite(texture);sprite.anchor.set(0.5);  // Center pivotsprite.position.set(400, 300);sprite.scale.set(2);  // 2x scalesprite.rotation = Math.PI / 4;  // 45 degreessprite.alpha = 0.8;  // 80% opacitysprite.tint = 0xff0000;  // Red tint
app.stage.addChild(sprite);

Quick Creation:

javascript
const sprite = Sprite.from('path/to/image.png');

3. Graphics API

Draw vector shapes programmatically:

javascript
import { Graphics } from 'pixi.js';
const graphics = new Graphics();
// Rectanglegraphics.rect(50, 50, 100, 100).fill('blue');
// Circle with strokegraphics.circle(200, 100, 50).fill('red').stroke({ width: 2, color: 'white' });
// Complex pathgraphics  .moveTo(300, 100)  .lineTo(350, 150)  .lineTo(250, 150)  .closePath()  .fill({ color: 0x00ff00, alpha: 0.5 });
app.stage.addChild(graphics);

SVG Support:

javascript
graphics.svg('<svg><path d="M 100 350 q 150 -300 300 0" /></svg>');

4. ParticleContainer

Optimized container for rendering thousands of sprites:

javascript
import { ParticleContainer, Particle, Texture } from 'pixi.js';
const texture = Texture.from('particle.png');
const container = new ParticleContainer({  dynamicProperties: {    position: true,   // Allow position updates    scale: false,     // Static scale    rotation: false,  // Static rotation    color: false      // Static color  }});
// Add 10,000 particlesfor (let i = 0; i < 10000; i++) {  const particle = new Particle({    texture,    x: Math.random() * 800,    y: Math.random() * 600  });
  container.addParticle(particle);}
app.stage.addChild(container);

Performance: Up to 10x faster than regular Container for static properties.

5. Filters

Apply per-pixel effects using WebGL shaders:

javascript
import { BlurFilter, DisplacementFilter, ColorMatrixFilter } from 'pixi.js';
// Blurconst blurFilter = new BlurFilter({ strength: 8, quality: 4 });sprite.filters = [blurFilter];
// Multiple filterssprite.filters = [  new BlurFilter({ strength: 4 }),  new ColorMatrixFilter()  // Color transforms];
// Custom filter area for performancesprite.filterArea = new Rectangle(0, 0, 200, 100);

Available Filters:

  • BlurFilter: Gaussian blur
  • ColorMatrixFilter: Color transformations (sepia, grayscale, etc.)
  • DisplacementFilter: Warp/distort pixels
  • AlphaFilter: Flatten alpha across children
  • NoiseFilter: Random grain effect
  • FXAAFilter: Anti-aliasing

6. Text Rendering

Display text with styling:

javascript
import { Text, BitmapText, TextStyle } from 'pixi.js';
// Standard Textconst style = new TextStyle({  fontFamily: 'Arial',  fontSize: 36,  fill: '#ffffff',  stroke: { color: '#000000', width: 4 },  filters: [new BlurFilter()]  // Bake filter into texture});
const text = new Text({ text: 'Hello PixiJS!', style });text.position.set(100, 100);
// BitmapText (faster for dynamic text)const bitmapText = new BitmapText({  text: 'Score: 0',  style: { fontFamily: 'MyBitmapFont', fontSize: 24 }});

Performance Tip: Use BitmapText for frequently changing text (scores, counters).

Common Patterns

Pattern 1: Basic Interactive Sprite

javascript
import { Application, Assets, Sprite } from 'pixi.js';
const app = new Application();await app.init({ width: 800, height: 600 });document.body.appendChild(app.canvas);
const texture = await Assets.load('bunny.png');const bunny = new Sprite(texture);
bunny.anchor.set(0.5);bunny.position.set(400, 300);bunny.eventMode = 'static';  // Enable interactivitybunny.cursor = 'pointer';
// Eventsbunny.on('pointerdown', () => {  bunny.scale.set(1.2);});
bunny.on('pointerup', () => {  bunny.scale.set(1.0);});
bunny.on('pointerover', () => {  bunny.tint = 0xff0000;  // Red on hover});
bunny.on('pointerout', () => {  bunny.tint = 0xffffff;  // Reset});
app.stage.addChild(bunny);
// Animation loopapp.ticker.add((ticker) => {  bunny.rotation += 0.01 * ticker.deltaTime;});

Pattern 2: Drawing with Graphics

javascript
import { Graphics, Application } from 'pixi.js';
const app = new Application();await app.init({ width: 800, height: 600 });document.body.appendChild(app.canvas);
const graphics = new Graphics();
// Rectangle with gradientgraphics.rect(50, 50, 200, 100).fill({  color: 0x3399ff,  alpha: 0.8});
// Circle with strokegraphics.circle(400, 300, 80)  .fill('yellow')  .stroke({ width: 4, color: 'orange' });
// Star shapegraphics.star(600, 300, 5, 50, 0).fill({ color: 0xffdf00, alpha: 0.9 });
// Custom pathgraphics  .moveTo(100, 400)  .bezierCurveTo(150, 300, 250, 300, 300, 400)  .stroke({ width: 3, color: 'white' });
// Holesgraphics  .rect(450, 400, 150, 100).fill('red')  .beginHole()  .circle(525, 450, 30)  .endHole();
app.stage.addChild(graphics);
// Dynamic drawing (animation)app.ticker.add(() => {  graphics.clear();
  const time = Date.now() * 0.001;  const x = 400 + Math.cos(time) * 100;  const y = 300 + Math.sin(time) * 100;
  graphics.circle(x, y, 20).fill('cyan');});

Pattern 3: Particle System with ParticleContainer

javascript
import { Application, ParticleContainer, Particle, Texture } from 'pixi.js';
const app = new Application();await app.init({ width: 800, height: 600, backgroundColor: 0x000000 });document.body.appendChild(app.canvas);
const texture = Texture.from('spark.png');
const particles = new ParticleContainer({  dynamicProperties: {    position: true,  // Update positions every frame    scale: true,     // Fade out by scaling    rotation: true,  // Rotate particles    color: false     // Static color  }});
const particleData = [];
// Create particlesfor (let i = 0; i < 5000; i++) {  const particle = new Particle({    texture,    x: 400,    y: 300,    scaleX: 0.5,    scaleY: 0.5  });
  particles.addParticle(particle);
  particleData.push({    particle,    vx: (Math.random() - 0.5) * 5,    vy: (Math.random() - 0.5) * 5 - 2,  // Slight upward bias    life: 1.0  });}
app.stage.addChild(particles);
// Update loopapp.ticker.add((ticker) => {  particleData.forEach(data => {    // Physics    data.particle.x += data.vx * ticker.deltaTime;    data.particle.y += data.vy * ticker.deltaTime;    data.vy += 0.1 * ticker.deltaTime;  // Gravity
    // Fade out    data.life -= 0.01 * ticker.deltaTime;    data.particle.scaleX = data.life * 0.5;    data.particle.scaleY = data.life * 0.5;
    // Reset particle    if (data.life <= 0) {      data.particle.x = 400;      data.particle.y = 300;      data.vx = (Math.random() - 0.5) * 5;      data.vy = (Math.random() - 0.5) * 5 - 2;      data.life = 1.0;    }  });});

Pattern 4: Applying Filters

javascript
import { Application, Sprite, Assets, BlurFilter, DisplacementFilter } from 'pixi.js';
const app = new Application();await app.init({ width: 800, height: 600 });document.body.appendChild(app.canvas);
const texture = await Assets.load('photo.jpg');const photo = new Sprite(texture);photo.position.set(100, 100);
// Blur filterconst blurFilter = new BlurFilter({ strength: 5, quality: 4 });
// Displacement filter (wavy effect)const displacementTexture = await Assets.load('displacement.jpg');const displacementSprite = Sprite.from(displacementTexture);const displacementFilter = new DisplacementFilter({  sprite: displacementSprite,  scale: 50});
// Apply multiple filtersphoto.filters = [blurFilter, displacementFilter];
// Optimize with filterAreaphoto.filterArea = new Rectangle(0, 0, photo.width, photo.height);
app.stage.addChild(photo);
// Animate displacementapp.ticker.add((ticker) => {  displacementSprite.x += 1 * ticker.deltaTime;  displacementSprite.y += 0.5 * ticker.deltaTime;});

Pattern 5: Custom Filter with Shaders

javascript
import { Filter, GlProgram } from 'pixi.js';
const vertex = `  in vec2 aPosition;  out vec2 vTextureCoord;
  uniform vec4 uInputSize;  uniform vec4 uOutputFrame;  uniform vec4 uOutputTexture;
  vec4 filterVertexPosition() {    vec2 position = aPosition * uOutputFrame.zw + uOutputFrame.xy;    position.x = position.x * (2.0 / uOutputTexture.x) - 1.0;    position.y = position.y * (2.0*uOutputTexture.z / uOutputTexture.y) - uOutputTexture.z;    return vec4(position, 0.0, 1.0);  }
  vec2 filterTextureCoord() {    return aPosition * (uOutputFrame.zw * uInputSize.zw);  }
  void main() {    gl_Position = filterVertexPosition();    vTextureCoord = filterTextureCoord();  }`;
const fragment = `  in vec2 vTextureCoord;  uniform sampler2D uTexture;  uniform float uTime;
  void main() {    vec2 uv = vTextureCoord;
    // Wave distortion    float wave = sin(uv.y * 10.0 + uTime) * 0.05;    vec4 color = texture(uTexture, vec2(uv.x + wave, uv.y));
    gl_FragColor = color;  }`;
const customFilter = new Filter({  glProgram: new GlProgram({ fragment, vertex }),  resources: {    timeUniforms: {      uTime: { value: 0.0, type: 'f32' }    }  }});
sprite.filters = [customFilter];
// Update uniformapp.ticker.add((ticker) => {  customFilter.resources.timeUniforms.uniforms.uTime += 0.04 * ticker.deltaTime;});

Pattern 6: Sprite Sheet Animation

javascript
import { Application, Assets, AnimatedSprite } from 'pixi.js';
const app = new Application();await app.init({ width: 800, height: 600 });document.body.appendChild(app.canvas);
// Load sprite sheetawait Assets.load('spritesheet.json');
// Create animation from framesconst frames = [];for (let i = 0; i < 10; i++) {  frames.push(Texture.from(`frame_${i}.png`));}
const animation = new AnimatedSprite(frames);animation.anchor.set(0.5);animation.position.set(400, 300);animation.animationSpeed = 0.16;  // ~10 FPSanimation.play();
app.stage.addChild(animation);
// Control playbackanimation.stop();animation.gotoAndPlay(0);animation.onComplete = () => {  console.log('Animation completed!');};

Pattern 7: Object Pooling for Performance

javascript
class SpritePool {  constructor(texture, initialSize = 100) {    this.texture = texture;    this.available = [];    this.active = [];
    // Pre-create sprites    for (let i = 0; i < initialSize; i++) {      this.createSprite();    }  }
  createSprite() {    const sprite = new Sprite(this.texture);    sprite.visible = false;    this.available.push(sprite);    return sprite;  }
  spawn(x, y) {    let sprite = this.available.pop();
    if (!sprite) {      sprite = this.createSprite();    }
    sprite.position.set(x, y);    sprite.visible = true;    this.active.push(sprite);
    return sprite;  }
  despawn(sprite) {    sprite.visible = false;    const index = this.active.indexOf(sprite);
    if (index > -1) {      this.active.splice(index, 1);      this.available.push(sprite);    }  }
  reset() {    this.active.forEach(sprite => {      sprite.visible = false;      this.available.push(sprite);    });    this.active = [];  }}
// Usageconst bulletTexture = Texture.from('bullet.png');const bulletPool = new SpritePool(bulletTexture, 50);
// Spawn bulletconst bullet = bulletPool.spawn(100, 200);app.stage.addChild(bullet);
// Despawn after 2 secondssetTimeout(() => {  bulletPool.despawn(bullet);}, 2000);

Integration Patterns

React Integration

jsx
import { useEffect, useRef } from 'react';import { Application } from 'pixi.js';
function PixiCanvas() {  const canvasRef = useRef(null);  const appRef = useRef(null);
  useEffect(() => {    const init = async () => {      const app = new Application();
      await app.init({        width: 800,        height: 600,        backgroundColor: 0x1099bb      });
      canvasRef.current.appendChild(app.canvas);      appRef.current = app;
      // Setup scene      // ... add sprites, graphics, etc.    };
    init();
    return () => {      if (appRef.current) {        appRef.current.destroy(true, { children: true });      }    };  }, []);
  return <div ref={canvasRef} />;}

Three.js Overlay (2D UI on 3D)

javascript
import * as THREE from 'three';import { Application, Sprite, Text } from 'pixi.js';
// Three.js sceneconst scene = new THREE.Scene();const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight);const renderer = new THREE.WebGLRenderer();document.body.appendChild(renderer.domElement);
// PixiJS overlayconst pixiApp = new Application();await pixiApp.init({  width: window.innerWidth,  height: window.innerHeight,  backgroundAlpha: 0  // Transparent background});
pixiApp.canvas.style.position = 'absolute';pixiApp.canvas.style.top = '0';pixiApp.canvas.style.left = '0';pixiApp.canvas.style.pointerEvents = 'none';  // Click throughdocument.body.appendChild(pixiApp.canvas);
// Add UI elementsconst scoreText = new Text({ text: 'Score: 0', style: { fontSize: 24, fill: 'white' } });scoreText.position.set(20, 20);pixiApp.stage.addChild(scoreText);
// Render loopfunction animate() {  requestAnimationFrame(animate);
  renderer.render(scene, camera);  // 3D scene  pixiApp.renderer.render(pixiApp.stage);  // 2D overlay}
animate();

Performance Best Practices

1. Use ParticleContainer for Large Sprite Counts

javascript
// DON'T: Regular Container (slow for 1000+ sprites)const container = new Container();for (let i = 0; i < 10000; i++) {  container.addChild(new Sprite(texture));}
// DO: ParticleContainer (10x faster)const particles = new ParticleContainer({  dynamicProperties: { position: true }});for (let i = 0; i < 10000; i++) {  particles.addParticle(new Particle({ texture }));}

2. Optimize Filter Usage

javascript
// Set filterArea to avoid runtime measurementsprite.filterArea = new Rectangle(0, 0, 200, 100);
// Release filters when not neededsprite.filters = null;
// Bake filters into Text at creationconst style = new TextStyle({  filters: [new BlurFilter()]  // Applied once at texture creation});

3. Manage Texture Memory

javascript
// Destroy textures when donetexture.destroy();
// Batch destruction with delays to prevent frame dropstextures.forEach((tex, i) => {  setTimeout(() => tex.destroy(), Math.random() * 100);});

4. Enable Culling for Off-Screen Objects

javascript
sprite.cullable = true;  // Skip rendering if outside viewport
// Use CullerPluginimport { CullerPlugin } from 'pixi.js';

5. Cache Static Graphics as Bitmaps

javascript
// Convert complex graphics to texture for faster renderingconst complexShape = new Graphics();// ... draw many shapes
complexShape.cacheAsBitmap = true;  // Renders to texture once

6. Optimize Renderer Settings

javascript
const app = new Application();await app.init({  antialias: false,  // Disable on mobile for performance  resolution: 1,     // Lower resolution on low-end devices  autoDensity: true});

7. Use BitmapText for Dynamic Text

javascript
// DON'T: Standard Text (expensive updates)const text = new Text({ text: `Score: ${score}` });app.ticker.add(() => {  text.text = `Score: ${++score}`;  // Re-renders texture each frame});
// DO: BitmapText (much faster)const bitmapText = new BitmapText({ text: `Score: ${score}` });app.ticker.add(() => {  bitmapText.text = `Score: ${++score}`;});

Common Pitfalls

Pitfall 1: Not Destroying Objects

Problem: Memory leaks from unreleased GPU resources.

Solution:

javascript
// Always destroy sprites and texturessprite.destroy({ children: true, texture: true, baseTexture: true });
// Destroy filterssprite.filters = null;
// Destroy graphicsgraphics.destroy();

Pitfall 2: Updating Static ParticleContainer Properties

Problem: Changing scale when dynamicProperties.scale = false has no effect.

Solution:

javascript
const container = new ParticleContainer({  dynamicProperties: {    position: true,    scale: true,  // Enable if you need to update    rotation: true,    color: true  }});
// If properties are static but you change them, call update:container.update();

Pitfall 3: Excessive Filter Usage

Problem: Filters are expensive; too many cause performance issues.

Solution:

javascript
// Limit filter usagesprite.filters = [blurFilter];  // 1-2 filters max
// Use filterArea to constrain processingsprite.filterArea = new Rectangle(0, 0, sprite.width, sprite.height);
// Bake filters into textures when possibleconst filteredTexture = renderer.filters.generateFilteredTexture({  texture,  filters: [blurFilter]});

Pitfall 4: Frequent Text Updates

Problem: Updating Text re-generates texture every time.

Solution:

javascript
// Use BitmapText for frequently changing textconst bitmapText = new BitmapText({ text: 'Score: 0' });
// Reduce resolution for less memorytext.resolution = 1;  // Lower than device pixel ratio

Pitfall 5: Graphics Clear() Without Redraw

Problem: Calling clear() removes all geometry but doesn't automatically redraw.

Solution:

javascript
graphics.clear();  // Remove all shapes
// Redraw new shapesgraphics.rect(0, 0, 100, 100).fill('blue');

Pitfall 6: Not Using Asset Loading

Problem: Creating sprites from URLs causes async issues.

Solution:

javascript
// DON'T:const sprite = Sprite.from('image.png');  // May load asynchronously
// DO:const texture = await Assets.load('image.png');const sprite = new Sprite(texture);

Resources

Related Skills

  • threejs-webgl: For 3D graphics; PixiJS can provide 2D UI overlays
  • gsap-scrolltrigger: For animating PixiJS properties with scroll
  • motion-framer: For React component animations alongside PixiJS canvas
  • react-three-fiber: Similar React integration patterns

Summary

PixiJS excels at high-performance 2D rendering with WebGL acceleration. Key strengths:

  1. Performance: Render 100,000+ sprites at 60 FPS
  2. ParticleContainer: 10x faster for static properties
  3. Filters: WebGL-powered visual effects
  4. Graphics API: Intuitive vector drawing
  5. Asset Management: Robust texture and sprite sheet handling

Use for particle systems, 2D games, data visualizations, and interactive canvas applications where performance is critical.

Source and attribution

Source:freshtechbro/claudedesignskillsin.claude/skills/pixijs-2dat commit1da73fe

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

More from freshtechbro/claudedesignskills

Web3d Integration Patterns

freshtechbro

Architecture patterns for combining Three.js, GSAP, React Three Fiber, Motion and React Spring in 3D web apps.

Software Development1Kupdated 10 months ago

Threejs Webgl

freshtechbro

Guides Three.js WebGL/WebGPU development for interactive 3D web scenes, with reference docs and a starter scene.

Includes scripts
Software Development1Kupdated 10 months ago

Substance 3d Texturing

freshtechbro

Guides PBR texture creation and export from Substance 3D Painter for web and real-time engines, with Python batch automation.

Includes scripts
Design & Creative1Kupdated 10 months ago

Scroll Reveal Libraries

freshtechbro

Guides use of the AOS library for simple scroll-triggered reveal animations on web pages.

Includes scripts
Software Development1Kupdated 10 months ago

Rive Interactive

freshtechbro

Guides building interactive Rive vector animations in React using state machines, inputs, ViewModels and events.

Includes scripts
Design & Creative1Kupdated 10 months ago

Motion Framer

freshtechbro

Guides building React UI animations with Motion (Framer Motion), including gestures, variants, layout and exit animations.

Includes scripts
Software Development1Kupdated 10 months ago

More in Software Development

Playground

anthropics

Featured

Builds self-contained interactive HTML playgrounds with controls, live preview, and copyable prompt output.

Software Development37Kupdated today

M5 Onboard

anthropics

Featured

Provisions M5Stack ESP32 boards by detecting them on USB, flashing UIFlow 2.0 firmware, and installing a MicroPython app bundle.

Software Development37Kupdated today

Cardputer Buddy

anthropics

Featured

Guides iterating on a Cardputer-Adv MicroPython app bundle: adding apps, pushing files over USB-serial, tailing logs, and running REPL commands.

Software Development37Kupdated today

Web Design Guidelines

vercel-labs

Featured

Reviews UI code against Web Interface Guidelines fetched from a remote source and reports findings as file:line entries.

Software Development32Kupdated 5 weeks ago

Vercel React Native Skills

vercel-labs

Featured

React Native and Expo best-practice rules covering list performance, animation, navigation, UI patterns, state, and monorepo setup.

Software Development32Kupdated 5 weeks ago

Vercel React Best Practices

vercel-labs

Featured

Vercel's React and Next.js performance guidelines, organized as 70 rules for writing, reviewing, and refactoring code.

Software Development32Kupdated 5 weeks ago