fun: snow ;3

app/src/react/components/app/index.jsx

@@ -51,6 +51,7 @@ const App = () => {
       // eslint-disable-next-line react/jsx-props-no-spreading
       {...(desktop ? {} : isAnonymous || handlers)}
     >
+      <div className="snow" />
       <Header
         onButton={(type) => {
           const offset = parseInt(ref.current.style.left || `-${paneWidth}px`, 10);

app/src/react/components/app/index.scss

@@ -66,3 +66,15 @@
   padding: 0.4em;
   text-align: center;
 }
+
+.snow {
+  height: 100%;
+  overflow: hidden;
+  position: absolute;
+  width: 100%;
+  canvas {
+    height: 100vh;
+    width: 100vw;
+  }
+}
+

packages/fun/package.json

@@ -20,7 +20,8 @@
     "index.js.map"
   ],
   "dependencies": {
-    "debug": "4.3.1"
+    "debug": "4.3.1",
+    "pixi.js": "^5.3.3"
   },
   "devDependencies": {
     "@neutrinojs/airbnb-base": "^9.4.0",

packages/fun/src/client/index.js

@@ -0,0 +1,86 @@
+import * as PIXI from 'pixi.js';
+
+export default {
+  hooks: {
+    '@latus/http/client/up': async () => {
+      const f = window.innerHeight / window.innerWidth;
+      const w = window.innerWidth;
+      const h = w * f;
+      const app = new PIXI.Application({
+        height: h,
+        transparent: true,
+        width: w,
+      });
+      const fps = 60;
+      const ms = 1000 / fps;
+      app.ticker.maxFPS = fps;
+      window.document.querySelector('.snow').appendChild(app.view);
+      const gravity = 1;
+      const twoPi = Math.PI * 2;
+      const slowMotion = 10;
+      const baseTexture = PIXI.BaseTexture.from('/flakes.png');
+      await new Promise((r) => baseTexture.once('loaded', r));
+      const flakes = [];
+      for (let y = 0; y < 16; ++y) {
+        for (let x = 0; x < 16; ++x) {
+          const texture = new PIXI.Texture(baseTexture);
+          texture.frame = {
+            x: x * 32,
+            y: y * 32,
+            width: 32,
+            height: 32,
+          };
+          texture.updateUvs();
+          flakes.push(texture);
+        }
+      }
+      const waves = 8;
+      for (let i = 0; i < waves; ++i) {
+        const fac = (waves - i);
+        const perWave = fac * (fac * 15) * w * 0.0001;
+        for (let j = 0; j < perWave; ++j) {
+          const sprite = new PIXI.Sprite(
+            flakes[Math.floor(Math.random() * flakes.length)],
+          );
+          sprite.alpha = 0.25 + Math.random() * 0.75;
+          const scale = i / 0.7;
+          const s = (scale + 2) * 0.045;
+          sprite.scale.x = s;
+          sprite.scale.y = s;
+          sprite.size = scale + 4;
+          sprite.sway = Math.random() * 1;
+          sprite.align = Math.random() * twoPi;
+          sprite.x = Math.random() * w;
+          sprite.y = Math.random() * h;
+          app.stage.addChild(sprite);
+        }
+      }
+      let s = 0;
+      app.ticker.add(() => {
+        const ts = ms / (1000 / slowMotion);
+        for (let i = 0; i < app.stage.children.length; i++) {
+          const snowflake = app.stage.children[i];
+          snowflake.angle += (snowflake.sway - 0.5) * 2;
+          snowflake.position.x += ts * snowflake.sway * Math.sin(s + snowflake.align);
+          snowflake.position.y += ts * gravity * snowflake.size;
+          if (snowflake.position.y >= h + 5) {
+            snowflake.position.y = -5;
+            snowflake.sway = Math.random() * 1;
+            snowflake.align = Math.random() * twoPi;
+            snowflake.x = Math.random() * w;
+          }
+          const r = Math.random() * 5;
+          const r2 = r / 2;
+          const rx = (Math.random() * r) - r2;
+          const ry = (Math.random() * r) - r2;
+          snowflake.position.x += rx / slowMotion;
+          snowflake.position.y += ry / slowMotion;
+        }
+        s += 0.01;
+        if (s >= twoPi) {
+          s -= twoPi;
+        }
+      });
+    },
+  },
+};

packages/fun/src/index.js

@@ -0,0 +1 @@
+export default {};