Add demo reel assets and autoplay route

Author: lucaomul

README.md

@@ -2,6 +2,12 @@
 
 InboxAnchor is a safety-first inbox triage system for overloaded email accounts. It classifies, prioritizes, summarizes, drafts, and recommends cleanup actions while keeping a human in the loop for anything risky. The project is intentionally opinionated: it is not an auto-delete bot, and it treats approval, auditability, and rollback-friendly behavior as product features, not afterthoughts.
 
+## Demo
+
+![InboxAnchor demo reel](docs/assets/inboxanchor-demo.gif)
+
+The demo reel shows the command center, live unread-scan progress, the stickman loading game, inbox triage, mailbox upgrade actions, and managed privacy aliases in one short product loop.
+
 ## What It Does
 
 - Connects to demo, Gmail, and IMAP-family provider paths through a shared provider abstraction

docs/assets/inboxanchor-demo-poster.png

@@ -18,6 +18,12 @@ type RunnerState = {
   obstacles: Obstacle[];
 };
 
+export type StickmanInboxRunnerProps = {
+  autoplay?: boolean;
+  className?: string;
+  showControlsHint?: boolean;
+};
+
 const WIDTH = 320;
 const HEIGHT = 152;
 const GROUND_Y = 116;
@@ -64,19 +70,31 @@ function intersects(a: { left: number; right: number; top: number; bottom: numbe
   return a.left < b.right && a.right > b.left && a.top < b.bottom && a.bottom > b.top;
 }
 
-export function StickmanInboxRunner({ className = "" }: { className?: string }) {
+export function StickmanInboxRunner({
+  autoplay = false,
+  className = "",
+  showControlsHint = true,
+}: StickmanInboxRunnerProps) {
   const [game, setGame] = useState<RunnerState>(() => initialState());
   const containerRef = useRef<HTMLDivElement | null>(null);
   const jumpQueuedRef = useRef(0);
   const crouchActiveRef = useRef(false);
   const obstacleIdRef = useRef(0);
-  const spawnCooldownRef = useRef(900);
+  const autoplayPatternRef = useRef<ObstacleKind[]>(["envelope", "thread", "envelope", "thread"]);
+  const autoplayPatternIndexRef = useRef(0);
+  const spawnCooldownRef = useRef(autoplay ? 460 : 900);
   const spawnElapsedRef = useRef(0);
 
   useEffect(() => {
     containerRef.current?.focus();
   }, []);
 
+  useEffect(() => {
+    spawnCooldownRef.current = autoplay ? 460 : 900;
+    spawnElapsedRef.current = 0;
+    autoplayPatternIndexRef.current = 0;
+  }, [autoplay]);
+
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent | ReactKeyboardEvent<HTMLDivElement>) => {
       if (["ArrowUp", "ArrowDown", "Space", "KeyW", "KeyS"].includes(event.code)) {
@@ -144,7 +162,51 @@ export function StickmanInboxRunner({ className = "" }: { className?: string })
       setGame((previous) => {
         let y = previous.y;
         let velocityY = previous.velocityY;
+        const speed = 3.25 * timeScale;
+        let obstacles = previous.obstacles
+          .map((obstacle) => ({ ...obstacle, x: obstacle.x - speed }))
+          .filter((obstacle) => obstacle.x > -60);
+
+        spawnElapsedRef.current += dt;
+        if (spawnElapsedRef.current >= spawnCooldownRef.current) {
+          obstacleIdRef.current += 1;
+          const kind: ObstacleKind = autoplay
+            ? autoplayPatternRef.current[
+                autoplayPatternIndexRef.current++ % autoplayPatternRef.current.length
+              ]
+            : Math.random() > 0.32
+              ? "envelope"
+              : "thread";
+          obstacles = [...obstacles, { id: obstacleIdRef.current, kind, x: WIDTH + 16 }];
+          spawnElapsedRef.current = 0;
+          spawnCooldownRef.current = autoplay ? 640 : 900 + Math.random() * 700;
+        }
+
         const grounded = y <= 0.001;
+        const nextObstacle = obstacles.find((obstacle) => {
+          const box = obstacleBox(obstacle);
+          return box.right >= PLAYER_X - 6;
+        });
+        const nextObstacleBox = nextObstacle ? obstacleBox(nextObstacle) : null;
+        const autoplayCrouch =
+          autoplay &&
+          grounded &&
+          nextObstacle?.kind === "thread" &&
+          nextObstacleBox !== null &&
+          nextObstacleBox.left <= PLAYER_X + PLAYER_WIDTH + 26 &&
+          nextObstacleBox.right >= PLAYER_X - 4;
+
+        if (
+          autoplay &&
+          grounded &&
+          nextObstacle?.kind === "envelope" &&
+          nextObstacleBox !== null &&
+          nextObstacleBox.left <= PLAYER_X + PLAYER_WIDTH + 34
+        ) {
+          jumpQueuedRef.current = Math.max(jumpQueuedRef.current, 1);
+          velocityY = Math.max(velocityY, 11.2);
+          jumpQueuedRef.current = 0;
+        }
 
         if (grounded && jumpQueuedRef.current > 0) {
           velocityY = Math.max(velocityY, 11.2);
@@ -157,21 +219,7 @@ export function StickmanInboxRunner({ className = "" }: { className?: string })
           velocityY = 0;
         }
 
-        const crouching = crouchActiveRef.current && y === 0;
-        const speed = 3.25 * timeScale;
-        let obstacles = previous.obstacles
-          .map((obstacle) => ({ ...obstacle, x: obstacle.x - speed }))
-          .filter((obstacle) => obstacle.x > -60);
-
-        spawnElapsedRef.current += dt;
-        if (spawnElapsedRef.current >= spawnCooldownRef.current) {
-          obstacleIdRef.current += 1;
-          const kind: ObstacleKind = Math.random() > 0.32 ? "envelope" : "thread";
-          obstacles = [...obstacles, { id: obstacleIdRef.current, kind, x: WIDTH + 16 }];
-          spawnElapsedRef.current = 0;
-          spawnCooldownRef.current = 900 + Math.random() * 700;
-        }
-
+        const crouching = (crouchActiveRef.current || autoplayCrouch) && y === 0;
         const playerHeight = crouching ? CROUCH_HEIGHT : STANDING_HEIGHT;
         const playerBox = {
           left: PLAYER_X,
@@ -291,9 +339,13 @@ export function StickmanInboxRunner({ className = "" }: { className?: string })
         <span>Best {Math.max(game.best, score)}</span>
         <span>Resets {game.crashes}</span>
       </div>
-      <p className="mt-1 text-center text-[10px] uppercase tracking-[0.18em] text-muted-foreground/80">
-        Click or hover here, then press W, S, arrows, or space.
-      </p>
+      {showControlsHint ? (
+        <p className="mt-1 text-center text-[10px] uppercase tracking-[0.18em] text-muted-foreground/80">
+          {autoplay
+            ? "Autoplay is on. Press W, S, arrows, or space to take over."
+            : "Click or hover here, then press W, S, arrows, or space."}
+        </p>
+      ) : null}
     </div>
   );
 }

docs/assets/inboxanchor-demo.gif

@@ -1,4 +1,7 @@
-import { StickmanInboxRunner } from "@/components/StickmanInboxRunner";
+import {
+  StickmanInboxRunner,
+  type StickmanInboxRunnerProps,
+} from "@/components/StickmanInboxRunner";
 import { useLoaderMode } from "@/hooks/use-loader-mode";
 
 type LoaderStat = {
@@ -127,44 +130,54 @@ export function StickmanLoader({
   stage,
   activity,
   stats = [],
+  modeOverride,
+  runnerProps,
+  showModeToggle = true,
 }: {
   message?: string;
   playful?: boolean;
   stage?: string;
   activity?: string;
   stats?: LoaderStat[];
+  modeOverride?: "fun" | "serious";
+  runnerProps?: StickmanInboxRunnerProps;
+  showModeToggle?: boolean;
 }) {
   const { mode, setMode, isFunMode } = useLoaderMode();
+  const resolvedMode = modeOverride ?? mode;
+  const resolvedFunMode = modeOverride ? modeOverride === "fun" : isFunMode;
 
   if (playful) {
     return (
       <div className="flex flex-col items-center justify-center gap-3 py-6 text-muted-foreground">
-        <div className="flex items-center gap-2 rounded-full border border-border bg-card/70 p-1">
-          <button
-            type="button"
-            onClick={() => setMode("fun")}
-            className={`rounded-full px-3 py-1 text-[10px] font-medium uppercase tracking-[0.18em] transition-colors ${
-              mode === "fun"
-                ? "bg-primary text-primary-foreground"
-                : "text-muted-foreground hover:bg-secondary hover:text-foreground"
-            }`}
-          >
-            Fun Mode
-          </button>
-          <button
-            type="button"
-            onClick={() => setMode("serious")}
-            className={`rounded-full px-3 py-1 text-[10px] font-medium uppercase tracking-[0.18em] transition-colors ${
-              mode === "serious"
-                ? "bg-primary text-primary-foreground"
-                : "text-muted-foreground hover:bg-secondary hover:text-foreground"
-            }`}
-          >
-            Serious Mode
-          </button>
-        </div>
-        {isFunMode ? (
-          <StickmanInboxRunner />
+        {showModeToggle ? (
+          <div className="flex items-center gap-2 rounded-full border border-border bg-card/70 p-1">
+            <button
+              type="button"
+              onClick={() => setMode("fun")}
+              className={`rounded-full px-3 py-1 text-[10px] font-medium uppercase tracking-[0.18em] transition-colors ${
+                resolvedMode === "fun"
+                  ? "bg-primary text-primary-foreground"
+                  : "text-muted-foreground hover:bg-secondary hover:text-foreground"
+              }`}
+            >
+              Fun Mode
+            </button>
+            <button
+              type="button"
+              onClick={() => setMode("serious")}
+              className={`rounded-full px-3 py-1 text-[10px] font-medium uppercase tracking-[0.18em] transition-colors ${
+                resolvedMode === "serious"
+                  ? "bg-primary text-primary-foreground"
+                  : "text-muted-foreground hover:bg-secondary hover:text-foreground"
+              }`}
+            >
+              Serious Mode
+            </button>
+          </div>
+        ) : null}
+        {resolvedFunMode ? (
+          <StickmanInboxRunner autoplay {...runnerProps} />
         ) : (
           <div className="flex w-full max-w-[360px] flex-col items-center gap-4 rounded-2xl border border-border bg-background/80 p-6 shadow-sm">
             <div className="h-12 w-12 animate-spin rounded-full border-4 border-border border-t-primary" />

docs/assets/inboxanchor-demo.mp4

@@ -12,6 +12,7 @@ import { Route as rootRouteImport } from './routes/__root'
 import { Route as SettingsRouteImport } from './routes/settings'
 import { Route as LoginRouteImport } from './routes/login'
 import { Route as InboxRouteImport } from './routes/inbox'
+import { Route as DemoRouteImport } from './routes/demo'
 import { Route as IndexRouteImport } from './routes/index'
 
 const SettingsRoute = SettingsRouteImport.update({
@@ -29,6 +30,11 @@ const InboxRoute = InboxRouteImport.update({
   path: '/inbox',
   getParentRoute: () => rootRouteImport,
 } as any)
+const DemoRoute = DemoRouteImport.update({
+  id: '/demo',
+  path: '/demo',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const IndexRoute = IndexRouteImport.update({
   id: '/',
   path: '/',
@@ -37,33 +43,37 @@ const IndexRoute = IndexRouteImport.update({
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
+  '/demo': typeof DemoRoute
   '/inbox': typeof InboxRoute
   '/login': typeof LoginRoute
   '/settings': typeof SettingsRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
+  '/demo': typeof DemoRoute
   '/inbox': typeof InboxRoute
   '/login': typeof LoginRoute
   '/settings': typeof SettingsRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
+  '/demo': typeof DemoRoute
   '/inbox': typeof InboxRoute
   '/login': typeof LoginRoute
   '/settings': typeof SettingsRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/inbox' | '/login' | '/settings'
+  fullPaths: '/' | '/demo' | '/inbox' | '/login' | '/settings'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/inbox' | '/login' | '/settings'
-  id: '__root__' | '/' | '/inbox' | '/login' | '/settings'
+  to: '/' | '/demo' | '/inbox' | '/login' | '/settings'
+  id: '__root__' | '/' | '/demo' | '/inbox' | '/login' | '/settings'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
+  DemoRoute: typeof DemoRoute
   InboxRoute: typeof InboxRoute
   LoginRoute: typeof LoginRoute
   SettingsRoute: typeof SettingsRoute
@@ -92,6 +102,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof InboxRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/demo': {
+      id: '/demo'
+      path: '/demo'
+      fullPath: '/demo'
+      preLoaderRoute: typeof DemoRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/': {
       id: '/'
       path: '/'
@@ -104,6 +121,7 @@ declare module '@tanstack/react-router' {
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
+  DemoRoute: DemoRoute,
   InboxRoute: InboxRoute,
   LoginRoute: LoginRoute,
   SettingsRoute: SettingsRoute,