fix: black page after logout — remove conflicting page-motion--enter animation

Root cause: PageTransition wrapper div had page-motion--enter direction
class after exit phase, which started from opacity:0. This conflicted
with the child component's own page-motion entrance animation, causing
the page to remain invisible after logout/view switch.

Fix: Remove page-motion--enter direction classes from the wrapper. The
child's own page-motion animation handles entrance. Direction is only
applied to the exit phase (slide-out-forward/backward).

Also: redirect to login instead of workbench on logout/session expiry,
and respect prefers-reduced-motion by skipping exit delay.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

.env.example

@@ -0,0 +1,8 @@
+# Dev proxy target — the backend API server
+VITE_DEV_PROXY=http://47.110.225.76:3600
+
+# Key server URL for auth/profile endpoints
+VITE_KEY_SERVER_URL=
+
+# Main API base URL (used when not served from omniai.net.cn)
+VITE_API_BASE_URL=

src/App.tsx

@@ -357,7 +357,7 @@ function App() {
     canvasAutoOpenedRecentRef.current = false;
     setWorkspaceExpanded(false);
     if (options?.resetView) {
-      handleSetView("workbench");
+      handleSetView("login");
     }
   }, [clearSessionState, setProjects, setProjectsLoaded, setUsage, clearTasks, setRuntimeNotifications, setServerNotifications, setCanvasWorkflow, setCurrentCanvasProjectId, setWorkspaceExpanded, handleSetView]);
 
@@ -492,7 +492,7 @@ function App() {
         if (nextSession) {
           setSession(nextSession);
         } else {
-          clearAuthenticatedState();
+          clearAuthenticatedState({ resetView: true });
         }
       } finally {
         checking = false;

src/components/AnimatedPanel.tsx

@@ -0,0 +1,54 @@
+import { useEffect, useRef, useState, type ReactNode } from "react";
+
+interface AnimatedPanelProps {
+  open: boolean;
+  children: ReactNode;
+  className?: string;
+  /** Duration in ms for the exit animation before unmounting. */
+  exitDuration?: number;
+}
+
+export function AnimatedPanel({ open, children, className, exitDuration = 140 }: AnimatedPanelProps) {
+  const [mounted, setMounted] = useState(open);
+  const [visible, setVisible] = useState(open);
+  const timerRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    if (open) {
+      if (timerRef.current) {
+        window.clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+      setMounted(true);
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          setVisible(true);
+        });
+      });
+    } else {
+      setVisible(false);
+      timerRef.current = window.setTimeout(() => {
+        setMounted(false);
+        timerRef.current = null;
+      }, exitDuration);
+    }
+  }, [open, exitDuration]);
+
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) {
+        window.clearTimeout(timerRef.current);
+      }
+    };
+  }, []);
+
+  if (!mounted) return null;
+
+  return (
+    <div
+      className={`${className ?? ""} animated-panel${visible ? " is-visible" : ""}`}
+    >
+      {children}
+    </div>
+  );
+}

src/components/AppShell.tsx

@@ -16,6 +16,7 @@ import { canManageCommunityCases, canReviewCommunity } from "../features/communi
 import type { WebNavItem, WebNotification, WebUsageSummary, WebUserSession, WebViewKey } from "../types";
 import NotificationCenter from "./NotificationCenter";
 import { RechargeModal } from "./RechargeModal/RechargeModal";
