From 5af6ccdcdf4d5af2c417d043d548a40fe5189663 Mon Sep 17 00:00:00 2001
From: huyan <huyanxius@Gmail.com>
Date: Fri, 14 Aug 2026 01:01:56 +0800
Subject: [PATCH 1/2] feat(quick-start): redesign character creation entry

The previous entry mixed decorative copy with a tall form and unclear role examples.

Introduce a bottom composer, style starters, rotating role ideas, and layered character motion.

Creation services, routes, export behavior, and error handling remain unchanged.
---
 frontend/src/pages/quick-start/index.tsx      | 236 ++++++++++--------
 frontend/src/shared/ui/index.ts               |   2 +
 frontend/src/shared/ui/kinetic-copy-cycle.css | 164 ++++++++++++
 frontend/src/shared/ui/kinetic-copy-cycle.tsx | 164 ++++++++++++
 4 files changed, 458 insertions(+), 108 deletions(-)
 create mode 100644 frontend/src/shared/ui/kinetic-copy-cycle.css
 create mode 100644 frontend/src/shared/ui/kinetic-copy-cycle.tsx

diff --git a/frontend/src/pages/quick-start/index.tsx b/frontend/src/pages/quick-start/index.tsx
index a4517396..1c7447f0 100644
--- a/frontend/src/pages/quick-start/index.tsx
+++ b/frontend/src/pages/quick-start/index.tsx
@@ -7,6 +7,7 @@ import {
   type ChangeEvent,
   type FormEvent,
 } from 'react'
