半调滤镜图 <Halftone />
左边标题、导语和 0–3 个小数字;右边一张图被 SVG 滤镜重印成主题色的报纸网点(dots)或 1 位抖动(dither),图片本身不用另做处理。
Template and style descriptions are currently available in Chinese only.
- Group
- 氛围 · 图片转成网点或抖动
- Component
Halftone·#halftone
Good for
- 想用图片营造质感,又不想让照片抢走注意力
- 装饰图和主题色要统一
Avoid when
- 图片是证据、需要看清细节:用 Screenshot
- 图很暗或很平:网点会糊成一片
Content limits
| 1 | kicker 2–8 字 |
| 2 | title 1–3 行 × ≤ 8 字 |
| 3 | lead ≤ 60 字 |
| 4 | facts 0–3 个:value ≤ 6 个字符,label ≤ 12 字 |
| 5 | cell 8–24,默认 14 |
| 6 | 有 facts 时配 build: reveal 逐个出现 |
Fields
| Field | Type | |
|---|---|---|
kicker · required | string | 小节名 |
title · required | string | string[] | 标题;数组手动断行 |
lead | string | 导语 |
image · required | string | import 进来的 decor- 图或截图 |
alt · required | string | 图片说明 |
mode | 'dots' | 'dither' | 网点或抖动,默认 dots |
cell | number | 网点格子大小 |
facts | { value, label }[] | 小数字 |
credit | string | 图片来源,如“图:AI 生成装饰图” |
source | string | 事实出处 |
Example
<Halftone kicker="什么是白化" title={['颜色来自藻,', '白色是骨骼']} lead="…" image={bleached} alt="…" mode="dots" facts={[{ value: '共生藻', label: '珊瑚颜色的来源' }]} credit="图:AI 生成装饰图" />