feat(home): animated typewriter placeholder for the prompt composer

Cycle through localized example prompts with a typing/deleting animation
in the home composer placeholder, start the field empty instead of with
a default prompt, and style the home editor with larger prompt text.

Also rebrand the device-management copy from Lovart to Moteva.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/src/i18n/i18n.tsx

@@ -29,7 +29,7 @@ const dictionaries: Record<Locale, Dictionary> = {
     email: "电子邮箱",
     deviceManagement: "设备管理",
     removeAllDevices: "移除全部设备",
-    removeAllDevicesDescription: "Lovart 账户仅限个人使用。为防止滥用并确保平台稳定，任务最多可同时在 2 个桌面 Web 会话和 1 个移动 Web 会话中运行。如需团队或多人使用，请购买 Team Plan。",
+    removeAllDevicesDescription: "Moteva 账户仅限个人使用。为防止滥用并确保平台稳定，任务最多可同时在 2 个桌面 Web 会话和 1 个移动 Web 会话中运行。如需团队或多人使用，请购买 Team Plan。",
     onlineStatus: "在线状态",
     deviceInfo: "设备信息",
     currentDevice: "当前设备",
@@ -490,7 +490,7 @@ const dictionaries: Record<Locale, Dictionary> = {
     email: "Email",
     deviceManagement: "Device Management",
     removeAllDevices: "Remove All Devices",
-    removeAllDevicesDescription: "A Lovart account is for personal use only. To prevent abuse and keep the platform stable, tasks can run in up to 2 desktop web sessions and 1 mobile web session at the same time. For team or multi-person use, please purchase Team Plan.",
+    removeAllDevicesDescription: "A Moteva account is for personal use only. To prevent abuse and keep the platform stable, tasks can run in up to 2 desktop web sessions and 1 mobile web session at the same time. For team or multi-person use, please purchase Team Plan.",
     onlineStatus: "Online",
     deviceInfo: "Device Info",
     currentDevice: "Current Device",

frontend/src/ui/pages/HomePage/index.tsx

@@ -75,6 +75,41 @@ type HomeImageModel = {
   credits: number;
 };
 
+type HomePromptPlaceholderBlueprint = {
+  prefix: string;
+  phrases: string[];
+};
+
+type TypewriterPhase = "typing" | "deleting" | "pausing";
+
+const homePromptPlaceholderBlueprints: Record<Locale, HomePromptPlaceholderBlueprint> = {
+  "zh-CN": {
+    prefix: "让 Moteva ",
+    phrases: [
+      "设计一个令人惊艳的标志",
+      "创建一个温馨的咖啡厅风格菜单海报",
+      "生成一组水彩电影感插画分镜",
+      "为一家日系面包店设计完整品牌视觉",
+      "制作一张高转化的电商产品图"
+    ]
+  },
+  "en-US": {
+    prefix: "Ask Moteva to ",
+    phrases: [
+      "design a striking logo",
+      "create a warm cafe-style menu poster",
+      "generate a watercolor cinematic storyboard",
+      "build a complete brand identity for a Japanese bakery",
+      "make a high-converting e-commerce product visual"
+    ]
+  }
+};
+
+const HOME_PLACEHOLDER_TYPE_DELAY_MS = 48;
+const HOME_PLACEHOLDER_DELETE_DELAY_MS = 24;
+const HOME_PLACEHOLDER_HOLD_DELAY_MS = 1600;
+const HOME_PLACEHOLDER_PAUSE_DELAY_MS = 260;
+
 const promptModeBlueprints = [
   {
     id: "poster",
@@ -519,6 +554,55 @@ function hasPromptText(value: string) {
   return value.replace(/\u00a0/g, " ").trim().length > 0;
 }
 
+function useHomePromptPlaceholder(locale: Locale) {
+  const blueprint = homePromptPlaceholderBlueprints[locale];
+  const [phraseIndex, setPhraseIndex] = useState(0);
+  const [visibleCharacters, setVisibleCharacters] = useState(0);
+  const [phase, setPhase] = useState<TypewriterPhase>("typing");
+  const phrase = blueprint.phrases[phraseIndex] ?? blueprint.phrases[0] ?? "";
+  const characters = useMemo(() => Array.from(phrase), [phrase]);
+
+  useEffect(() => {
+    setPhraseIndex(0);
+    setVisibleCharacters(0);
+    setPhase("typing");
+  }, [locale]);
+
+  useEffect(() => {
+    if (phase === "typing") {
+      if (visibleCharacters < characters.length) {
+        const timeoutId = window.setTimeout(() => {
+          setVisibleCharacters((count) => Math.min(count + 1, characters.length));
+        }, HOME_PLACEHOLDER_TYPE_DELAY_MS);
+        return () => window.clearTimeout(timeoutId);
+      }
+
+      const timeoutId = window.setTimeout(() => setPhase("deleting"), HOME_PLACEHOLDER_HOLD_DELAY_MS);
+      return () => window.clearTimeout(timeoutId);
+    }
+
+    if (phase === "deleting") {
+      if (visibleCharacters > 0) {
+        const timeoutId = window.setTimeout(() => {
+          setVisibleCharacters((count) => Math.max(count - 1, 0));
+        }, HOME_PLACEHOLDER_DELETE_DELAY_MS);
+        return () => window.clearTimeout(timeoutId);
+      }
+
+      const timeoutId = window.setTimeout(() => setPhase("pausing"), HOME_PLACEHOLDER_PAUSE_DELAY_MS);
+      return () => window.clearTimeout(timeoutId);
+    }
+
+    const timeoutId = window.setTimeout(() => {
+      setPhraseIndex((index) => (index + 1) % blueprint.phrases.length);
+      setPhase("typing");
+    }, HOME_PLACEHOLDER_PAUSE_DELAY_MS);
+    return () => window.clearTimeout(timeoutId);
+  }, [blueprint, characters.length, phase, visibleCharacters]);
+
+  return `${blueprint.prefix}${characters.slice(0, visibleCharacters).join("")}`;
+}
+
 type CreateProjectOptions = {
   allowEmptyPrompt?: boolean;
 };
@@ -535,7 +619,7 @@ export function HomePage() {
   const promptComposerRef = useRef<PromptComposerHandle | null>(null);
   const referenceImagesRef = useRef<UploadedReferenceImage[]>([]);
   const [dashboard, setDashboard] = useState<Dashboard | null>(null);
-  const [prompt, setPrompt] = useState(() => t("defaultPrompt"));
+  const [prompt, setPrompt] = useState("");
   const [referenceImages, setReferenceImages] = useState<UploadedReferenceImage[]>([]);
   const [activeModeId, setActiveModeId] = useState("poster");
   const [activeInspirationCategory, setActiveInspirationCategory] = useState("all");
@@ -571,6 +655,7 @@ export function HomePage() {
   const selectedModel = imageModels.find((model) => model.id === selectedModelId) ?? imageModels[0];
   const inspirationCategories = useMemo(() => getInspirationCategories(locale), [locale]);
   const inspirationCatalog = useMemo(() => getInspirationCatalog(locale), [locale]);
+  const promptPlaceholder = useHomePromptPlaceholder(locale);
   const activeMode = promptModes.find((mode) => mode.id === activeModeId) ?? promptModes[0];
   const projects = dashboard?.projects ?? [];
   const canSubmitPrompt = hasPromptText(prompt);
@@ -728,8 +813,9 @@ export function HomePage() {
             <PromptComposer
               ref={promptComposerRef}
               text={prompt}
-              placeholder={t("promptPlaceholder")}
+              placeholder={promptPlaceholder}
               ariaLabel={t("promptPlaceholder")}
+              className="home-prompt-editor"
               removeLabel={t("removeReference")}
               onTextChange={setPrompt}
               onReferencesChange={syncReferenceImages}

frontend/src/ui/styles.css

@@ -137,6 +137,13 @@ button:disabled {
   cursor: text;
 }
 
+.prompt-rich-editor.home-prompt-editor {
+  color: #1f2937;
+  font-size: 24px;
+  line-height: 1.45;
+  font-weight: 600;
+}
+
 .prompt-rich-editor[data-empty="true"]::before {
   position: absolute;
   top: 0;
@@ -146,6 +153,10 @@ button:disabled {
   pointer-events: none;
 }
 
+.prompt-rich-editor.home-prompt-editor[data-empty="true"]::before {
+  color: #b5b7bc;
+}
+
 .prompt-card.has-references .prompt-rich-editor {
   min-height: 118px;
 }