import { CURVAS, DIRECOES, EFEITOS_DE_ENFASE, EFEITOS_DE_ENTRADA, MOVIMENTOS_DO_FUNDO, TRANSICOES } from "@/lib/banner-editor/animacao"; import { ESTILOS_DA_PAGINA } from "@/lib/banner-editor/cena"; import { CHAVES_DOS_ICONES, EFEITOS_DO_TEXTO, ESTILOS_DE_TEXTURA, FONTES, FORMAS, FORMAS_DE_FUNDO_DO_TEXTO, MISTURAS, PONTAS_DO_TRACO } from "@/lib/banner-editor/documento"; import { FORMATOS_DA_ARTE } from "@/lib/banner-editor/formatos"; import { DEGRADES_METALICOS } from "@/lib/banner-editor/metalicos"; import { MODELOS_DO_EDITOR } from "@/lib/banner-editor/modelos"; import { ESTILOS_DA_LEGENDA, JEITOS_DE_FALAR, VOZES } from "@/lib/banner-editor/narracao"; import { CATALOGO_DE_SONS, GRUPOS_DE_ELEMENTOS, OPERACOES, descricaoDoElemento } from "./editor-de-artes-documento"; /* * O guia do editor de artes para o assistente (guia_do_editor): o que o * KtaloguDesign faz e como escrever uma arte. As listas saem do próprio * código do editor (efeitos, transições, fontes, formas, sons, modelos, * elementos), então o guia nunca fica atrás do editor. */ export const PARTES_DO_GUIA = ["comeco", "direcao", "efeitos", "biblioteca", "pecas", "animacao", "som", "modelos", "elementos", "fontes", "receitas"] as const; export type ParteDoGuia = (typeof PARTES_DO_GUIA)[number]; const lista = (itens: readonly string[]) => itens.join(", "); function comeco() { return `# KtaloguDesign pelo assistente — comece aqui O KtaloguDesign é o editor de artes da Ktalogu (como o Canva + o CapCut): posts, stories, reels animados, carrosséis, banners da loja, flyers e artes de impressão, com animação, vídeo, música, narração e legenda. Pelo assistente você cria e edita a arte inteira, vê a prévia (as ferramentas devolvem a FOTO da arte para você conferir) e devolve à pessoa o link que abre a arte no editor dela. ## O fluxo (sempre nesta ordem) 0. Na primeira arte da conversa, leia também as partes "direcao" (como a arte fica bonita e a lista para conferir), "efeitos" (tudo o que dá para fazer numa peça) e "biblioteca" (recortes, ícones 3D, ornamentos, fontes com floreio). Arte com cara de página de site — formas chapadas, texto no meio e fundo liso — não serve. 1. Entenda o pedido: para que é a arte (post, story, reels, banner da loja, impressão), a mensagem principal, o público, as cores da marca (ver_empresa / ver_aparencia_da_loja) e o que precisa aparecer (preço, produto, chamada). Se a pessoa mandou uma REFERÊNCIA (imagem ou link), olhe-a com atenção e descreva para você mesmo: paleta (cores hex), tipografia (condensada, serifada, manuscrita), composição (onde fica o título, a foto, o selo), elementos (manchas, setas, molduras, texturas), ritmo da animação. Reproduza com as peças daqui — não copie logos, marcas ou fotos de terceiros. 2. Junte os RECURSOS antes de montar (procurar_no_editor): a foto do produto ("produto:"), recortes sem fundo, ícones 3D, ornamentos SVG, figurinhas, fotos da casa, elementos prontos e a fonte certa. Toda arte leva pelo menos uma imagem de verdade e um fundo com profundidade (degradê + textura + luz). 3. Escolha o ponto de partida: um MODELO pronto (guia_do_editor parte "modelos"; criar_arte com "modelo") quando um deles casa com o pedido — depois ajuste textos, cores e fotos com alterar_arte —, ou monte do zero com "paginas" (cada página com "pecas"). 4. Crie com criar_arte, em camadas (fundo → luz/textura → foto → objetos → título → apoio → chamada → detalhes), de 12 a 30 peças. Ela devolve o id, o link do editor e a FOTO de cada página. 5. OLHE a foto como um designer e passe a lista da parte "direcao" (foco, imagem de verdade, profundidade, texto cortado, margens, cara de site). Corrija com alterar_arte e veja de novo até passar — pelo menos uma volta de ajuste. 6. Refine com alterar_arte (operações: ${lista(OPERACOES)}). Para ver de novo: ver_arte (com "instantes" mostra as fotos da animação em vários segundos, para conferir a coreografia). 7. Entregue o link à pessoa ("link_do_editor"): ela abre, toca, ajusta à mão se quiser e baixa em PNG, PDF ou MP4. Também dá para baixar_arte (PNG, JPG ou PDF) por aqui. O MP4 sai pelo editor (botão Baixar). ## Regras que valem sempre - Coordenadas em px da arte, a partir do canto de cima à esquerda (x, y, w, h). Story 1080×1920; post 1080×1080; banner da loja 1920×540 (veja "tamanhos" abaixo). Deixe margem de segurança (~6% do lado) nas bordas; nos stories, nada importante nos 250 px de cima e nos 300 de baixo (o Instagram cobre). - A ordem das peças é a ordem das camadas: a primeira fica no fundo, a última por cima. O fundo da página ("fundo") vira as primeiras camadas, travadas. - Imagens: "imagem": "envio:" (a pessoa enviou pelo link de pedir_imagem), "produto:" (a foto do produto), "foto:" (fotos da casa, procurar_no_editor tipo "fotos"), "figurinha:" (desenhos sem fundo, procurar_no_editor tipo "figurinhas"), "recorte:" (fotos recortadas sem fundo e ícones 3D, procurar_no_editor tipo "recortes"; no 3D, "recorte:/" escolhe o ângulo e a cor, ex.: "recorte:3d-natal-santa/front_premium") ou um link https:// DIRETO de imagem (você pesquisa; use só imagens de uso livre). O servidor baixa e guarda tudo no depósito da empresa. - Contato na arte (telefone, WhatsApp, e-mail, site, @ e chave Pix) pode: use EXATAMENTE o que a pessoa passou ou o que está no cadastro da empresa (ver_empresa, ver_regras_e_contato_da_loja). Nunca invente nem "complete" um número, e-mail ou chave. Na dúvida, pergunte. - QR code: link e WhatsApp vão em "conteudo" ("https://wa.me/55DDDNUMERO?text=..."); QR do Pix vai em "pix" com a chave e o servidor monta o código do Banco Central (nunca escreva o "000201..." à mão). Ponha perto do QR o que ele faz ("Pague com Pix", "Fale no WhatsApp") e deixe pelo menos 220 px de lado em post e story, com fundo claro atrás. - Textos curtos e fortes vendem mais: título de 2 a 5 palavras, uma ideia por página. Hierarquia clara: um título grande, um apoio menor, uma chamada (botão ou selo). - Contraste sempre: texto claro em fundo escuro ou o contrário; sobre foto, ponha um véu (forma com degradê) ou uma caixa atrás do texto ("fundo" do texto) ou "destaque" (marca-texto). - No máximo 2 fontes por arte (uma de impacto para títulos, uma limpa para o resto). Cores: as da marca + um neutro + um acento. - Vídeo (reels/story animado): 2 a 4 s por cena, uma transição entre cenas, entrada em cada peça com tempos escalonados (0,1 a 0,3 s entre uma e outra), uma música do catálogo com fade e um efeito sonoro nas transições ou nos impactos. Texto falado? Use narrar_arte (voz + legenda no tempo da fala). ## Tamanhos prontos ("formato") ${FORMATOS_DA_ARTE.map((f) => `- ${f.chave}: ${f.nome} (${f.detalhe}) — ${f.largura}×${f.altura}${f.dpi ? `, impressão em ${f.dpi} ppp` : ""}`).join("\n")} Ou "largura" e "altura" livres (100 a 8000 px). ## As outras partes do guia - "direcao": direção de arte — camadas, composição, receitas de efeito (foto no texto, retícula, luxo, neon, colagem, figurinha, mockup) e a lista para conferir a foto. - "efeitos": efeitos de camada (sombra, brilho, sombra interna, contorno), transparência em degradê, mistura, powerclip (dentroDe), 3D, todos os ajustes de foto (temperatura, nitidez, vinheta, duotone, adesivo, caneca, troca de cor do SVG). - "biblioteca": os recortes sem fundo, ícones 3D, ornamentos SVG com cor trocável, figurinhas, fotos, fontes com glifos (nomes com perninha) e metálicos. - "pecas": todos os tipos de peça e os campos (texto, forma, imagem, ícone, textura e partículas, traço, QR, tabela, gráfico), fundos, grupos, foto dentro de texto/forma, filtros, chroma key, 3D parado. - "animacao": entradas, movimentos, saídas, palavra por palavra, mover, quadros-chave, número que sobe, 3D, transições e duração das cenas. - "som": as músicas e os efeitos do catálogo, narração e legenda. - "modelos": os modelos prontos (com as chaves). - "elementos": os elementos prontos (telas de celular, notificação, cursor que clica, selos, cupons, partículas...). - "fontes": as fontes com as chaves. - "receitas": artes completas para copiar e adaptar. E procurar_no_editor acha recortes (PNG sem fundo, ícones 3D e ornamentos SVG), ícones (mais de 1.500), figurinhas, fotos da casa, elementos, modelos, sons, fontes e os glifos de uma fonte, por palavra.`; } function direcao() { return `# Direção de arte — como a arte fica BONITA (leia antes da primeira arte) Arte "de página HTML" (retângulos chapados, texto centralizado, fundo liso, nenhuma imagem) é PROIBIDA. Você tem um editor de verdade, com foto, recorte, 3D, ornamento, retícula, luz, sombra, mistura, colagem, fonte com floreio: use. Uma arte rica tem de 12 a 30 peças. ## Antes de montar, decida - A ideia (uma por página) e o FOCO: o que o olho vê primeiro (o produto, a foto, o título). - O clima: luxo (escuro + dourado + serifada + ornamentos), festa (cor forte, confete, figurinhas, letra arredondada), promoção (amarelo/vermelho, selo, preço grande), natural (bege/verde, folhas, papel), tech (escuro, neon, grade), colagem (papel rasgado, retícula, recortes com adesivo), infantil (baloo, pastel saturado, bichinhos). - A paleta: as cores da marca (ver_empresa) em 60-30-10 (fundo, apoio, acento) + um neutro. ## As camadas (de trás para frente) 1. FUNDO COM PROFUNDIDADE (nunca chapado): degradê + textura leve ("grao" 0,06–0,12, "meio-tom" 0,1–0,25, "topografia", "pontos") + uma LUZ (forma "circulo" enorme com degradê radial claro→transparente, opacidade 0,4–0,7, "mistura": "tela") + vinheta nas bordas (retângulo com "transparencia" ou degradê escuro). 2. FOTO PRINCIPAL TRATADA: "ajuste": "cobrir" + "enquadre"; "filtros" (contraste 110–125, saturação 105–120, "temperatura", "vinheta" 20–40, "nitidez" 20); "desvanecer" para fundir com o fundo; "duotone" nas colagens; foto dentro de forma ("mascara") ou dentro do título ("dentroDe"). 3. OBJETOS E RECORTES: produto da loja, recortes sem fundo, ícones 3D, figurinhas, ornamentos SVG (na cor da marca, pela troca de cor). Dê profundidade: "efeitos" [sombra suave] ou "adesivo" (contorno branco de figurinha) nas colagens. Fogo, fumaça, água e brilhos (recortes do grupo efeitos) vão com "mistura": "tela". 4. TIPOGRAFIA EM CAMADAS: título curto e GRANDE (o maior elemento depois da foto), com tratamento (contorno, sombra dura, "efeito" eco/sombra-longa/neon, degradê ou metálico, foto dentro); a palavra-chave destacada ("destaque" marca-texto ou um trecho de outra cor no "html"); apoio em fonte limpa, bem menor; chamada numa pílula ("fundo" do texto). Nome em fonte com glifos com a letra de floreio (parte "biblioteca"). 5. DETALHES QUE DÃO ACABAMENTO: selo (elementos prontos), seta desenhada ("traco" suave), divisor fino (ornamento SVG), estrelinhas/brilhos, cantos ornamentais espelhados, um "x" ou "+" pequeno no canto, a marca/logo pequena. ## Composição - Margem de 6% em volta; alinhe as peças por uma linha (esquerda ou centro) — não espalhe. - Contraste de escala: título 3× maior que o apoio; foto ocupando 40–70% da arte. - Assimetria interessante (foto deslocada, título sangrando um pouco, elemento girado -6°) vale mais que tudo no meio. - Respiro: espaço vazio de propósito; nunca 5 coisas do mesmo tamanho. - Sobreposição dá profundidade: o recorte passando por cima do título, o selo por cima da foto. ## Receitas de efeito - Foto no texto (powerclip): título grosso (anton/bebas, 280+ px) e, logo depois, a imagem com "dentroDe": "" — a foto aparece só dentro das letras. - Texto vazado: "contorno": { "cor": "#FFFFFF", "largura": 6 } e "cor": "nenhuma". - Retícula (halftone): textura "meio-tom" em cima da foto com "mistura": "multiplicar" (ou "tela" em fundo escuro), "giro" 45, "tamanho" 18–30; dentro de uma forma (selo, círculo, faixa) com "dentroDe" o id dela. Dentro de TEXTO não recorta (texto só aceita foto como recheio): para letra com retícula, ponha uma imagem dentro do texto. - Luxo: fundo #0B0B0F ou azul-marinho, título "degrade": "dourado" em cinzel/playfair, ornamentos SVG com "vetor.trocas" para #C9A227, divisor dourado, brilho radial atrás do produto. - Neon: fundo escuro, texto com "efeito": { "tipo": "neon", "cor": "#00E5FF" } e "efeitos" [brilho], forma com contorno fino e brilho. - Colagem: forma "rasgado" como papel, "fita" atravessando, recortes com "adesivo" branco, retícula, duotone na foto, rabisco ("traco"). - Sticker/figurinha: recorte com "adesivo": { "cor": "#FFFFFF", "largura": 14 } + "efeitos" [sombra suave]. - Mockup: "giro3d" na foto do produto ou "cilindro" para estampa em caneca; "distorcao" para encaixar numa tela. ## Depois de cada criar_arte/alterar_arte: OLHE a foto e passe esta lista (corrija até passar) 1. Dá para entender a mensagem em 2 segundos? O olho vai primeiro ao foco? 2. Tem imagem de verdade (foto, recorte, 3D, figurinha, ornamento)? O fundo tem profundidade? 3. Algum texto cortado, colado na borda, apertado ou com pouco contraste? 4. Margens e alinhamentos coerentes? Peças sobrepostas de propósito (não por acidente)? 5. Parece feito por designer (camadas, tratamento, detalhe) ou parece página de site? Se parece site, acrescente camadas e efeitos. 6. Vídeo: ver_arte com "instantes" — cada peça entra escalonada? algo se mexe sempre? música e efeito sonoro?`; } function efeitos() { return `# Efeitos e ajustes (tudo o que dá para fazer numa peça) ## Em QUALQUER peça (texto, forma, imagem, ícone, traço) - "efeitos": [ { "tipo": "sombra" | "brilho" | "sombra-interna" | "contorno", "cor": "#000000", "x": 0, "y": 18, "desfoque": 40, "opacidade": 0.35, "largura": 6 } ] — vários de uma vez (ex.: contorno branco 10 + sombra preta), seguindo o desenho da peça. "brilho" é a luz em volta (neon); "sombra-interna" afunda; "contorno" com "largura". - "transparencia": { "x1": 0.5, "y1": 0, "x2": 0.5, "y2": 1, "alfa": 1, "alfa2": 0 } — a peça some aos poucos de um ponto a outro (frações da caixa). Com "radial": true some do centro para a borda. - "mistura": ${lista(MISTURAS)} — "tela" clareia (luz, fogo, brilho, bokeh); "multiplicar" escurece (papel, retícula, sombra); "sobrepor"/"luz-suave" dão cor à foto; "diferenca" para efeito gráfico. - "opacidade", "rot", "espelharX"/"espelharY" (cantos ornamentais nos 4 lados: o mesmo canto espelhado). - "dentroDe": "" — POWERCLIP: a peça aparece só dentro da silhueta da outra (forma, traço fechado, foto) e, se a outra é texto e esta é imagem, vira o recheio das letras. Ponha a peça de dentro logo DEPOIS da outra. - "giro3d": [15, -25] (inclinação com perspectiva) ou "distorcao": { "cantos": [[0,0],[1,0],[1,1],[0,1]] } (encaixar nos 4 cantos). - "fixa": true — a mesma peça em todas as páginas (logo, contador, moldura do carrossel). - "grupo": "" — andam e animam juntas. ## Imagem (foto, recorte, 3D, ornamento) - "ajuste": "cobrir" (preenche, corta) | "conter" (inteira — recortes, logos, 3D, ornamentos). - "enquadre": { "zoom": 1.4, "x": 50, "y": 35 } — o ponto da foto no centro (0 a 100) e o zoom (1 a 5), com "cobrir". - "filtros": { "brilho": 100, "contraste": 115, "saturacao": 110, "desfoque": 0, "matiz": 0 (-180 a 180), "exposicao": 0, "temperatura": 0 (-100 frio a 100 quente), "pretos": 0, "brancos": 0, "gama": 0, "nitidez": 0 (0 a 100), "vinheta": 0 (0 a 100), "sobreposicao": { "cor": "#FF006E", "forca": 0.35, "mistura": "sobrepor" } }. - "duotone": { "escuro": "#1E1B4B", "claro": "#F472B6" } — a foto em duas cores (colagem, capa de revista). - "desvanecer": { "lado": "baixo" | "cima" | "esquerda" | "direita", "tamanho": 0.5 } — a foto some para um lado (funde com o fundo). - "mascara": uma forma (coração, estrela, gota, hexágono, nuvem, balão, rasgado...) — a foto dentro da forma; "circulo": true; "raio": 40; "borda": { "cor", "largura" }. - "adesivo": { "cor": "#FFFFFF", "largura": 14 } — contorno de figurinha em volta do recorte sem fundo. - "moldura": true — moldura vazia: a pessoa solta a foto dela em cima (modelos para clientes). - "cilindro": { "curva": 0.5, "arco": 0.1 } — a estampa curvada como numa caneca/garrafa (mockup). - "chroma": { "cor": "verde" | "azul", "forca": 50 } — tira o fundo verde. - "vetor": { "cores": ["#000000"], "trocas": { "#000000": "#C9A227" } } — ornamento SVG: troca cada cor original pela nova (as "cores" vêm do procurar_no_editor tipo "recortes"). - "sombra": "suave" — só quando a arte pede profundidade (em impressão/sublimação, sombra marcada aparece muito: use com cuidado). ## Texto - "fundo" (pílula, caixa, balão, etiqueta, explosão, estrela, faixa, seta, rasgado), "destaque" (marca-texto por linha), "contorno", "sombra", "efeito" (${lista(EFEITOS_DO_TEXTO)}), "curva" (arco/selo), "degrade" (dois tons ou "dourado"/"prata"/"rose-gold"...), "caixaAlta", "espaco" (letras abertas: 0,1 a 0,3 dá elegância), "linha" (0,85 a 1 em títulos grandes). - "html": trechos com cor/peso/tamanho/fonte próprios e a letra com floreio: "Marina". - "recursos": { "fina": 1, "init": 1, "swsh": 1, "salt": 1, "dlig": 1 } para a palavra toda (só o que a fonte tem: procurar_no_editor tipo "glifos"). - Foto dentro do texto: imagem com "dentroDe" o id do texto (só imagem vira recheio de letra; textura e forma dentro de texto não recortam). ## Textura e partículas "meio-tom" (retícula/halftone: "giro" muda a direção, "tamanho" os pontos), "grao" (filme), "pontos", "listras", "xadrez", "raios" (sunburst), "ondas", "topografia", "grade"; partículas (vídeo): confete, neve, brilhos, bolhas, coracoes, faiscas, fogos. ## Forma ${lista(FORMAS)}; "pintura" com degradê linear/radial e "paradas" (3+ cores); "borda"; "raio"; estrela/explosão com "pontas" e "profundidade"; "rasgado" (papel rasgado); "fita".`; } function biblioteca() { return `# A biblioteca (use SEMPRE: arte sem imagem fica pobre) — procurar_no_editor - "recortes": fotos recortadas SEM FUNDO (PNG): pessoas, mulheres, homens, crianças, mãos e gestos, animais, comida, natureza e flores, fogo/fumaça/água, corações e confetes, negócios, roupas (mockup de camiseta), moda, objetos, eletrônicos, esportes, transporte, lugares e monumentos, castelos e mapas, sinais e bandeiras. Busca em português, genérica ("comida") ou específica ("bolo de aniversário"). Uso: { "tipo": "imagem", "imagem": "recorte:", "ajuste": "conter" }. - Também em "recortes": ÍCONES 3D (Natal, Halloween, redes sociais e geral), cada um em 12 versões: "recorte:/<ângulo>_" com ângulo dynamic | front | iso e cor color | gradient | premium | clay (ex.: "recorte:3d-geral-gym/iso_premium"). - Também em "recortes": ORNAMENTOS SVG com cor trocável (arabescos, molduras decorativas, cantos, bordas e divisores, flores e florais, folhas, guirlandas e louros, vinhetas, espirais). Uso: { "tipo": "imagem", "imagem": "recorte:", "ajuste": "conter", "vetor": { "cores": [as cores que vierem], "trocas": { "#000000": "" } } }. Canto ornamental nos 4 cantos: a mesma peça com "espelharX"/"espelharY". Divisor fino entre o título e o texto. - "figurinhas": desenhos coloridos sem fundo (bichos, comida, festa, profissões, negócios, carinhas): "figurinha:". - "fotos": fotos da casa ("foto:"); "produto:" usa a foto do produto da loja; "envio:" a foto que a pessoa mandou (pedir_imagem). - "icones": 1.500 ícones de traço (Lucide) e os da casa. - "elementos": prontos em várias peças (selos, cupons, telas de celular, notificação, cursor, partículas, datas comemorativas e da vida: aniversário, casamento, formatura, chá de bebê, inauguração). - "glifos" (busca = a chave da fonte): as letras com floreio que a fonte tem (o recurso de cada uma, para o "html") e os enfeites soltos (caracteres para pôr direto no texto). ## Fontes com glifos (nomes com perninha, a sensação da sublimação) kit-birthstonebounce (a melhor: cauda longa em todas as letras), kit-stylescript, kit-playball, kit-italianno, kit-greatvibesglifos, kit-pacificoglifos, kit-norican, kit-fuggles e kit-comforter (traços de floreio soltos), kit-festive (frases de festa prontas). A última letra com cauda: 'fina' 1; a primeira: 'init' 1 (ex.: "html": "Marina"). A página leva a fonte sozinha. ## Metálicos "degrade": ${lista(DEGRADES_METALICOS.map((m) => `"${m.chave}"`))} — em texto, forma, ícone e fundo.`; } function pecas() { return `# As peças (o "jeito curto" — o servidor completa o resto) Toda peça: { "tipo", "x", "y", "w", "h" } e, se quiser, "rot" (graus), "opacidade" (0 a 1), "nome", "id" (para mexer depois; sem id o servidor cria), "mistura" (${lista(MISTURAS)}), "grupo" (mesmo texto = andam juntas e animam como uma só), "bloqueada", "animacao" (parte "animacao"), "distorcao" (3D parado, abaixo). ## texto { "tipo": "texto", "texto": "OFERTA\\nDA SEMANA", "x", "y", "w", "h", "fonte": "anton", "tamanho": 120, "peso": 400, "cor": "#FFFFFF", "alinhamento": "centro" | "esquerda" | "direita", "vertical": "meio" | "topo" | "base", "linha": 1.05 (altura da linha), "espaco": 0 (entre letras, em em: 0.05 = mais aberto), "caixaAlta": false, "italico": false, "sublinhado": false, "riscado": false } - "\\n" quebra a linha. A caixa (w × h) precisa caber o texto: altura ≈ tamanho × linha × número de linhas. Se não couber, o servidor encolhe a letra sozinho e avisa. - "degrade": { "cor": "#FF006E", "cor2": "#8338EC", "angulo": 90 } no lugar de "cor" (letra em degradê). - Metálico pronto (vale em texto, forma, ícone e fundo): "degrade": "dourado" | ${lista(DEGRADES_METALICOS.map((m) => m.chave))}. Na sublimação não há tinta metálica: o brilho vem desse degradê. - "fundo": { "forma": ${lista(FORMAS_DE_FUNDO_DO_TEXTO)}, "cor": "#000000", "raio": 16 } — uma caixa/pílula/balão atrás do texto (a caixa é a da peça). - "destaque": { "cor": "#C6F432" } — marca-texto atrás de cada linha (acompanha a quebra). - "contorno": { "cor": "#000000", "largura": 4 } — letra contornada (com "cor": "nenhuma" fica vazada). - "sombra": "suave" | "dura" | { "cor", "x", "y", "desfoque", "opacidade" }. - "efeito": { "tipo": ${lista(EFEITOS_DO_TEXTO)}, "cor": "#..", "forca": 0.6 } — estilos prontos. - "curva": -100 a 100 (texto em arco; 100 fecha o círculo, para selos). - "lista": "pontos" | "numeros" | "checks" — cada linha com marcador. - "recursos": { "swsh": 1, "init": 1, "fina": 1 } — recursos da fonte (floreios, letra inicial e final com floreio, "salt" alternativas, "dlig" ligaduras especiais, "frac" frações, "ss01"… estilos). Só funcionam se a fonte tiver; caracteres especiais (©, ®, ½, €, setas) vão direto no "texto". - "html": trechos com cor/fonte próprias, ex.: "Leve 2 pague 1" (só span com color, font-family, font-weight, font-style, text-decoration, font-size). ## forma { "tipo": "forma", "forma": "retangulo", "x", "y", "w", "h", "cor": "#7C3AED" | "degrade": {...} | "cor": "nenhuma", "raio": 24 (cantos do retângulo), "borda": { "cor", "largura" }, "sombra": "suave" } Formas: ${lista(FORMAS)}. "pontas" e "profundidade" mudam estrela, explosão e rasgado. Véu sobre foto: retângulo com "degrade": { "cor": "#000000", "cor2": "#000000", "angulo": 180 } e opacidade, ou "pintura": { "tipo": "linear", "cor": "#000", "cor2": "#000", "angulo": 180, "alfa": 0, "alfa2": 0.8 }. ## imagem { "tipo": "imagem", "imagem": "foto:caneca-roxo", "x", "y", "w", "h", "ajuste": "cobrir" (preenche a caixa, corta o que sobra) | "conter" (inteira, para recortes sem fundo e logos), "raio": 30, "circulo": true, "mascara": uma das formas (foto dentro da forma: coração, estrela, gota...), "borda", "sombra": "suave", "enquadre": { "zoom": 1.3, "x": 50, "y": 40 } (o ponto da foto no centro, 0 a 100), "filtros": { "brilho": 100, "contraste": 110, "saturacao": 120, "desfoque": 0 }, "duotone": { "escuro": "#1E1B4B", "claro": "#F472B6" }, "desvanecer": { "lado": "baixo", "tamanho": 0.5 }, "chroma": { "cor": "verde" | "azul", "forca": 50 } (tira o fundo verde) } - "moldura": true deixa a imagem como moldura vazia: a pessoa solta a foto dela em cima no editor (bom para modelos). - Foto DENTRO de um texto ou forma: ponha a imagem logo depois da peça e "dentroDe": "". ## icone { "tipo": "icone", "icone": "estrela", "x", "y", "w", "h", "cor": "#FFD400", "espessura": 2, "preenchido": true } Ícones da casa: ${lista(CHAVES_DOS_ICONES)}. Mais 1.500 ícones (Lucide) pelo procurar_no_editor (tipo "icones"): use a chave que voltar (ex.: "lucide-rocket"). ## textura e partículas { "tipo": "textura", "estilo": "grade", "x": 0, "y": 0, "w": 1080, "h": 1920, "cor": "#FFFFFF", "opacidade": 0.15, "tamanho": 64, "quantidade": 20, "giro": 0, "centroX": 50, "centroY": 50 } Estilos: ${lista(ESTILOS_DE_TEXTURA)}. Os sete últimos (confete, neve, brilhos, bolhas, coracoes, faiscas, fogos) são PARTÍCULAS: se mexem no vídeo; "quantidade" = quantas (até 300), "tamanho" = de cada uma, "velocidade" 0,2 a 3, "centroY" = de onde saem as faíscas. ## traco (desenho livre, seta, sublinhado, mancha) { "tipo": "traco", "pontos": [[100, 900], [300, 850], [520, 880]] (px da arte), "cor": "#141414", "espessura": 10, "suave": true, "fechado": false, "preenchimento": "#141414" (fechado: forma orgânica), "tracejado": "solido" | "tracejado" | "pontilhado", "inicio"/"fim": ${lista(PONTAS_DO_TRACO)} } ## qr, tabela, grafico { "tipo": "qr", "conteudo": "https://... ou https://wa.me/55DDDNUMERO", "cor": "#141414", "fundo": "#FFFFFF" } QR do Pix (o código "copia e cola" do Banco Central, com o valor se houver): { "tipo": "qr", "pix": { "chave": "a chave como a pessoa passou", "nome": "Nome de quem recebe", "cidade": "Cidade", "valor": 49.9, "mensagem": "Pedido 123", "tipo_da_chave": "cpf" | "cnpj" | "telefone" | "email" | "aleatoria" }, "x": 780, "y": 1460, "w": 240, "h": 240 } "valor", "mensagem" e "tipo_da_chave" são opcionais (o tipo só é preciso quando 11 números podem ser CPF ou celular; o servidor avisa). Para trocar o Pix de um QR que já existe: alterar_peca com "campos": { "pix": {...} }. Tabela e gráfico: monte pelo editor. ## Elemento pronto (várias peças de uma vez) { "elemento": "v-celular", "caixa": { "x": 300, "y": 600, "w": 480, "h": 920 }, "atraso": 0.5 } — já animado; "atraso" empurra os tempos. Lista na parte "elementos". ## Fundo da página "fundo": "#0B0D09" ou { "cor": "#3B1FE0", "cor2": "#7C3AED", "angulo": 160, "textura": "nenhuma" | "raios" | "pontos" | "listras" | "grao", "corDaTextura": "#FFFFFF" }. Para fundos mais ricos, ponha peças por cima: textura "topografia" (mármore escuro), "grade" (papel quadriculado), forma "circulo" grande com degradê radial (brilho), partículas. ## 3D parado (mockup inclinado) "giro3d": [15, -25] em qualquer peça (graus de cima para baixo, graus de lado, até 80): a peça fica inclinada com perspectiva de verdade (celular, cartão, foto em 3D). Ou "distorcao": { "cantos": [[0,0],[1,0],[1,1],[0,1]] } com os 4 cantos em frações da caixa (encaixar numa tela, num quadro). Para virar em movimento, use as entradas 3D da animação (parte "animacao"). ## Página (cena) { "fundo": ..., "pecas": [...], "duracao": 3 (segundos, vídeo), "movimento": ${lista(MOVIMENTOS_DO_FUNDO.map((m) => m.chave))} (o fundo durante a cena), "transicao": { "tipo": "circulo", "duracao": 0.6 } (como esta cena ENTRA depois da anterior) }`; } function animacao() { return `# Animação (vídeo: reels, story animado, post animado) Cada peça pode ter "animacao" (só o que muda; o resto vem do padrão): { "entrada": "chicote", "inicio": 0.3, "duracao": 0.6, "direcao": "esquerda", "porPalavra": true, "enfase": "pulsar", "ritmo": 1.4, "saida": "surgir", "fim": 2.6, "duracaoDaSaida": 0.4 } - "inicio": segundo em que a peça aparece (na cena). Sem "entrada", ela aparece seca em "inicio" (0 = desde o começo). - "fim": segundo em que sai (sem "saida", some seca). Sem "fim", fica até o fim da cena. - Escalone: título em 0,2 s, apoio em 0,5 s, foto em 0,4 s, botão em 1,0 s. Duração das entradas: 0,4 a 0,8 s. ## Entradas ("entrada", e as mesmas valem como "saida", ao contrário) ${EFEITOS_DE_ENTRADA.map((e) => `- ${e.chave}: ${e.nome} — ${e.detalhe}`).join("\n")} "direcao" (${lista(DIRECOES)}) vale para subir, deslizar, revelar, chicote e diagonal: para onde a peça anda. "porPalavra": true (só em texto) — cada palavra entra na vez dela, com o efeito escolhido (chicote, pop, subir, desfocar, virar, tombar...): é a legenda dinâmica dos reels. ## Enquanto aparece ("enfase", com "ritmo" = segundos de cada volta) ${EFEITOS_DE_ENFASE.map((e) => `- ${e.chave}: ${e.nome} — ${e.detalhe}`).join("\n")} ## Mover até um ponto "mover": { "dx": -300, "dy": -200, "inicio": 1.2, "duracao": 0.6 } — a peça anda (px) e fica lá (o cursor até o botão, a seta apontando). ## Quadros-chave (o caminho completo) "quadros": [ { "t": 0, "x": 100, "y": 800, "w": 400, "h": 400, "rot": 0, "opacidade": 1, "curva": "suave" }, { "t": 1.5, "x": 600, "y": 700, "w": 500, "h": 500, "rot": -8, "opacidade": 1, "curva": "mola" } ] A pose (lugar, tamanho, giro, transparência) em cada instante; entre um e outro a peça anda sozinha. "curva" (como chega no quadro): ${CURVAS.map((c) => `${c.chave} (${c.detalhe})`).join("; ")}. ## Número que sobe (contador) Num texto com número ("+R$ 1.300", "4,9", "-70%"): "contador": { "de": 0, "inicio": 0.4, "duracao": 1.5, "curva": "freia" } — o primeiro número conta de "de" até o que está escrito (também desce: de 99,90 até 49,90). O resto do texto fica. ## 3D Entradas "virar" e "tombar", ênfases "balancar3d" e "girar3d" e a transição "virar", com perspectiva de verdade (também palavra por palavra). ## Animar a página inteira de uma vez alterar_arte { "op": "animar_pagina", "pagina": 1, "estilo": ${ESTILOS_DA_PAGINA.map((e) => `"${e.chave}"`).join(" | ")} } — cada peça entra depois da outra, de cima para baixo. ## Cenas e transições Cada página é uma cena: "duracao" (1 a 60 s) e "transicao" da segunda em diante: ${TRANSICOES.map((t) => `- ${t.chave}: ${t.nome} — ${t.detalhe}`).join("\n")} "movimento" do fundo na cena: ${lista(MOVIMENTOS_DO_FUNDO.map((m) => m.chave))}. ## Borrão de movimento Automático: o que anda rápido (chicote, transições, quadros-chave) ganha o borrão de câmera no MP4. ## Dica de ritmo (reels que prendem) 1ª cena com um gancho forte em menos de 1 s (texto grande entrando em chicote palavra por palavra), cenas de 2 a 3 s, um elemento se mexendo sempre (ênfase leve: flutuar, pulsar, balancar), troca de fundo entre cenas (escuro → claro → cor forte), última cena com a chamada e a marca.`; } function som() { const porGrupo = new Map(); for (const s of CATALOGO_DE_SONS) { const chave = `${s.tipo === "musica" ? "Música" : "Efeito"} · ${(s as unknown as { grupo: string }).grupo}`; porGrupo.set(chave, [...(porGrupo.get(chave) ?? []), `${s.chave} (${s.nome}, ${Math.round(s.duracao)} s)`]); } return `# Som A trilha é do projeto inteiro: "audios": [ { "som": "", "inicio": 0, "dura": 12, "volume": 0.5, "corte": 0, "fade_in": 0.5, "fade_out": 1.2 } ] (no criar_arte), ou alterar_arte com "acrescentar_audio" / "trocar_audios" / "remover_audio". - Música: do começo ao fim (dura = duração total), volume 0,4 a 0,6, fade in e fade out. Com narração, a música vai a 0,2. - Efeitos: curtos, volume 0,5 a 0,8, no segundo da transição ou do impacto (o "inicio" é do projeto inteiro: some as durações das cenas anteriores). Todos livres para uso comercial (compostos pela Ktalogu ou de domínio público). ## Catálogo ${[...porGrupo.entries()].map(([g, l]) => `### ${g}\n${l.join("; ")}`).join("\n")} ## Narração (voz gerada) e legenda narrar_arte: o texto vira voz (vozes: ${VOZES.map((v) => `${v.chave} = ${v.nome}, ${v.detalhe}`).join("; ")}; jeitos: ${JEITOS_DE_FALAR.map((j) => `${j.chave} = ${j.nome}`).join(", ")}) e entra na trilha; com "legenda" (${ESTILOS_DA_LEGENDA.map((e) => `${e.chave} = ${e.nome}`).join(", ")}), cada palavra aparece no tempo exato da fala, embaixo da arte. Se a fala passar do vídeo, a última cena estica.`; } function modelos() { return `# Modelos prontos (criar_arte com "modelo": ""; a arte nasce com a cor e o logo da loja) ${MODELOS_DO_EDITOR.map((m) => `- ${m.chave}: ${m.nome}${m.descricao ? ` — ${m.descricao}` : ""} [${m.feitoPara ?? "qualquer"}${m.animado ? ", animado" : ""}${(m as { paginas?: number }).paginas ? `, ${(m as { paginas?: number }).paginas} páginas` : ""}]`).join("\n")} Depois de criar do modelo: ver_arte para ver os ids e trocar textos (alterar_peca com "texto"), cores e fotos (alterar_peca com "imagem").`; } function elementos() { return `# Elementos prontos ({ "elemento": "", "caixa": { x, y, w, h }, "atraso": 0 } dentro de "pecas") ${GRUPOS_DE_ELEMENTOS.map((g) => `## ${g.nome}\n${g.lista.map((e) => `- ${e.chave}: ${descricaoDoElemento(e as never)}`).join("\n")}`).join("\n\n")} Os "Para vídeo" já vêm animados (o cursor anda e clica, a notificação desce, o confete cai). As telas (celular, janela do site) e o comentário têm molduras: troque a foto com alterar_peca "imagem".`; } function fontes() { return `# Fontes ("fonte": "") ${FONTES.map((f) => `- ${f.chave}: ${f.familia} (${f.tipo}; pesos ${f.pesos.join("/")})`).join("\n")} Combinações que funcionam: anton (títulos de impacto) + montserrat (texto); bricolage-grotesque + montserrat (moderno); dm-serif-display + montserrat (elegante); caveat (manuscrita, para um detalhe).`; } function receitas() { return `# Receitas (copie e adapte) ## 1) Post de promoção (1080×1080) criar_arte { "nome": "Promo caneca", "formato": "post", "documento": { "paginas": [ { "fundo": { "cor": "#3B1FE0", "cor2": "#7C3AED", "angulo": 150 }, "pecas": [ { "tipo": "textura", "estilo": "pontos", "x": 0, "y": 0, "w": 1080, "h": 1080, "cor": "#FFFFFF", "opacidade": 0.08 }, { "tipo": "texto", "texto": "OFERTA DA SEMANA", "x": 80, "y": 90, "w": 920, "h": 110, "fonte": "anton", "tamanho": 96, "cor": "#FFFFFF", "alinhamento": "centro" }, { "tipo": "imagem", "imagem": "foto:caneca-branca-recorte", "x": 240, "y": 230, "w": 600, "h": 560, "ajuste": "conter", "sombra": "suave" }, { "tipo": "texto", "texto": "R$ 39,90", "x": 290, "y": 800, "w": 500, "h": 150, "fonte": "anton", "tamanho": 120, "cor": "#141414", "alinhamento": "centro", "fundo": { "forma": "pilula", "cor": "#FFD400" } }, { "elemento": "selo-mais-vendido", "caixa": { "x": 780, "y": 240, "w": 240, "h": 280 } } ] } ] } } ## 2) Reels de lançamento em 3 cenas (1080×1920), com música criar_arte { "nome": "Lançamento", "formato": "story", "documento": { "paginas": [ { "fundo": "#0B0D09", "duracao": 2.6, "movimento": "aproximar", "pecas": [ { "tipo": "textura", "estilo": "topografia", "x": -100, "y": -100, "w": 1280, "h": 2120, "cor": "#3E5622", "opacidade": 0.9, "quantidade": 30 }, { "tipo": "texto", "texto": "VEM AÍ", "x": 40, "y": 600, "w": 1000, "h": 300, "fonte": "anton", "tamanho": 260, "cor": "#FFFFFF", "alinhamento": "centro", "animacao": { "entrada": "chicote", "inicio": 0.1, "duracao": 0.7, "porPalavra": true } }, { "tipo": "texto", "texto": "algo novo está chegando", "x": 140, "y": 930, "w": 800, "h": 110, "fonte": "caveat", "peso": 700, "tamanho": 80, "cor": "#C6F432", "alinhamento": "centro", "animacao": { "entrada": "desfocar", "inicio": 0.9 } } ] }, { "fundo": "#C6F432", "duracao": 3, "transicao": { "tipo": "circulo", "duracao": 0.55 }, "pecas": [ { "elemento": "v-celular", "caixa": { "x": 300, "y": 520, "w": 480, "h": 920 } }, { "tipo": "texto", "texto": "COLEÇÃO NOVA", "x": 40, "y": 220, "w": 1000, "h": 200, "fonte": "anton", "tamanho": 170, "cor": "#0B0D09", "alinhamento": "centro", "animacao": { "entrada": "tombar", "inicio": 0.2, "porPalavra": true, "duracao": 0.8 } } ] }, { "fundo": "#0B0D09", "duracao": 3, "transicao": "virar", "pecas": [ { "tipo": "textura", "estilo": "fogos", "x": 0, "y": 0, "w": 1080, "h": 1100, "cor": "#FBBF24", "quantidade": 140, "opacidade": 1 }, { "tipo": "texto", "texto": "+1.000 vendidas", "x": 40, "y": 700, "w": 1000, "h": 240, "fonte": "anton", "tamanho": 180, "cor": "#C6F432", "alinhamento": "centro", "animacao": { "entrada": "carimbo", "inicio": 0.3, "contador": { "de": 0, "inicio": 0.4, "duracao": 1.6, "curva": "freia" } } }, { "elemento": "v-botao-comprar", "caixa": { "x": 200, "y": 1050, "w": 680, "h": 375 }, "atraso": 0.8 } ] } ], "audios": [ { "som": "fma-loyalty-freak-music-high-technologic-beat-explosion", "inicio": 0, "volume": 0.5 }, { "som": "swoosh-rapido", "inicio": 2.45 }, { "som": "swoosh-rapido", "inicio": 5.45 } ] } } ## 3) Story de luxo (1080×1920): fundo escuro com luz, foto do produto, título dourado com floreio, ornamentos na cor da marca Antes: procurar_no_editor tipo "recortes" busca "canto" e "divisor" (ornamentos SVG; anote "imagem" e "cores") e o produto (ou uma foto da casa). { "fundo": { "cor": "#0B0B12", "cor2": "#1C1530", "angulo": 170 }, "pecas": [ { "tipo": "textura", "estilo": "grao", "x": 0, "y": 0, "w": 1080, "h": 1920, "cor": "#FFFFFF", "opacidade": 0.07 }, { "tipo": "forma", "forma": "circulo", "x": 90, "y": 420, "w": 900, "h": 900, "pintura": { "tipo": "radial", "cor": "#C9A227", "cor2": "#0B0B12", "angulo": 0, "alfa": 0.55, "alfa2": 0 }, "mistura": "tela" }, { "tipo": "imagem", "imagem": "produto:", "x": 240, "y": 560, "w": 600, "h": 640, "ajuste": "conter", "efeitos": [ { "tipo": "sombra", "cor": "#000000", "x": 0, "y": 40, "desfoque": 70, "opacidade": 0.55 } ] }, { "tipo": "imagem", "imagem": "recorte:", "x": 60, "y": 260, "w": 260, "h": 260, "ajuste": "conter", "vetor": { "cores": ["#000000"], "trocas": { "#000000": "#C9A227" } } }, { "tipo": "imagem", "imagem": "recorte:", "x": 760, "y": 260, "w": 260, "h": 260, "ajuste": "conter", "espelharX": true, "vetor": { "cores": ["#000000"], "trocas": { "#000000": "#C9A227" } } }, { "tipo": "texto", "texto": "Marina", "html": "Marina", "fonte": "kit-birthstonebounce", "tamanho": 230, "x": 60, "y": 1230, "w": 960, "h": 300, "degrade": "dourado", "alinhamento": "centro", "efeitos": [ { "tipo": "sombra", "cor": "#000000", "x": 0, "y": 10, "desfoque": 24, "opacidade": 0.5 } ] }, { "tipo": "imagem", "imagem": "recorte:", "x": 290, "y": 1540, "w": 500, "h": 60, "ajuste": "conter", "vetor": { "cores": ["#000000"], "trocas": { "#000000": "#C9A227" } } }, { "tipo": "texto", "texto": "COLEÇÃO ASSINATURA", "fonte": "cinzel", "peso": 700, "tamanho": 46, "espaco": 0.3, "x": 120, "y": 1610, "w": 840, "h": 70, "cor": "#F5E6C4", "alinhamento": "centro" } ] } ## 4) Post colagem (1080×1350) com retícula e recortes Fundo de papel (cor creme + textura "grao" com "mistura": "multiplicar"), forma "rasgado" em cor forte atrás, foto da pessoa com "duotone" e "mascara": "rasgado", textura "meio-tom" por cima com "mistura": "multiplicar" e "dentroDe" a forma rasgada, recortes de objetos com "adesivo" branco 14 e sombra suave, título em anton com "fundo" pílula preta e um trecho colorido no "html", fita ("forma": "fita") atravessando o canto, rabisco ("traco" suave) em volta da palavra-chave. ## 5) Carrossel (3 páginas de post retrato 1080×1350) Cada página uma ideia; capa com o título e um contador "1/3" no canto ("{pagina}/{total}" no texto vira o número sozinho); a última com a chamada. ## 6) Banner da loja (1920×540) Texto à esquerda (x 120, até w 900), foto à direita (x 1100, w 700, "ajuste": "cobrir", "raio": 32), um selo sobre a foto e o fundo na cor da marca com textura leve. Nada encostado nas bordas.`; } /** A parte pedida do guia (texto em markdown). */ export function guiaDoEditor(parte: ParteDoGuia): string { switch (parte) { case "direcao": return direcao(); case "efeitos": return efeitos(); case "biblioteca": return biblioteca(); case "pecas": return pecas(); case "animacao": return animacao(); case "som": return som(); case "modelos": return modelos(); case "elementos": return elementos(); case "fontes": return fontes(); case "receitas": return receitas(); default: return comeco(); } }