PixiJS

import { Application, Sprite, Assets } from 'pixi.js';

// Create application
const app = new Application();
await app.init({ width: 800, height: 600 });
document.body.appendChild(app.canvas);

// Load texture
const texture = await Assets.load('bunny.png');

// Create sprite
const bunny = new Sprite(texture);
bunny.x = 400;
bunny.y = 300;
bunny.anchor.set(0.5);
app.stage.addChild(bunny);

// Animation loop
app.ticker.add(() => {
  bunny.rotation += 0.01;
});

// Multiple sprites
const sprites = [];
for (let i = 0; i < 100; i++) {
  const sprite = new Sprite(texture);
  sprite.x = Math.random() * 800;
  sprite.y = Math.random() * 600;
  sprite.anchor.set(0.5);
  app.stage.addChild(sprite);
  sprites.push(sprite);
}

app.ticker.add(() => {
  sprites.forEach(sprite => {
    sprite.rotation += 0.01;
  });
});

// React integration
import { Stage, Sprite } from '@pixi/react';

function PixiComponent() {
  return (
    <Stage width={800} height={600}>
      <Sprite
        image="bunny.png"
        x={400}
        y={300}
        anchor={0.5}
      />
    </Stage>
  );
}