Build 2D games and apps that run in every browser

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


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


// one texture, so every bunny shares a batch
const bunnies = Array.from({ length: 300 }, () =>
  app.stage.addChild(new Sprite(texture)),
);


app.ticker.add(({ lastTime }) => {
  bunnies.forEach((bunny, i) => {
    const hop = Math.sin(lastTime / 300 + i);


    bunny.x = (i * 37) % app.screen.width;
    bunny.y = 400 - Math.abs(hop) * 300;
  });
});

import { FillGradient, Graphics } from 'pixi.js';


const gradient = new FillGradient({
  colorStops: [
    { offset: 0, color: 0xe91e63 },
    { offset: 1, color: 0x8b5cf6 },
  ],
});
const tile = new Graphics()
  .roundRect(0, 0, 100, 100, 26)
  .fill(gradient);
const blob = new Graphics();


app.stage.addChild(tile, blob);


// cheap to rebuild: redraw the blob every frame
app.ticker.add(({ lastTime }) => {
  const r = 60 + Math.sin(lastTime / 500) * 20;
  blob.clear().circle(200, 80, r).fill(0x38bdf8);
});

import { gsap } from 'gsap';
import { SplitText } from 'pixi.js';


const title = new SplitText({
  text: 'PixiJS',
  style: { fontFamily: 'Outfit', fontSize: 120 },
  charAnchor: 0.5,
});


app.stage.addChild(title);


// every character is its own Text: tween them
gsap.to(title.chars, {
  y: -20,
  stagger: {
    each: 0.08,
    repeat: -1,
    yoyo: true,
  },
});

import {
  BlurFilter, ColorMatrixFilter,
} from 'pixi.js';


// back and front are two layers of sprites.
// Depth of field: the back one goes soft
back.filters = [new BlurFilter({ strength: 6 })];


// while the front one cycles through hues
const colors = new ColorMatrixFilter();
let degrees = 0;


front.filters = [colors];
app.ticker.add(({ deltaTime }) => {
  degrees = (degrees + deltaTime) % 360;
  colors.hue(degrees, false);
});