JSFiddle - React, Tailwind, and code Playground

by ShukantPal

HTML

<script src="https://pixijs.download/v5.3.3/pixi-legacy.min.js"></script>

CSS

body { 
  padding: 0;
  margin: 0;
  overflow: hidden;
}

JavaScript

/**
* This is the default playground.
* You should see a bunny spinning in the right preview pane.
* Feel free to use this as a starting point for you own playground!
*/

// Create our application instance
var app = new PIXI.Application({
    width: window.innerWidth,
    height: window.innerHeight,
    resizeTo: window,
    backgroundColor: 0x2c3e50
});
document.body.appendChild(app.view);

// Load the bunny texture
app.loader.add('bunny', 'https://pixijs.io/examples/examples/assets/bunny.png')
    .load(startup);

function startup()
{
    var bunny = new PIXI.Sprite(app.loader.resources.bunny.texture);

    // Center the sprite's anchor point
    bunny.anchor.set(0.5);

    // Move the sprite to the center of the screen
    bunny.x = -app.screen.width / 2;
    bunny.y = app.screen.height / 2;
    bunny.scale.set(10);
    app.stage.filterArea = app.screen;
    app.stage.filters = [new PIXI.filters.AlphaFilter()];

    app.stage.addChild(bunny);


    // Listen for animate update
    app.ticker.add(function(delta)
    {
        // Rotate mr rabbit clockwise
        bunny.rotation += 0.1 * delta;
    });

    let trans = new PIXI.Matrix();
    trans.tx = app.screen.width;
    app.ticker.remove(app.render, app);
    app.ticker.add(() => {
        app.renderer.render(app.stage, undefined, undefined, trans)
    }, -25)
}