[[[https://codepen.io/inlet/pen/2b7da2053276c634928a7eca450648c8]]]

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;

let i = 0;

const Bunny = () => {
  // states
  const [x, setX] = useState(0);
  const [y, setY] = useState(0);
  const [rotation, setRotation] = useState(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={{ autoDensity: true, backgroundColor: 0x01262a }}>
    <Container x={150} y={150}>
      <Bunny />
    </Container>
  </Stage>,
  document.body
);