feat: light twig styling (#508)

### TL;DR

Added a new cave-themed UI with animated transitions, cursor glow effects, and dark mode toggle.

### What changed?

- Redesigned the login screen with a cave painting background and new typography
- Added a smooth transition animation between login and main app using Framer Motion
- Implemented a cursor glow effect that follows the mouse in dark mode
- Created a campfire toggle button for switching between light and dark modes
- Updated the generating indicator to show themed "primitive" activities with a pulsing campfire icon
- Added new fonts, colors, and styling variables for the cave theme
- Added SVG logo and background image assets

### Why make this change?

This update enhances the visual appeal and user experience of the application with a cohesive cave/primitive theme. The animations and visual effects create a more engaging and polished interface, while the dark mode toggle improves accessibility. The smooth transitions between screens provide better continuity in the user journey, making the app feel more professional and refined.

Author: k11kirky

apps/array/package.json

@@ -96,6 +96,7 @@
     "@parcel/watcher": "^2.5.1",
     "@phosphor-icons/react": "^2.1.10",
     "@posthog/agent": "workspace:*",
+    "@posthog/electron-trpc": "workspace:*",
     "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/themes": "^3.2.1",
@@ -125,6 +126,7 @@
     "electron-log": "^5.4.3",
     "electron-store": "^11.0.0",
     "file-icon": "^6.0.0",
+    "framer-motion": "^12.26.2",
     "idb-keyval": "^6.2.2",
     "immer": "^11.0.1",
     "inversify": "^7.10.6",
@@ -146,7 +148,6 @@
     "remark-gfm": "^4.0.1",
     "sonner": "^2.0.7",
     "tippy.js": "^6.3.7",
-    "@posthog/electron-trpc": "workspace:*",
     "uuid": "^9.0.1",
     "vscode-icons-js": "^11.6.1",
     "zod": "^4.1.12",

apps/array/src/renderer/App.tsx

@@ -1,3 +1,5 @@
+import { CursorGlow } from "@components/CursorGlow";
+import { LoginTransition } from "@components/LoginTransition";
 import { MainLayout } from "@components/MainLayout";
 import { AuthScreen } from "@features/auth/components/AuthScreen";
 import { useAuthStore } from "@features/auth/stores/authStore";
@@ -6,11 +8,14 @@ import { initializePostHog } from "@renderer/lib/analytics";
 import { initializeConnectivityStore } from "@renderer/stores/connectivityStore";
 import { trpcVanilla } from "@renderer/trpc/client";
 import { toast } from "@utils/toast";
-import { useEffect, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { useEffect, useRef, useState } from "react";
 
 function App() {
   const { isAuthenticated, initializeOAuth } = useAuthStore();
   const [isLoading, setIsLoading] = useState(true);
+  const [showTransition, setShowTransition] = useState(false);
+  const wasAuthenticated = useRef(isAuthenticated);
 
   // Initialize PostHog analytics
   useEffect(() => {
@@ -36,6 +41,19 @@ function App() {
     initializeOAuth().finally(() => setIsLoading(false));
   }, [initializeOAuth]);
 
+  // Handle auth state change for transition
+  useEffect(() => {
+    if (!wasAuthenticated.current && isAuthenticated) {
+      // User just logged in - trigger transition
+      setShowTransition(true);
+    }
+    wasAuthenticated.current = isAuthenticated;
+  }, [isAuthenticated]);
+
+  const handleTransitionComplete = () => {
+    setShowTransition(false);
+  };
+
   if (isLoading) {
     return (
       <Flex align="center" justify="center" minHeight="100vh">
@@ -47,7 +65,36 @@ function App() {
     );
   }
 
-  return isAuthenticated ? <MainLayout /> : <AuthScreen />;
+  return (
+    <>
+      <CursorGlow />
+      <AnimatePresence mode="wait">
+        {!isAuthenticated ? (
+          <motion.div
+            key="auth"
+            initial={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.5 }}
+          >
+            <AuthScreen />
+          </motion.div>
+        ) : (
+          <motion.div
+            key="main"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.5, delay: showTransition ? 1.5 : 0 }}
+          >
+            <MainLayout />
+          </motion.div>
+        )}
+      </AnimatePresence>
+      <LoginTransition
+        isAnimating={showTransition}
+        onComplete={handleTransitionComplete}
+      />
+    </>
+  );
 }
 
 export default App;

apps/array/src/renderer/assets/fonts/Halfre.otf

@@ -0,0 +1,22 @@
+import { Campfire } from "@phosphor-icons/react";
+import { IconButton, Tooltip } from "@radix-ui/themes";
+import { useThemeStore } from "@stores/themeStore";
+
+export function CampfireToggle() {
+  const { isDarkMode, toggleDarkMode } = useThemeStore();
+
+  return (
+    <Tooltip content={isDarkMode ? "Light mode" : "Dark mode"}>
+      <IconButton
+        size="1"
+        variant="ghost"
+        onClick={toggleDarkMode}
+        style={{
+          color: isDarkMode ? "var(--orange-9)" : "var(--gray-9)",
+        }}
+      >
+        <Campfire size={16} weight={isDarkMode ? "fill" : "regular"} />
+      </IconButton>
+    </Tooltip>
+  );
+}

apps/array/src/renderer/assets/images/cave-hero.jpg

@@ -0,0 +1,37 @@
+import { useThemeStore } from "@stores/themeStore";
+import { useEffect, useState } from "react";
+
+export function CursorGlow() {
+  const isDarkMode = useThemeStore((state) => state.isDarkMode);
+  const [mousePos, setMousePos] = useState<{ x: number; y: number } | null>(
+    null,
+  );
+
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      setMousePos({ x: e.clientX, y: e.clientY });
+    };
+
+    window.addEventListener("mousemove", handleMouseMove);
+    return () => window.removeEventListener("mousemove", handleMouseMove);
+  }, []);
+
+  // Only show in dark mode
+  if (!isDarkMode || !mousePos) return null;
+
+  return (
+    <div
+      style={{
+        position: "fixed",
+        left: mousePos.x - 100,
+        top: mousePos.y - 100,
+        width: 200,
+        height: 200,
+        pointerEvents: "none",
+        background:
+          "radial-gradient(circle at center, var(--fire-glow) 0%, transparent 70%)",
+        zIndex: 9999,
+      }}
+    />
+  );
+}

