在多模态生成式 AI（如 Midjourney、Stable Diffusion、DALL-E 3、FLUX）交互中，生成一张 2K 高清图像往往需要经历数十步扩散迭代（Diffusion Steps），耗时 3 ~ 8 秒。
如果前端只是展示一个生硬的转圈 Loading 菊花图，随后“啪”的一声把一张 4MB 的巨大图片直接贴在屏幕上：
- 用户在漫长的 5 秒等待中充满了不确定性的焦虑感；
- 图片加载瞬间引发严重的页面高度跳动（CLS 布局偏移）。
在墨舟设计体系中，我们将图像生成重构为如中国古代文人徐徐展开一幅传世画卷般的“展卷（Scroll Unfolding）”渐进美学：
在扩散过程中，前端实时接收低分辨率的潜在空间预览（Latent Preview）或 BlurHash 微缩图，配合水墨漫反射晕染、宽高比预占位与物理阻尼平滑展开，让等待过程本身升华为一场充满期待的视觉享受。
展卷渐进式加载的三阶段视觉流
flowchart LR Step1["1. 破画起势: 32B Tiny BlurHash 极速渲染 (0ms 无白屏高斯占位)"] --> Step2["2. 晕墨成像: 接收扩散中间态 Step 10/20 低清渐进图 (400ms 水墨淡入)"] Step2 --> Step3["3. 凝卷大成: 高清 2K WebP/AVIF 完成，金光流过，画框舒展定型"]生产级展卷渐进式图片卡片组件实现
import React, { useState } from 'react'; interface Props { blurhashUrl?: string; // 10x10 微缩 Base64 缩略图 intermediateStepUrl?: string; // 扩散第 10 步的低清预览图 finalImageUrl?: string; // 最终 2K 高清大图 aspectRatio: number; // 宽高比 (如 16 / 9 = 1.777) } export const InkScrollUnfoldImageCard: React.FC<Props> = ({ blurhashUrl, intermediateStepUrl, finalImageUrl, aspectRatio, }) => { const [isFinalLoaded, setIsFinalLoaded] = useState(false); return ( <div className="ink-scroll-stage" style={{ aspectRatio: `${aspectRatio}`, }} > {/* 阶段 1：超轻量 BlurHash 模糊底色 */} {blurhashUrl && ( <img src={blurhashUrl} className="layer-blurhash" alt="占位底色" aria-hidden="true" /> )} {/* 阶段 2：扩散中间态预览 */} {intermediateStepUrl && !isFinalLoaded && ( <img src={intermediateStepUrl} className="layer-intermediate" alt="生成中间态预览" /> )} {/* 阶段 3：最终高清大图 */} {finalImageUrl && ( <img src={finalImageUrl} className={`layer-final ${isFinalLoaded ? 'loaded' : ''}`} alt="AI 最终生成杰作" loading="lazy" decoding="async" onLoad={() => setIsFinalLoaded(true)} /> )} {/* 水墨展卷光影覆盖层 */} <div className={`ink-unfold-shimmer ${isFinalLoaded ? 'unfolded' : ''}`} /> </div> ); };.ink-scroll-stage { position: relative; width: 100%; max-width: 720px; overflow: hidden; border-radius: 10px; background: #0f172a; box-shadow: 0 4px 24px -2px rgba(15, 23, 42, 0.15); } .layer-blurhash, .layer-intermediate, .layer-final { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .layer-blurhash { filter: blur(20px); transform: scale(1.05); /* 防止模糊白边 */ } .layer-intermediate { filter: blur(4px); opacity: 0.85; transition: opacity 0.5s ease-out; } .layer-final { opacity: 0; /* 东方展卷缓动曲线：先疾后徐 */ transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); transform: scale(0.98); } .layer-final.loaded { opacity: 1; transform: scale(1); } /* 展卷金色微光掠影 */ .ink-unfold-shimmer { position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient( 90deg, rgba(212, 175, 55, 0) 0%, rgba(212, 175, 55, 0.25) 50%, rgba(212, 175, 55, 0) 100% ); transform: skewX(-20deg); pointer-events: none; } .ink-unfold-shimmer.unfolded { animation: shimmerPass 1.2s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes shimmerPass { 0% { left: -100%; } 100% { left: 200%; } }以固定宽高比杜绝布局偏移，以扩散中间态抚平等待焦虑，以水墨展卷动效升华交互意境，让每一次多模态生成都如名画出世般充满仪式感。
