PixiJS v8 Template

HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/png" href="/favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PixiJS - Template</title>
</head>

<body>
    <div id="app">
        <div id="pixi-container"></div>
    </div>
    <script type="importmap">
        {
            "imports": {
                "pixi.js": "//cdn.jsdelivr.net/npm/pixi.js@latest/dist/pixi.mjs"
            }
        }
    </script>
</body>
</html>

CSS

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

JavaScript

import * as Pixi from 'pixi.js'

(async () => {  
    const app = new Pixi.Application()
  
    await app.init({ background: "#1099bb", resizeTo: window })
  
    document.getElementById("pixi-container").appendChild(app.canvas)

    // ---

    const text = new Pixi.SplitText({
        text: 'ls',
        style: new Pixi.TextStyle({
            fontFamily: 'Georgia',
            fontSize: 72,            
        }),
    })
  
    text.position.set(50, 50)

    for (const char of text.chars) {
        const blur = new Pixi.BlurFilter({
            strength: 4,
            quality: 4,
            kernelSize: 5,
        })

        char.filters = [blur]
    }

    app.stage.addChild(text)
})()