frame-flowchart-sticky

【Modelo: Quadro de Fluxo com Notas Adesivas】 【Intenção】Desenhar um fluxo / sistema / workflow no estilo "quadro branco + notas adesivas", ideal para vídeos de onboarding, explicações de processos operacionais e demonstrações de arquitetura de sistemas. Inspirado no quadro de fluxo hyperframes.

【Tela】1920×1080. Fundo: Papel de quadro branco bege #f4ede1 ou quadro branco cinza frio #f0f2f4; com uma grade hexagonal muito leve rgba(0,0,0,0.04) para dar a sensação de quadro branco.

【Nós (Notas Adesivas)】

• Cada nó = uma nota adesiva de 240×180px, com 4 conjuntos de cores distribuídos aleatoriamente: Amarelo #fcd34d / Rosa #fca5a5 / Menta #a7f3d0 / Azul #a5b4fc.
• As notas adesivas têm uma leve rotação transform: rotate(±2deg) inconsistente, sombra drop-shadow(0 6px 14px rgba(0,0,0,0.12)) e fita adesiva no topo linear-gradient(...) como decoração.
• Conteúdo do nó: 1 emoji ou ícone SVG de linha única + título em fonte grande (16-20px) + uma linha de descrição (12px).
• Fonte dos nós: Kalam / Caveat / Patrick Hand fontes com sensação de escrita à mão (para chinês, use 霞鹜文楷 ou LXGW WenKai Screen).

【Linhas de Conexão (SVG)】

• Use curvas de Bézier <path> para conectar os nós, traço #2a2a2a, largura 2.5, stroke-linecap: round, stroke-dasharray: 0 (linha sólida) ou 8 6 (linha tracejada = ramificação condicional).
• Terminal de seta com marker-end, pequena seta triangular preta.
• Nós complexos podem ter loops ou ramificações: 2 linhas saindo do mesmo nó (ramificação) ou 2 linhas entrando em um nó (junção).

【Interação Opcional】

• Legenda superior (sans, 12px maiúsculas): "FLOW · MIGRATION · 2026".
• Ao passar o mouse sobre o nó: sombra elevada + escala 1.05, usando transição CSS.
• Uma decoração de "cursor" (<svg> seta + etiqueta de nome), flutuando ao lado de um nó, simulando um cursor de colaboração do Figma.

【Detalhes de Design】

• Pelo menos 5 nós, no máximo 12.
• O arranjo dos nós não deve ser totalmente centralizado, deve ter uma sensação de "colado aleatoriamente" no estilo quadro branco, mas garantindo que as linhas de conexão sejam claras e não se cruzem.
• Estritamente proibido: fundo escuro em tela cheia, cores neon, estilo de dashboard corporativo.
• A fonte não pode ser Inter / serifada, deve ter sensação de escrita à mão.
• HTML de arquivo único, sem bibliotecas de ícones externas (use SVG inline).
• Deve usar o conteúdo real do fluxo do usuário; o texto dos nós vem diretamente da entrada do usuário.