메뉴
SVG curve connectors, sticky-note nodes, and cursor interaction with a whiteboard-brainstorm feel.
| name | frame-flowchart-sticky |
| zh_name | 便利贴流程图帧 |
| en_name | Sticky Flowchart Frame |
| emoji | 📝 |
| description | SVG curve connectors, sticky-note nodes, and cursor interaction with a whiteboard-brainstorm feel. |
| zh_description | SVG 曲线连接 + 便利贴节点 + 光标交互, 像白板 brainstorm |
| en_description | SVG curve connectors, sticky-note nodes, and cursor interaction with a whiteboard-brainstorm feel. |
| 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 |
| od | {"mode":"video","surface":"video","scenario":"operations","upstream":"https://github.com/nexu-io/html-anything","preview":{"type":"html","entry":"index.html","reload":"debounce-100"},"design_system":{"requires":false},"example_prompt":"Use the Sticky Flowchart Frame template to turn my content into a whiteboard-brainstorm frame with SVG curve connectors, sticky-note nodes, and cursor interaction. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images.","example_prompt_i18n":{"zh-CN":"用「便利贴流程图帧」模板把我的内容做成一段「SVG 曲线连接 + 便利贴节点 + 光标交互, 像白板 brainstorm」。保持模板的视觉签名，使用真实内容和数据，避免 lorem ipsum 和占位图片。"}} |
【模板: 便利贴流程图帧 (Sticky Flowchart)】 【意图】把一个流程 / 系统 / 工作流画成"白板 + 便利贴"的样子, 适合 onboarding 视频、运营流程说明、系统架构讲解。Inspired by hyperframes flowchart。
【画布】1920×1080。背景: 米黄白板纸 #f4ede1 或冷灰白板 #f0f2f4; 加非常浅的 hex grid rgba(0,0,0,0.04) 让它有白板感。
【节点 (Sticky Notes)】
#fcd34d / 桃 #fca5a5 / 薄荷 #a7f3d0 / 天 #a5b4fc。transform: rotate(±2deg) 不一致, 投影 drop-shadow(0 6px 14px rgba(0,0,0,0.12)), 顶部胶带 linear-gradient(...) 装饰。Kalam / Caveat / Patrick Hand 手写感字体 (中文用 霞鹜文楷 或 LXGW WenKai Screen)。【连接线 (SVG)】
<path> Bezier 曲线连接节点, stroke #2a2a2a, width 2.5, stroke-linecap: round, stroke-dasharray: 0 (实线) 或 8 6 (虚线 = 条件分支)。marker-end, 黑色三角小箭头。【可选交互】
<svg> arrow + name tag), 浮在某节点旁, 模拟 figma 协作光标。【设计细节】
Use this plugin when the user wants a dark, premium 3D-creator / designer portfolio landing page: a full-viewport hero with a gradient-text headline and a mouse-following magnetic 3D portrait, a scroll-driven horizontal image marquee, an About section with corner 3D decorations and character-by-character scroll-reveal text, a white Services list, and sticky-stacking project cards. Invoke for '3D creator portfolio', 'designer landing page', 'creative portfolio with magnetic hero', or when the user references the Jack 3D Creator template.
Use this plugin when the user wants a premium precision-farming / agritech landing page: dark/light alternating sections, a fullscreen hero video background, an animated stats grid, an infinite logo marquee, and image-backed service cards. Invoke for 'farming landing page', 'agritech marketing site', 'precision agriculture site', or when the user references the Acreage Farming template.
Use this plugin when the user wants a premium dark-to-light aerospace / propulsion marketing site: a scroll-driven gradient hero with parallax wordmark and an engine still, a film-card that grows from a mission thumbnail into a fullscreen sticky video, a pinned tabbed showcase, a bento capabilities grid with looping video cards and a tool marquee, an animated dark stats chart with category tabs, a horizontal video-story rail, and a starfield footer. Invoke for 'aerospace landing', 'engine / propulsion site', 'EngineTech', 'scroll-cinematic hero', or when the user references the AeroCore template.
Use this plugin when the user wants a premium single-page creative-studio / designer portfolio landing page on a white background: serif-accented hero, an infinite GIF marquee, parallax testimonial, two-card pricing, an auto-scrolling testimonial carousel, vertical project showcase, a mouse-trail partner CTA, and a fixed floating bottom nav. Invoke for 'designer portfolio', 'creative studio landing page', 'agency one-pager', or when the user references the Viktor Oddy / AI Designer Portfolio template.
Use this plugin when the user wants a premium, GSAP-driven cinematic B2B landing page: a scroll-driven full-screen video slider hero with clip-path ellipse transitions, SplitText char-reveal headlines, a masonry product gallery, scroll-reveal about text, a partner marquee, Lottie-style feature cards, and a multi-office footer. Invoke for 'cinematic landing page', 'video hero landing', 'bakery / food-service landing', 'GSAP scroll site', or when the user references the Cinematic Landing Page template.
Use this plugin when the user wants a high-end, dark cinematic hero section for a coding-education / bootcamp landing page (CodeNest): full-screen HLS background video, liquid-glass card, green-accent typography, and a working mobile hamburger menu. Invoke for 'coding bootcamp hero', 'dev course landing page', 'liquid glass hero', 'video background hero', or when the user references the CodeNest template.