better animation

.gitea/workflows/release.yaml

@@ -0,0 +1,27 @@
+name: release
+
+on:
+  push:
+    tags:
+      - '*'
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: latest
+      - run: |
+          bun install
+          bun run build
+          REPONAME=`basename $GITHUB_REPOSITORY`
+          mkdir out
+          mv dist out/$REPONAME
+          cd out && zip -r $REPONAME.zip $REPONAME
+      - uses: https://gitea.com/actions/release-action@main
+        with:
+          files: |-
+            bin/**
+          api_key: '${{secrets.RELEASE_TOKEN}}'

src/App.svelte

@@ -1,7 +1,40 @@
 <script lang="ts">
     import type { Comment } from '@onecomme.com/onesdk/types/Comment';
     import { chats } from './chats';
-    import { scale } from 'svelte/transition';
+    import { type TransitionConfig } from 'svelte/transition';
+    import { quadOut as easing } from 'svelte/easing';
+
+    const child = new WeakMap<Node, number>();
+    let container: HTMLDivElement;
+    let queued = false;
+
+    function queue() {
+        if (queued) return;
+        function fn() {
+            queued = false;
+            if (!container) return;
+            let n = 0;
+            container.childNodes.forEach((node) => {
+                n += child.get(node) ?? 0;
+            });
+            container.scrollTo({ top: -n });
+        }
+        requestAnimationFrame(fn);
+    }
+
+    function scrollEffect(div: HTMLDivElement): TransitionConfig {
+        const rect = div.getBoundingClientRect();
+        child.set(div, rect.height);
+        return {
+            easing,
+            duration: 200,
+            tick(_, u) {
+                const rect = div.getBoundingClientRect();
+                child.set(div, u * rect.height);
+                queue();
+            }
+        };
+    }
 
     function authorColor(comment: Comment) {
         if (comment.service === 'youtube') {
@@ -12,22 +45,22 @@
     }
 </script>
 
-<div class="main flex flex-col-reverse gap-2 h-screen w-screen overflow-hidden">
+<div
+    class="main flex flex-col-reverse h-screen w-screen overflow-hidden px-3 py-2"
+    bind:this={container}
+>
     {#each [...$chats].reverse() as chat (`${chat.service}/${chat.data.id}`)}
         {@const author = chat.data.displayName ?? chat.data.name}
-        <div
+        <div class="flex flex-row gap-4 pt-3 pb-1 box-border origin-top-left" in:scrollEffect>
-            class="flex flex-row gap-4 p-2 box-border origin-top-left"
-            in:scale={{ duration: 200 }}
-        >
             <div class="w-10 min-w-10 relative">
                 <img
                     src={chat.data.originalProfileImage}
                     alt={author}
-                    class="w-10 h-10 rounded-full absolute -top-3"
+                    class="w-10 h-10 rounded-full absolute -top-3 bg-slate-200 border-2 border-slate-400 shadow"
                 />
             </div>
             <div
-                class="bubble relative flex-grow flex flex-col gap-1 bg-slate-700 bg-opacity-80 text-gray-50 px-4 py-2 rounded-b-xl rounded-tr-xl"
+                class="bubble shadow relative flex-grow flex flex-col gap-1 bg-slate-800 bg-opacity-95 text-gray-50 px-4 py-2 rounded-b-xl rounded-tr-xl"
             >
                 <div class="text-xs font-bold gap-0.5 items-center {authorColor(chat)}">
                     {author}
@@ -56,7 +89,7 @@
     }
     .bubble {
         &::before {
-            @apply -left-2 top-0 block h-2 w-2 bg-slate-700 bg-opacity-80;
+            @apply -left-2 top-0 block h-2 w-2 bg-slate-800 bg-opacity-95;
             content: ' ';
             position: absolute;
             mask-image: linear-gradient(
@@ -72,7 +105,8 @@
         mask-image: linear-gradient(
             180deg,
             rgba(0, 0, 0, 0) 0%,
-            rgba(0, 0, 0, 1) 50%,
+            rgba(0, 0, 0, 0.25) 15%,
+            rgba(0, 0, 0, 1) 30%,
             rgba(0, 0, 0, 1) 100%
         );
     }