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

<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pixi-filters@latest/dist/pixi-filters.js"></script>

html,
body {
  height: 100vh;
  background: #1d2330;
}

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

canvas {
  border: 1px solid rgba(255, 255, 255, 0.1);
}

console.clear()


const { render } = ReactDOM
const { Stage, withFilters, Container, Sprite, useTick } = ReactPixi

const width = 400
const height = 400
const backgroundColor = 0x1d2330

const Filters = withFilters(Container, {
  dot: PIXI.filters.DotFilter,
  blur: PIXI.filters.BlurFilter,
})

const config = {
  dot: {
    scale: 1,
    angle: 5,
  },
  blur: {
    blur: 0,
    quality: 4,
  },
}

const Bunny = () => {
  const [i, setI] = React.useState(1)
  useTick(() => setI(i => i + 0.1))

  return (
    <Sprite
      anchor={0.5}
      scale={5 + Math.sin(i / 2) * 2}
      x={width / 2 + Math.sin(i / 5) * 100}
      y={height / 2 + Math.cos(i / 5) * 100}
      image="https://s3-us-west-2.amazonaws.com/s.cdpn.io/693612/IaUrttj.png"
    />
  )
}

const App = () => {
  const [dotConfig, setDotConfig] = React.useState(config.dot)
  const [blurConfig, setBlurConfig] = React.useState(config.blur)

  const gui = React.useMemo(() => {
    const g = new dat.GUI()

    const dot = g.addFolder('Dot')
    dot.open()
    dot.add(config.dot, 'scale', 0, 5).onChange(value => setDotConfig(config => ({ ...config, scale: value })))
    dot.add(config.dot, 'angle', 0, 30).onChange(value => setDotConfig(config => ({ ...config, angle: value })))

    const blur = g.addFolder('Blur')
    blur.open()
    blur
      .add(config.blur, 'blur', 0, 20)
      .onChange(value => setBlurConfig(config => ({ ...config, blur: value })))
    blur
      .add(config.blur, 'quality', 0, 20)
      .onChange(value => setBlurConfig(config => ({ ...config, quality: value })))

    return g
  }, [])

  return (
    <Stage width={width} height={height} options={{ autoDensity: true, backgroundColor }}>
      <Filters dot={dotConfig} blur={blurConfig}>
        <Bunny />
      </Filters>
    </Stage>
  )
}

render(<App />, document.getElementById('root'))