design-taste-frontend-v1

Competência em front-end de alto nível

1. CONFIGURAÇÃO DE LINHA DE BASE ATIVA

• VARIAÇÃO_DE_PROJETO: 8 (1 = Simetria perfeita, 10 = Caos artístico)
• MOTION_INTENSITY: 6 (1 = Estático/Sem movimento, 10 = Cinematográfico/Física mágica)
• VISUAL_DENSITY: 4 (1 = Galeria de arte/Aéreo, 10 = Cabine de piloto/Dados compactos)

Instrução de IA: A linha de base padrão para todas as gerações está estritamente definida para esses valores (8, 6, 4). Não peça ao usuário para editar este arquivo. Caso contrário, SEMPRE atenda ao usuário: adapte esses valores dinamicamente com base no que ele solicitar explicitamente em suas mensagens de chat. Use esses valores de referência (ou os substituídos pelo usuário) como suas variáveis globais para orientar a lógica específica nas Seções 3 a 7.

2. ARQUITETURA E CONVENÇÕES PADRÃO

A menos que o usuário especifique explicitamente uma pilha diferente, siga estas restrições estruturais para manter a consistência:

• VERIFICAÇÃO DE DEPENDÊNCIAS [OBRIGATÓRIA]: Antes de importar QUALQUER biblioteca de terceiros (por exemplo, framer-motion, lucide-react, zustand), você DEVE verificar o arquivo package.json. Se o pacote estiver faltando, você DEVE fornecer o comando de instalação (por exemplo, npm install nome-do-pacote) antes de fornecer o código. Nunca presuma que uma biblioteca existe.
• Framework e interatividade: React ou Next.js. Use por padrão os Componentes de Servidor (RSC).
  • SEGURANÇA DOS RSC: O estado global funciona APENAS em Componentes do Cliente. No Next.js, envolva os provedores em um componente “use client ”.
  • ISOLAMENTO DE INTERATIVIDADE: Se as Seções 4 ou 7 (Motion/Liquid Glass) estiverem ativas, o componente específico da interface do usuário interativo DEVE ser extraído como um componente folha isolado com “use client” bem no início. Os Componentes de Servidor devem renderizar exclusivamente layouts estáticos.
• Gerenciamento de estado: UseuseState/useReducer locais para a interface do usuário isolada. Use o estado global estritamente para evitar a perfuração profunda de props.
• Política de estilo: Use Tailwind CSS (v3/v4) para 90% do estilo.
  • BLOQUEIO DE VERSÃO DO TAILWIND: Verifique primeiro o arquivo package.json. Não use a sintaxe da v4 em projetos da v3.
  • PROTEÇÃO DE CONFIGURAÇÃO T4: Para a v4, NÃO use o plugin tailwindcss no postcss.config.js. Use @tailwindcss/postcss ou o plugin do Vite.
• POLÍTICA ANTI-EMOJI [CRÍTICA]: NUNCA use emojis no código, na marcação, no conteúdo de texto ou no texto alternativo. Substitua os símbolos por ícones de alta qualidade (Radix, Phosphor) ou primitivas SVG simples. Emojis são PROIBIDOS.
• Responsividade e espaçamento:
  • Padronize os pontos de quebra (sm, md, lg, xl).
  • Limite os layouts de página usando max-w-[1400px] mx-auto ou max-w-7xl.
  • Estabilidade da janela de visualização [CRÍTICO]: NUNCA use h-screen para seções Hero de altura total. SEMPRE use min-h-[100dvh] para evitar saltos catastróficos no layout em navegadores móveis (Safari do iOS).
  • Grid em vez de cálculos complexos com flexbox: NUNCA use cálculos percentuais complexos com flexbox (w-[calc(33%-1rem)]). SEMPRE use CSS Grid (grid grid-cols-1 md:grid-cols-3 gap-6) para estruturas confiáveis.
• Ícones: É OBRIGATÓRIO usar exatamente @phosphor-icons/react ou @radix-ui/react-icons como caminhos de importação (verifique a versão instalada). Padronize o `strokeWidth` globalmente (por exemplo, use exclusivamente 1,5 ou 2,0).

3. DIRETRIZES DE ENGENHARIA DE DESIGN (Correção de Viés)

Os LLMs apresentam vieses estatísticos em relação a padrões clichês específicos de interface do usuário. Crie proativamente interfaces de alta qualidade utilizando estas regras de engenharia:

Regra 1: Tipografia determinística

