From c9e9ee4edadcabf9a849fcc5e90b4b912c3fdbc8 Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Mon, 2 Jun 2025 15:28:00 +0800
Subject: [PATCH] feat(ui-loading-screens): day & night

---
 .../components/LoadingSciFiCircle/CRTLine.vue |   2 +-
 ...circle_blink_in_-_loading_(@proj-airi).riv | Bin 499 -> 2076 bytes
 ...e_blink_in_bold_-_loading_(@proj-airi).riv | Bin 548 -> 0 bytes
 .../components/LoadingSciFiCircle/index.vue   |  20 +++++++++++++++---
 4 files changed, 18 insertions(+), 4 deletions(-)
 delete mode 100644 packages/ui-loading-screens/src/components/LoadingSciFiCircle/assets/circle_blink_in_bold_-_loading_(@proj-airi).riv

diff --git a/packages/ui-loading-screens/src/components/LoadingSciFiCircle/CRTLine.vue b/packages/ui-loading-screens/src/components/LoadingSciFiCircle/CRTLine.vue
index 4b86eab2c..f367f8cb8 100644
--- a/packages/ui-loading-screens/src/components/LoadingSciFiCircle/CRTLine.vue
+++ b/packages/ui-loading-screens/src/components/LoadingSciFiCircle/CRTLine.vue
@@ -48,7 +48,7 @@
 
 @keyframes glitch-flash {
   0% { opacity: 1; }
-  50% { opacity: 0.7; }
+  50% { opacity: 0.9; }
   100% { opacity: 1; }
 }
 </style>
diff --git a/packages/ui-loading-screens/src/components/LoadingSciFiCircle/assets/circle_blink_in_-_loading_(@proj-airi).riv b/packages/ui-loading-screens/src/components/LoadingSciFiCircle/assets/circle_blink_in_-_loading_(@proj-airi).riv
index a0c060b38bab7b298ff41c84a9fc96a9775b690d..6881fcd1c45c1fa73b9cfcf2263c75a1865483cd 100644
GIT binary patch
literal 2076
zcmeH{Jxjx25XbNAg;uQ!!KziMSp*$KM2d*mv?eNoLeb*;5;WLITcJe3t+TuM1soLo
z2CjlS_z7Hnw-o9iZhA?p)KXs%mqMT6xl3~YdpLgiKhqPlqfWRyTsXlrW*paaL$`EC
z_w+!Il%^~_5fraxz!L-~q=r<NwPhU6Gy+j1Y9zox_2Hxu*OJ?kVkB2$x&U>MI#%kf
zjf+6QMu0QLV{IS`uFh9pENlBLle*@#EhDieZETv|MLj62nNfj0^{LMF*>?zVO?X3i
zOL#|kPxwIiNSG$f5<U?^i-5g6QjimZcG;RPxO5eh-}9IC`H%dlXIu`s1LuJefRqd!
z12qvNuE&goF7*vAg15g4TK$dSQ>#X6z^B-8%$}^(?<w`#+fS?zxz@v)T8>_hZq{&n
zpE9o^Hx=?F_NUwdx$?2+gHxqIb74KOhUHBv7xIz6DfACC%$S;~OH<kkGvirca0i`}
z+P0qLe0UcDWC-nX2tojm0Y=o4$VWC}tL1|{WFcqvso*>73io2}0Y;u@kL=mylHA>v
z)upaUV=ZcS|AD_KivMDHyHCaP_Eqxz-S8XB7oxW<|22Qh_vOdG;{TuT{eqw14ebiU
AdjJ3c

delta 95
zcmbOu@R@mnw;hLLQAtvMVo?eMGb;lxL&I)oJ`lmc!pbPZz;MD@6htrxv2v*X2Lg0O
flh-miY<|lk#VBCM;J{$d;5eO;nZb4{BLf2f=*bv+

