feat(startup): add startup intro overlay and user preference toggle

- Introduce  overlay shown on app launch

- Integrate visibility controlled via  setting

- Add toggle in  with immediate persistence and analytics event

- Add shimmer overlay and brand text animation utilities to

Author: 123vivekr

src/App.tsx

@@ -25,6 +25,7 @@ import { TabContent } from "@/components/TabContent";
 import { useTabState } from "@/hooks/useTabState";
 import { AnalyticsConsentBanner } from "@/components/AnalyticsConsent";
 import { useAppLifecycle, useTrackEvent } from "@/hooks";
+import { StartupIntro } from "@/components/StartupIntro";
 
 type View = 
   | "welcome" 
@@ -486,11 +487,47 @@ function AppContent() {
  * Main App component - Wraps the app with providers
  */
 function App() {
+  const [showIntro, setShowIntro] = useState(() => {
+    // Read cached preference synchronously to avoid any initial flash
+    try {
+      const cached = typeof window !== 'undefined'
+        ? window.localStorage.getItem('app_setting:startup_intro_enabled')
+        : null;
+      if (cached === 'true') return true;
+      if (cached === 'false') return false;
+    } catch (_ignore) {}
+    return true; // default if no cache
+  });
+
+  useEffect(() => {
+    let timer: number | undefined;
+    (async () => {
+      try {
+        const pref = await api.getSetting('startup_intro_enabled');
+        const enabled = pref === null ? true : pref === 'true';
+        if (enabled) {
+          // keep intro visible and hide after duration
+          timer = window.setTimeout(() => setShowIntro(false), 2000);
+        } else {
+          // user disabled intro: hide immediately to avoid any overlay delay
+          setShowIntro(false);
+        }
+      } catch (err) {
+        // On failure, show intro once to keep UX consistent
+        timer = window.setTimeout(() => setShowIntro(false), 2000);
+      }
+    })();
+    return () => {
+      if (timer) window.clearTimeout(timer);
+    };
+  }, []);
+
   return (
     <ThemeProvider>
       <OutputCacheProvider>
         <TabProvider>
           <AppContent />
+          <StartupIntro visible={showIntro} />
         </TabProvider>
       </OutputCacheProvider>
     </ThemeProvider>

src/assets/shimmer.css

@@ -52,6 +52,18 @@
   }
 }
 
+/* Overlay variant: keeps the overlay text transparent and simply fades it out */
+@keyframes shimmer-overlay {
+  0% {
+    background-position: -150% center;
+    opacity: 1;
+  }
+  100% {
+    background-position: 150% center;
+    opacity: 0;
+  }
+}
+
 @keyframes symbol-rotate {
   0% {
     content: '◐';
@@ -99,6 +111,38 @@
   animation: shimmer-text 1s ease-out forwards;
 }
 
+/* Ensures text remains visible after shimmer completes on engines
+   where -webkit-text-fill-color set in keyframes may not persist */
+.shimmer-fallback-visible {
+  -webkit-text-fill-color: currentColor !important;
+  background: none !important;
+}
+
+/* Layered brand text: base solid text plus shimmering overlay to avoid flicker */
+.brand-text { position: relative; display: inline-block; }
+.brand-text-solid { position: relative; color: currentColor; }
+.brand-text-shimmer {
+  position: absolute;
+  inset: 0;
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    transparent 47%,
+    rgba(217, 119, 87, 0.35) 50%,
+    transparent 53%,
+    transparent 100%
+  );
+  background-size: 300% auto;
+  background-position: -150% center;
+  -webkit-background-clip: text;
+  background-clip: text;
+  pointer-events: none;
+  will-change: background-position, opacity;
+  animation: shimmer-overlay 1.1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
 .rotating-symbol {
   display: inline-block;
   color: #d97757;
@@ -120,6 +164,11 @@
   vertical-align: baseline;
 }
 
+/* Allow pausing the rotating symbol via an extra class */
+.rotating-symbol.paused::before {
+  animation: none !important;
+}
+
 .shimmer-hover {
   position: relative;
   overflow: hidden;
@@ -153,4 +202,4 @@
 
 .shimmer-hover:hover::before {
   animation: shimmer 1s ease-out;
-} 
+} 

src/components/Settings.tsx

@@ -97,6 +97,8 @@ export const Settings: React.FC<SettingsProps> = ({
 
   // Tab persistence state
   const [tabPersistenceEnabled, setTabPersistenceEnabled] = useState(true);
+  // Startup intro preference
+  const [startupIntroEnabled, setStartupIntroEnabled] = useState(true);
 
   // Load settings on mount
   useEffect(() => {
@@ -105,6 +107,11 @@ export const Settings: React.FC<SettingsProps> = ({
     loadAnalyticsSettings();
     // Load tab persistence setting
     setTabPersistenceEnabled(TabPersistenceService.isEnabled());
+    // Load startup intro setting (default to true if not set)
+    (async () => {
+      const pref = await api.getSetting('startup_intro_enabled');
+      setStartupIntroEnabled(pref === null ? true : pref === 'true');
+    })();
   }, []);
 
   /**
@@ -737,6 +744,35 @@ export const Settings: React.FC<SettingsProps> = ({
                         }}
                       />
                     </div>
+
+                    {/* Startup Intro Toggle */}
+                    <div className="flex items-center justify-between">
+                      <div className="space-y-1">
+                        <Label htmlFor="startup-intro">Show Welcome Intro on Startup</Label>
+                        <p className="text-caption text-muted-foreground">
+                          Display a brief welcome animation when the app launches
+                        </p>
+                      </div>
+                      <Switch
+                        id="startup-intro"
+                        checked={startupIntroEnabled}
+                        onCheckedChange={async (checked) => {
+                          setStartupIntroEnabled(checked);
+                          try {
+                            await api.saveSetting('startup_intro_enabled', checked ? 'true' : 'false');
+                            trackEvent.settingsChanged('startup_intro_enabled', checked);
+                            setToast({ 
+                              message: checked 
+                                ? 'Welcome intro enabled' 
+                                : 'Welcome intro disabled', 
+                              type: 'success' 
+                            });
+                          } catch (e) {
+                            setToast({ message: 'Failed to update preference', type: 'error' });
+                          }
+                        }}
+                      />
+                    </div>
                   </div>
                 </div>
               </Card>

src/components/StartupIntro.tsx

@@ -0,0 +1,104 @@
+import { AnimatePresence, motion } from "framer-motion";
+import claudiaLogo from "../../src-tauri/icons/icon.png";
+import type { CSSProperties } from "react";
+
+/**
+ * StartupIntro - a lightweight startup overlay shown on app launch.
+ * - Non-interactive; auto-fades after parent hides it via the `visible` prop.
+ * - Uses existing shimmer/rotating-symbol styles from shimmer.css.
+ */
+export function StartupIntro({ visible }: { visible: boolean }) {
+  // Simple entrance animations only
+  return (
+    <AnimatePresence>
+      {visible && (
+        <motion.div
+          initial={{ opacity: 1 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.35 }}
+          className="fixed inset-0 z-[60] flex items-center justify-center bg-background"
+          aria-hidden="true"
+        >
+          {/* Ambient radial glow */}
+          <motion.div
+            className="absolute inset-0"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.25 }}
+            style={{
+              background:
+                "radial-gradient(800px circle at 50% 55%, var(--color-primary)/8, transparent 65%)",
+              pointerEvents: "none",
+            } as CSSProperties}
+          />
+
+          {/* Subtle vignette */}
+          <div
+            className="absolute inset-0 pointer-events-none"
+            style={{
+              background:
+                "radial-gradient(1200px circle at 50% 40%, transparent 60%, rgba(0,0,0,0.25))",
+            }}
+          />
+
+          {/* Content */}
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ type: "spring", stiffness: 280, damping: 22 }}
+            className="relative flex flex-col items-center justify-center gap-1"
+          >
+
+            {/* Claudia logo slides left; brand text reveals to the right */}
+            <div className="relative flex items-center justify-center">
+              {/* Logo wrapper that gently slides left */}
+              <motion.div
+                className="relative z-10"
+                initial={{ opacity: 0, scale: 1, x: 0 }}
+                animate={{ opacity: 1, scale: 1, x: -14 }}
+                transition={{ duration: 0.35, ease: "easeOut", delay: 0.2 }}
+              >
+                <motion.div
+                  className="absolute inset-0 rounded-full bg-primary/15 blur-2xl"
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: [0, 1, 0.9] }}
+                  transition={{ duration: 0.9, ease: "easeOut" }}
+                />
+                <motion.img
+                  src={claudiaLogo}
+                  alt="Claudia"
+                  className="h-20 w-20 rounded-lg shadow-sm"
+                  transition={{ repeat: Infinity, repeatType: "loop", ease: "linear", duration: 0.5 }}
+                />
+              </motion.div>
+
+              {/* Brand text reveals left-to-right in the freed space */}
+              <motion.div
+                initial={{ x: -35, opacity: 0, clipPath: "inset(0 100% 0 0)" }}
+                animate={{ x: 2, opacity: 1, clipPath: "inset(0 0% 0 0)" }}
+                transition={{ duration: 0.6, ease: "easeOut", delay: 0.1 }}
+                style={{ willChange: "transform, opacity, clip-path" }}
+              >
+                <BrandText />
+              </motion.div>
+            </div>
+
+
+          </motion.div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
+
+export default StartupIntro;
+
+function BrandText() {
+  return (
+    <div className="text-5xl font-extrabold tracking-tight brand-text">
+      <span className="brand-text-solid">Claudia</span>
+      <span aria-hidden="true" className="brand-text-shimmer">Claudia</span>
+    </div>
+  );
+}