diff --git a/apps/web/src/pages/generate/GeneratePage.tsx b/apps/web/src/pages/generate/GeneratePage.tsx
index aebbf47a6..492f13680 100644
--- a/apps/web/src/pages/generate/GeneratePage.tsx
+++ b/apps/web/src/pages/generate/GeneratePage.tsx
@@ -71,6 +71,20 @@ const GeneratePage: React.FC = () => {
     setPreviewModalOpen,
   } = formState
 
+  /* ── 查询视频素材，用于 Step4 标题预览背景 ── */
+  const { data: videoAssets = [] } = useQuery({
+    queryKey: ["generate-video-assets"],
+    queryFn: () => getAssetsByKind("video", { limit: 50 }),
+  })
+
+  // 获取第一个选中素材的 URL
+  const sourceVideoUrl = useMemo(() => {
+    const firstId = selectedMaterials[0]
+    if (!firstId) return undefined
+    const asset = videoAssets.find((a) => a.id === firstId)
+    return asset?.file_url
+  }, [selectedMaterials, videoAssets])
+
   /* ── 克隆声音 ── */
   const { clones: clonedVoices, addClone, hasProcessing } = useCloneProgress()
 
@@ -237,8 +251,8 @@ const GeneratePage: React.FC = () => {
 
         {/* ════ 右侧：预览 + 生成结果 ════ */}
         <div className="xx-generate-right-col">
-          {/* 预览视频面板（Step5+ 常驻，展示选中的预览） */}
-          {currentStep >= 5 && (
+          {/* 预览视频面板（Step4+ 常驻，Step4 显示标题预览，Step5+ 显示预览视频） */}
+          {currentStep >= 4 && (
             <PreviewVideoPanel
               previewStatus={step5Preview.previewStatus}
               previewResult={step5Preview.previewResult}
@@ -247,7 +261,9 @@ const GeneratePage: React.FC = () => {
               videoRatio={videoRatio}
               onRegenerate={step5Preview.regeneratePreview}
               titleText={titleSettings.title}
-              titleSettings={currentStep >= 4 ? titleSettings : undefined}
+              titleSettings={titleSettings}
+              showTitlePreview={currentStep === 4}
+              sourceVideoUrl={sourceVideoUrl}
             />
           )}
 
diff --git a/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx b/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx
index 65abecc01..03d63024e 100644
--- a/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx
+++ b/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx
@@ -24,10 +24,14 @@ interface PreviewVideoPanelProps {
   progress: number
   videoRatio: string
   onRegenerate: () => void
-  /** 标题文字（Step5 起传入） */
+  /** 标题文字 */
   titleText?: string
-  /** 标题样式设置（Step5 起传入） */
+  /** 标题样式设置 */
   titleSettings?: TitleSettings
+  /** Step4 标题预览模式 */
+  showTitlePreview?: boolean
+  /** 素材视频 URL（用于 Step4 标题预览背景） */
+  sourceVideoUrl?: string
 }
 
 /* ── 组件 ── */
@@ -41,6 +45,8 @@ export const PreviewVideoPanel: React.FC<PreviewVideoPanelProps> = ({
   onRegenerate,
   titleText,
   titleSettings,
+  showTitlePreview,
+  sourceVideoUrl,
 }) => {
   const hasPreview = previewStatus === "ready" && previewResult
   const isLoading = previewStatus === "pending" || previewStatus === "generating"
@@ -170,101 +176,132 @@ export const PreviewVideoPanel: React.FC<PreviewVideoPanelProps> = ({
   return (
     <div className="xx-generate-preview">
       <div className="xx-preview-header">
-        <h3>预览视频</h3>
-        {hasPreview && <span className="xx-preview-badge">480p 预览版</span>}
+        <h3>{showTitlePreview ? "标题预览" : "预览视频"}</h3>
+        {hasPreview && !showTitlePreview && <span className="xx-preview-badge">480p 预览版</span>}
       </div>
 
-      {/* 空状态：还没生成预览 */}
-      {previewStatus === "idle" && (
+      {/* Step4 标题预览模式 */}
+      {showTitlePreview && titleSettings && titleText && (
+        <div style={{ padding: "0 16px 16px" }}>
+          <TitlePreviewCanvas
+            titleText={titleText}
+            titleSettings={titleSettings}
+            videoRatio="9:16"
+            sourceVideoUrl={sourceVideoUrl}
+          />
+        </div>
+      )}
+
+      {/* Step4 但无标题时的空状态 */}
+      {showTitlePreview && (!titleText || !titleSettings) && (
         <div className="xx-preview-empty">
           <PlayCircleOutlined
             style={{ fontSize: 48, color: "var(--text-tertiary)", marginBottom: 12 }}
           />
-          <p className="xx-preview-empty-title">暂无预览</p>
-          <p className="xx-preview-empty-desc">在第 3 步生成预览后在此查看</p>
+          <p className="xx-preview-empty-title">请输入标题</p>
+          <p className="xx-preview-empty-desc">在左侧设置标题后，这里会实时预览效果</p>
         </div>
       )}
 
-      {/* 生成中 */}
-      {isLoading && (
-        <div className="xx-preview-loading-panel">
-          <div className="xx-preview-video" style={videoAspectStyle}>
-            <div className="xx-preview-loading-center">
-              <LoadingOutlined style={{ fontSize: 36, color: "#fff" }} spin />
-              <p style={{ marginTop: 12, color: "rgba(255,255,255,0.8)", fontSize: 14 }}>
-                {previewStatus === "pending" ? "排队中..." : `生成中 ${progress}%`}
-              </p>
+      {/* 非 Step4 模式才显示以下内容 */}
+      {!showTitlePreview && (
+        <>
+          {/* 空状态：还没生成预览 */}
+          {previewStatus === "idle" && (
+            <div className="xx-preview-empty">
+              <PlayCircleOutlined
+                style={{ fontSize: 48, color: "var(--text-tertiary)", marginBottom: 12 }}
+              />
+              <p className="xx-preview-empty-title">暂无预览</p>
+              <p className="xx-preview-empty-desc">在第 3 步生成预览后在此查看</p>
             </div>
-          </div>
-          <div className="xx-preview-progress-bar-wrap">
-            <div className="xx-preview-progress-fill" style={{ width: `${progress}%` }} />
-          </div>
-        </div>
-      )}
-
-      {/* 生成失败 */}
-      {isError && (
-        <div className="xx-preview-error-panel">
-          <div className="xx-preview-video xx-preview-video--error" style={videoAspectStyle}>
-            <p style={{ color: "rgba(255,255,255,0.8)", fontSize: 14 }}>预览生成失败</p>
-          </div>
-          <p className="xx-preview-error-msg">
-            {typeof previewError === "string" && previewError ? previewError : "请重试"}
-          </p>
-          <button className="xx-btn xx-btn-ghost xx-btn-block" onClick={onRegenerate}>
-            重新生成
-          </button>
-        </div>
-      )}
-
-      {/* 预览成功 + Canvas 标题叠加 */}
-      {hasPreview && (
-        <div ref={containerRef} style={{ position: "relative" }}>
-          <div className="xx-preview-video" style={videoAspectStyle}>
-            <video
-              ref={videoRef}
-              src={previewResult.videoUrl}
-              controls
-              preload="metadata"
-              onLoadedMetadata={handleVideoLoaded}
-            />
-          </div>
-          {showTitlePreview && (
-            <canvas
-              ref={canvasRef}
-              style={{
-                position: "absolute",
-                top: 0,
-                left: 0,
-                width: "100%",
-                height: "100%",
-                zIndex: 1,
-                pointerEvents: "none",
-              }}
-            />
           )}
-        </div>
-      )}
 
-      {/* 预览信息 */}
-      {hasPreview && previewResult && (
-        <div className="xx-preview-info">
-          <div className="xx-preview-info-row">
-            <span>时长</span>
-            <span>
-              {(typeof previewResult.duration === "number" ? previewResult.duration : 0).toFixed(1)}{" "}
-              秒
-            </span>
-          </div>
-          <div className="xx-preview-info-row">
-            <span>片段数</span>
-            <span>{previewResult.clipCount} 段</span>
-          </div>
-          <div className="xx-preview-info-row">
-            <span>比例</span>
-            <span>{videoRatio}</span>
-          </div>
-        </div>
+          {/* 生成中 */}
+          {isLoading && (
+            <div className="xx-preview-loading-panel">
+              <div className="xx-preview-video" style={videoAspectStyle}>
+                <div className="xx-preview-loading-center">
+                  <LoadingOutlined style={{ fontSize: 36, color: "#fff" }} spin />
+                  <p style={{ marginTop: 12, color: "rgba(255,255,255,0.8)", fontSize: 14 }}>
+                    {previewStatus === "pending" ? "排队中..." : `生成中 ${progress}%`}
+                  </p>
+                </div>
+              </div>
+              <div className="xx-preview-progress-bar-wrap">
+                <div className="xx-preview-progress-fill" style={{ width: `${progress}%` }} />
+              </div>
+            </div>
+          )}
+
+          {/* 生成失败 */}
+          {isError && (
+            <div className="xx-preview-error-panel">
+              <div className="xx-preview-video xx-preview-video--error" style={videoAspectStyle}>
+                <p style={{ color: "rgba(255,255,255,0.8)", fontSize: 14 }}>预览生成失败</p>
+              </div>
+              <p className="xx-preview-error-msg">
+                {typeof previewError === "string" && previewError ? previewError : "请重试"}
+              </p>
+              <button className="xx-btn xx-btn-ghost xx-btn-block" onClick={onRegenerate}>
+                重新生成
+              </button>
+            </div>
+          )}
+
+          {/* 预览成功 + Canvas 标题叠加 */}
+          {hasPreview && (
+            <div ref={containerRef} style={{ position: "relative" }}>
+              <div className="xx-preview-video" style={videoAspectStyle}>
+                <video
+                  ref={videoRef}
+                  src={previewResult.videoUrl}
+                  controls
+                  preload="metadata"
+                  onLoadedMetadata={handleVideoLoaded}
+                />
+              </div>
+              {showTitlePreview && (
+                <canvas
+                  ref={canvasRef}
+                  style={{
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    width: "100%",
+                    height: "100%",
+                    zIndex: 1,
+                    pointerEvents: "none",
+                  }}
+                />
+              )}
+            </div>
+          )}
+
+          {/* 预览信息 */}
+          {hasPreview && previewResult && (
+            <div className="xx-preview-info">
+              <div className="xx-preview-info-row">
+                <span>时长</span>
+                <span>
+                  {(typeof previewResult.duration === "number"
+                    ? previewResult.duration
+                    : 0
+                  ).toFixed(1)}{" "}
+                  秒
+                </span>
+              </div>
+              <div className="xx-preview-info-row">
+                <span>片段数</span>
+                <span>{previewResult.clipCount} 段</span>
+              </div>
+              <div className="xx-preview-info-row">
+                <span>比例</span>
+                <span>{videoRatio}</span>
+              </div>
+            </div>
+          )}
+        </>
       )}
     </div>
   )
diff --git a/apps/web/src/pages/generate/components/Step4TitleSettings.tsx b/apps/web/src/pages/generate/components/Step4TitleSettings.tsx
index c7bd31526..131548fb1 100644
--- a/apps/web/src/pages/generate/components/Step4TitleSettings.tsx
+++ b/apps/web/src/pages/generate/components/Step4TitleSettings.tsx
@@ -112,11 +112,6 @@ const Step4TitleSettings: React.FC<Step4TitleSettingsProps> = (props) => {
         </>
       )}
 
-      {/* 标题实时预览 - 仅当有标题文字时显示 */}
-      {t.titleSettings.title && (
-        <TitlePreviewCanvas titleText={t.titleSettings.title} titleSettings={t.titleSettings} />
-      )}
-
       {/* 样式面板始终可见，两种模式下都可调整标题展示样式 */}
       <TitleStylePanel
         settings={t.titleSettings}
diff --git a/apps/web/src/pages/generate/components/title/TitlePreviewCanvas.tsx b/apps/web/src/pages/generate/components/title/TitlePreviewCanvas.tsx
index 56b1f3942..084739ccd 100644
--- a/apps/web/src/pages/generate/components/title/TitlePreviewCanvas.tsx
+++ b/apps/web/src/pages/generate/components/title/TitlePreviewCanvas.tsx
@@ -15,21 +15,24 @@ interface TitlePreviewCanvasProps {
   titleText: string
   /** 标题样式设置 */
   titleSettings: TitleSettings
-  /** 视频比例，默认 "16:9" */
+  /** 视频比例，默认 "9:16"（竖屏） */
   videoRatio?: string
+  /** 素材视频 URL（作为背景显示） */
+  sourceVideoUrl?: string
 }
 
 /**
  * 解析 videoRatio 字符串为 aspect-ratio CSS 值
  */
 function parseAspect(ratio: string): string {
-  return (ratio || "16:9").replace(":", "/")
+  return (ratio || "9:16").replace(":", "/")
 }
 
 const TitlePreviewCanvas: React.FC<TitlePreviewCanvasProps> = ({
   titleText,
   titleSettings,
-  videoRatio = "16:9",
+  videoRatio = "9:16",
+  sourceVideoUrl,
 }) => {
   const containerRef = useRef<HTMLDivElement>(null)
   const canvasRef = useRef<HTMLCanvasElement>(null)
@@ -142,12 +145,31 @@ const TitlePreviewCanvas: React.FC<TitlePreviewCanvasProps> = ({
         style={{
           width: "100%",
           aspectRatio: parseAspect(videoRatio),
-          background: "linear-gradient(135deg, #1a1a2e, #16213e, #0f3460)",
+          background: sourceVideoUrl
+            ? "#000"
+            : "linear-gradient(135deg, #1a1a2e, #16213e, #0f3460)",
           borderRadius: 8,
           overflow: "hidden",
           position: "relative",
         }}
       >
+        {sourceVideoUrl && (
+          <video
+            src={sourceVideoUrl}
+            muted
+            loop
+            autoPlay
+            playsInline
+            style={{
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              height: "100%",
+              objectFit: "cover",
+            }}
+          />
+        )}
         <canvas
           ref={canvasRef}
           style={{