feat: light twig styling

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">