little men sliding around

src/lib/bindings.ts

@@ -84,7 +84,15 @@ export type ConnectionState = "connecting" | "connected" | "disconnected"
 export type ConnectionStatus = { remoteId: string; address: string; name: string | null; state: ConnectionState }
 export type CursorPosition = { x: number; y: number }
 export type CursorPositionChanged = { positions: Partial<{ [key in string]: CursorPositions }> }
-export type CursorPositions = { raw: CursorPosition; mapped: CursorPosition }
+export type CursorPositions = { 
+/**
+ * Absolute cursor coordinates in physical pixels.
+ */
+raw: CursorPosition; 
+/**
+ * Cursor coordinates normalized to the source monitor for scale-independent projection.
+ */
+mapped: CursorPosition }
 export type ForegroundAppChanged = { meta: AppMeta }
 export type FriendForegroundAppChanged = { friendId: string; meta: AppMeta }
 export type FriendsChanged = { friends: User[] }

src/routes/scene/+page.svelte

@@ -1,12 +1,35 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import { startHitboxSync } from "./hitboxes";
+  import { liveMetadata } from "$lib/listeners/live-metadata";
 
   onMount(startHitboxSync);
 </script>
 
 <div class="size-full flex flex-col justify-end">
-  <div role="banner" class="scene-hitbox w-full h-min bg-white text-black">
-    <p class="w-max">WYD</p>
+  <div role="banner" class="relative h-8 w-full my-2">
+    {#each Object.entries($liveMetadata.cursorPositions) as [userId, cursor] (userId)}
+      {@const ico = $liveMetadata.foregroundApps.get(userId)?.ico}
+      {#if cursor}
+        <div
+          class="scene-hitbox absolute bottom-0 left-0 flex flex-col gap-1 items-center transition-transform ease-linear duration-1000"
+          style:transform={`translateX(${cursor.mapped.x * 100}vw)`}
+        >
+          {#if ico}
+            <img
+              src={`data:image/png;base64,${ico}`}
+              alt=""
+              class="size-4 object-contain"
+            />
+          {/if}
+          <img
+            src="/fa.png"
+            alt=""
+            class="size-6"
+            style="filter: sepia(1) saturate(200%) hue-rotate(100deg);"
+          />
+        </div>
+      {/if}
+    {/each}
   </div>
 </div>