v2.52 - Experimental Theme

Author: imjustinliao

frontend/src/app/globals.css

@@ -125,6 +125,99 @@ a:visited {
   background: rgba(255, 255, 255, 0.35);
 }
 
+/* ═══════════════════════════════════════════════════════════
+ *  Exp1 theme — Ive/Jobs-era Apple design system
+ *  Frosted glass, spring animations, refined depth cues
+ * ═══════════════════════════════════════════════════════════ */
+
+/* Exp1 theme root overrides — applied via data attribute */
+[data-theme="exp1"] {
+  --exp1-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --exp1-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --exp1-duration: 0.5s;
+  --exp1-duration-fast: 0.3s;
+}
+
+/* Exp1 fade-in for content blocks */
+@keyframes exp1FadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Exp1 scale-in for modals and floating UI */
+@keyframes exp1ScaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* Exp1 slide-in for sidebar items */
+@keyframes exp1SlideIn {
+  from {
+    opacity: 0;
+    transform: translateX(-6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* Exp1 subtle breathing glow for focus states */
+@keyframes exp1FocusGlow {
+  0%, 100% {
+    box-shadow: 0 0 0 2px rgba(212, 168, 83, 0.15);
+  }
+  50% {
+    box-shadow: 0 0 0 3px rgba(212, 168, 83, 0.25);
+  }
+}
+
+/* Exp1 shimmer — elegant loading state */
+@keyframes exp1Shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+/* Exp1 scrollbar — thinner, more translucent */
+[data-theme="exp1"] [data-fp-scrollbar] {
+  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
+}
+[data-theme="exp1"] [data-fp-scrollbar]::-webkit-scrollbar {
+  width: 4px;
+}
+[data-theme="exp1"] [data-fp-scrollbar]::-webkit-scrollbar-thumb {
+  border-radius: 2px;
+}
+[data-theme="exp1"] [data-fp-scrollbar][data-fp-scroll-visible]::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.18);
+}
+[data-theme="exp1"] [data-fp-scrollbar]:hover::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.22);
+}
+
+/* Exp1 smooth transitions on all interactive elements */
+[data-theme="exp1"] button,
+[data-theme="exp1"] a,
+[data-theme="exp1"] input {
+  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
 /* Theme-aware: use data-fp-scrollbar-light when container has light bg */
 [data-fp-scrollbar-light] {
   scrollbar-color: rgba(0, 0, 0, 0.25) transparent;

frontend/src/components/app/AppShell.tsx

@@ -5,7 +5,7 @@ import { usePathname, useRouter } from "next/navigation"
 import { Sidebar } from "@/components/app/Sidebar"
 import { ErrorBoundary } from "@/components/app/ErrorBoundary"
 import { ChatProvider, useChat } from "@/context/ChatContext"
-import { ThemeProvider, useThemeColors, type ThemeColors } from "@/context/ThemeContext"
+import { ThemeProvider, useTheme, useThemeColors, useExp1, type ThemeColors } from "@/context/ThemeContext"
 import { useAuth } from "@/context/AuthContext"
 import { ShellLayoutProvider } from "@/context/ShellLayoutContext"
 import OnboardingModal from "@/components/app/OnboardingModal"
@@ -43,6 +43,8 @@ function AuthGate({ children }: { children: React.ReactNode }) {
 
 function ShellInner({ children }: { children: React.ReactNode }) {
   const COLORS = useThemeColors()
+  const { resolved } = useTheme()
+  const exp1 = useExp1()
   const { state } = useChat()
   const { user, loading } = useAuth()
   const pathname = usePathname()
@@ -128,12 +130,17 @@ function ShellInner({ children }: { children: React.ReactNode }) {
   return (
     <AuthGate>
       <div
+        data-theme={resolved}
         style={{
           position: "fixed",
           inset: 0,
           zIndex: 50,
           display: "flex",
           background: COLORS.bg,
+          ...(exp1.active ? {
+            backgroundImage: exp1.noise,
+            backgroundSize: "256px 256px",
+          } : {}),
         }}
       >
         <Suspense fallback={null}>

frontend/src/components/app/ChatInput.tsx

@@ -7,7 +7,7 @@ import { useTypewriter } from "@/hooks/useTypewriter"
 import { useAutoResize } from "@/hooks/useAutoResize"
 import { useSpeechRecognition } from "@/hooks/useSpeechRecognition"
 import { FONTS, ROW_HEIGHT } from "@/lib/constants"
-import { useThemeColors, useIsDark } from "@/context/ThemeContext"
+import { useThemeColors, useIsDark, useExp1 } from "@/context/ThemeContext"
 import { LengthBadge, ModelBadge } from "@/components/blocks/SessionView"
 import { DEFAULT_MODEL_ID, type ModelOptionId } from "@/lib/models"
 import { FileAttachmentCard } from "@/components/ui/FileAttachmentCard"
@@ -29,13 +29,14 @@ const ChatInput = memo(function ChatInput() {
   const router = useRouter()
   const COLORS = useThemeColors()
   const isDark = useIsDark()
+  const exp1 = useExp1()
   const { user, loading, openLoginModal } = useAuth()
   const { state, setInputValue, setInputFeatures, addConversation, deleteConversation, sendMessage } = useChat()
-  const bg = isDark ? "#0A0A0A" : COLORS.modalBg
-  const border = isDark ? "rgba(255,255,255,0.2)" : "rgba(0,0,0,0.18)"
-  const borderFocused = isDark ? "rgba(255,255,255,0.35)" : "rgba(0,0,0,0.28)"
-  const borderHover = isDark ? "rgba(255,255,255,0.3)" : "rgba(0,0,0,0.24)"
-  const bgHover = isDark ? "#0E0E0E" : COLORS.sidebarBg
+  const bg = exp1.active ? "rgba(18,18,24,0.6)" : isDark ? "#0A0A0A" : COLORS.modalBg
+  const border = exp1.active ? "rgba(255,255,255,0.08)" : isDark ? "rgba(255,255,255,0.2)" : "rgba(0,0,0,0.18)"
+  const borderFocused = exp1.active ? "rgba(212,168,83,0.3)" : isDark ? "rgba(255,255,255,0.35)" : "rgba(0,0,0,0.28)"
+  const borderHover = exp1.active ? "rgba(255,255,255,0.12)" : isDark ? "rgba(255,255,255,0.3)" : "rgba(0,0,0,0.24)"
+  const bgHover = exp1.active ? "rgba(22,22,30,0.7)" : isDark ? "#0E0E0E" : COLORS.sidebarBg
   const { inputValue, inputFeatures, activeView, isSending } = state
 
   /* Restore model + content types from localStorage on mount */
@@ -225,13 +226,22 @@ const ChatInput = memo(function ChatInput() {
         maxWidth: "85vw",
         background: inputFocused ? bgHover : bg,
         border: `1px solid ${effectiveBorder}`,
-        borderRadius: "24px",
+        borderRadius: exp1.active ? "28px" : "24px",
         boxSizing: "border-box",
         display: "flex",
         flexDirection: "column",
-        padding: "18px 24px",
+        padding: exp1.active ? "20px 26px" : "18px 24px",
         gap: "12px",
-        transition: "border-color 0.3s, background 0.3s",
+        transition: exp1.active
+          ? `border-color 0.5s ${exp1.ease}, background 0.5s ${exp1.ease}, box-shadow 0.5s ${exp1.ease}`
+          : "border-color 0.3s, background 0.3s",
+        ...(exp1.active ? {
+          backdropFilter: exp1.glass,
+          WebkitBackdropFilter: exp1.glass,
+          boxShadow: inputFocused
+            ? "0 0 0 1px rgba(212,168,83,0.12), 0 8px 32px rgba(0,0,0,0.3)"
+            : exp1.shadow,
+        } : {}),
       }}
       onMouseEnter={(e) => {
         if (!inputFocused) {

frontend/src/components/app/MessageList.tsx

@@ -3,7 +3,7 @@
 import { memo, useRef, useEffect } from "react"
 import type { Message } from "@/types/chat"
 import { FONTS } from "@/lib/constants"
-import { useThemeColors, useIsDark } from "@/context/ThemeContext"
+import { useThemeColors, useIsDark, useExp1 } from "@/context/ThemeContext"
 import { UserIcon } from "./Icons"
 import { InlineRich, Markdownish } from "@/components/ui/RichText"
 import { MediaPlaceholder } from "@/components/blocks/MediaPlaceholder"
@@ -24,6 +24,7 @@ const MessageBubble = memo(
   function MessageBubble({ message, sessionId }: { message: Message; sessionId?: string }) {
     const COLORS = useThemeColors()
     const isDark = useIsDark()
+    const exp1 = useExp1()
     const isUser = message.role === "user"
     const isStreaming = message.streamStatus === "streaming"
     const hasMeaningfulContent = Boolean((message.content || "").trim())
@@ -45,7 +46,10 @@ const MessageBubble = memo(
           display: "flex",
           gap: "12px",
           opacity: message.streamStatus === "idle" && !message.content ? 0.5 : 1,
-          transition: "opacity 0.2s",
+          transition: exp1.active ? `opacity 0.5s ${exp1.ease}` : "opacity 0.2s",
+          ...(exp1.active ? {
+            animation: "exp1FadeIn 0.6s cubic-bezier(0.22,1,0.36,1) both",
+          } : {}),
         }}
         role="article"
         aria-label={`${isUser ? "You" : "Assistant"} said`}

frontend/src/components/app/Sidebar.tsx

@@ -9,7 +9,7 @@ import {
 import Image from "next/image"
 import { useRouter, usePathname } from "next/navigation"
 import { useChat } from "@/context/ChatContext"
-import { useThemeColors, useLogoFilter, useIsDark } from "@/context/ThemeContext"
+import { useThemeColors, useLogoFilter, useIsDark, useExp1 } from "@/context/ThemeContext"
 import { useAuth } from "@/context/AuthContext"
 import { useIsMobile } from "@/hooks/useIsMobile"
 import { useScrollbarOnScroll } from "@/hooks/useScrollbarOnScroll"
@@ -381,6 +381,7 @@ const RecentItem = memo(function RecentItem({
 export const Sidebar = memo(function Sidebar() {
   const COLORS = useThemeColors()
   const isDark = useIsDark()
+  const exp1 = useExp1()
   const isMobile = useIsMobile(900)
   const logoFilter = useLogoFilter()
   const router = useRouter()
@@ -672,26 +673,36 @@ export const Sidebar = memo(function Sidebar() {
             : `${effectiveWidth}px`,
           maxWidth: isMobile && expanded ? "320px" : undefined,
           height: "100dvh",
-          background: COLORS.sidebarBg,
+          background: exp1.active ? exp1.sidebarGlass : COLORS.sidebarBg,
           borderRight: "none",
-          boxShadow: "0.5px 0 0 0 rgba(255,255,255,0.3)",
+          boxShadow: exp1.active
+            ? "1px 0 0 0 rgba(255,255,255,0.06)"
+            : "0.5px 0 0 0 rgba(255,255,255,0.3)",
           display: "flex",
           flexDirection: "column",
-          transition: resizing ? "none" : `width 0.25s ${EASE_OUT}`,
+          transition: resizing ? "none" : exp1.active
+            ? `width 0.5s ${exp1.ease}`
+            : `width 0.25s ${EASE_OUT}`,
           overflow: "hidden",
           flexShrink: 0,
           contain: "layout style",
           position: isMobile && expanded ? "fixed" : "relative",
           top: isMobile && expanded ? 0 : undefined,
           left: isMobile && expanded ? 0 : undefined,
           zIndex: isMobile && expanded ? 20 : 10,
+          ...(exp1.active ? {
+            backdropFilter: exp1.glass,
+            WebkitBackdropFilter: exp1.glass,
+          } : {}),
         }}
       >
         {/* Header — with drop shadow separation below (50% opacity); spacing before menu */}
         <div
           style={{
             flexShrink: 0,
-            boxShadow: "0 2px 2px 0 rgba(255,255,255,0.25)",
+            boxShadow: exp1.active
+              ? "0 1px 0 0 rgba(255,255,255,0.04)"
+              : "0 2px 2px 0 rgba(255,255,255,0.25)",
             marginBottom: "14px",
           }}
         >

frontend/src/components/app/ThemeToggle.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import React from "react"
-import { useTheme, useThemeColors, useIsDark, type ThemePreference } from "@/context/ThemeContext"
+import { useTheme, useThemeColors, useIsDark, useExp1, type ThemePreference } from "@/context/ThemeContext"
 import { FONTS, EASE_OUT } from "@/lib/constants"
 
 const THEME_OPTIONS: { key: ThemePreference; label: string; icon: React.ReactNode }[] = [
@@ -42,36 +42,52 @@ const THEME_OPTIONS: { key: ThemePreference; label: string; icon: React.ReactNod
       </svg>
     ),
   },
+  {
+    key: "exp1",
+    label: "Exp1",
+    icon: (
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+        <path d="M12 2L2 7l10 5 10-5-10-5z" />
+        <path d="M2 17l10 5 10-5" />
+        <path d="M2 12l10 5 10-5" />
+      </svg>
+    ),
+  },
 ]
 
-/** Theme toggle — Dark / Light / System. Persists to localStorage. */
+/** Theme toggle — Dark / Light / System / Exp1. Persists to localStorage. */
 export function ThemeToggle() {
   const COLORS = useThemeColors()
   const isDark = useIsDark()
+  const exp1 = useExp1()
   const { preference, setPreference } = useTheme()
   const activeIdx = THEME_OPTIONS.findIndex((o) => o.key === preference)
 
   const TRACK_H = 36
   const PILL_PAD = 3
   const segmentCount = THEME_OPTIONS.length
-  /* Pill width keeps left/right padding symmetric: so right segment doesn't overlap right margin */
   const pillWidthPct = `calc(${100 / segmentCount}% - ${PILL_PAD * 2}px)`
   const pillLeftPct = `calc(${(activeIdx * 100) / segmentCount}% + ${PILL_PAD}px)`
 
-  const trackBg = isDark ? "rgba(255,255,255,0.04)" : "rgba(0,0,0,0.04)"
-  const pillBg = isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.08)"
+  const trackBg = exp1.active
+    ? "rgba(255,255,255,0.03)"
+    : isDark ? "rgba(255,255,255,0.04)" : "rgba(0,0,0,0.04)"
+  const pillBg = exp1.active
+    ? "rgba(255,255,255,0.08)"
+    : isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.08)"
 
   return (
     <div
       style={{
         position: "relative",
         display: "flex",
         width: "100%",
-        maxWidth: "320px",
+        maxWidth: "420px",
         background: trackBg,
-        borderRadius: "10px",
+        borderRadius: exp1.active ? "14px" : "10px",
         padding: `${PILL_PAD}px`,
         border: `1px solid ${COLORS.border}`,
+        ...(exp1.active ? { backdropFilter: exp1.glass } : {}),
       }}
       role="radiogroup"
       aria-label="Theme"
@@ -83,9 +99,9 @@ export function ThemeToggle() {
           left: pillLeftPct,
           width: pillWidthPct,
           height: `${TRACK_H - PILL_PAD * 2}px`,
-          borderRadius: "7px",
+          borderRadius: exp1.active ? "11px" : "7px",
           background: pillBg,
-          transition: `left 0.25s ${EASE_OUT}`,
+          transition: exp1.active ? `left 0.5s ${exp1.ease}` : `left 0.25s ${EASE_OUT}`,
           pointerEvents: "none",
         }}
       />
@@ -109,14 +125,15 @@ export function ThemeToggle() {
               gap: "6px",
               background: "transparent",
               border: "none",
-              borderRadius: "7px",
+              borderRadius: exp1.active ? "11px" : "7px",
               color: isActive ? COLORS.textPrimary : COLORS.textTertiary,
               cursor: "pointer",
-              transition: "color 0.2s",
+              transition: exp1.active ? `color 0.4s ${exp1.ease}` : "color 0.2s",
               padding: 0,
               fontFamily: FONTS.sans,
               fontSize: "13px",
               fontWeight: isActive ? 500 : 400,
+              letterSpacing: exp1.active ? "0.01em" : undefined,
             }}
           >
             <span style={{ display: "flex", flexShrink: 0 }}>{opt.icon}</span>