Add matrix background with info box transparency effects

src-svelte/package.json

@@ -68,6 +68,7 @@
     "@neodrag/svelte": "file:../forks/neodrag/packages/svelte",
     "autosize": "^6.0.1",
     "nanoid": "^3.3.6",
+    "pure-rand": "^6.1.0",
     "svelte-highlight": "^7.6.0",
     "svelte-markdown": "^0.4.1"
   }

src-svelte/src/lib/InfoBox.svelte

@@ -244,7 +244,7 @@
   import getComponentId from "./label-id";
   import RoundDef from "./RoundDef.svelte";
   import { cubicInOut, cubicOut, linear } from "svelte/easing";
-  import { animationSpeed, animationsOn } from "./preferences";
+  import { animationSpeed, animationsOn, transparencyOn } from "./preferences";
   import { fade, type TransitionConfig } from "svelte/transition";
   import { firstAppLoad, firstPageLoad } from "./firstPageLoad";
   import { SubAnimation, PropertyAnimation } from "$lib/animation-timing";
@@ -514,7 +514,14 @@
   <RoundDef />
 
   <div class="border-container">
-    <div class="border-box" in:revealOutline|global={timing.borderBox}></div>
+    <div
+      class="border-box"
+      class:transparent={$transparencyOn}
+      in:revealOutline|global={timing.borderBox}
+    >
+      <div class="blur"></div>
+      <div class="background"></div>
+    </div>
     <div class="info-box">
       <h2
         in:revealTitle|global={timing.title}
@@ -549,32 +556,56 @@
     flex-direction: column;
   }
 
