START — copie da linha START até a linha END (inclusive) e c...
Prompt
START — copie da linha START até a linha END (inclusive) e cole na IA Você vai criar VÁRIOS componentes visuais espaciais para uma biblioteca de peças reutilizáveis. NÃO são fundos completos — cada peça é isolada e será combinada com outras depois. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ estrelas ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Quantos componentes quero: (ex.: 6 | 8 | 10 — ou "surpreenda-me com 8") Tipos que me interessam (opcional — deixe em branco para a IA variar): star-field | nebula | milky-way | shooting-star | planet | black-hole | ship | constellation | aurora | outro Tema ou direção (opcional): (ex.: tons âmbar/cobre, realista, lento, sem azul neon, peças para compor fundo noturno) O que evitar (opcional): (ex.: sem parallax agressivo, sem fumaça screen-blend, sem template cosmos clonado) Observações extras (opcional): ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ FIM DO MEU PEDIDO ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ FLUXO OBRIGATÓRIO — DUAS PARTES NA RESPOSTA PARTE 1 — CATÁLOGO DE OPÇÕES (antes dos HTMLs) Antes de codificar, apresente uma tabela ou lista com TODAS as peças que vai entregar. Para cada uma: - Nº - Nome criativo (inventado por você) - Tipo (star-field, nebula, planet, etc.) - Descrição em 1 linha (forma, cor, movimento, uso) - Slug do arquivo: component-{slug}.html - Por que é diferente das outras (evite repetir a mesma ideia) Regras do catálogo: - Mínimo 5 componentes, ideal 6–10 (respeite "Quantos componentes quero" no MEU PEDIDO). - Cada item deve ser visualmente DISTINTO — não 5 nebulosas parecidas. - Varie tipos, paletas e técnicas entre as peças. - Nomes memoráveis e poéticos, não genéricos ("Nebulosa 1"). PARTE 2 — IMPLEMENTAÇÃO (um HTML por componente) Para CADA item do catálogo, entregue um HTML completo e separado. Cada HTML individual deve: 1. Ser autoexecutável (<!DOCTYPE html> … </html>), offline, iframe-safe. 2. Mostrar APENAS aquele componente — centralizado ou bem enquadrado. 3. Ter rótulo visível na tela com o NOME inventado (canto inferior, discreto). 4. Usar fundo neutro escuro (#05060a) — sem montar cena completa. 5. Iniciar animação sozinha. Respeitar prefers-reduced-motion: reduce. CRIATIVIDADE - Identidade visual própria em cada peça. Não copie template "cosmos animado". - Paleta variada entre os componentes: âmbar, cobre, verde-azulado, magenta suave — evite que todos sejam azul/roxo. - Uma ideia forte por peça — legível em 3 segundos. PROIBIDO (já reprovado antes) 1. Fundo completo disfarçado de componente (estrelas + nebulosas + Via Láctea + cadentes juntos num único HTML). 2. Nebulosa "fumaça" — screen-blend empilhado, opacidade >8%, névoa dominando a tela. 3. Excesso de brilho/saturação — neon, azul elétrico, bloom em tudo. 4. Movimento rápido — drift, twinkle ou rotação frenética. 5. Parallax de mouse/gyro agressivo (amplitude máx. 8px se essencial). 6. 6000+ partículas só para impressionar numa peça pequena. 7. Espirais forçadas, domo rotacionando, rotação em torno do polo. 8. Copiar HTML entre componentes ou clonar template cosmos de outro modelo. 9. CDN, npm, imagens ou fontes externas. 10. Componente apagado/invisível no fundo escuro. 11. z-index: -1 (quebra em iframe). 12. Um único HTML com vários componentes empilhados — sempre 1 peça = 1 arquivo. TÉCNICO (iframe-safe, repetir em cada HTML) <div id="component-stage"> <canvas id="canvas"></canvas> <div id="component-label">Nome do Componente</div> </div> - html, body: 100% width/height, margin 0, overflow hidden, background #05060a - #component-stage: position fixed, inset 0, z-index 0 - canvas: window.innerWidth / window.innerHeight (NÃO getBoundingClientRect no init) - devicePixelRatio máximo 2, debounce resize ~200ms, pausar em document.hidden - Nebulosas: baseOpacity fixo; pulse = baseOpacity * fator - Vanilla JS + Canvas 2D (ou CSS puro se couber) CONFIG no topo de cada script: const CONFIG = { componentName: 'Nome Inventado', componentType: 'nebula', opacity: 1.0, speed: 0.3, colorPrimary: '#a67c52', colorSecondary: '#2a1810', reducedMotion: 'auto' }; Comentário breve no HTML: o que a peça faz e melhor uso em composição. QUALIDADE DE REFERÊNCIA - Movimento lento e contemplativo. - Nebulosas discretas (opacidade base ~3–6%). - Meteoro raro, sutil, lento. - Paleta natural. FORMATO DA ENTREGA FINAL 1. Catálogo completo (Parte 1) 2. Para cada componente do catálogo, nesta ordem: - Título: Nome — component-{slug}.html - Bloco de código com HTML completo - Linha: "Melhor uso em composição: …" 3. Separador claro entre cada HTML Se a resposta ficar longa demais, entregue o catálogo completo + quantos HTMLs couberem; no final liste os pendentes e pergunte se continua — mas NUNCA entregue só um componente quando o pedido pede vários. END — fim do prompt
A system prompt was added to support web rendering
