- 分组
- 氛围 · 整页图片加标题
- 组件
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 生成装饰图" />