adding storytelling elements

2026-05-09 14:56:16 +09:00
parent d4b3a3842c
commit 0253789ea4
10 changed files with 389 additions and 156 deletions
--- a/src/components/QuoteToast.svelte
+++ b/src/components/QuoteToast.svelte
@@ -0,0 +1,40 @@
+<script>
+    import { fragmentQuote } from '../stores/quoteStore.js';
+</script>
+
+{#if $fragmentQuote}
+    {#key $fragmentQuote.key}
+        <div
+            class="toast"
+            style="border-color: {$fragmentQuote.color}; --accent: {$fragmentQuote.color}"
+        >
+            <p>{$fragmentQuote.text}</p>
+        </div>
+    {/key}
+{/if}
+
+<style>
+    .toast {
+        position: absolute;
+        bottom: 22px;
+        right: 18px;
+        width: 230px;
+        padding: 10px 13px;
+        background: rgba(8, 8, 8, 0.88);
+        border-left: 3px solid;
+        color: #ccc;
+        font-family: 'Courier New', Courier, monospace;
+        font-size: 12.5px;
+        line-height: 1.55;
+        pointer-events: none;
+        animation: toastIn 4.2s ease forwards;
+        z-index: 20;
+    }
+
+    @keyframes toastIn {
+        0%   { opacity: 0; transform: translateX(14px); }
+        12%  { opacity: 1; transform: translateX(0);    }
+        78%  { opacity: 1; }
+        100% { opacity: 0; }
+    }
+</style>