unterberg.dev - pixi and gsap

in typescript, build with vite

Dream of my sleepless nights; a template for creating interactive pages with PixiJS, Vite, and TypeScript.

Motivation

I had this cool effect in mind, saw on a flash website years ago. It was a spawn effect, where the user could emit a massive amount of sprites by hovering on a stage. The sprites were spawned at the mouse position and animated to a random position on the screen. So Impressive - always wanted to recreate this effect. Also the particle-emitter was a inspiring reference.

Drawbacks Pixi version 8

• gsap pixi plugin currently not usable with pixi v8
  • mainly drawbacks with the color transitions (I'll adapt a small helper in the future)

Startup Process

To start the development server with Vite, follow these steps:

1. Install dependencies:

   npm install or yarn

2. Run the development server:

   npm run dev or yarn dev

3. Run the production preview:

   npm run prod or yarn prod