• Exibição/Títulos: Use como padrão text-4xl md:text-6xl tracking-tighter leading-none.
  • ANTI-SLOP: Evite o uso de Inter para criar uma atmosfera “premium” ou “criativa”. Imprima personalidade única usando Geist, Outfit, Cabinet Grotesk ou Satoshi.
  • REGRA TÉCNICA DE IU: Fontes serifadas são estritamente PROIBIDAS para IU de painéis de controle/softwares. Nesses contextos, use exclusivamente combinações de fontes sans-serif de alta qualidade (Geist + Geist Mono ou Satoshi + JetBrains Mono).
• Corpo/Parágrafos: Padrão: text-base text-gray-600 leading-relaxed max-w-[65ch].

Regra 2: Calibração de cores

• Restrição: no máximo 1 cor de destaque. Saturação < 80%.
• A PROIBIÇÃO DA LILA: A estética “roxo/azul de IA” é estritamente PROIBIDA. Nada de botões roxos brilhantes, nada de gradientes neon. Use bases absolutamente neutras (Zinc/Slate) com detalhes únicos e de alto contraste (por exemplo, Emerald, Electric Blue ou Deep Rose).
• CONSISTÊNCIA DE CORES: Mantenha uma única paleta para todo o resultado final. Não alterne entre cinzas quentes e frios dentro do mesmo projeto.

Regra 3: Diversificação do layout

• VIÉS ANTICENTRALIZADO: Seções Hero/H1 centralizadas são estritamente PROIBIDAS quando LAYOUT_VARIANCE > 4. Utilize estruturas do tipo “Tela Dividida” (50/50), “Conteúdo alinhado à esquerda/Recurso alinhado à direita” ou “Espaço em branco assimétrico”.

Regra 4: Materialidade, sombras e “antiuso excessivo de cartões”

• REFORÇO DO PAINEL DE CONTROLE: Para VISUAL_DENSITY > 7, contêineres genéricos de cartões são estritamente PROIBIDOS. Use agrupamento lógico por meio de border-t, divide-y ou espaço negativo puro. As métricas de dados devem ter espaço para respirar sem ficarem confinadas em caixas, a menos que a elevação (z-index) seja funcionalmente necessária.
• Execução: Use cartões SOMENTE quando a elevação comunicar hierarquia. Ao usar uma sombra, ajuste sua tonalidade para combinar com a cor de fundo.

Regra 5: Estados interativos da interface do usuário

• Geração obrigatória: Os LLMs geram naturalmente estados “estáticos” de sucesso. Você DEVE implementar ciclos completos de interação:
  • Carregamento: Carregadores esqueléticos que correspondam aos tamanhos do layout (evite indicadores circulares genéricos).
  • Estados vazios: Estados vazios bem compostos, indicando como preencher os dados.
  • Estados de erro: Relatórios de erro claros e integrados (por exemplo, formulários).
  • Feedback tátil: No estado :active, use -translate-y-[1px] ou scale-[0.98] para simular um toque físico indicando sucesso/ação.

Regra 6: Padrões de dados e formulários

• Formulários: O rótulo DEVE ficar acima do campo de entrada. O texto auxiliar é opcional, mas deve estar presente na marcação. O texto de erro deve ficar abaixo do campo de entrada. Use um gap-2 padrão para blocos de entrada.

4. PROATIVIDADE CRIATIVA (Implementação anti-negligência)

Para combater ativamente designs genéricos de IA, implemente sistematicamente esses conceitos avançados de codificação como sua base:

• Refração “Liquid Glass”: Quando for necessário usar o glassmorphism, vá além do `backdrop-blur`. Adicione uma borda interna de 1px (border-white/10) e uma sombra interna sutil (shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]) para simular a refração física nas bordas.
• Microfísica magnética (se MOTION_INTENSITY > 5): Implemente botões que sejam levemente atraídos em direção ao cursor do mouse. CRÍTICO: NUNCA use o useState do React para animações magnéticas ao passar o mouse ou animações contínuas. Use EXCLUSIVAMENTE o useMotionValue e o useTransform do Framer Motion fora do ciclo de renderização do React para evitar queda de desempenho em dispositivos móveis.
• Microinterações Perpétuas: Quando MOTION_INTENSITY > 5, incorpore microanimações contínuas e infinitas (Pulse, Typewriter, Float, Shimmer, Carousel) em componentes padrão (avatares, pontos de status, planos de fundo). Aplique a física de mola premium (type: "spring", stiffness: 100, damping: 20) a todos os elementos interativos — sem suavização linear.
• Transições de layout: Sempre utilize as propriedades layout e layoutId do Framer Motion para reordenação suave, redimensionamento e transições de elementos compartilhados entre mudanças de estado.
• Orquestração escalonada: Não monte listas ou grades instantaneamente. Use staggerChildren (Framer) ou cascata CSS (animation-delay: calc(var(--index) * 100ms)) para criar revelações sequenciais em cascata. CRÍTICO: Para o `staggerChildren`, o `Parent` (variantes) e os `Children` DEVEM residir na mesma árvore de Componentes do Cliente. Se os dados forem buscados de forma assíncrona, passe-os como props para um wrapper `Parent Motion` centralizado.

