渐进模糊大图 <ProgressiveBlur />
整页图片，下半部分分 6 层逐渐加深模糊并压暗，标题、导语放在模糊区上，右下角放 0–3 个标签和出处。配 tone: dark。
版型與風格的說明目前僅提供簡體中文。
- 分組
- 氛围 · 整页图片加标题
- 元件
ProgressiveBlur·#progressive-blur
適合
- 章节开场、场景引入
- 图片上半部分有好看的主体
不適合
- 图片主体在下半部分：会被模糊掉
- 要讲多条要点：用内容模板
內容上限
| 1 | title 1–2 行 × ≤ 14 字 |
| 2 | lead ≤ 56 字 |
| 3 | tags 0–3 个，每个 ≤ 8 字 |
| 4 | 配 tone: dark，backdrop 设为 none |
| 5 | PDF 里模糊会简化 |
欄位
| 欄位 | 型別 | |
|---|---|---|
kicker · 必填 | string | 小节名 |
title · 必填 | string | string[] | 标题 |
lead | string | 导语，作为一步 build |
tags | string[] | 右下标签 |
image · 必填 | string | import 进来的图片 |
alt · 必填 | string | 图片说明 |
credit | string | 图片来源 |
source | string | 事实出处 |
範例程式碼
<ProgressiveBlur kicker="先认识珊瑚礁" title={['不到 1% 的海底，', '养着约四分之一的海洋生物']} lead="…" tags={['动物', '共生藻']} image={coral} alt="…" credit="图：AI 生成装饰图" />