apps/array/src/renderer/assets/images/twig-logo.svg

@@ -0,0 +1,28 @@
+import { motion } from "framer-motion";
+
+interface LoginTransitionProps {
+  isAnimating: boolean;
+  onComplete: () => void;
+}
+
+export function LoginTransition({
+  isAnimating,
+  onComplete,
+}: LoginTransitionProps) {
+  if (!isAnimating) return null;
+
+  return (
+    <motion.div
+      style={{
+        position: "fixed",
+        inset: 0,
+        zIndex: 10000,
+        background: "var(--cave-charcoal)",
+      }}
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 0.5 }}
+      onAnimationComplete={onComplete}
+    />
+  );
+}

apps/array/src/renderer/components/CampfireToggle.tsx

@@ -1,3 +1,4 @@
+import { CampfireToggle } from "@components/CampfireToggle";
 import { StatusBarMenu } from "@components/StatusBarMenu";
 import { Badge, Box, Code, Flex, Kbd } from "@radix-ui/themes";
 import { useStatusBarStore } from "@stores/statusBarStore";
@@ -43,6 +44,7 @@ export function StatusBar({ showKeyHints = true }: StatusBarProps) {
       )}
 
       <Flex align="center" gap="2">
+        <CampfireToggle />
         {IS_DEV && (
           <Badge size="1">
             <Code size="1" variant="ghost">