5. MEDIDAS DE PROTEÇÃO DE DESEMPENHO

• Custo do DOM: Aplique filtros de granulação/ruído exclusivamente a pseudo-elementos fixos com `pointer-events-none` (por exemplo, ` fixed inset-0 z-50 pointer-events-none`) e NUNCA a contêineres com rolagem, para evitar repinturas contínuas da GPU e degradação do desempenho em dispositivos móveis.
• Aceleração de hardware: Nunca anime as propriedades top, left, width ou height. Anime exclusivamente por meio de transform e opacity.
• Restrição de Z-Index: NUNCA use z-50 ou z-10 arbitrariamente sem motivo. Use z-indexes estritamente para contextos de camadas sistêmicas (barras de navegação fixas, modais, sobreposições).

6. REFERÊNCIA TÉCNICA (Definições de Dial)

DESIGN_VARIANCE (Nível 1-10)

• 1–3 (Previsível): Justify-center no Flexbox, grades simétricas estritas de 12 colunas, preenchimentos iguais.
• 4-7 (Deslocamento): Use `margin-top: -2rem ` para sobreposição, proporções variadas de imagens (por exemplo, 4:3 ao lado de 16:9), cabeçalhos alinhados à esquerda sobre dados alinhados ao centro.
• 8-10 (Assimétrico): Layouts tipo “masonry”, CSS Grid com unidades fracionárias (por exemplo, grid-template-columns: 2fr 1fr 1fr), zonas vazias extensas (padding-left: 20vw).
• SUBSTITUIÇÃO PARA DISPOSITIVOS MÓVEIS: Para os níveis 4-10, qualquer layout assimétrico acima do tamanho “md”: DEVE recorrer agressivamente a um layout rígido de coluna única (w-full, px-4, py-8) em janelas de visualização < 768px para evitar rolagem horizontal e quebra do layout.

INTENSIDADE DE MOVIMENTO (Níveis 1 a 10)

• 1-3 (Estático): Sem animações automáticas. Apenas os estados :hover e :active do CSS.
• 4-7 (CSS fluido): Use transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1). Use animações em cascata com animation-delay para carregamentos. Concentre-se estritamente em transform e opacity. Use will-change: transform com moderação.
• 8-10 (Coreografia avançada): Revelações complexas acionadas por rolagem ou efeito de paralaxe. Use os hooks do Framer Motion. NUNCA use `window.addEventListener('scroll')`.

VISUAL_DENSITY (Nível 1-10)

• 1-3 (Modo Galeria de Arte): Muito espaço em branco. Grandes intervalos entre seções. Tudo parece muito sofisticado e limpo.
• 4-7 (Modo Aplicativo Diário): Espaçamento normal para aplicativos web padrão.
• 8-10 (Modo Cockpit): Preenchimentos mínimos. Sem caixas de cartões; apenas linhas de 1px para separar os dados. Tudo está bem compacto. Obrigatório: use Monospace (font-mono) para todos os números.

7. SINAIS DE IA (Padrões Proibidos)

Para garantir um resultado premium e não genérico, você DEVE evitar rigorosamente essas características comuns de design de IA, a menos que seja explicitamente solicitado:

Visual e CSS

• NÃO use efeitos neon/brilhos externos: Não use brilhos padrão de box-shadow nem brilhos automáticos. Use bordas internas ou sombras sutis com tonalidade.
• NÃO use preto puro: nunca use #000000. Use off-black, zinc-950 ou carvão.
• NÃO use detalhes supersaturados: Desature os detalhes para que se misturem elegantemente com tons neutros.
• NÃO use gradientes excessivos no texto: não utilize gradientes de preenchimento de texto em cabeçalhos grandes.
• NÃO use cursores de mouse personalizados: eles estão ultrapassados e prejudicam o desempenho e a acessibilidade.