+import { AnimatedPanel } from "./AnimatedPanel";
 
 interface AppShellProps {
   activeView: WebViewKey;
@@ -61,6 +62,8 @@ function AppShell({
   const [profileOpen, setProfileOpen] = useState(false);
   const [rechargeOpen, setRechargeOpen] = useState(false);
   const [openSubmenuKey, setOpenSubmenuKey] = useState<WebViewKey | null>(null);
+  const prevActiveViewRef = useRef<WebViewKey>(activeView);
+  const [navJustActivated, setNavJustActivated] = useState<WebViewKey | null>(null);
   const isAuthView = activeView === "login";
   const isImmersiveView = activeView === "agent" || activeView === "avatarConsole";
   const showFloatingNav = !isAuthView && !isImmersiveView && activeView !== "home";
@@ -100,6 +103,15 @@ function AppShell({
     [navItems],
   );
 
+  useEffect(() => {
+    if (activeView !== prevActiveViewRef.current) {
+      setNavJustActivated(activeView);
+      prevActiveViewRef.current = activeView;
+      const timer = window.setTimeout(() => setNavJustActivated(null), 320);
+      return () => window.clearTimeout(timer);
+    }
+  }, [activeView]);
+
   useEffect(() => {
     if (typeof document === "undefined") {
       return;
@@ -223,8 +235,8 @@ function AppShell({
                   <button
                     type="button"
                     className={`floating-nav__button${isActive ? " is-active" : ""}${
-                      workspaceExpanded && index === 3 ? " has-divider" : ""
-                    }`}
+                      navJustActivated === item.key ? " nav-just-activated" : ""
+                    }${workspaceExpanded && index === 3 ? " has-divider" : ""}`}
                     title={`${item.label} / ${item.hint}`}
                     aria-label={item.label}
                     onClick={() => onSelectView(item.children?.[0]?.key ?? item.key)}
@@ -330,8 +342,7 @@ function AppShell({
                     </>
                   )}
                 </button>
-                {session && profileOpen ? (
-                  <div className="profile-popover panel-surface">
+                <AnimatedPanel open={session ? profileOpen : false} className="profile-popover panel-surface">
                     <div className="profile-popover__head">
                       <span className="profile-popover__avatar">
                         {avatarUrl ? <img src={avatarUrl} alt={displayName} /> : avatarLabel}
@@ -410,8 +421,7 @@ function AppShell({
                         </button>
                       </>
                     ) : null}
-                  </div>
-                ) : null}
+                  </AnimatedPanel>
               </div>
             </div>
             </header>

src/components/NotificationCenter.tsx

@@ -10,6 +10,7 @@ import {
 } from "@ant-design/icons";
 import { useEffect, useRef, useState } from "react";
 import type { WebNotification, WebNotificationType, WebViewKey } from "../types";
+import { AnimatedPanel } from "./AnimatedPanel";
 
 const NOTIFICATION_ICONS: Record<WebNotificationType, React.ReactNode> = {
   task_completed: <CheckCircleOutlined style={{ color: "#10b981" }} />,
@@ -115,8 +116,7 @@ function NotificationCenter({ items, onNavigate, onMarkRead, onMarkAllRead, onCl
           <span className="notification-center__badge">{unreadCount > 99 ? "99+" : unreadCount}</span>
         )}
       </button>
-      {open && (
-        <div className="notification-center__panel">
+      <AnimatedPanel open={open} className="notification-center__panel" exitDuration={140}>
           <div className="notification-center__header">
             <span className="notification-center__title">通知中心</span>
             <div className="notification-center__header-actions">
@@ -158,8 +158,7 @@ function NotificationCenter({ items, onNavigate, onMarkRead, onMarkAllRead, onCl
               ))
             )}
           </div>
-        </div>
-      )}
+        </AnimatedPanel>
     </div>
   );
 }

src/components/PageTransition.tsx

@@ -6,10 +6,46 @@ interface PageTransitionProps {
 }
 
 const EXIT_DURATION_MS = 180;
+const REDUCED_MOTION_EXIT_MS = 0;
+
+const NAV_ORDER: string[] = [
+  "home",
+  "workbench",
+  "ecommerce",
+  "ecommerceTemplates",
+  "sizeTemplate",
+  "canvas",
+  "scriptTokens",
+  "tokenUsage",
+  "community",
+  "assets",
+  "more",
+  "imageWorkbench",
+  "resolutionUpscale",
+  "watermarkRemoval",
+  "subtitleRemoval",
+  "digitalHuman",
+  "avatarConsole",
+  "characterMix",
+  "agent",
+  "settings",
+  "login",
+  "profile",
+  "report",
+];
+
+function getNavIndex(key: string): number {
+  return NAV_ORDER.indexOf(key);
+}
+
+const prefersReducedMotion = typeof window !== "undefined"
+  ? window.matchMedia("(prefers-reduced-motion: reduce)").matches
+  : false;
 
 export default function PageTransition({ viewKey, children }: PageTransitionProps) {
   const [displayedChildren, setDisplayedChildren] = useState(children);
   const [phase, setPhase] = useState<"idle" | "exit">("idle");
+  const [exitDirection, setExitDirection] = useState<"forward" | "backward" | "neutral">("neutral");
   const prevKeyRef = useRef(viewKey);
   const timerRef = useRef<ReturnType<typeof setTimeout>>();
 
@@ -18,17 +54,36 @@ export default function PageTransition({ viewKey, children }: PageTransitionProp
       setDisplayedChildren(children);
       return;
     }
+    const prevIndex = getNavIndex(prevKeyRef.current);
+    const nextIndex = getNavIndex(viewKey);
+    if (prevIndex < nextIndex) {
+      setExitDirection("forward");
+    } else if (prevIndex > nextIndex) {
+      setExitDirection("backward");
+    } else {
+      setExitDirection("neutral");
+    }
     prevKeyRef.current = viewKey;
+
+    if (prefersReducedMotion) {
+      setDisplayedChildren(children);
+      setPhase("idle");
+      return;
+    }
+
     setPhase("exit");
+    const duration = prefersReducedMotion ? REDUCED_MOTION_EXIT_MS : EXIT_DURATION_MS;
     timerRef.current = setTimeout(() => {
       setDisplayedChildren(children);
       setPhase("idle");
-    }, EXIT_DURATION_MS);
+    }, duration);
     return () => clearTimeout(timerRef.current);
   }, [viewKey, children]);
 
+  const dirClass = exitDirection === "forward" ? " is-forward" : exitDirection === "backward" ? " is-backward" : "";
+
   return (
-    <div className={phase === "exit" ? "page-transition-wrap page-motion--exit" : "page-transition-wrap"}>
+    <div className={phase === "exit" ? `page-transition-wrap page-motion--exit${dirClass}` : "page-transition-wrap"}>
       {displayedChildren}
     </div>
   );

src/features/community/CommunityPage.tsx

@@ -477,8 +477,9 @@ function CommunityPage({ projects, isAuthenticated, onStartCreate, onOpenProject
                   <div className="community-card-actions">
                     <button
                       type="button"
-                      className={isFavorite ? "is-active" : ""}
+                      className={isFavorite ? "is-active heart-animate" : ""}
                       aria-pressed={isFavorite}
+                      key={isFavorite ? `fav-${cardId}` : `unfav-${cardId}`}
                       onClick={(event) => {
                         event.stopPropagation();
                         void handleToggleFavorite(item, cardId);

src/features/ecommerce/EcommercePage.tsx

@@ -11,6 +11,7 @@ import {
   SkinOutlined,
 } from "@ant-design/icons";
 import { useEffect, useRef, useState, type CSSProperties, type ChangeEvent, type DragEvent, type ReactNode } from "react";
+import { EcommerceProgressBar } from "./EcommerceProgressBar";
 
 const OSS_MUBAN = "https://stringtest.oss-cn-hangzhou.aliyuncs.com/muban";
 const ecommerceGenerated = `${OSS_MUBAN}/ecommerce-carousel-generated.png`;
@@ -2402,6 +2403,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
       </div>
 
       <footer className="product-clone-panel__footer">
+        {detailStatus === "generating" ? <EcommerceProgressBar status="generating" label="A+详情页" /> : null}
         <button type="button" className="product-clone-primary" disabled={!canGenerateDetail} onClick={handleDetailGenerate}>
           {detailStatus === "generating" ? <LoadingOutlined /> : null}
           {detailPrimaryLabel}
@@ -2547,6 +2549,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
       </div>
 
       <footer className="product-clone-panel__footer">
+        {tryOnStatus === "generating" ? <EcommerceProgressBar status="generating" label="服饰穿戴图" /> : null}
         <button type="button" className="product-clone-primary" disabled={!canGenerateTryOn} onClick={handleTryOnGenerate}>
           {tryOnStatus === "generating" ? <LoadingOutlined /> : null}
           {tryOnPrimaryLabel}
@@ -2592,7 +2595,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
             <span>{productSetPreviewCards[0].label}</span>
           </button>
           <div className="product-set-flow-arrow" aria-hidden="true" />
-          <div className="product-set-card-grid">
+          <div className="product-set-card-grid result-reveal">
             {productSetPreviewCards.slice(1).map((card) => (
               <button key={card.id} type="button" onClick={() => openProductSetPreview(card)}>
                 <img src={card.src} alt={card.label} />
@@ -2605,6 +2608,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
         <section className="product-set-empty-preview" aria-live="polite">
           {productSetStatus === "generating" ? <LoadingOutlined /> : <FileImageOutlined />}
           <strong>{productSetStatus === "generating" ? "正在生成" : "等待生成"}</strong>
+          {productSetStatus === "generating" ? <EcommerceProgressBar status="generating" label="商品套图" /> : null}
           <span>{productSetStatus === "generating" ? "AI 正在整理主图、场景、细节与卖点图。" : "上传商品原图并填写信息后，AI 将为您生成专业的电商商品图"}</span>
         </section>
       )}
@@ -2650,7 +2654,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
             <span>原图素材</span>
           </button>
           <div className="clone-ai-flow-arrow" aria-hidden="true" />
-          <div className="clone-ai-result-grid">
+          <div className="clone-ai-result-grid result-reveal">
             {clonePreviewCards.map((card) => (
               <button key={card.id} type="button" onClick={() => openProductSetPreview(card)}>
                 <img src={card.src} alt={card.label} />
@@ -2663,6 +2667,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
         <section className="clone-ai-empty-state" aria-live="polite">
           {status === "generating" ? <LoadingOutlined /> : <FileImageOutlined />}
           <strong>{status === "generating" ? "正在生成" : "等待生成"}</strong>
+          {status === "generating" ? <EcommerceProgressBar status="generating" label={`${selectedCloneOutput.label}生成`} /> : null}
           <span>
             {status === "generating"
               ? `AI 正在为 ${platform} / ${market} 整理${selectedCloneOutput.label}。`
@@ -2814,7 +2819,8 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
 
         <aside
           id={isCloneTool ? "ecommerce-clone-settings-panel" : undefined}
-          className="product-clone-panel"
+          className={`product-clone-panel tool-panel-enter`}
+          key={activeTool}
           aria-label={`${pageLabel}参数`}
           aria-hidden={isCloneTool && isCloneSettingsCollapsed ? true : undefined}
         >

src/features/ecommerce/EcommerceProgressBar.tsx

@@ -0,0 +1,30 @@
+import { useSmoothedProgress } from "../../hooks/useSmoothedProgress";
+
+interface EcommerceProgressBarProps {
+  status: "idle" | "generating" | "done" | "failed" | string;
+  label?: string;
+}
+
+function mapStatus(status: string): "running" | "completed" | "failed" {
+  if (status === "done") return "completed";
+  if (status === "failed") return "failed";
+  if (status === "generating" || status === "modeling") return "running";
+  return "running";
+}
+
+export function EcommerceProgressBar({ status, label }: EcommerceProgressBarProps) {
+  const progress = mapStatus(status) === "running" ? 50 : 100;
+  const smoothed = useSmoothedProgress(progress, mapStatus(status));
+
+  if (status === "idle") return null;
+
+  return (
+    <div className="ecommerce-progress-bar">
+      <span className="ecommerce-progress-bar__label">{label || "AI 正在生成"}</span>
+      <div className="ecommerce-progress-bar__track">
+        <div className="ecommerce-progress-bar__fill" style={{ width: `${smoothed}%` }} />
+      </div>
+      <span className="ecommerce-progress-bar__value">{smoothed}%</span>
+    </div>
+  );
+}

src/features/home/HomePage.tsx

@@ -9,6 +9,16 @@ import {
 } from "@ant-design/icons";
 import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from "react";
 import WelcomeSplash from "./WelcomeSplash";
+import { useScrollEntrance } from "../../hooks/useScrollEntrance";
+
+function ScrollEntrance({ children, className, ...rest }: { children: React.ReactNode; className?: string } & React.HTMLAttributes<HTMLElement>) {
+  const { ref, isVisible } = useScrollEntrance<HTMLElement>();
+  return (
+    <section ref={ref} className={`${className ?? ""} scroll-entrance${isVisible ? " is-visible" : ""}`} {...rest}>
+      {children}
+    </section>
+  );
+}
 
 const OSS_MUBAN = "https://stringtest.oss-cn-hangzhou.aliyuncs.com/muban";
 const heroImage1 = `${OSS_MUBAN}/hero-1.png`;
@@ -256,6 +266,7 @@ function HomePage({ onOpenGenerate, onOpenEcommerce, onOpenScriptReview, onOpenT
                       }}
                     >
                       <img src={slide.imageUrl} alt={slide.title} />
+                      {isActive ? <span className="omni-home__carousel-card-label slide-up-in-260">{slide.title}</span> : null}
                     </button>
                   );
                 })}
@@ -282,7 +293,7 @@ function HomePage({ onOpenGenerate, onOpenEcommerce, onOpenScriptReview, onOpenT
 
       <main className="omni-home__feature-pages" aria-label="OmniAI 功能介绍">
         {HOME_FEATURES.map((feature, index) => (
-          <section key={feature.key} className={`omni-home__feature-page is-${feature.key}${index % 2 ? " is-alt" : ""}`}>
+          <ScrollEntrance key={feature.key} className={`omni-home__feature-page is-${feature.key}${index % 2 ? " is-alt" : ""}`}>
             <div className="omni-home__feature-copy">
               <span>
                 {feature.icon}
@@ -303,10 +314,10 @@ function HomePage({ onOpenGenerate, onOpenEcommerce, onOpenScriptReview, onOpenT
                 <span key={item}>{item}</span>
               ))}
             </div>
-          </section>
+          </ScrollEntrance>
         ))}
 
-        <section className="omni-home__experience" aria-label="点击体验">
+        <ScrollEntrance className="omni-home__experience" aria-label="点击体验">
           <div className="omni-home__experience-copy">
             <span>
               <ThunderboltOutlined />
@@ -337,7 +348,7 @@ function HomePage({ onOpenGenerate, onOpenEcommerce, onOpenScriptReview, onOpenT
               体验电商生成
             </button>
           </div>
-        </section>
+        </ScrollEntrance>
       </main>
     </section>
     </>

src/features/home/WelcomeSplash.tsx

@@ -8,6 +8,10 @@ const MATRIX_CHARS =
   "01アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン" +
   "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+[]{};:?/\\|~`";
 
+const prefersReducedMotion = typeof window !== "undefined"
+  ? window.matchMedia("(prefers-reduced-motion: reduce)").matches
+  : false;
+
 export default function WelcomeSplash({ onEnter }: WelcomeSplashProps) {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const rafRef = useRef(0);
@@ -16,15 +20,27 @@ export default function WelcomeSplash({ onEnter }: WelcomeSplashProps) {
 
   const handleEnter = useCallback(() => {
     setExiting(true);
-    setTimeout(onEnter, 700);
+    setTimeout(onEnter, prefersReducedMotion ? 0 : 700);
   }, [onEnter]);
 
   useEffect(() => {
-    const timer = setTimeout(() => setShowWelcome(true), 6000);
+    const timer = setTimeout(() => setShowWelcome(true), prefersReducedMotion ? 0 : 6000);
     return () => clearTimeout(timer);
   }, []);
 
   useEffect(() => {
+    if (prefersReducedMotion) {
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+      ctx.fillStyle = "rgba(0, 0, 0, 0.85)";
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+      return;
+    }
+
     const canvas = canvasRef.current;
     if (!canvas) return;
     const ctx = canvas.getContext("2d");

src/features/workbench/WorkbenchPage.tsx

@@ -2914,7 +2914,7 @@ function WorkbenchPage({
                         </div>
                       )}
                       {messages.map((message) => (
-                        <article key={message.id} className={`ai-chat-message-row${message.role === "user" ? " is-user" : ""}`}>
+                        <article key={message.id} className={`ai-chat-message-row chat-message-enter${message.role === "user" ? " is-user" : ""}`}>
                           <div className={`ai-chat-avatar${message.role === "user" ? " ai-chat-avatar--user" : ""}`}>
                             {message.role === "user" ? "我" : "AI"}
                           </div>

src/hooks/useScrollEntrance.ts

@@ -0,0 +1,31 @@
+import { useEffect, useRef, useState } from "react";
+
+export function useScrollEntrance<T extends HTMLElement>(threshold = 0.15) {
+  const ref = useRef<T>(null);
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    if (typeof IntersectionObserver === "undefined") {
+      setIsVisible(true);
+      return;
+    }
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsVisible(true);
+          observer.unobserve(el);
+        }
+      },
+      { threshold },
+    );
+
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [threshold]);
+
+  return { ref, isVisible };
+}

src/styles/components/legacy-components.css

@@ -48,6 +48,7 @@
   background: var(--surface-elevated);
   box-shadow: var(--shadow-elevated);
   backdrop-filter: none;
+  transform-origin: top right;
 }
 
 .profile-popover__head {

src/styles/components/motion.css

@@ -34,11 +34,118 @@
   }
 }
 
+/* 260ms variant for carousel labels */
+.slide-up-in-260 {
+  animation: slide-up-in 260ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
+}
+
 @keyframes backdrop-in {
   from { opacity: 0; }
   to { opacity: 1; }
 }
 
+/* Popover / panel entrance utilities */
+.panel-enter {
+  animation: scale-in 150ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both,
+             slide-up-in 150ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
+}
+
+.backdrop-enter {
+  animation: backdrop-in 140ms ease both;
+}
+
+/* Heart toggle spring animation */
+@keyframes heart-pop {
+  0% { transform: scale(1); }
+  40% { transform: scale(1.3); }
+  70% { transform: scale(0.9); }
+  100% { transform: scale(1); }
+}
+
+.heart-animate {
+  animation: heart-pop 420ms var(--ease-spring, cubic-bezier(0.34, 1.2, 0.64, 1)) both;
+}
+
+/* Result reveal stagger for generation output grids */
+.result-reveal > * {
+  opacity: 0;
+  animation: slide-up-in 320ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
+}
+
+.result-reveal > *:nth-child(1) { animation-delay: 0ms; }
+.result-reveal > *:nth-child(2) { animation-delay: 80ms; }
+.result-reveal > *:nth-child(3) { animation-delay: 160ms; }
+.result-reveal > *:nth-child(4) { animation-delay: 240ms; }
+.result-reveal > *:nth-child(5) { animation-delay: 320ms; }
+.result-reveal > *:nth-child(n+6) { animation-delay: 400ms; }
+
+/* Scroll-triggered entrance: hidden until revealed by IntersectionObserver */
+.scroll-entrance {
+  opacity: 0;
+  transform: translateY(16px);
+  transition: opacity 480ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
+              transform 480ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
+}
+
+.scroll-entrance.is-visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.scroll-entrance.is-visible > * {
+  animation: slide-up-in 380ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
+}
+
+.scroll-entrance.is-visible > *:nth-child(1) { animation-delay: 60ms; }
+.scroll-entrance.is-visible > *:nth-child(2) { animation-delay: 140ms; }
+.scroll-entrance.is-visible > *:nth-child(3) { animation-delay: 220ms; }
+
+/* Chat message entrance animation */
+@keyframes chat-message-in {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.chat-message-enter {
+  animation: chat-message-in 220ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
+}
+
+/* AnimatedPanel: CSS transition-based enter/exit for popovers */
+.animated-panel {
+  opacity: 0;
+  transform: scale(0.95) translateY(8px);
+  transition:
+    opacity 140ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
+    transform 140ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
+  pointer-events: none;
+}
+
+.animated-panel.is-visible {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+  pointer-events: auto;
+}
+
+/* Ecommerce tool panel crossfade on tool switch */
+@keyframes tool-panel-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.tool-panel-enter {
+  animation: tool-panel-fade-in 180ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
+}
+
 /* Stagger utility: apply to parent, children get delayed entrance */
 .motion-stagger > * {
   animation: list-item-in 280ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;

src/styles/components/page-transition.css

@@ -15,3 +15,26 @@
     transform: translateY(0);
   }
 }
+
+/* Directional exit transitions only — entrance is handled by child's page-motion */
+.page-motion--exit.is-forward {
+  animation: page-slide-out-forward 180ms ease both;
+}
+
+.page-motion--exit.is-backward {
+  animation: page-slide-out-backward 180ms ease both;
+}
+
+@keyframes page-slide-out-forward {
+  to {
+    opacity: 0;
+    transform: translateX(-16px);
+  }
+}
+
+@keyframes page-slide-out-backward {
+  to {
+    opacity: 0;
+    transform: translateX(16px);
+  }
+}

src/styles/components/primitives.css

@@ -29,7 +29,8 @@
   width: 40%;
   height: 24px;
   border-radius: 8px;
-  background: var(--surface-elevated, #222);
+  background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.1), rgba(255,255,255,0.04));
+  background-size: 220% 100%;
   animation: skeleton-shimmer 1.4s ease infinite;
 }
 
@@ -42,7 +43,8 @@
   flex: 1;
   height: 140px;
   border-radius: 14px;
-  background: var(--surface-elevated, #222);
+  background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.1), rgba(255,255,255,0.04));
+  background-size: 220% 100%;
   animation: skeleton-shimmer 1.4s ease infinite;
   animation-delay: 0.15s;
 }
@@ -51,16 +53,12 @@
   width: 100%;
   height: 200px;
   border-radius: 14px;
-  background: var(--surface-elevated, #222);
+  background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.1), rgba(255,255,255,0.04));
+  background-size: 220% 100%;
   animation: skeleton-shimmer 1.4s ease infinite;
   animation-delay: 0.3s;
 }
 
-@keyframes skeleton-shimmer {
-  0%, 100% { opacity: 0.4; }
-  50% { opacity: 0.7; }
-}
-
 .page-transition-wrap {
   width: 100%;
   height: 100%;

src/styles/pages/ecommerce.css

@@ -9,6 +9,48 @@
   font-family: Inter, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
 }
 
+/* Ecommerce generation progress bar */
+.ecommerce-progress-bar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 16px;
+  border-radius: var(--radius-sm, 10px);
+  background: rgba(var(--accent-rgb, 0, 255, 136), 0.08);
+  border: 1px solid rgba(var(--accent-rgb, 0, 255, 136), 0.18);
+  margin: 8px 0;
+}
+
+.ecommerce-progress-bar__label {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--fg-muted, #aeb8b1);
+  white-space: nowrap;
+}
+
+.ecommerce-progress-bar__track {
+  flex: 1;
+  height: 6px;
+  border-radius: 999px;
+  background: rgba(var(--accent-rgb, 0, 255, 136), 0.12);
+  overflow: hidden;
+}
+
+.ecommerce-progress-bar__fill {
+  height: 100%;
+  border-radius: 999px;
+  background: var(--accent, #00ff88);
+  transition: width 80ms linear;
+}
+
+.ecommerce-progress-bar__value {
+  font-size: 12px;
+  font-weight: 900;
+  color: var(--accent, #00ff88);
+  min-width: 40px;
+  text-align: right;
+}
+
 /* Product set page: target dark two-column workspace with floating detail input. */
 .product-clone-page[data-tool="set"] {
   display: block;

src/styles/pages/home.css

@@ -405,6 +405,21 @@
   transform: translateZ(20px) scale(1.02);
 }
 
+.omni-home__carousel-card-label {
+  position: absolute;
+  bottom: 12px;
+  left: 14px;
+  z-index: 2;
+  padding: 4px 12px;
+  border-radius: 999px;
+  background: rgba(var(--accent-rgb, 0, 255, 136), 0.16);
+  border: 1px solid rgba(var(--accent-rgb, 0, 255, 136), 0.24);
+  color: var(--fg-body, #f3f5f2);
+  font-size: 12px;
+  font-weight: 900;
+  white-space: nowrap;
+}
+
 .omni-home__carousel-card:hover {
   box-shadow:
     0 28px 58px rgb(0 0 0 / 34%),
@@ -570,6 +585,13 @@
   object-position: center;
   transform: none;
   transform-origin: center;
+  transition: transform 280ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
+              filter 280ms ease;
+}
+
+.omni-home__feature-visual:hover img {
+  transform: scale(1.03);
+  filter: saturate(1.1) contrast(1.06) brightness(1.04);
 }
 
 .omni-home__feature-stats {
@@ -721,6 +743,14 @@
   padding: 16px 18px;
   box-shadow: 0 20px 46px rgb(0 0 0 / 26%);
   backdrop-filter: blur(12px);
+  cursor: pointer;
+  transition: transform 200ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
+              box-shadow 200ms ease;
+}
+
+.omni-home__experience-route:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 24px 52px rgb(0 0 0 / 32%);
 }
 
 .omni-home__experience-route b {

src/styles/pages/legacy-pages.css

@@ -14271,19 +14271,6 @@
 }
 
 /* ─── Page Motion Animation ─── */
-.page-motion {
-  animation: pixel-page-enter 0.3s ease-out;
-}
-
-@keyframes pixel-page-enter {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
 /* ─── Workbench Page Layout Overrides ─── */
 .ai-workbench-page.is-active .ai-workbench-shell {
   grid-template-columns: 1fr auto;

src/styles/pages/script-tokens.css

@@ -3400,7 +3400,6 @@
   width: 100%;
   height: 100%;
   min-height: 520px;
-  max-height: 520px;
   padding: 18px 22px;
   border: none;
   outline: none;
@@ -3410,7 +3409,6 @@
   font-size: 14px;
   line-height: 1.9;
   resize: none;
-  overflow-y: auto;
 }
 
 .script-eval-v4-text-input::placeholder {
@@ -4270,11 +4268,6 @@
 .script-eval-v4-text-shell,
 .script-eval-v4-text-input {
   min-height: calc(100vh - 422px);
-  max-height: calc(100vh - 422px);
-}
-
-.script-eval-v4-text-input {
-  overflow-y: auto;
 }
 
 .script-eval-v4-score-card {

src/styles/shell/app-shell.css

@@ -135,6 +135,11 @@
   font-size: 15px;
   font-weight: 900;
   cursor: pointer;
+  transition: opacity 160ms ease;
+}
+
+.brand-lockup:active {
+  opacity: 0.85;
 }
 
 .brand-lockup__mark {
@@ -303,6 +308,15 @@
   background: var(--bg-hover);
 }
 
+.creator-button:active,
+.member-button:active,
+.profile-button:active,
+.icon-button:active,
+.theme-toggle:active {
+  transform: scale(0.97);
+  transition-duration: 80ms;
+}
+
 .profile-button--guest:hover {
   background: rgba(var(--accent-rgb), 0.88);
   color: #07100b;
@@ -481,6 +495,15 @@
   box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.34);
 }
 
+@keyframes nav-activate-pulse {
+  0% { box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.34), 0 0 8px rgba(var(--accent-rgb), 0.25); }
+  100% { box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.34); }
+}
+
+.floating-nav__button.nav-just-activated {
+  animation: nav-activate-pulse 320ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
+}
+
 .floating-nav__button:hover .floating-nav__label,
 .floating-nav__button:focus-visible .floating-nav__label,
 .floating-nav__button.is-active .floating-nav__label {

src/styles/themes/dark-green.css

@@ -3990,6 +3990,13 @@
   isolation: isolate;
   break-inside: avoid;
   aspect-ratio: 4 / 5;
+  transition: transform 200ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
+              box-shadow 200ms ease;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-page .community-case-card--mosaic:hover {
+  transform: scale(1.02);
+  box-shadow: 0 8px 24px rgb(0 0 0 / 20%);
 }
 
 .web-shell[data-ui-theme="dark-green"] .community-page .community-case-card--tile-0,

vite.config.ts

@@ -1,45 +1,49 @@
 import react from "@vitejs/plugin-react";
 import { compression } from "vite-plugin-compression2";
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv } from "vite";
 
-export default defineConfig({
-  plugins: [
-    react(),
-    compression({ algorithms: ["gzip", "brotliCompress"], threshold: 1024 }),
-  ],
-  server: {
-    port: 5174,
-    host: "127.0.0.1",
-    proxy: {
-      "/api": {
-        target: "http://47.110.225.76:3600",
-        changeOrigin: true,
-      },
-    },
-  },
-  preview: {
-    port: 4174,
-    host: "127.0.0.1",
-  },
-  esbuild: {
-    drop: ["debugger"],
-  },
-  build: {
-    sourcemap: "hidden",
-    rollupOptions: {
-      output: {
-        manualChunks(id: string) {
-          if (id.includes("node_modules/react") || id.includes("node_modules/react-dom") || id.includes("node_modules/scheduler")) {
-            return "vendor-react";
-          }
-          if (id.includes("node_modules/@ant-design") || id.includes("node_modules/antd") || id.includes("node_modules/rc-")) {
-            return "vendor-antd";
-          }
-          if (id.includes("node_modules/@xyflow")) {
-            return "vendor-xyflow";
-          }
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), "");
+
+  return {
+    plugins: [
+      react(),
+      compression({ algorithms: ["gzip", "brotliCompress"], threshold: 1024 }),
+    ],
+    server: {
+      port: 5174,
+      host: "127.0.0.1",
+      proxy: {
+        "/api": {
+          target: env.VITE_DEV_PROXY || "http://47.110.225.76:3600",
+          changeOrigin: true,
         },
       },
     },
-  },
-});
+    preview: {
+      port: 4174,
+      host: "127.0.0.1",
+    },
+    esbuild: {
+      drop: ["console", "debugger"],
+    },
+    build: {
+      sourcemap: "hidden",
+      rollupOptions: {
+        output: {
+          manualChunks(id: string) {
+            if (id.includes("node_modules/react") || id.includes("node_modules/react-dom") || id.includes("node_modules/scheduler")) {
+              return "vendor-react";
+            }
+            if (id.includes("node_modules/@ant-design") || id.includes("node_modules/antd") || id.includes("node_modules/rc-")) {
+              return "vendor-antd";
+            }
+            if (id.includes("node_modules/@xyflow")) {
+              return "vendor-xyflow";
+            }
+          },
+        },
+      },
+    },
+  };
+});