渐进模糊大图 <ProgressiveBlur />
整页图片，下半部分分 6 层逐渐加深模糊并压暗，标题、导语放在模糊区上，右下角放 0–3 个标签和出处。配 tone: dark。
Template and style descriptions are currently available in Chinese only.
- Group
- 氛围 · 整页图片加标题
- Component
ProgressiveBlur·#progressive-blur
Good for
- 章节开场、场景引入
- 图片上半部分有好看的主体
Avoid when
- 图片主体在下半部分：会被模糊掉
- 要讲多条要点：用内容模板
Content limits
| 1 | title 1–2 行 × ≤ 14 字 |
| 2 | lead ≤ 56 字 |
| 3 | tags 0–3 个，每个 ≤ 8 字 |
| 4 | 配 tone: dark，backdrop 设为 none |
| 5 | PDF 里模糊会简化 |
Fields
| Field | Type | |
|---|---|---|
kicker · required | string | 小节名 |
title · required | string | string[] | 标题 |
lead | string | 导语，作为一步 build |
tags | string[] | 右下标签 |
image · required | string | import 进来的图片 |
alt · required | string | 图片说明 |
credit | string | 图片来源 |
source | string | 事实出处 |
Example
<ProgressiveBlur kicker="先认识珊瑚礁" title={['不到 1% 的海底，', '养着约四分之一的海洋生物']} lead="…" tags={['动物', '共生藻']} image={coral} alt="…" credit="图：AI 生成装饰图" />