[feat] animations

src/App.svelte

@@ -37,15 +37,23 @@
             <GridChars endGrid={() => {gridOpen = false}} />
         {:else}
             {#if $sideBarStore}
-                <Sidebar openGrid={() => {gridOpen = true}} />
+                {#if ($SizeStore.w > 1028)}
+                    <Sidebar openGrid={() => {gridOpen = true}} />
+                {:else}
+                    <div class="fixed top-0 w-full h-full left-0 z-30 flex flex-row items-center">
+                        <!-- svelte-ignore a11y-click-events-have-key-events -->
+                        <Sidebar openGrid={() => {gridOpen = true}} />
+
+
+
+                    </div>
+                {/if}
             {:else}
                 <button on:click={() => {sideBarStore.set(true)}} class="fixed top-3 left-0 h-12 w-12 border-none rounded-r-md bg-borderc hover:bg-green-500 transition-colors flex items-center justify-center text-neutral-200 opacity-30 hover:opacity-70 z-20">
                     <ArrowRight />
                 </button>
             {/if}
-            {#if (($SizeStore.w > 1028) || (!$sideBarStore))}
+            <ChatScreen />
-                <ChatScreen />
-            {/if}
         {/if}
     {/if}
     {#if $alertStore.type !== 'none'}

src/lang/en.ts

@@ -346,4 +346,5 @@ export const languageEnglish = {
     createBotInternetAlert: "Please provide the character's name and the corresponding series/game.",
     able:"Able",
     assetWidth: "Asset Images Max Width",
+    animationSpeed: "Animation Speed"
 }

src/lib/Setting/Pages/DisplaySettings.svelte

@@ -7,6 +7,7 @@
   import SliderInput from "src/lib/UI/GUI/SliderInput.svelte";
   import SelectInput from "src/lib/UI/GUI/SelectInput.svelte";
   import OptionInput from "src/lib/UI/GUI/OptionInput.svelte";
+  import { updateAnimationSpeed } from "src/ts/gui/animation";
 </script>
 
 <h2 class="mb-2 text-2xl font-bold mt-2">{language.display}</h2>
@@ -70,6 +71,11 @@
     ($DataBase.assetWidth === -1) ? "Unlimited" : 
     ($DataBase.assetWidth === 0) ? "Hidden" : (`${($DataBase.assetWidth).toFixed(1)} rem`)}</span>
 
+
+<span class="text-neutral-200">{language.animationSpeed}</span>
+<SliderInput min={0} max={1} step={0.05} bind:value={$DataBase.animationSpeed} on:change={updateAnimationSpeed} />
+<span class="text-gray-400 mb-6 text-sm">{(`${($DataBase.animationSpeed).toFixed(2)}s`)}</span>
+
 <div class="flex items-center mt-2">
     <Check bind:check={$DataBase.fullScreen} onChange={changeFullscreen} name={language.fullscreen}/>
 </div>

src/lib/SideBars/Sidebar.svelte

@@ -33,12 +33,13 @@
   import SidebarAvatar from "./SidebarAvatar.svelte";
   import BaseRoundedButton from "../UI/BaseRoundedButton.svelte";
   import { get } from "svelte/store";
-  import { findCharacterIndexbyId, findCharacterbyId, getCharacterIndexObject } from "src/ts/util";
+  import { findCharacterIndexbyId, findCharacterbyId, getCharacterIndexObject, sleep } from "src/ts/util";
   import { v4 } from "uuid";
   import { checkCharOrder } from "src/ts/storage/globalApi";
   import { doingChat } from "src/ts/process";
   import { BotCreator } from "src/ts/copyright/creator";
   import Button from "../UI/GUI/Button.svelte";
+  import { fly } from "svelte/transition";
   let openPresetList = false;
   let sideBarMode = 0;
   let editMode = false;
@@ -94,6 +95,7 @@
   let IconRounded = false
   let openFolders:string[] = []
   let currentDrag: DragData = null
+  let closing = false
 
   const unsub = DataBase.subscribe((db) => {
     let newCharImages: sortType[] = [];
@@ -323,187 +325,22 @@
 </script>
 
 <div
-  class="flex h-full w-20 min-w-20 flex-col items-center bg-bgcolor text-white shadow-lg"
+  class="flex h-full w-20 min-w-20 flex-col items-center bg-bgcolor text-white shadow-lg relative"
   class:editMode
+  class:risu-sub-sidebar={!closing}
+  class:risu-sub-sidebar-close={closing}
+
 >
   <button
-    class="flex h-8 w-14 min-w-14 cursor-pointer items-center justify-center rounded-b-md bg-gray-500 transition-colors hover:bg-green-500"
+    class="flex h-8 min-h-8 w-14 min-w-14 cursor-pointer mt-2 items-center justify-center rounded-md bg-gray-500 transition-colors hover:bg-green-500"
     on:click={() => {
       menuMode = 1 - menuMode;
     }}><ListIcon />
   </button>
-  <div class="flex flex-grow w-full flex-col items-center overflow-x-hidden overflow-y-auto pr-0">
+  <div class="mt-2 border-b border-b-selected w-full relative">
-    <div class="h-4 min-h-4 w-14" on:dragover={(e) => {
+    {#if menuMode === 1}
-      e.preventDefault()
+      <div class="absolute w-20 min-w-20 flex border-b-selected border-b bg-bgcolor flex-col items-center pt-2 rounded-b-md z-20 pb-2">
-      e.dataTransfer.dropEffect = 'move'
+        <BarIcon
-      e.currentTarget.classList.add('bg-green-500')
-    }} on:dragleave={(e) => {
-      e.currentTarget.classList.remove('bg-green-500')
-    }} on:drop={(e) => {
-      e.preventDefault()
-      e.currentTarget.classList.remove('bg-green-500')
-      const da = currentDrag
-      if(da){
-        inserter(da,{index:0})
-      }
-    }} on:dragenter={preventAll} />
-    {#if menuMode === 0}
-      {#each charImages as char, ind}
-        <div class="group relative flex items-center px-2"
-          draggable="true"
-          on:dragstart={(e) => {avatarDragStart({index:ind}, e)}}
-          on:dragover={avatarDragOver}
-          on:drop={(e) => {avatarDrop({index:ind}, e)}}
-          on:dragenter={preventAll}
-          on:contextmenu={preventIfPolyfilled}
-        >
-          <SidebarIndicator
-            isActive={char.type === 'normal' && $selectedCharID === char.index && sideBarMode !== 1}
-          />
-          <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-          <div
-              on:click={() => {
-                if(char.type === "normal"){
-                  changeChar(char.index);
-                }
-              }}
-              on:keydown={(e) => {
-                if (e.key === "Enter") {
-                  if(char.type === "normal"){
-                    changeChar(char.index);
-                  }
-                }
-              }}
-              tabindex="0"
-            >
-            {#if char.type === 'normal'}
-              <SidebarAvatar src={char.img ? getCharImage(char.img, "plain") : "/none.webp"} size="56" rounded={IconRounded} />
-            {:else if char.type === "folder"}
-              <SidebarAvatar src="slot" size="56" rounded={IconRounded} onClick={() => {
-                if(char.type !== 'folder'){
-                  return
-                }
-                if(openFolders.includes(char.id)){
-                  openFolders.splice(openFolders.indexOf(char.id), 1)
-                }
-                else{
-                  openFolders.push(char.id)
-                }
-                openFolders = openFolders
-              }}>
-                {#if openFolders.includes(char.id)}
-                  <FolderOpenIcon />
-                {:else}
-                  <FolderIcon />
-                {/if}
-              </SidebarAvatar>
-            {/if}
-          </div>
-        </div>
-        {#if char.type === 'folder' && openFolders.includes(char.id)}
-          <div class="w-full flex flex-col items-center py-1 mt-1 rounded-lg relative">
-            <div class="absolute top-0 left-1 bg-darkbg w-full h-full rounded-lg z-0"></div>
-            <div class="h-4 min-h-4 w-14 relative z-10" on:dragover={(e) => {
-              e.preventDefault()
-              e.dataTransfer.dropEffect = 'move'
-              e.currentTarget.classList.add('bg-green-500')
-            }} on:dragleave={(e) => {
-              e.currentTarget.classList.remove('bg-green-500')
-            }} on:drop={(e) => {
-              e.preventDefault()
-              e.currentTarget.classList.remove('bg-green-500')
-              const da = currentDrag
-              if(da && char.type === 'folder'){
-                inserter(da,{index:0,folder:char.id})
-              }
-            }} on:dragenter={preventAll}/>
-            {#each char.folder as char2, ind}
-                <div class="group relative flex items-center px-2 z-10"
-                draggable="true"
-                on:dragstart={(e) => {if(char.type === 'folder'){avatarDragStart({index: ind, folder:char.id}, e)}}}
-                on:dragover={avatarDragOver}
-                on:drop={(e) => {if(char.type === 'folder'){avatarDrop({index: ind, folder:char.id}, e)}}}
-                on:dragenter={preventAll}
-                on:contextmenu={preventIfPolyfilled}
-              >
-                <SidebarIndicator
-                  isActive={$selectedCharID === char2.index && sideBarMode !== 1}
-                />
-                <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-                <div
-                    on:click={() => {
-                      if(char2.type === "normal"){
-                        changeChar(char2.index);
-                      }
-                    }}
-                    on:keydown={(e) => {
-                      if (e.key === "Enter") {
-                        if(char2.type === "normal"){
-                          changeChar(char2.index);
-                        }
-                      }
-                    }}
-                    tabindex="0"
-                  >
-                  <SidebarAvatar src={char2.img ? getCharImage(char2.img, "plain") : "/none.webp"} size="56" rounded={IconRounded} />
-                </div>
-              </div>
-              <div class="h-4 min-h-4 w-14 relative z-20" on:dragover={(e) => {
-                e.preventDefault()
-                e.dataTransfer.dropEffect = 'move'
-                e.currentTarget.classList.add('bg-green-500')
-              }} on:dragleave={(e) => {
-                e.currentTarget.classList.remove('bg-green-500')
-              }} on:drop={(e) => {
-                e.preventDefault()
-                e.currentTarget.classList.remove('bg-green-500')
-                const da = currentDrag
-                if(da && char.type === 'folder'){
-                  inserter(da,{index:ind+1,folder:char.id})
-                }
-              }} on:dragenter={preventAll}/>
-            {/each}
-          </div>
-        {/if}
-        <div class="h-4 min-h-4 w-14" on:dragover|preventDefault={(e) => {
-          e.dataTransfer.dropEffect = 'move'
-          e.currentTarget.classList.add('bg-green-500')
-        }} on:dragleave={(e) => {
-          e.currentTarget.classList.remove('bg-green-500')
-        }} on:drop={(e) => {
-          e.preventDefault()
-          e.currentTarget.classList.remove('bg-green-500')
-          const da = currentDrag
-          if(da){
-            inserter(da,{index:ind+1})
-          }
-        }} on:dragenter={preventAll} />
-      {/each}
-      <div class="flex flex-col items-center space-y-2 px-2">
-        <BaseRoundedButton
-          onClick={() => {
-            if (sideBarMode === 1) {
-              reseter();
-              sideBarMode = 0;
-            } else {
-              reseter();
-              sideBarMode = 1;
-            }
-          }}
-          ><svg viewBox="0 0 24 24" width="1.2em" height="1.2em"
-            ><path
-              fill="none"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M12 6v6m0 0v6m0-6h6m-6 0H6"
-            /></svg
-          ></BaseRoundedButton
-        >
-      </div>
-    {:else}
-      <BarIcon
         onClick={() => {
           if ($settingsOpen) {
             reseter();
@@ -527,18 +364,199 @@
           openGrid();
         }}><LayoutGridIcon /></BarIcon
       >
+    </div>
     {/if}
   </div>
+  <div class="flex flex-grow w-full flex-col items-center overflow-x-hidden overflow-y-auto pr-0">
+    <div class="h-4 min-h-4 w-14" on:dragover={(e) => {
+      e.preventDefault()
+      e.dataTransfer.dropEffect = 'move'
+      e.currentTarget.classList.add('bg-green-500')
+    }} on:dragleave={(e) => {
+      e.currentTarget.classList.remove('bg-green-500')
+    }} on:drop={(e) => {
+      e.preventDefault()
+      e.currentTarget.classList.remove('bg-green-500')
+      const da = currentDrag
+      if(da){
+        inserter(da,{index:0})
+      }
+    }} on:dragenter={preventAll} />
+    {#each charImages as char, ind}
+      <div class="group relative flex items-center px-2"
+        draggable="true"
+        on:dragstart={(e) => {avatarDragStart({index:ind}, e)}}
+        on:dragover={avatarDragOver}
+        on:drop={(e) => {avatarDrop({index:ind}, e)}}
+        on:dragenter={preventAll}
+        on:contextmenu={preventIfPolyfilled}
+      >
+        <SidebarIndicator
+          isActive={char.type === 'normal' && $selectedCharID === char.index && sideBarMode !== 1}
+        />
+        <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+        <div
+            on:click={() => {
+              if(char.type === "normal"){
+                changeChar(char.index);
+              }
+            }}
+            on:keydown={(e) => {
+              if (e.key === "Enter") {
+                if(char.type === "normal"){
+                  changeChar(char.index);
+                }
+              }
+            }}
+            tabindex="0"
+          >
+          {#if char.type === 'normal'}
+            <SidebarAvatar src={char.img ? getCharImage(char.img, "plain") : "/none.webp"} size="56" rounded={IconRounded} />
+          {:else if char.type === "folder"}
+            <SidebarAvatar src="slot" size="56" rounded={IconRounded} onClick={() => {
+              if(char.type !== 'folder'){
+                return
+              }
+              if(openFolders.includes(char.id)){
+                openFolders.splice(openFolders.indexOf(char.id), 1)
+              }
+              else{
+                openFolders.push(char.id)
+              }
+              openFolders = openFolders
+            }}>
+              {#if openFolders.includes(char.id)}
+                <FolderOpenIcon />
+              {:else}
+                <FolderIcon />
+              {/if}
+            </SidebarAvatar>
+          {/if}
+        </div>
+      </div>
+      {#if char.type === 'folder' && openFolders.includes(char.id)}
+        <div class="w-full flex flex-col items-center py-1 mt-1 rounded-lg relative">
+          <div class="absolute top-0 left-1 bg-darkbg w-full h-full rounded-lg z-0"></div>
+          <div class="h-4 min-h-4 w-14 relative z-10" on:dragover={(e) => {
+            e.preventDefault()
+            e.dataTransfer.dropEffect = 'move'
+            e.currentTarget.classList.add('bg-green-500')
+          }} on:dragleave={(e) => {
+            e.currentTarget.classList.remove('bg-green-500')
+          }} on:drop={(e) => {
+            e.preventDefault()
+            e.currentTarget.classList.remove('bg-green-500')
+            const da = currentDrag
+            if(da && char.type === 'folder'){
+              inserter(da,{index:0,folder:char.id})
+            }
+          }} on:dragenter={preventAll}/>
+          {#each char.folder as char2, ind}
+              <div class="group relative flex items-center px-2 z-10"
+              draggable="true"
+              on:dragstart={(e) => {if(char.type === 'folder'){avatarDragStart({index: ind, folder:char.id}, e)}}}
+              on:dragover={avatarDragOver}
+              on:drop={(e) => {if(char.type === 'folder'){avatarDrop({index: ind, folder:char.id}, e)}}}
+              on:dragenter={preventAll}
+              on:contextmenu={preventIfPolyfilled}
+            >
+              <SidebarIndicator
+                isActive={$selectedCharID === char2.index && sideBarMode !== 1}
+              />
+              <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+              <div
+                  on:click={() => {
+                    if(char2.type === "normal"){
+                      changeChar(char2.index);
+                    }
+                  }}
+                  on:keydown={(e) => {
+                    if (e.key === "Enter") {
+                      if(char2.type === "normal"){
+                        changeChar(char2.index);
+                      }
+                    }
+                  }}
+                  tabindex="0"
+                >
+                <SidebarAvatar src={char2.img ? getCharImage(char2.img, "plain") : "/none.webp"} size="56" rounded={IconRounded} />
+              </div>
+            </div>
+            <div class="h-4 min-h-4 w-14 relative z-20" on:dragover={(e) => {
+              e.preventDefault()
+              e.dataTransfer.dropEffect = 'move'
+              e.currentTarget.classList.add('bg-green-500')
+            }} on:dragleave={(e) => {
+              e.currentTarget.classList.remove('bg-green-500')
+            }} on:drop={(e) => {
+              e.preventDefault()
+              e.currentTarget.classList.remove('bg-green-500')
+              const da = currentDrag
+              if(da && char.type === 'folder'){
+                inserter(da,{index:ind+1,folder:char.id})
+              }
+            }} on:dragenter={preventAll}/>
+          {/each}
+        </div>
+      {/if}
+      <div class="h-4 min-h-4 w-14" on:dragover|preventDefault={(e) => {
+        e.dataTransfer.dropEffect = 'move'
+        e.currentTarget.classList.add('bg-green-500')
+      }} on:dragleave={(e) => {
+        e.currentTarget.classList.remove('bg-green-500')
+      }} on:drop={(e) => {
+        e.preventDefault()
+        e.currentTarget.classList.remove('bg-green-500')
+        const da = currentDrag
+        if(da){
+          inserter(da,{index:ind+1})
+        }
+      }} on:dragenter={preventAll} />
+    {/each}
+    <div class="flex flex-col items-center space-y-2 px-2">
+      <BaseRoundedButton
+        onClick={() => {
+          if (sideBarMode === 1) {
+            reseter();
+            sideBarMode = 0;
+          } else {
+            reseter();
+            sideBarMode = 1;
+          }
+        }}
+        ><svg viewBox="0 0 24 24" width="1.2em" height="1.2em"
+          ><path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M12 6v6m0 0v6m0-6h6m-6 0H6"
+          /></svg
+        ></BaseRoundedButton
+      >
+    </div>
+  </div>
 </div>
 <div
-  class="setting-area flex w-96 flex-col overflow-y-auto overflow-x-hidden bg-darkbg p-6 text-gray-200"
+  class="setting-area flex w-96 h-full flex-col overflow-y-auto overflow-x-hidden bg-darkbg p-6 text-gray-200 max-h-full"
-  class:flex-grow={$SizeStore.w <= 1028}
+  class:risu-sidebar={!closing}
+  class:risu-sidebar-close={closing}
   class:minw96={$SizeStore.w > 1028}
+  on:animationend={() => {
+    if(closing){
+      closing = false
+      sideBarStore.set(false)
+    }
+  }}
 >
   <button
     class="flex w-full justify-end text-gray-200"
-    on:click={() => {
+    on:click={async () => {
-      sideBarStore.set(false);
+      if(closing){
+        return
+      }
+      closing = true;
     }}
   >
     <button class="border-none bg-transparent p-0 text-gray-200"><X /></button>
@@ -588,6 +606,15 @@
   />
 {/if}
 
+{#if $SizeStore.w <= 1028}
+    <div class="flex-grow h-full"
+      class:sidebar-dark-animation={!closing}
+      class:sidebar-dark-close-animation={closing}>
+
+    </div>
+
+{/if}
+
 <style>
   .minw96 {
     min-width: 24rem; /* 384px */
@@ -595,4 +622,98 @@
   .editMode {
     min-width: 6rem;
   }
+  @keyframes sidebar-transition {
+    from {
+      width: 0rem;
+      min-width: 0rem;
+    }
+    to {
+      width: 24rem;
+      min-width: 24rem;
+    }
+  }
+  @keyframes sidebar-transition-close {
+    from {
+      width: 24rem;
+      min-width: 24rem;
+      max-width: 24rem;
+      right:0rem;
+    }
+    to {
+      width: 0rem;
+      min-width: 0rem;
+      max-width: 0rem;
+      right: 10rem;
+    }
+  }
+  @keyframes sub-sidebar-transition {
+    from {
+      width: 0rem;
+      min-width: 0rem;
+    }
+    to {
+      width: 5rem;
+      min-width: 5rem;
+    }
+  }
+  @keyframes sub-sidebar-transition-close {
+    from {
+      width: 5rem;
+      min-width: 5rem;
+      max-width: 5rem;
+      right:0rem;
+
+    }
+    to {
+      width: 0rem;
+      min-width: 0rem;
+      max-width: 0rem;
+      right: 10rem;
+    }
+  }
+  @keyframes sidebar-dark-animation{
+    from {
+      background-color: rgba(0,0,0,0) !important;
+    }
+    to {
+      background-color: rgba(0,0,0,0.5) !important;
+    }
+  }
+  @keyframes sidebar-dark-closing-animation{
+    from {
+      background-color: rgba(0,0,0,0.5) !important;
+    }
+    to {
+      background-color: rgba(0,0,0,0) !important;
+    }
+  }
+
+  .risu-sidebar {
+    animation-name: sidebar-transition;
+    animation-duration: var(--risu-animation-speed);
+  }
+  .risu-sidebar-close {
+    animation-name: sidebar-transition-close;
+    animation-duration: var(--risu-animation-speed);
+    position: relative;
+  }
+  .risu-sub-sidebar {
+    animation-name: sub-sidebar-transition;
+    animation-duration: var(--risu-animation-speed);
+  }
+  .risu-sub-sidebar-close {
+    animation-name: sub-sidebar-transition-close;
+    animation-duration: var(--risu-animation-speed);
+    position: relative;
+  }
+  .sidebar-dark-animation{
+    animation-name: sidebar-dark-transition;
+    animation-duration: var(--risu-animation-speed);
+    background-color: rgba(0,0,0,0.5)
+  }
+  .sidebar-dark-close-animation{
+    animation-name: sidebar-dark-closing-transition;
+    animation-duration: var(--risu-animation-speed);
+    background-color: rgba(0,0,0,0)
+  }
 </style>

src/lib/UI/GUI/SliderInput.svelte

@@ -6,6 +6,7 @@
     max={max}
     step={step}
     bind:value
+    on:change
 >
 
 <!-- <div class="p-6 max-w-sm mx-auto bg-gray-800 rounded-xl shadow-md flex items-center space-x-4 w-full" class:mb-4={marginBottom}>

src/lib/UI/Realm/RealmLicense.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-    import { CCLicenseData, tooltip } from "src/ts/copyright/license";
+    import { CCLicenseData } from "src/ts/copyright/license";
+    import { tooltip } from "src/ts/gui/tooltip";
     import { openURL } from "src/ts/storage/globalApi";
 
     export let license = ""

src/styles.css

@@ -16,7 +16,7 @@ body{
   --FontColorBold : #fafafa;
   --FontColorItalic : #8C8D93;
   --FontColorItalicBold : #8C8D93;
-
+  --risu-animation-speed: 0.2s
 }
 
 html, body{

src/ts/copyright/license.ts

@@ -1,6 +1,3 @@
-import tippy from 'tippy.js'
-import 'tippy.js/dist/tippy.css';
-
 export const CCLicenseData = {
     "CC BY 4.0": ["by", "Requires Attribution"],
     "CC BY-NC 4.0": ["by-nc", "Requires Attribution and Non Commercial"],
@@ -8,17 +5,4 @@ export const CCLicenseData = {
     "CC BY-SA 4.0": ["by-sa", "Requires Attribution and Share Alike"],
     "CC BY-ND 4.0": ["by-nd", "Requires Attribution and No Derivatives"],
     "CC BY-NC-ND 4.0": ["by-nc-nd", "Requires Attribution, Non Commercial and No Derivatives"],
-}
-
-export function tooltip(node:HTMLElement, tip:string) {
-    const instance = tippy(node, {
-        content: tip,
-        animation: 'fade',
-        arrow: true,
-    })
-    return {
-        destroy() {
-            instance.destroy()
-        }
-    };
 }

src/ts/gui/animation.ts

@@ -0,0 +1,7 @@
+import { get } from "svelte/store";
+import { DataBase } from "../storage/database";
+
+export function updateAnimationSpeed(){
+    const db = get(DataBase);
+    document.documentElement.style.setProperty('--risu-animation-speed', db.animationSpeed  + 's');
+}

src/ts/gui/tooltip.ts

@@ -0,0 +1,15 @@
+import tippy from 'tippy.js'
+import 'tippy.js/dist/tippy.css';
+
+export function tooltip(node:HTMLElement, tip:string) {
+    const instance = tippy(node, {
+        content: tip,
+        animation: 'fade',
+        arrow: true,
+    })
+    return {
+        destroy() {
+            instance.destroy()
+        }
+    };
+}

src/ts/storage/database.ts

@@ -283,6 +283,8 @@ export function setDatabase(data:Database){
     data.toggleConfirmRecommendedPreset ??= true
     data.officialplugins ??= {}
     data.assetWidth ??= -1
+    data.animationSpeed ??= 0.2
+    
     changeLanguage(data.language)
     DataBase.set(data)
 }
@@ -576,6 +578,7 @@ export interface Database{
         icon:string
     }[]
     assetWidth:number
+    animationSpeed:number
 }
 
 interface hordeConfig{

src/ts/storage/globalApi.ts

@@ -20,6 +20,7 @@ import { defaultJailbreak, defaultMainPrompt, oldJailbreak, oldMainPrompt } from
 import { loadRisuAccountData } from "../drive/accounter";
 import { decodeRisuSave, encodeRisuSave } from "./risuSave";
 import { AutoStorage } from "./autoStorage";
+import { updateAnimationSpeed } from "../gui/animation";
 
 //@ts-ignore
 export const isTauri = !!window.__TAURI__
@@ -419,6 +420,7 @@ export async function loadData() {
             } catch (error) {}
             await checkNewFormat()
             updateTextTheme()
+            updateAnimationSpeed()
             if(get(DataBase).account){
                 try {
                     await loadRisuAccountData()