Frame Flow Diagram (to be displayed at the top of the page)

--- name: frame-flowchart-sticky zhname e: "便利贴流程图帧" enname e: "Sticky Flowchart Frame" emoji: "📝" description: "SVG curved connections + sticky note nodes + cursor interaction, like brainstorming on a whiteboard" category: video scenario: operations aspecthint e: "1920×1080 (16:9)" featured: 45 tags: ["flowchart", "diagram", "sticky", "whiteboard", "frame"] exampleid : sample-frame-flowchart-sticky examplename : "Sticky Note Flowchart · User Onboarding" exampleformat : markdown exampletagline : "SVG Curves + 4-Color Sticky Notes" exampledesc : "6-Node Onboarding Process, Handwritten Style + Whiteboard Background" examplesourceurl : "https://hyperframes.heygen.com/catalog" examplesourcelabel : "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 designsystem : requires: false exampleprompt : "Use the 'Sticky Flowchart' template to turn my content into a sequence of 'SVG curved lines + sticky note nodes + cursor interactions, like a whiteboard brainstorming session.' Maintain the template’s visual style, use real content and data, and avoid lorem ipsum and placeholder images." --- 【Template: Sticky Flowchart】 【Purpose】To depict a process, system, or workflow in a "whiteboard + sticky notes" style, suitable for onboarding videos, operational process explanations, and system architecture presentations. Inspired by Hyperframes flowcharts. 【Canvas】1920×1080. Background: Beige whiteboard paper#f4ede1 or cool gray whiteboard#f0f2f4 ; add a very light hex gridrgba(0,0,0,0.04) to give it a whiteboard feel. 【Nodes (Sticky Notes)】 - Each node = one 240×180px sticky note, randomly assigned from 4 color sets: yellow#fcd34d / peach#fca5a5 / mint#a7f3d0 / sky blue#a5b4fc . - Sticky notes have slight rotationtransform: rotate(±2deg) inconsistencies, a shadowdrop-shadow(0 6px 14px rgba(0,0,0,0.12)) , and decorative tape at the toplinear-gradient(...) . - Node content: 1 emoji or single-line SVG icon + large headline (16:20px) + one line of description (12px). - Node font:Kalam /Caveat /Patrick Hand handwritten-style fonts (for Chinese, use霞鹜文楷 orLXGW WenKai Screen ). 【Connection Lines (SVG)】 - Connect nodes using Bezier curves with `<path> , stroke`#2a2a2a , width 2.5, `stroke-linecap: round , stroke-dasharray: 0 (solid line), or 8 6 (dashed line = conditional branch). - Use marker-end for arrow endpoints, with small black triangular arrows. - Complex nodes may have loops or branches: two lines extending from the same node (fork) or two lines converging into a single node (merge). 【Optional Interactions】 - Top caption (sans, 12px uppercase): "FLOW · MIGRATION · 2026". - Mouse hover effect on nodes: lift shadow + scale 1.05, using CSS transition. - A "cursor" decoration (<svg>` arrow + name tag), floating next to a node, simulating the Figma collaboration cursor. 【Design Details】 - At least 5 nodes, up to 12. - Do not center-align all nodes; aim for a whiteboard-style “sticky note” feel, but ensure connection lines are clear and do not cross. - Strictly prohibited: full-screen dark backgrounds, neon colors, corporate dashboard styles. - Do not use Inter or serif fonts; the font must have a handwritten look. - Single HTML file; do not use external icon libraries (use inline SVG). - Must use actual user workflow content; node text must come directly from user input.