Tipografia

• NÃO use a fonte Inter: Proibida. Use Geist, Outfit, Cabinet Grotesk ou Satoshi.
• NÃO use H1s superdimensionados: o primeiro título não deve chamar atenção de forma exagerada. Controle a hierarquia com peso e cor, não apenas com tamanho enorme.
• Restrições para fontes serifadas: Use fontes serifadas APENAS para designs criativos/editoriais. NUNCA use fontes serifadas em painéis de controle minimalistas.

Layout e espaçamento

• Alinhe e espace perfeitamente: certifique-se de que o preenchimento e as margens estejam matematicamente perfeitos. Evite elementos flutuantes com espaços irregulares.
• NÃO use layouts de cartões em 3 colunas: a disposição genérica de “3 cartões iguais na horizontal” está PROIBIDA. Use, em vez disso, um ziguezague de 2 colunas, uma grade assimétrica ou uma abordagem de rolagem horizontal.

Conteúdo e dados (o “efeito Jane Doe”)

• NÃO use nomes genéricos: “John Doe”, “Sarah Chan” ou “Jack Su” estão proibidos. Use nomes altamente criativos e que soem realistas.
• NÃO use avatares genéricos: NÃO use ícones padrão SVG do tipo “ovo” ou ícones de usuário do Lucide como avatares. Use placeholders de fotos criativos e verossímeis ou estilos específicos.
• NÃO use números falsos: evite resultados previsíveis como 99,99%, 50% ou números de telefone básicos (1234567). Use dados orgânicos e desorganizados (47,2%, +1 (312) 847-1928).
• NÃO use nomes genéricos de startups: “Acme”, “Nexus”, “SmartFlow”. Crie nomes de marca sofisticados e contextuais.
• NÃO use palavras de preenchimento: evite clichês de redação gerada por IA como “Elevate”, “Seamless”, “Unleash” ou “Next-Gen”. Use verbos concretos.

Recursos e componentes externos

• NÃO use links quebrados do Unsplash: Não use o Unsplash. Use placeholders absolutos e confiáveis, como https://picsum.photos/seed/{random_string}/800/600 ou avatares de interface do usuário em SVG.
• Personalização do shadcn/ui: Você pode usar o shadcn/ui, mas NUNCA em seu estado padrão genérico. Você DEVE personalizar os raios, as cores e as sombras para que correspondam à estética sofisticada do projeto.
• Limpeza pronta para produção: O código deve ser extremamente limpo, visualmente marcante, memorável e meticulosamente refinado em cada detalhe.

8. O ARSENAL CRIATIVO (Inspiração de alto nível)

Não recorra a uma interface de usuário genérica por padrão. Utilize esta biblioteca de conceitos avançados para garantir que o resultado seja visualmente marcante e memorável. Quando apropriado, utilize o GSAP (ScrollTrigger/Parallax) para narrativas complexas com rolagem ou o ThreeJS/WebGL para animações 3D/Canvas, em vez de movimentos básicos em CSS. CRÍTICO: Nunca misture GSAP/ThreeJS com o Framer Motion na mesma árvore de componentes. Use o Framer Motion como padrão para interações de interface do usuário/Bento. Use GSAP/ThreeJS EXCLUSIVAMENTE para narrativas de rolagem isoladas em página inteira ou fundos em canvas, envolvidos em blocos de limpeza useEffect rigorosos.

O Paradigma Padrão do Hero

• Pare de usar texto centralizado sobre uma imagem escura. Experimente seções Hero assimétricas: texto alinhado de forma limpa à esquerda ou à direita. O plano de fundo deve apresentar uma imagem relevante e de alta qualidade com um desvanecimento estilístico sutil (escurecendo ou clareando suavemente até a cor de fundo, dependendo se estiver no modo Claro ou Escuro).

Navegação e menus

• Ampliação do Dock do Mac OS: barra de navegação na borda; ícones se redimensionam de forma fluida ao passar o cursor.
• Botão magnético: botões que são fisicamente atraídos em direção ao cursor.
• Menu “Gooey”: subitens se separam do botão principal como um líquido viscoso.
• Ilha dinâmica: Um componente de interface do usuário em forma de comprimido que se transforma para mostrar status/alertas.
• Menu radial contextual: Um menu circular que se expande exatamente nas coordenadas do clique.
• Discagem rápida flutuante: um FAB que se projeta formando uma linha curva de ações secundárias.
• Revelação do Mega Menu: Menus suspensos em tela cheia que exibem conteúdo complexo com efeito de desvanecimento escalonado.

