frame-flowchart-sticky

[Template: Sticky Flowchart frame] [Intent] Draw a process / system / workflow in the style of a "whiteboard + sticky notes", suitable for onboarding videos, operations process explanations, and system architecture walkthroughs. Inspired by hyperframes flowchart.

[Canvas] 1920×1080. Background: cream whiteboard paper #f4ede1 or cool gray whiteboard #f0f2f4; add a very light hex grid rgba(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 #a5b4fc。
• Sticky notes have slight rotation transform: rotate(±2deg) inconsistent, drop shadow drop-shadow(0 6px 14px rgba(0,0,0,0.12)), top tape linear-gradient(...) decoration.
• Node content: 1 emoji or single-line SVG icon + large title (16-20px) + one line of description (12px).
• Node font: Kalam / Caveat / Patrick Hand handwritten-style font (for Chinese use 霞鹜文楷 or LXGW WenKai Screen)。

[Connecting lines (SVG)]

• Use <path> Bezier curves to connect nodes, stroke #2a2a2a, width 2.5, stroke-linecap: round, stroke-dasharray: 0 (solid) or 8 6 (dashed = conditional branch).
• Arrow terminals use marker-end, small black triangular arrowheads.
• Complex nodes can have loops or branches: 2 lines out from the same node (fork) or 2 lines into one node (merge).

[Optional interactions]

• Top caption (sans, 12px uppercase): "FLOW · MIGRATION · 2026".
• Mouse hover node: lift shadow + scale 1.05, using CSS transition.
• A "cursor" decoration (<svg> arrow + name tag), floating next to a node, simulating a figma collaborative cursor.

[Design details]

• At least 5 nodes, at most 12.
• Node layout should not all be center-aligned; it should have a bit of whiteboard-style "casually stuck on" feel, but ensure connecting lines are clear and do not cross.
• Strictly forbidden: full-screen dark background, neon colors, corporate dashboard style.
• Fonts cannot use Inter / serif; must be handwritten-style.
• Single-file HTML, no external icon libraries (use inline SVG).
• Must use the user's real process content; node text comes directly from user input.