html,
body {
  height: 100vh;
  background: #012b30;
}

body {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

canvas {
  border: 1px solid #011e21;
}
const { render } = ReactDOM;
const { Stage, Sprite, Container, useTick } = ReactPixi;
const { useState } = React;

const Bunny = () => {
  // states
  const [x, setX] = useState(0);
  const [y, setY] = useState(0);
  const [rotation, setRotation] = useState(0);
  
  // increment
  let i = 0;

  // custom ticker
  useTick(delta => {
    i += 0.05 * delta;

    setX(Math.sin(i) * 100);
    setY(Math.sin(i/1.5) * 100);
    setRotation(-10 + Math.sin(i/10 + Math.PI * 2) * 10);
  });

  return (
    <Sprite
      image="https://s3-us-west-2.amazonaws.com/s.cdpn.io/693612/IaUrttj.png"
      anchor={0.5}
      x={x}
      y={y}
      rotation={rotation}
    />
  );
};

render(
  <Stage width={300} height={300} options={{ backgroundColor: 0x01262a }}>
    <Container x={150} y={150}>
      <Bunny />
    </Container>
  </Stage>,
  document.body
);
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/react@16.7.0-alpha.2/umd/react.production.min.js
  2. https://unpkg.com/react-dom@16.7.0-alpha.2/umd/react-dom.production.min.js
  3. https://unpkg.com/pixi.js@4.8.6/dist/pixi.min.js
  4. https://unpkg.com/@inlet/react-pixi@0.4.3/dist/react-pixi.umd.js