Layout e grades

• Grade Bento: agrupamento assimétrico baseado em blocos (por exemplo, o Centro de Controle da Apple).
• Layout Masonry: Grade escalonada sem alturas fixas de linha (por exemplo, o Pinterest).
• Grade Chroma: Bordas de grade ou blocos que exibem gradientes de cor sutis e com animação contínua.
• Rolagem em tela dividida: Duas metades da tela deslizando em direções opostas durante a rolagem.
• Revelação em cortina: Uma seção Hero que se abre no meio como uma cortina ao rolar a página.

Cartões e Contêineres

• Cartão com inclinação paralaxe: Um cartão com inclinação 3D que acompanha as coordenadas do mouse.
• Cartão com borda em destaque: Bordas do cartão que se iluminam dinamicamente sob o cursor.
• Painel com efeito de vidro fosco: Vidro fosco real com bordas de refração internas.
• Cartão com Folha Holográfica: Reflexos de luz iridescentes e em tons de arco-íris que se alteram ao passar o mouse.
• Pilha de cartõescom deslize tipo Tinder: Uma pilha física de cartões que o usuário pode deslizar para afastar.
• Modal com transformação: Um botão que se expande de forma contínua, transformando-se em seu próprio contêiner de diálogo em tela cheia.

Animações de rolagem

• Pilha de rolagem fixa: Cartões que permanecem na parte superior e se empilham fisicamente uns sobre os outros.
• Desvio de rolagem horizontal: a rolagem vertical se transforma em um deslocamento suave da galeria na horizontal.
• Sequência de rolagem locomotiva: sequências de vídeo/3D em que a taxa de quadros está diretamente vinculada à barra de rolagem.
• Zoom paralaxe: Uma imagem de fundo central que amplia ou reduz de forma contínua conforme você rola a tela.
• Trajetória de progresso de rolagem: Linhas vetoriais SVG ou trajetórias que se desenham à medida que o usuário rola a tela.
• Transição de deslizamento líquido: Transições de página que limpam a tela como um líquido viscoso.

Galerias e mídia

• Galeria Dome: Uma galeria 3D que dá a sensação de uma cúpula panorâmica.
• Carrossel Coverflow: Carrossel 3D com o centro em destaque e as bordas inclinadas para trás.
• Grade com arrastar para panorâmica: Uma grade sem limites que você pode arrastar livremente em qualquer direção.
• Controle deslizante de imagens em acordeão: Tiras estreitas de imagens verticais/horizontais que se expandem totalmente ao passar o mouse.
• Rastro de imagem ao passar o mouse: o mouse deixa um rastro de imagens que aparecem e desaparecem gradualmente.
• Imagem com efeito glitch: Breve distorção digital com mudança nos canais RGB ao passar o mouse.

Tipografia e texto

• Marquee cinética: faixas de texto infinitas que invertem a direção ou aceleram ao rolar a página.
• Revelação de máscara de texto: Tipografia imponente que funciona como uma janela transparente para um fundo de vídeo.
• Efeito de embaralhamento de texto: Decodificação de caracteres no estilo “Matrix” ao carregar a página ou ao passar o mouse.
• Trajetória circular do texto: Texto curvado ao longo de uma trajetória circular giratória.
• Animação de traço com gradiente: Texto contornado com um gradiente que percorre continuamente o traço.
• Grade de tipografia cinética: Uma grade de letras que se esquiva ou gira para longe do cursor.

Microinterações e efeitos

• Botão de explosão de partículas: CTAs que se fragmentam em partículas ao serem acionados com sucesso.
• Atualização por puxada líquida: Indicadores de recarga em dispositivos móveis que se comportam como gotículas de água se separando.
• Brilho esquelético: reflexos de luz em movimento que se deslocam pelas caixas de espaço reservado.
• Botão direcional sensível ao hover: Preenchimento ao passar o mouse que surge exatamente do lado de onde o mouse entrou.
• Efeito de ondulação ao clicar: Ondas visuais se propagando precisamente a partir das coordenadas do clique.
• Desenho de linha SVG animado: vetores que traçam seus próprios contornos em tempo real.
• Mesh Gradient Background: Manchas de cor animadas, orgânicas, semelhantes às de uma lâmpada de lava.
• Profundidade de desfoque de lente: Desfoque dinâmico do foco nas camadas de interface do usuário do plano de fundo para destacar uma ação no primeiro plano.

9. O PARADIGMA “MOTION-ENGINE” DO BENTO

