Back to Devlog
    v0.6.1
    UIJanuary 1, 2026Release notes

    Thirty Puffs of CSS

    The loading screen's bottom glow was replaced by thirty blurred colour puffs that rise and fade, animated entirely without JavaScript.

    An Animation With No Animation Code

    The loading screen had a glow at the bottom. It now has 30 coloured puffs rising from bottom to top:

    • Five colours from the brand palette: Orange, Yellow, Teal, Pink, Green.
    • Each puff is fixed to one colour.
    • Sizes 40-250px, speeds 8-25s.
    • Random horizontal drift and random rotation.
    • Fades out halfway up.
    • Heavily blurred.

    And it is pure CSS — @keyframes plus CSS custom properties. No JavaScript animation, at all. A ripple indicator sits above the smoke.

    Why Mention It

    Because the same thirty puffs, with the same five colours, are in the loading overlay that shipped in v0.8.20 as an in-game map loading screen, and the same five colours became the smoke palette options (SHAG, FIRE, ICE, MONO) when the effect was extracted into a reusable LoadingAnimation.

    Two files changed: LoadingScreen.ts and UIStyles.ts.

    Known Issues: none stated.