name: frame-flowchart-sticky zh_name: "便利贴流程图帧" en_name: "Sticky Flowchart Frame" emoji: "📝" description: "SVG 曲线连接 + 便利贴节点 + 光标交互, 像白板 brainstorm" category: video scenario: operations aspect_hint: "1920×1080 (16:9)" featured: 45 tags: ["flowchart", "diagram", "sticky", "whiteboard", "frame"] example_id: sample-frame-flowchart-sticky example_name: "便利贴流程图 · 用户 onboarding" example_format: markdown example_tagline: "SVG 曲线 + 4 色便利贴" example_desc: "6 节点 onboarding 流程, 手写体 + 白板纸底" example_source_url: "https://hyperframes.heygen.com/catalog" example_source_label: "hyperframes · flowchart"
【模板: 便利贴流程图帧 (Sticky Flowchart)】 【意图】把一个流程 / 系统 / 工作流画成"白板 + 便利贴"的样子, 适合 onboarding 视频、运营流程说明、系统架构讲解。Inspired by hyperframes flowchart。
【画布】1920×1080。背景: 米黄白板纸 #f4ede1 或冷灰白板 #f0f2f4; 加非常浅的 hex grid rgba(0,0,0,0.04) 让它有白板感。
【节点 (Sticky Notes)】
- 每节点 = 一张 240×180px 便利贴, 4 套颜色随机分配: 黄
#fcd34d/ 桃#fca5a5/ 薄荷#a7f3d0/ 天#a5b4fc。 - 便利贴有轻微旋转
transform: rotate(±2deg)不一致, 投影drop-shadow(0 6px 14px rgba(0,0,0,0.12)), 顶部胶带linear-gradient(...)装饰。 - 节点内容: 1 个 emoji 或单线 SVG icon + 大字标题 (16-20px) + 一行描述 (12px)。
- 节点字体:
Kalam/Caveat/Patrick Hand手写感字体 (中文用霞鹜文楷或LXGW WenKai Screen)。
【连接线 (SVG)】
- 用
<path>Bezier 曲线连接节点, stroke#2a2a2a, width 2.5,stroke-linecap: round,stroke-dasharray: 0(实线) 或 (虚线 = 条件分支)。