Ao criar painéis SaaS modernos ou seções de recursos, você DEVE utilizar a seguinte arquitetura “Bento 2.0” e filosofia de movimento. Isso vai além de cartões estáticos e impõe uma estética do tipo “essência do Vercel combinada com a limpeza do Dribbble”, fortemente baseada em física contínua.

A. Filosofia central de design

• Estética: sofisticada, minimalista e funcional.
• Paleta: Fundo em #f9fafb. Os cartões são brancos puros (#ffffff) com uma borda de 1px em border-slate-200/50.
• Superfícies: Use rounded-[2.5rem] para todos os principais contêineres. Aplique uma “sombra de difusão” (uma sombra muito clara e ampla, por exemplo, shadow-[0_20px_40px_-15px_rgba(0,0,0,0.05)]) para criar profundidade sem sobrecarregar o visual.
• Tipografia: Conjunto de fontes estrito: Geist, Satoshi ou Cabinet Grotesk. Use espaçamento sutil (tracking-tight) para os cabeçalhos.
• Rótulos: Títulos e descrições devem ser colocados fora e abaixo dos cartões para manter uma apresentação limpa, no estilo de galeria.
• Perfeição em pixels: Use um preenchimento generoso de p-8 ou p-10 dentro dos cartões.

B. Especificações do mecanismo de animação (movimento perpétuo)

Todos os cartões devem conter “microinterações perpétuas”. Use os seguintes princípios do Framer Motion:

• Física de mola: sem suavização linear. Use type: “spring”, stiffness: 100, damping: 20 para uma sensação premium e de peso.
• Transições de layout: utilize amplamente as propriedades layout e layoutId para garantir reordenação, redimensionamento e transições de estado de elementos compartilhados de maneira suave.
• Loops infinitos: Cada cartão deve ter um “estado ativo” que gire infinitamente (Pulse, Typewriter, Float ou Carousel) para garantir que o painel pareça “vivo”.
• Desempenho: Envolva listas dinâmicas em e otimize para 60 fps. CRÍTICO PARA O DESEMPENHO: Qualquer movimento contínuo ou loop infinito DEVE ser memorizado (React.memo) e completamente isolado em seu próprio Componente Cliente microscópico. Nunca acione re-renderizações no layout pai.

C. Os 5 arquétipos de cartões (especificações de microanimações)

Implemente essas microanimações específicas ao construir grades Bento (por exemplo, Linha 1: 3 colunas | Linha 2: 2 colunas divididas em 70/30):

1. A Lista Inteligente: Uma pilha vertical de itens com um ciclo infinito de classificação automática. Os itens trocam de posição usando o layoutId, simulando uma IA que prioriza tarefas em tempo real.
2. A Barra de Comando: Uma barra de pesquisa/IA com um efeito de máquina de escrever em várias etapas. Ela percorre prompts complexos, incluindo um cursor piscando e um estado de “processamento” com um gradiente de carregamento cintilante.
3. O Status em Tempo Real: Uma interface de agendamento com indicadores de status que “respiram”. Inclua um emblema de notificação pop-up que surge com um efeito de mola “Overshoot”, permanece por 3 segundos e desaparece.
4. O fluxo amplo de dados: um “carrossel infinito” horizontal de cartões de dados ou métricas. Certifique-se de que o loop seja contínuo (usando x: ["0%", "-100%"]) com uma velocidade que pareça natural.
5. A interface contextual (modo de foco): uma visualização de documento que anima o destaque escalonado de um bloco de texto, seguido pelo “flutuar” de uma barra de ferramentas de ação flutuante com microícones.

10. VERIFICAÇÃO FINAL ANTES DA EXIBIÇÃO

Avalie seu código em relação a esta matriz antes de gerar a saída. Este é o último filtro que você aplica à sua lógica.

• O estado global é usado de forma adequada para evitar a exploração profunda de propriedades, em vez de ser usado arbitrariamente?
• O colapso do layout para dispositivos móveis (w-full, px-4, max-w-7xl, mx-auto) está garantido para designs com alta variabilidade?
• As seções de altura total utilizam com segurança min-h-[100dvh] em vez do h-screen, que apresenta erros?
• As animações do `useEffect` contêm funções de limpeza rigorosas?
• Os estados vazio, de carregamento e de erro estão previstos?
• Os cartões são omitidos em favor do espaçamento sempre que possível?
• Você isolou rigorosamente as animações contínuas que sobrecarregam a CPU em seus próprios Componentes de Cliente?