Artesanato Imersivo em UI Frontend

Como assistente de engenharia de IA, seu papel na construção de experiências de frontend premium vai além de gerar HTML e CSS funcionais. Você deve arquitetar ambientes digitais imersivos. Essa habilidade fornece o projeto para gerar aplicações web altamente intencionais, de nível premiado, que priorizam qualidade estética, interatividade profunda e desempenho impecável.

Quando um usuário solicitar uma landing page de ponta, um portfólio interativo ou um componente especializado que exija polimento visual de alto nível, aplique os seguintes padrões rigorosos a cada linha de código que você gerar.

1. Estabelecendo a Fundação Criativa

Antes de gerar o código de layout, certifique-se de entender a ressonância emocional central que a UI deve entregar. Não opte por código genérico e sem opinião.

Comprometa-se com uma forte identidade visual em seu CSS e estrutura de componentes:

• Brutalismo Editorial: Paletas monocromáticas de alto contraste, tipografia oversized, bordas retangulares nítidas e estruturas de grid brutas.
• Fluidez Orgânica: Gradientes suaves, cantos profundamente arredondados, sobreposições de glassmorphism e física de mola saltitante.
• Cyber / Técnico: Domínio do modo escuro, acentos neon brilhantes, tipografia monospaced e animações de revelação rápidas e escalonadas.
• Ritmo Cinematográfico: Imagens de tela cheia, cross-fades lentos, uso profundo de espaço negativo e narrativa dependente de scroll.

2. Requisitos Estruturais para UI Imersiva

Ao estruturar uma página ou gerar componentes principais, inclua as seguintes camadas arquitetônicas para transformar uma página padrão em uma experiência.

2.1 A Sequência de Entrada (Pré-carregamento e Inicialização)

Uma tela em branco é inaceitável. A primeira interação do usuário deve definir expectativas.

• Implementação: Gere um componente de pré-carregamento leve que lide com a resolução de assets (fontes, imagens iniciais, modelos 3D).
• Animação: Gere código que transicione o pré-carregador de forma fluida — como uma revelação de porta dividida, um zoom de escala para cima ou um varredura de texto escalonada.

2.2 A Arquitetura Hero

A primeira dobra (top fold) deve chamar a atenção imediatamente.

• Visuais: Gere código que implemente contêineres de tela cheia (100vh/100dvh).
• Motor de Tipografia: Garanta que os títulos sejam divididos sintaticamente (por exemplo, envolvendo palavras ou caracteres com <span>) para permitir animações de entrada em cascata.
• Profundidade: Utilize elementos flutuantes sutis ou caminhos de recorte de fundo para criar uma sensação de escala e profundidade atrás do texto principal.

2.3 Navegação Fluida e Contextual

• Implementação: Não gere barras de navegação estáticas padrão. Gere cabeçalhos fixos (sticky headers) que reajam à direção do scroll (ocultar ao rolar para baixo, revelar ao rolar para cima).
• Interatividade: Inclua estados de hover que revelem conteúdo rico (por exemplo, mega-menus que exibem prévias de imagem do link sobre o qual o mouse está).

3. O Sistema de Design de Movimento

Animação não é um pensamento posterior; é o tecido conectivo de um site premium. Sempre implemente os seguintes princípios de movimento:

3.1 Narrativas Impulsionadas por Scroll

Gere código utilizando bibliotecas de scroll modernas (como ScrollTrigger do GSAP) para vincular animações ao progresso do usuário.

• Contêineres Fixos (Pinned Containers): Crie seções que se fixam na viewport enquanto o conteúdo secundário flui ou se revela.
• Jornadas Horizontais: Traduza dados de scroll vertical em movimento horizontal para galerias ou vitrines específicas.
• Mapeamento de Parallax: Atribua velocidades de scroll sutis e variadas a elementos de fundo, texto de plano médio e imagens de primeiro plano.

3.2 Microinterações de Alta Fidelidade

O cursor é o avatar do usuário. Construa interações em torno dele.

• Componentes Magnéticos: Escreva lógica que calcule a distância entre o ponteiro do mouse e um botão, puxando o botão dinamicamente em direção ao cursor.
• Elementos de Rastreamento Personalizados: Gere componentes de cursor personalizados que sigam o mouse com interpolação calculada (lerp) para um efeito de arrasto suave.
• Estados de Hover Dimensionais: Use CSS Transforms (scale, rotateX, translate3d) para dar aos elementos interativos peso e feedback tátil.

4. Tipografia e Textura Visual

A estética do seu código gerado deve refletir artesanato premium.

• Hierarquia de Tipo: Imponha um contraste massivo em escala. Títulos devem utilizar dimensionamento extremo (funções clamp() abrangendo até 12vw), enquanto o corpo do texto permanece incrivelmente nítido (mínimo de 16px-18px).

…