-  .border-box {
+  .border-box,
+  .border-box div,
+  .border-box div::before {
     width: 100%;
     height: 100%;
     position: absolute;
-    filter: url(#round) drop-shadow(0px 1px 4px rgba(26, 58, 58, 0.4));
+  }
+
+  .border-box {
     z-index: 1;
+    --cut-depth: calc(2 * var(--cut) * cos(45deg));
+    --poly: polygon(
+      0% var(--cut-depth),
+      var(--cut-depth) 0%,
+      100% 0%,
+      100% calc(100% - var(--cut-depth)),
+      calc(100% - var(--cut-depth)) 100%,
+      0% 100%
+    );
+  }
+
+  .border-box .blur {
+    display: none;
+  }
+
+  .border-box.transparent .blur {
+    display: block;
   }
 
-  .border-box::before {
+  .border-box .blur::before {
+    backdrop-filter: blur(9px);
+    -webkit-clip-path: var(--poly);
+    clip-path: var(--poly);
+    content: "";
+  }
+
+  .border-box .background {
+    filter: url(#round) drop-shadow(0px 1px 4px rgba(26, 58, 58, 0.4));
+  }
+
+  .border-box.transparent .background {
+    filter: url(#round) drop-shadow(0px 1px 4px rgba(26, 58, 58, 0.8));
+    opacity: 0.5;
+  }
+
+  .border-box .background::before {
+    background: #fff;
+    -webkit-clip-path: var(--poly);
+    clip-path: var(--poly);
     content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: var(--color-foreground);
-    -webkit-mask:
-      linear-gradient(-45deg, transparent 0 var(--cut), #fff 0) bottom right,
-      linear-gradient(135deg, transparent 0 var(--cut), #fff 0) top left;
-    -webkit-mask-size: 51% 100%;
-    -webkit-mask-repeat: no-repeat;
-    mask:
-      linear-gradient(-45deg, transparent 0 var(--cut), #fff 0) bottom right,
-      linear-gradient(135deg, transparent 0 var(--cut), #fff 0) top left;
-    mask-size: 51% 100%;
-    mask-repeat: no-repeat;
   }
 
   .info-box {

src-svelte/src/lib/InfoBoxView.svelte

@@ -8,7 +8,7 @@
 
 <div style="--base-animation-speed: {$animationSpeed};">
   <InfoBox {...$$restProps}>
-    <p>
+    <p class="atomic-reveal">
       How do we know that even the realest of realities wouldn't be subjective,
       in the final analysis? Nobody can prove his existence, can he? &mdash; <em
         >Simulacron 3</em

src-svelte/src/lib/Scrollable.svelte

@@ -27,7 +27,8 @@
         return;
       }
 
-      scrollableHeight = `${container.clientHeight}px`;
+      const newHeight = Math.floor(container.getBoundingClientRect().height);
+      scrollableHeight = `${newHeight}px`;
       dispatchResizeEvent("resize", scrollable.getDimensions());
     });
   }

src-svelte/src/lib/__mocks__/MockPageTransitions.svelte

@@ -2,15 +2,26 @@
   import MockFullPageLayout from "./MockFullPageLayout.svelte";
   import PageTransition from "../../routes/PageTransition.svelte";
   import { firstAppLoad, firstPageLoad } from "$lib/firstPageLoad";
-  import { animationSpeed } from "$lib/preferences";
+  import {
+    animationSpeed,
+    transparencyOn,
+    backgroundAnimation,
+  } from "$lib/preferences";
+  import Background from "../../routes/Background.svelte";
 
   firstAppLoad.set(true);
   firstPageLoad.set(true);
   animationSpeed.set(0.1);
+  transparencyOn.set(true);
+  backgroundAnimation.set(true);
 </script>
 
 <div id="mock-transitions">
   <MockFullPageLayout>
+    <div class="bg">
+      <Background />
+    </div>
+
     <PageTransition currentRoute="/storybook-demo">
       <slot />
     </PageTransition>
@@ -21,4 +32,13 @@
   #mock-transitions {
     margin: -1rem;
   }
+
+  .bg {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+  }
 </style>

src-svelte/src/lib/bindings.ts

@@ -52,7 +52,7 @@ export type Llm = { name: string; requested: string; provider: Service }
 export type Service = "OpenAI"
 export type EntityId = { uuid: string }
 export type Response = { completion: ChatMessage }
-export type Preferences = { animations_on: boolean | null; background_animation: boolean | null; animation_speed: number | null; sound_on: boolean | null; volume: number | null }
+export type Preferences = { animations_on?: boolean | null; background_animation?: boolean | null; animation_speed?: number | null; transparency_on?: boolean | null; sound_on?: boolean | null; volume?: number | null }
 export type ApiKeys = { openai: string | null }
 export type OS = "Mac" | "Linux" | "Windows"
 export type Shell = "Bash" | "Zsh" | "PowerShell"

src-svelte/src/lib/preferences.ts

@@ -1,7 +1,7 @@
 import { writable, derived } from "svelte/store";
-import type { Preferences } from "./bindings";
 
 export const animationsOn = writable(true);
+export const transparencyOn = writable(false);
 export const backgroundAnimation = writable(false);
 export const animationSpeed = writable(1);
 export const soundOn = writable(true);
@@ -12,11 +12,3 @@ export const standardDuration = derived(
   ([$animationsOn, $animationSpeed]) =>
     $animationsOn ? 100 / $animationSpeed : 0,
 );
-
-export const NullPreferences: Preferences = {
-  animations_on: null,
-  background_animation: null,
-  animation_speed: null,
-  sound_on: null,
-  volume: null,
-};

src-svelte/src/routes/AppLayout.svelte

@@ -11,6 +11,7 @@
     soundOn,
     backgroundAnimation,
     animationSpeed,
+    transparencyOn,
     volume,
     animationsOn,
   } from "$lib/preferences";
@@ -20,28 +21,32 @@
 
   onMount(async () => {
     const prefs = await getPreferences();
-    if (prefs.sound_on !== null) {
+    if (prefs.sound_on != null) {
       soundOn.set(prefs.sound_on);
     }
 
-    if (prefs.volume !== null) {
+    if (prefs.volume != null) {
       volume.set(prefs.volume);
     }
 
-    if (prefs.animations_on !== null) {
+    if (prefs.animations_on != null) {
       animationsOn.set(prefs.animations_on);
     }
 
-    if (prefs.background_animation === null) {
+    if (prefs.background_animation == null) {
       backgroundAnimation.set(true);
     } else {
       backgroundAnimation.set(prefs.background_animation);
     }
 
-    if (prefs.animation_speed !== null) {
+    if (prefs.animation_speed != null) {
       animationSpeed.set(prefs.animation_speed);
     }
 
+    if (prefs.transparency_on != null) {
+      transparencyOn.set(prefs.transparency_on);
+    }
+
     ready = true;
   });
 </script>
@@ -56,13 +61,15 @@
       </div>
       <Snackbar />
 
-      <main>
-        {#if ready}
-          <PageTransition {currentRoute}>
-            <slot />
-          </PageTransition>
-        {/if}
-      </main>
+      <div class="content-container">
+        <main>
+          {#if ready}
+            <PageTransition {currentRoute}>
+              <slot />
+            </PageTransition>
+          {/if}
+        </main>
+      </div>
     </div>
   </AnimationControl>
 </div>
@@ -84,13 +91,9 @@
     height: 100vh;
     box-sizing: border-box;
     margin-left: var(--sidebar-space);
-    overflow-x: hidden;
-    overflow-y: scroll;
     border-radius: var(--main-corners);
     background-color: var(--color-offwhite);
     box-shadow: calc(-1 * var(--shadow-offset)) 0 var(--shadow-blur) 0 #ccc;
-    overflow-y: auto;
-    overflow-x: hidden;
   }
 
   .background-layout {
@@ -103,11 +106,17 @@
     right: 0;
   }
 
+  .content-container {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+
   main {
     position: relative;
-    z-index: 1;
     max-width: 70rem;
     margin: 0 auto;
-    height: 100%;
   }
 </style>

src-svelte/src/routes/AppLayout.test.ts

@@ -8,13 +8,25 @@ import {
   volume,
   animationsOn,
   animationSpeed,
+  transparencyOn,
 } from "$lib/preferences";
 import { TauriInvokePlayback } from "$lib/sample-call-testing";
 import { tickFor } from "$lib/test-helpers";
 
 const tauriInvokeMock = vi.fn();
 
 vi.stubGlobal("__TAURI_INVOKE__", tauriInvokeMock);
+vi.stubGlobal("FontFace", function () {
+  return {
+    load: () => Promise.resolve(),
+  };
+});
+Object.defineProperty(document, "fonts", {
+  value: {
+    add: vi.fn(),
+    load: vi.fn(),
+  },
+});
 
 describe("AppLayout", () => {
   let tauriInvokeMock: Mock;
@@ -103,4 +115,19 @@ describe("AppLayout", () => {
     });
     expect(tauriInvokeMock).toHaveReturnedTimes(1);
   });
+
+  test("will set transparency if transparency preference overridden", async () => {
+    expect(get(transparencyOn)).toBe(false);
+    expect(tauriInvokeMock).not.toHaveBeenCalled();
+
+    playback.addSamples(
+      "../src-tauri/api/sample-calls/get_preferences-transparency-on.yaml",
+    );
+
+    render(AppLayout, { currentRoute: "/" });
+    await waitFor(() => {
+      expect(get(transparencyOn)).toBe(true);
+    });
+    expect(tauriInvokeMock).toHaveReturnedTimes(1);
+  });
 });