diff --git a/packages/ui-loading-screens/src/components/LoadingSciFiCircle/assets/circle_blink_in_bold_-_loading_(@proj-airi).riv b/packages/ui-loading-screens/src/components/LoadingSciFiCircle/assets/circle_blink_in_bold_-_loading_(@proj-airi).riv
deleted file mode 100644
index 04b341ed09404aeaebb02964f65d312cff343539..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 548
zcma)&&r1SP5XWb97FV+Z(P|~kOUIB95sBR0b~S>!RD{{dY9Yf4#7nn5caQ#o4h8)O
zU4`n<U(hvwFM=MTTg|Q({W|mxGxO$szVp8Ct*>llJn(eAT}2DK?i$spK}~8=n>u7s
zkNN~Z*Cb#S!2{-kF502%_E-ocs^!Y=Nuj(CZUIKYyw%3+03=`#;9d*a0Rn<J`^M`R
zMBgCq0J`K+HNrY!gRn{1B5V_O2ra@MVV@AD1dOpmg$sgd**2@}JeTB;`t>mPS>Mbp
z%c?*9kX`~XWtd6&Hj76_sd#Ke=Tmu*;w}g$f)LSN86QM6Cubeo;Y8@KwiFjx5o0#5
zBa@)=5aL#VTOl4Z!dc?%=R>|RqUCgCL>MB@(csPjo_)Ex)4pgP?G0;KKA|(nF8%{b
zaWBKRuc)In6)uMs6-Xq<H!6jS5nU_n9XOAN)ERnK3#UdoIuB|7Oc~S*bi?8~0=xr^
CMRS4x

diff --git a/packages/ui-loading-screens/src/components/LoadingSciFiCircle/index.vue b/packages/ui-loading-screens/src/components/LoadingSciFiCircle/index.vue
index a784c7d65..91517e147 100644
--- a/packages/ui-loading-screens/src/components/LoadingSciFiCircle/index.vue
+++ b/packages/ui-loading-screens/src/components/LoadingSciFiCircle/index.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { Rive } from '@rive-app/canvas-lite'
+import { useDark } from '@vueuse/core'
 import { onMounted, ref, watch } from 'vue'
 
-import CircleFadeInAnimation from './assets/circle_blink_in_bold_-_loading_(@proj-airi).riv?url'
+import CircleFadeInAnimation from './assets/circle_blink_in_-_loading_(@proj-airi).riv?url'
 import CRT from './CRT.vue'
 import CRTLine from './CRTLine.vue'
 
@@ -121,8 +122,11 @@ const bootMessages: BootMessage[] = [
 ]
 
 const riveCanvas = ref<HTMLCanvasElement>()
+const rive = ref<Rive>()
 const crtRef = ref<InstanceType<typeof CRT>>()
 
+const isDark = useDark()
+
 function getTimestamp(): number {
   return performance.now() / 1000 * timeMultiplier.value
 }
@@ -253,10 +257,11 @@ onMounted(async () => {
   riveCanvas.value.width = Math.max(window.innerWidth, 500) * 2
   riveCanvas.value.height = Math.max(window.innerWidth, 500) * 2
 
-  const _ = new Rive({
+  rive.value = new Rive({
     src: CircleFadeInAnimation,
     canvas: riveCanvas.value,
     autoplay: true,
+    artboard: isDark.value ? 'Bold' : 'Bold (Light)',
   })
 
   // Boot sequence
@@ -265,6 +270,15 @@ onMounted(async () => {
   }
 })
 
+watch(isDark, () => {
+  rive.value?.cleanup()
+  rive.value = new Rive({
+    src: CircleFadeInAnimation,
+    canvas: riveCanvas.value,
+    autoplay: true,
+    artboard: isDark.value ? 'Bold' : 'Bold (Light)',
+  })
+})
 watch(consoleEntries, () => crtRef.value && crtRef.value.handleWriteLine(), { deep: true })
 
 defineExpose({
@@ -282,7 +296,7 @@ defineExpose({
   <Transition name="fade-out">
     <div v-if="!done" w="[100dvw]" h="[100dvh]" font-retro-mono absolute inset-0 z-99 flex items-center justify-center>
       <div flex flex-col max-w="800px" w="full" p="4">
-        <div w="[min(200px,50dvw)]" h="[min(200px,50dvw)]" mx-auto flex justify-center overflow-hidden>
+        <div w="[min(200px,50dvw)]" h="[min(200px,50dvw)]" mx-auto flex justify-center overflow-hidden filter="blur-0.5px">
           <canvas ref="riveCanvas" object-contain />
         </div>
         <CRT ref="crtRef">