+import { ArrowUp, ImageSquare, X } from '@phosphor-icons/react'
 import { Link, useNavigate, useParams, useSearchParams } from 'react-router'
 
 import {
@@ -17,6 +18,7 @@ import {
   type WorkflowNodeType,
 } from '@/entities'
 import { ExportButton, type ExportPackageModel } from '@/features/export-package'
+import { KineticCopyCycle, type KineticCopyMessage } from '@/shared/ui'
 import {
   quickStartService,
   type QuickStartEntryService,
@@ -40,17 +42,50 @@ const STEP_LABELS: Record<WorkflowNodeType, string> = {
   review: '审核',
 }
 
-const EXAMPLES = [
+const STYLE_PROMPTS = [
   {
-    label: '像素守夜人',
-    prompt: '一位提着风灯、披深色斗篷的像素守夜人',
+    title: '16-bit 日式 RPG',
+    detail: '清晰轮廓 · 明亮配色',
+    prompt: '16-bit 日式 RPG 像素风，清晰轮廓，明亮配色',
   },
   {
-    label: '轻装信使',
-    prompt: '轻装信使，侧视像素风，轮廓清晰，动作轻快',
+    title: '暗黑哥特像素',
+    detail: '低饱和 · 强烈明暗',
+    prompt: '暗黑哥特像素风，低饱和配色，强烈明暗对比',
   },
+  {
+    title: '温暖手绘像素',
+    detail: '柔和色彩 · 纸张质感',
+    prompt: '温暖手绘像素风，柔和配色，细腻纸张质感',
+  },
+] as const
+
+const ROLE_IDEAS = [
+  '银色卷发、戴星形单片眼镜的裁缝',
+  '长着鹿角、披苔藓斗篷的邮差',
+  '戴透明水母帽、穿蓝色雨衣的药剂师',
+  '蓬松白胡子、背黄铜工具箱的机械师',
+  '紫色短发、戴猫耳耳机的情报员',
+  '披白羽斗篷、戴月牙面具的占星师',
+  '红色双辫、穿宽大飞行夹克的小飞行员',
+  '黑色卷发、戴珊瑚项链的海洋祭司',
 ] as const
 
+const ROLE_IDEA_MESSAGES: readonly KineticCopyMessage[] = [
+  { lines: ['想做一个什么角色？'], className: 'text-app-ink' },
+  ...ROLE_IDEAS.map((idea) => ({
+    prefix: '试试',
+    prefixClassName:
+      'mr-3 font-mono text-[10px] font-bold tracking-[0.14em] text-app-faint sm:text-[11px]',
+    lines: [idea],
+    className: 'text-app-accent',
+  })),
+]
+
+const ROLE_DEFAULT_MESSAGE: readonly KineticCopyMessage[] = [
+  { lines: ['用文字塑造你的角色……'], className: 'text-app-ink' },
+]
+
 function playtestPath(characterId: string, outfitId: string, actionId?: string): string {
   const path = `/playtest/${encodeURIComponent(characterId)}/${encodeURIComponent(outfitId)}`
   return actionId ? `${path}?${new URLSearchParams({ actionId })}` : path
@@ -181,6 +216,8 @@ function QuickStartInput({
   const fileInput = useRef<HTMLInputElement>(null)
   const submitAbortController = useRef<AbortController | null>(null)
   const unavailableReason = service.unavailableReason
+  const hasPrompt = Boolean(prompt.trim())
+  const showStylePrompts = !hasPrompt && !templateFile
 
   useEffect(
     () => () => {
@@ -232,140 +269,123 @@ function QuickStartInput({
   }
 
   return (
-    <section className="relative min-h-screen overflow-hidden border border-app-line bg-app-canvas text-app-ink shadow-app-page">
+    <section className="relative min-h-[100dvh] overflow-hidden border border-app-line bg-app-canvas pt-14 text-app-ink shadow-app-page">
       <AmbientGrid />
 
-      <div className="relative z-10 grid min-h-screen grid-rows-[auto_1fr_auto] p-5 sm:p-8">
-        <header className="flex items-start justify-between gap-6">
-          <div>
-            <p className="font-mono text-[10px] font-bold tracking-[0.16em] text-app-muted">
-              QUICK START / CREATE CHARACTER
-            </p>
-            <h1 className="mt-3 max-w-3xl font-serif text-3xl leading-tight tracking-[-0.035em] sm:text-5xl">
-              用一句角色设定，
-              <br />
-              开始一条可追踪的制作流程。
-            </h1>
-          </div>
-          <span className="hidden rounded-full border border-app-line-strong bg-app-surface/80 px-4 py-2 text-xs font-semibold text-app-accent sm:inline-flex">
-            AI 快捷创作
-          </span>
-        </header>
-
-        <div className="grid items-center gap-8 py-12 lg:grid-cols-[1fr_220px]">
-          <button
-            type="button"
-            onClick={() => setPrompt(EXAMPLES[0].prompt)}
-            className="group flex min-h-24 w-full items-center gap-4 rounded-full border border-app-line bg-app-surface-raised px-7 text-left shadow-app-card transition hover:-translate-y-0.5 hover:border-app-line-strong focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-app-accent motion-reduce:transform-none"
-          >
-            <span className="shrink-0 text-sm font-semibold text-app-faint">你可能想做：</span>
-            <strong className="text-base font-semibold text-app-accent sm:text-xl">
-              {EXAMPLES[0].prompt}
-            </strong>
-          </button>
+      <div
+        data-layout="quick-start-entry"
+        className="relative z-10 grid min-h-[calc(100dvh-3.5rem)] grid-rows-[1fr_auto] gap-6 px-5 py-6 sm:px-8 sm:pb-8 sm:pt-10"
+      >
+        <div className="mx-auto grid w-full max-w-3xl content-center gap-5 pb-8 sm:gap-6">
+          <KineticCopyCycle
+            active={!templateFile && !submitting}
+            as="h1"
+            ariaLabel="想做一个什么角色？"
+            motionMode="characters"
+            firstCycleMs={2_400}
+            loopStartIndex={1}
+            messages={hasPrompt ? ROLE_DEFAULT_MESSAGE : ROLE_IDEA_MESSAGES}
+            className="min-h-12 text-center font-serif text-[clamp(1.75rem,4vw,2.65rem)] leading-none font-medium tracking-[-0.045em]"
+          />
 
           <div
-            className="mx-auto grid aspect-square w-44 grid-cols-7 gap-1 rounded-[1.4rem] border border-app-line bg-app-surface p-5 shadow-app-card"
-            aria-hidden="true"
+            data-layout="quick-start-starters"
+            data-presence={showStylePrompts ? 'visible' : 'hidden'}
+            aria-hidden={!showStylePrompts}
+            className={`grid gap-2 transition-[opacity,transform,filter] duration-[460ms] ease-[cubic-bezier(0.16,1,0.3,1)] motion-reduce:transition-none sm:grid-cols-3 ${
+              showStylePrompts
+                ? 'translate-y-0 scale-100 opacity-100 blur-0'
+                : 'pointer-events-none -translate-y-2 scale-[0.985] opacity-0 blur-[6px]'
+            }`}
           >
-            {Array.from({ length: 49 }, (_, index) => {
-              const row = Math.floor(index / 7)
-              const column = index % 7
-              const active =
-                (row === 1 && column >= 2 && column <= 4) ||
-                (row >= 2 && row <= 4 && column >= 1 && column <= 5) ||
-                (row === 5 && (column === 2 || column === 4))
-              return (
-                <i
-                  key={index}
-                  className={`rounded-[2px] ${active ? 'bg-app-accent' : 'bg-app-line'}`}
-                />
-              )
-            })}
-          </div>
-        </div>
-
-        <div>
-          <div className="mb-3 flex flex-wrap gap-2">
-            {EXAMPLES.slice(1).map((example) => (
+            {STYLE_PROMPTS.map((stylePrompt) => (
               <button
-                key={example.label}
+                key={stylePrompt.title}
                 type="button"
-                onClick={() => setPrompt(example.prompt)}
-                className="rounded-full border border-app-line bg-app-surface px-3 py-1.5 text-[11px] font-medium text-app-muted hover:border-app-line-strong hover:text-app-accent"
+                disabled={!showStylePrompts}
+                aria-label={`${stylePrompt.title}：${stylePrompt.detail}`}
+                onClick={() => setPrompt(stylePrompt.prompt)}
+                className="group grid min-h-16 content-center gap-1 rounded-xl border border-app-line bg-app-surface/70 px-4 py-3 text-left transition duration-200 hover:-translate-y-0.5 hover:border-app-line-strong hover:bg-app-surface-raised hover:shadow-app-card focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-app-accent motion-reduce:transform-none"
               >
-                {example.label}
+                <strong className="text-sm font-semibold text-app-ink">
+                  {stylePrompt.title}
+                </strong>
+                <span className="text-[11px] text-app-muted">{stylePrompt.detail}</span>
               </button>
             ))}
           </div>
+        </div>
 
+        <div data-layout="quick-start-composer" className="mx-auto w-full max-w-3xl self-end">
           <form
             onSubmit={(event) => void submit(event)}
-            className="grid gap-3 rounded-[1.4rem] border border-app-line-strong bg-app-surface-raised p-4 shadow-app-panel sm:grid-cols-[1fr_auto]"
+            className="grid items-center gap-1.5 rounded-xl border border-app-line-strong bg-app-surface-raised p-1.5 shadow-app-panel transition-shadow focus-within:border-app-accent focus-within:shadow-[0_18px_48px_rgb(29_37_31/14%)] sm:grid-cols-[1fr_auto_auto]"
           >
-            <label className="grid gap-2" htmlFor="quick-start-prompt">
+            <label className="min-w-0" htmlFor="quick-start-prompt">
               <span className="sr-only">创作指令</span>
-              <textarea
+              <input
                 id="quick-start-prompt"
+                type="text"
                 aria-label="创作指令"
                 value={prompt}
                 onChange={(event) => setPrompt(event.target.value)}
-                rows={2}
                 placeholder={
                   templateFile
-                    ? '例如：挥手打招呼、提灯前行（可留空生成待机动作）'
-                    : '描述你想生成的角色、身份特征和视觉风格…'
+                    ? '描述动作，可留空生成待机动作…'
+                    : '描述角色的外形、身份和气质…'
                 }
-                className="min-h-16 w-full resize-none border-0 bg-transparent px-2 py-1 text-[15px] leading-relaxed text-app-ink outline-none placeholder:text-app-faint"
+                className="h-10 w-full min-w-0 border-0 bg-transparent px-3 text-[15px] text-app-ink outline-none placeholder:text-app-faint"
               />
-              <span className="flex flex-wrap items-center gap-2 px-2 text-[10px] text-app-faint">
-                <b className="rounded-full border border-app-line bg-app-surface-muted px-2.5 py-1 font-medium text-app-ink-soft">
-                  文字创建
-                </b>
-                {templateFile
-                  ? '动作描述（可选）：留空生成待机动作'
-                  : '角色图生成后仍需人工选择候选'}
-              </span>
-              {templateFile ? (
-                <span className="flex flex-wrap items-center gap-2 px-2 text-[11px] text-app-ink-soft">
-                  <b className="max-w-full truncate font-medium">{templateFile.name}</b>
-                  <button
-                    type="button"
-                    onClick={removeTemplateFile}
-                    className="rounded-full border border-app-line-strong px-2 py-0.5 text-[10px] hover:border-app-line-strong hover:text-app-accent"
-                  >
-                    移除图片
-                  </button>
-                </span>
-              ) : null}
             </label>
 
-            <div className="flex min-w-32 flex-col gap-2">
-              <input
-                ref={fileInput}
-                type="file"
-                accept="image/*"
-                aria-label="上传角色母版"
-                className="sr-only"
-                onChange={selectTemplateFile}
-              />
+            <input
+              ref={fileInput}
+              type="file"
+              accept="image/*"
+              aria-label="上传角色母版"
+              className="sr-only"
+              onChange={selectTemplateFile}
+            />
+            {templateFile ? (
+              <span className="flex h-10 min-w-0 max-w-56 items-center rounded-lg bg-app-surface-muted text-xs text-app-ink-soft">
+                <button
+                  type="button"
+                  aria-label={`更换母版 ${templateFile.name}`}
+                  onClick={() => fileInput.current?.click()}
+                  className="inline-flex h-full min-w-0 items-center gap-2 rounded-l-lg px-2.5 font-semibold transition hover:bg-app-surface hover:text-app-accent focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-app-accent"
+                >
+                  <ImageSquare aria-hidden="true" size={16} weight="duotone" />
+                  <span className="max-w-32 truncate">{templateFile.name}</span>
+                </button>
+                <button
+                  type="button"
+                  aria-label="移除图片"
+                  onClick={removeTemplateFile}
+                  className="grid size-8 shrink-0 place-items-center rounded-md text-app-muted transition hover:bg-app-surface hover:text-app-accent focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-app-accent"
+                >
+                  <X aria-hidden="true" size={14} weight="bold" />
+                </button>
+              </span>
+            ) : (
               <button
                 type="button"
                 onClick={() => fileInput.current?.click()}
-                className="min-h-9 rounded-xl border border-app-line-strong bg-app-surface px-4 text-xs font-semibold text-app-ink-soft transition hover:border-app-line-strong hover:text-app-accent"
+                className="inline-flex h-10 items-center gap-2 rounded-lg px-3 text-xs font-semibold whitespace-nowrap text-app-muted transition hover:bg-app-surface-muted hover:text-app-accent focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-app-accent"
               >
-                {templateFile ? '更换图片' : '上传角色母版'}
+                <ImageSquare aria-hidden="true" size={17} weight="duotone" />
+                添加母版
               </button>
-              <button
-                type="submit"
-                disabled={
-                  (!prompt.trim() && !templateFile) || submitting || Boolean(unavailableReason)
-                }
-                className="min-h-14 rounded-[1rem] bg-app-accent px-5 text-sm font-bold text-app-on-accent transition hover:bg-app-accent-hover disabled:cursor-not-allowed disabled:opacity-45"
-              >
-                {submitting ? '正在创建…' : '开始生成'}
-              </button>
-            </div>
+            )}
+            <button
+              type="submit"
+              disabled={
+                (!prompt.trim() && !templateFile) || submitting || Boolean(unavailableReason)
+              }
+              className="inline-flex h-10 items-center gap-2 rounded-lg bg-app-accent px-4 text-sm font-bold whitespace-nowrap text-app-on-accent transition hover:bg-app-accent-hover active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-45"
+            >
+              {submitting ? '正在创建…' : '生成角色'}
+              {!submitting ? <ArrowUp aria-hidden="true" size={16} weight="bold" /> : null}
+            </button>
           </form>
 
           {unavailableReason ? (
diff --git a/frontend/src/shared/ui/index.ts b/frontend/src/shared/ui/index.ts
index 35f90abf..f929bd28 100644
--- a/frontend/src/shared/ui/index.ts
+++ b/frontend/src/shared/ui/index.ts
@@ -4,3 +4,5 @@ export { PageContainer } from './page-container'
 export type { PageContainerProps } from './page-container'
 export { Pagination } from './pagination'
 export type { PaginationProps } from './pagination'
+export { KineticCopyCycle } from './kinetic-copy-cycle'
+export type { KineticCopyCycleProps, KineticCopyMessage } from './kinetic-copy-cycle'
diff --git a/frontend/src/shared/ui/kinetic-copy-cycle.css b/frontend/src/shared/ui/kinetic-copy-cycle.css
new file mode 100644
index 00000000..52b3cc3e
--- /dev/null
+++ b/frontend/src/shared/ui/kinetic-copy-cycle.css
@@ -0,0 +1,164 @@
+.kinetic-copy-cycle {
+  display: grid;
+  place-items: center;
+}
+
+.kinetic-copy-line {
+  display: block;
+  overflow: hidden;
+  min-height: 1.55em;
+}
+
+.kinetic-copy-line-inner {
+  display: block;
+  opacity: 0;
+  letter-spacing: 0.075em;
+  transform: translate3d(0, 120%, 0);
+  animation: kinetic-copy-line-enter 620ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  animation-delay: calc(210ms + var(--kinetic-copy-line-index) * 90ms);
+  backface-visibility: hidden;
+  will-change: opacity, transform, letter-spacing;
+}
+
+.kinetic-copy-line-inner-prefixed {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.kinetic-copy-cycle-resting .kinetic-copy-line-inner {
+  opacity: 1;
+  letter-spacing: -0.01em;
+  transform: translate3d(0, 0, 0);
+  animation: none;
+}
+
+.kinetic-copy-cycle-exiting .kinetic-copy-line-inner {
+  opacity: 1;
+  letter-spacing: -0.01em;
+  transform: translate3d(0, 0, 0);
+  animation: kinetic-copy-line-exit 400ms cubic-bezier(0.55, 0, 1, 0.45) forwards;
+  animation-delay: calc(var(--kinetic-copy-line-reverse-index) * 55ms);
+}
+
+.kinetic-copy-prefix,
+.kinetic-copy-character {
+  display: inline-block;
+}
+
+.kinetic-copy-cycle-entering[data-copy-motion-mode='characters'] .kinetic-copy-line-inner {
+  opacity: 1;
+  letter-spacing: -0.01em;
+  transform: translate3d(0, 0, 0);
+  animation: none;
+}
+
+.kinetic-copy-cycle-entering[data-copy-motion-mode='characters'] .kinetic-copy-prefix {
+  opacity: 0;
+  transform: translate3d(0, 0.38em, 0);
+  filter: blur(4px);
+  animation: kinetic-copy-character-enter 520ms cubic-bezier(0.16, 1, 0.3, 1) 90ms forwards;
+}
+
+.kinetic-copy-cycle-entering[data-copy-motion-mode='characters'] .kinetic-copy-character {
+  opacity: 0;
+  transform: translate3d(0, 0.42em, 0);
+  filter: blur(4px);
+  animation: kinetic-copy-character-enter 520ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  animation-delay: calc(100ms + min(var(--kinetic-copy-character-index) * 24ms, 340ms));
+  will-change: opacity, transform, filter;
+}
+
+.kinetic-copy-cycle-exiting[data-copy-motion-mode='characters'] .kinetic-copy-line-inner {
+  opacity: 1;
+  letter-spacing: -0.01em;
+  transform: translate3d(0, -0.16em, 0);
+  animation: none;
+  transition: transform 420ms cubic-bezier(0.55, 0, 1, 0.45);
+}
+
+.kinetic-copy-cycle-exiting[data-copy-motion-mode='characters'] .kinetic-copy-prefix {
+  opacity: 1;
+  animation: kinetic-copy-character-exit 300ms cubic-bezier(0.55, 0, 1, 0.45) 140ms forwards;
+}
+
+.kinetic-copy-cycle-exiting[data-copy-motion-mode='characters'] .kinetic-copy-character {
+  opacity: 1;
+  transform: translate3d(0, 0, 0);
+  filter: blur(0);
+  animation: kinetic-copy-character-exit 300ms cubic-bezier(0.55, 0, 1, 0.45) forwards;
+  animation-delay: calc(min(var(--kinetic-copy-character-reverse-index) * 10ms, 140ms));
+  will-change: opacity, transform, filter;
+}
+
+@keyframes kinetic-copy-line-enter {
+  0% {
+    opacity: 0;
+    letter-spacing: 0.075em;
+    transform: translate3d(0, 120%, 0);
+  }
+  100% {
+    opacity: 1;
+    letter-spacing: -0.01em;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes kinetic-copy-line-exit {
+  0% {
+    opacity: 1;
+    letter-spacing: -0.01em;
+    transform: translate3d(0, 0, 0);
+  }
+  46% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    letter-spacing: 0.045em;
+    transform: translate3d(0, -118%, 0);
+  }
+}
+
+@keyframes kinetic-copy-character-enter {
+  0% {
+    opacity: 0;
+    transform: translate3d(0, 0.42em, 0);
+    filter: blur(4px);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+    filter: blur(0);
+  }
+}
+
+@keyframes kinetic-copy-character-exit {
+  0% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+    filter: blur(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translate3d(0, -0.42em, 0);
+    filter: blur(4px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .kinetic-copy-line-inner {
+    opacity: 1;
+    letter-spacing: -0.01em;
+    transform: none;
+    animation: none;
+  }
+
+  .kinetic-copy-prefix,
+  .kinetic-copy-character {
+    opacity: 1;
+    transform: none;
+    filter: none;
+    animation: none;
+  }
+}
diff --git a/frontend/src/shared/ui/kinetic-copy-cycle.tsx b/frontend/src/shared/ui/kinetic-copy-cycle.tsx
new file mode 100644
index 00000000..59c3e1f9
--- /dev/null
+++ b/frontend/src/shared/ui/kinetic-copy-cycle.tsx
@@ -0,0 +1,164 @@
+import { useEffect, useState, type CSSProperties, type ElementType } from 'react'
+
+import './kinetic-copy-cycle.css'
+
+export type KineticCopyMessage =
+  | readonly string[]
+  | {
+      lines: readonly string[]
+      prefix?: string
+      className?: string
+      prefixClassName?: string
+    }
+
+export interface KineticCopyCycleProps {
+  messages: readonly KineticCopyMessage[]
+  active?: boolean
+  as?: ElementType
+  ariaLabel?: string
+  className?: string
+  firstCycleMs?: number
+  cycleMs?: number
+  loopStartIndex?: number
+  motionMode?: 'line' | 'characters'
+}
+
+type CopyPhase = 'entering' | 'resting' | 'exiting'
+
+const ENTER_DURATION_MS = 760
+const EXIT_DURATION_MS = 460
+const DEFAULT_CYCLE_MS = 4_200
+
+function messageParts(message: KineticCopyMessage) {
+  return Array.isArray(message)
+    ? { lines: message as readonly string[] }
+    : (message as Exclude<KineticCopyMessage, readonly string[]>)
+}
+
+export function KineticCopyCycle({
+  messages,
+  active = true,
+  as: Tag = 'div',
+  ariaLabel,
+  className = '',
+  firstCycleMs = DEFAULT_CYCLE_MS,
+  cycleMs = DEFAULT_CYCLE_MS,
+  loopStartIndex = 0,
+  motionMode = 'line',
+}: KineticCopyCycleProps) {
+  const [renderedMessages, setRenderedMessages] = useState(messages)
+  const [copyIndex, setCopyIndex] = useState(0)
+  const [phase, setPhase] = useState<CopyPhase>('entering')
+
+  useEffect(() => {
+    const reduceMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false
+    if (messages === renderedMessages) return
+
+    if (!active || reduceMotion) {
+      setRenderedMessages(messages)
+      setCopyIndex(0)
+      setPhase('resting')
+      return
+    }
+
+    setPhase('exiting')
+    const replacementTimer = window.setTimeout(() => {
+      setRenderedMessages(messages)
+      setCopyIndex(0)
+      setPhase('entering')
+    }, EXIT_DURATION_MS)
+
+    return () => window.clearTimeout(replacementTimer)
+  }, [active, messages, renderedMessages])
+
+  useEffect(() => {
+    const reduceMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false
+    if (messages !== renderedMessages) return
+
+    setCopyIndex(0)
+    setPhase(active && !reduceMotion ? 'entering' : 'resting')
+    if (!active || reduceMotion || renderedMessages.length < 2) return
+
+    let exitTimer: number | null = null
+    let swapTimer: number | null = null
+    let restTimer: number | null = window.setTimeout(
+      () => setPhase('resting'),
+      ENTER_DURATION_MS,
+    )
+
+    const scheduleExit = (delay: number) => {
+      exitTimer = window.setTimeout(() => {
+        setPhase('exiting')
+        swapTimer = window.setTimeout(() => {
+          setCopyIndex((current) =>
+            current + 1 < renderedMessages.length ? current + 1 : loopStartIndex,
+          )
+          setPhase('entering')
+          restTimer = window.setTimeout(() => setPhase('resting'), ENTER_DURATION_MS)
+          scheduleExit(Math.max(0, cycleMs - EXIT_DURATION_MS))
+        }, EXIT_DURATION_MS)
+      }, delay)
+    }
+
+    scheduleExit(firstCycleMs)
+
+    return () => {
+      if (exitTimer !== null) window.clearTimeout(exitTimer)
+      if (swapTimer !== null) window.clearTimeout(swapTimer)
+      if (restTimer !== null) window.clearTimeout(restTimer)
+    }
+  }, [active, cycleMs, firstCycleMs, loopStartIndex, messages, renderedMessages])
+
+  if (renderedMessages.length === 0) return null
+
+  const message = messageParts(renderedMessages[copyIndex % renderedMessages.length])
+
+  return (
+    <Tag
+      aria-hidden={ariaLabel ? undefined : true}
+      aria-label={ariaLabel}
+      data-copy-index={copyIndex}
+      data-copy-phase={phase}
+      data-copy-motion-mode={motionMode}
+      className={`kinetic-copy-cycle kinetic-copy-cycle-${phase} ${className}`}
+    >
+      {message.lines.map((line, lineIndex) => (
+        <span key={`${copyIndex}-${line}`} className="kinetic-copy-line">
+          <span
+            className={`kinetic-copy-line-inner ${message.prefix ? 'kinetic-copy-line-inner-prefixed' : ''} ${message.className ?? ''}`}
+            style={
+              {
+                '--kinetic-copy-line-index': lineIndex,
+                '--kinetic-copy-line-reverse-index': message.lines.length - lineIndex - 1,
+              } as CSSProperties
+            }
+          >
+            {lineIndex === 0 && message.prefix ? (
+              <span className={`kinetic-copy-prefix ${message.prefixClassName ?? ''}`}>
+                {message.prefix}
+              </span>
+            ) : null}
+            {motionMode === 'characters'
+              ? Array.from(line).map((character, characterIndex, characters) => (
+                  <span
+                    key={`${character}-${characterIndex}`}
+                    aria-hidden="true"
+                    className="kinetic-copy-character"
+                    style={
+                      {
+                        '--kinetic-copy-character-index': characterIndex,
+                        '--kinetic-copy-character-reverse-index':
+                          characters.length - characterIndex - 1,
+                      } as CSSProperties
+                    }
+                  >
+                    {character === ' ' ? '\u00a0' : character}
+                  </span>
+                ))
+              : line}
+          </span>
+        </span>
+      ))}
+    </Tag>
+  )
+}

From efcc90ee1619a1391cceb05fe8eab5b25cd2f4b4 Mon Sep 17 00:00:00 2001
From: huyan <huyanxius@Gmail.com>
Date: Fri, 14 Aug 2026 01:01:56 +0800
Subject: [PATCH 2/2] test(quick-start): cover redesigned creation entry

The new entry layout and motion states need focused regression coverage.

Cover timing, prompt replacement, card dissolution, composer layout, and submission paths.

The tests protect the UI behavior without expanding into generation internals.
---
 frontend/src/pages/quick-start/index.test.tsx | 161 +++++++++++++++---
 1 file changed, 142 insertions(+), 19 deletions(-)

diff --git a/frontend/src/pages/quick-start/index.test.tsx b/frontend/src/pages/quick-start/index.test.tsx
index 626a3907..b5f2478e 100644
--- a/frontend/src/pages/quick-start/index.test.tsx
+++ b/frontend/src/pages/quick-start/index.test.tsx
@@ -1,5 +1,5 @@
 import { StrictMode } from 'react'
-import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { MemoryRouter, Route, Routes, useLocation } from 'react-router'
 import { afterEach, describe, expect, it, vi } from 'vitest'
 
@@ -8,7 +8,10 @@ import type { WorkflowRun } from '@/entities'
 import type { ExportPackageModel } from '@/features/export-package'
 import { QuickStartPage } from './index'
 
-afterEach(cleanup)
+afterEach(() => {
+  cleanup()
+  vi.useRealTimers()
+})
 
 function workflow(nodes: WorkflowRun['nodes'], id = 'run-1'): WorkflowRun {
   return { id, projectId: 'project-1', version: 1, storageStatus: 'active', nodes }
@@ -151,6 +154,111 @@ function renderAt(path: string, service: QuickStartEntryService) {
 }
 
 describe('QuickStartPage', () => {
+  it('reserves the fixed app header height before the creation entry', () => {
+    const entry = renderAt('/quick-start', serviceFor(null))
+    const entrySection = entry.getByLabelText('创作指令').closest('section')
+
+    expect(entrySection?.className).toContain('min-h-[100dvh]')
+    expect(entrySection?.className).toContain('pt-14')
+  })
+
+  it('uses a centered creation desk with style prompts before the composer', () => {
+    const entry = renderAt('/quick-start', serviceFor(null))
+    const entrySection = entry.getByLabelText('创作指令').closest('section')
+    const entryLayout = entrySection?.querySelector('[data-layout="quick-start-entry"]')
+    const composer = entrySection?.querySelector('[data-layout="quick-start-composer"]')
+    const starters = entrySection?.querySelector('[data-layout="quick-start-starters"]')
+
+    expect(entryLayout?.className).toContain('min-h-[calc(100dvh-3.5rem)]')
+    expect(entryLayout?.className).toContain('grid-rows-[1fr_auto]')
+    expect(composer?.className).toContain('max-w-3xl')
+    expect(composer?.querySelector('form')).toBeTruthy()
+    expect(composer?.querySelector('form')?.className).toContain('sm:grid-cols-[1fr_auto_auto]')
+    expect(starters).toBeTruthy()
+    expect(
+      Boolean(
+        starters &&
+          composer &&
+          starters.compareDocumentPosition(composer) & Node.DOCUMENT_POSITION_FOLLOWING,
+      ),
+    ).toBe(true)
+  })
+
+  it('removes non-actionable explanatory copy from the creation workspace', () => {
+    renderAt('/quick-start', serviceFor(null))
+
+    expect(screen.queryByText('QUICK START / CREATE CHARACTER')).toBeNull()
+    expect(screen.queryByText(/用一句角色设定/u)).toBeNull()
+    expect(screen.queryByText('AI 快捷创作')).toBeNull()
+    expect(screen.queryByText('文字创建')).toBeNull()
+    expect(screen.queryByText('角色图生成后仍需人工选择候选')).toBeNull()
+  })
+
+  it('cycles from the opening question into character-only role ideas', () => {
+    vi.useFakeTimers()
+    const entry = renderAt('/quick-start', serviceFor(null))
+    const heading = screen.getByRole('heading', { name: '想做一个什么角色？' })
+    const cycle = () => entry.container.querySelector<HTMLElement>('[data-copy-phase]')
+
+    expect(heading.textContent).toBe('想做一个什么角色？')
+
+    act(() => vi.advanceTimersByTime(2_399))
+    expect(heading.textContent).toBe('想做一个什么角色？')
+
+    act(() => vi.advanceTimersByTime(1))
+    expect(cycle()?.dataset.copyPhase).toBe('exiting')
+
+    act(() => vi.advanceTimersByTime(460))
+    expect(cycle()?.dataset.copyPhase).toBe('entering')
+    expect(heading.textContent).toBe('试试银色卷发、戴星形单片眼镜的裁缝')
+
+    act(() => vi.advanceTimersByTime(4_200 * 8))
+    expect(heading.textContent).toBe('试试银色卷发、戴星形单片眼镜的裁缝')
+    expect(heading.textContent).not.toContain('想做一个什么角色？')
+  })
+
+  it('animates back to the persistent default heading while the user writes', () => {
+    vi.useFakeTimers()
+    const entry = renderAt('/quick-start', serviceFor(null))
+    const heading = screen.getByRole('heading', { name: '想做一个什么角色？' })
+    const cycle = () => entry.container.querySelector<HTMLElement>('[data-copy-phase]')
+
+    act(() => vi.advanceTimersByTime(3_400))
+    expect(heading.textContent).toContain('银色卷发、戴星形单片眼镜的裁缝')
+
+    fireEvent.change(screen.getByRole('textbox', { name: '创作指令' }), {
+      target: { value: '戴银色面具的游侠' },
+    })
+    expect(cycle()?.dataset.copyMotionMode).toBe('characters')
+    expect(cycle()?.dataset.copyPhase).toBe('exiting')
+
+    act(() => vi.advanceTimersByTime(460))
+    expect(cycle()?.dataset.copyPhase).toBe('entering')
+    expect(heading.textContent).toBe('用文字塑造你的角色……')
+
+    act(() => vi.advanceTimersByTime(10_000))
+    expect(heading.textContent).toBe('用文字塑造你的角色……')
+  })
+
+  it('keeps style prompt space stable while dissolving the cards once creation begins', () => {
+    const entry = renderAt('/quick-start', serviceFor(null))
+    const entrySection = entry.getByLabelText('创作指令').closest('section')
+    const starters = entrySection?.querySelector('[data-layout="quick-start-starters"]')
+
+    expect(starters?.querySelectorAll('img')).toHaveLength(0)
+    expect(screen.getByRole('button', { name: /16-bit 日式 RPG/u })).toBeTruthy()
+    expect(screen.getByRole('button', { name: /暗黑哥特像素/u })).toBeTruthy()
+    expect(screen.getByRole('button', { name: /温暖手绘像素/u })).toBeTruthy()
+
+    fireEvent.change(screen.getByRole('textbox', { name: '创作指令' }), {
+      target: { value: '戴银色面具的游侠' },
+    })
+    expect(entrySection?.querySelector('[data-layout="quick-start-starters"]')).toBe(starters)
+    expect(starters?.getAttribute('data-presence')).toBe('hidden')
+    expect(starters?.getAttribute('aria-hidden')).toBe('true')
+    expect(screen.queryByRole('button', { name: /暗黑哥特像素/u })).toBeNull()
+  })
+
   it('按当前 Run 完成度显示统一导出入口', async () => {
     const run = workflow(setupAndTemplate({ selectedImageUrl: '/master.png' }))
     const model: ExportPackageModel = {
@@ -173,9 +281,9 @@ describe('QuickStartPage', () => {
 
   it('keeps the entry and run canvases at least viewport height', async () => {
     const entry = renderAt('/quick-start', serviceFor(null))
-    expect(
-      entry.getByRole('heading', { name: /用一句角色设定/u }).closest('section')?.className,
-    ).toContain('min-h-screen')
+    expect(entry.getByLabelText('创作指令').closest('section')?.className).toContain(
+      'min-h-[100dvh]',
+    )
 
     entry.unmount()
     const run = workflow(setupAndTemplate())
@@ -192,11 +300,12 @@ describe('QuickStartPage', () => {
       </MemoryRouter>,
     )
 
-    expect(screen.getByRole('heading', { name: /用一句角色设定/u })).toBeTruthy()
-    fireEvent.click(screen.getByRole('button', { name: /像素守夜人/u }))
-    expect((screen.getByRole('textbox') as HTMLTextAreaElement).value).toContain('像素守夜人')
-    fireEvent.click(screen.getByRole('button', { name: '轻装信使' }))
-    expect((screen.getByRole('textbox') as HTMLTextAreaElement).value).toContain('轻装信使')
+    expect(screen.getByRole('textbox', { name: '创作指令' })).toBeTruthy()
+    fireEvent.click(screen.getByRole('button', { name: /16-bit 日式 RPG/u }))
+    expect((screen.getByRole('textbox') as HTMLInputElement).value).toBe(
+      '16-bit 日式 RPG 像素风，清晰轮廓，明亮配色',
+    )
+    expect(screen.queryByRole('button', { name: /暗黑哥特像素/u })).toBeNull()
   })
 
   it('shows first-frame confirmation instead of stale character candidates after a template is confirmed', async () => {
@@ -223,21 +332,23 @@ describe('QuickStartPage', () => {
     const service = serviceFor(null)
     const view = renderAt('/quick-start', service)
 
-    fireEvent.click(screen.getByRole('button', { name: /像素守夜人/u }))
-    fireEvent.click(screen.getByRole('button', { name: '开始生成' }))
+    fireEvent.click(screen.getByRole('button', { name: /16-bit 日式 RPG/u }))
+    fireEvent.click(screen.getByRole('button', { name: '生成角色' }))
     await waitFor(() =>
-      expect(service.start).toHaveBeenCalledWith(expect.stringContaining('像素守夜人')),
+      expect(service.start).toHaveBeenCalledWith(
+        '16-bit 日式 RPG 像素风，清晰轮廓，明亮配色',
+      ),
     )
     expect(service.open).not.toHaveBeenCalled()
 
     view.unmount()
     renderAt('/quick-start', service)
     const file = new File(['pixels'], 'hero.png', { type: 'image/png' })
-    fireEvent.click(screen.getByRole('button', { name: '上传角色母版' }))
+    fireEvent.click(screen.getByRole('button', { name: '添加母版' }))
     fireEvent.change(screen.getByLabelText('上传角色母版'), { target: { files: [file] } })
     expect(screen.getByText('hero.png')).toBeTruthy()
     fireEvent.change(screen.getByLabelText('创作指令'), { target: { value: '挥手' } })
-    fireEvent.click(screen.getByRole('button', { name: '开始生成' }))
+    fireEvent.click(screen.getByRole('button', { name: '生成角色' }))
     await waitFor(() =>
       expect(service.startWithUploadedTemplate).toHaveBeenCalledWith(
         file,
@@ -261,7 +372,7 @@ describe('QuickStartPage', () => {
     )
 
     fireEvent.change(screen.getByLabelText('创作指令'), { target: { value: '像素骑士' } })
-    fireEvent.click(screen.getByRole('button', { name: '开始生成' }))
+    fireEvent.click(screen.getByRole('button', { name: '生成角色' }))
 
     await waitFor(() => expect(service.resume).toHaveBeenCalled())
     expect(service.open).not.toHaveBeenCalled()
@@ -278,10 +389,22 @@ describe('QuickStartPage', () => {
     fireEvent.click(screen.getByRole('button', { name: '移除图片' }))
     expect(screen.queryByText('hero.png')).toBeNull()
     fireEvent.change(screen.getByLabelText('创作指令'), { target: { value: '骑士' } })
-    fireEvent.click(screen.getByRole('button', { name: '开始生成' }))
+    fireEvent.click(screen.getByRole('button', { name: '生成角色' }))
     expect((await screen.findByRole('alert')).textContent).toContain('服务繁忙')
   })
 
+  it('keeps the uploaded template controls in the single-line composer', () => {
+    renderAt('/quick-start', serviceFor(null))
+    const file = new File(['pixels'], 'hero.png', { type: 'image/png' })
+
+    fireEvent.change(screen.getByLabelText('上传角色母版'), { target: { files: [file] } })
+
+    const composer = screen.getByLabelText('创作指令').closest('form')
+    expect(composer?.textContent).toContain('hero.png')
+    expect(screen.getByRole('button', { name: '移除图片' }).closest('form')).toBe(composer)
+    expect(composer?.querySelector('[data-layout="quick-start-attachment-row"]')).toBeNull()
+  })
+
   it('adds an action to an existing character and reports submission errors', async () => {
     const service = serviceFor(null)
     const view = renderAt('/quick-start?characterId=character-1&outfitId=outfit-1', service)
@@ -309,7 +432,7 @@ describe('QuickStartPage', () => {
     renderAt('/quick-start/missing', service)
     expect(await screen.findByRole('heading', { name: '无法恢复这次创作' })).toBeTruthy()
     fireEvent.click(screen.getByRole('button', { name: '返回快速开始' }))
-    expect(screen.getByRole('heading', { name: /用一句角色设定/u })).toBeTruthy()
+    expect(screen.getByRole('textbox', { name: '创作指令' })).toBeTruthy()
   })
 
   it('opens a recoverable run once and accepts its session update', async () => {
@@ -348,7 +471,7 @@ describe('QuickStartPage', () => {
     await waitFor(() => expect(service.start).toHaveBeenCalledWith('像素骑士'))
     expect((await screen.findByRole('alert')).textContent).toContain('重新生成失败')
     fireEvent.click(screen.getByRole('button', { name: '新建一次创作' }))
-    expect(screen.getByRole('heading', { name: /用一句角色设定/u })).toBeTruthy()
+    expect(screen.getByRole('textbox', { name: '创作指令' })).toBeTruthy()
   })
 
   it('confirms a generated first frame before starting the full animation', async () => {