Galeria de shaders procedurais

Crie um site de showroom cinematográfico para uma marca fictícia de veículos elétricos, a Nexus Automotive. A seção principal traz um shader de fragmento procedural em tela cheia — luz fluindo em tempo real — por trás de duas linhas de texto serifado em tamanho grande e uma breve tagline, seguida, na rolagem, por uma seção com o manifesto da marca. O elemento central é um índice de modelos: quatro veículos (um sedã topo de linha, um SUV de turismo, um supercarro de alto desempenho e um carro urbano compacto) listados em enormes linhas tipográficas. Ao passar o cursor sobre uma linha, a imagem daquele carro é exibida ao lado da lista e as demais entradas ficam esmaecidas; ao clicar, abre-se uma página de detalhes dedicada, com uma introdução de posicionamento e três capítulos de texto (design, cabine, desempenho), além de uma forma de voltar à lista. Adicione uma seção de vídeo sobre a experiência da marca e um rodapé de contato com o endereço e os horários de funcionamento do centro de experiência. Mantenha uma paleta quase monocromática, combine uma fonte serifada de destaque com uma fonte monoespaçada para rótulos e use rolagem suave, com parallax sutil e transições de fade. Entregue um site estático que funcione diretamente no navegador — a rolagem, as revelações ao passar o cursor e a navegação entre páginas devem funcionar de verdade. Substitua o conteúdo em destaque por uma marca de cafés especiais: cinco linhas de produtos passam a ser cinco grãos de origem única, o shader da seção principal muda para vapor em tons de marrom quente e partículas de grãos de café, e cada página de detalhes inclui origem, processamento, notas de sabor e dicas de preparo. 

Crie um site de showroom cinematográfico para uma marca fictícia de veículos elétricos, a Nexus Automotive. A seção principal traz um shader de fragmento procedural em tela cheia — luz fluindo em tempo real — por trás de duas linhas de texto serifado em tamanho grande e uma breve tagline, seguida, na rolagem, por uma seção com o manifesto da marca. O elemento central é um índice de modelos: quatro veículos (um sedã topo de linha, um SUV de turismo, um supercarro de alto desempenho e um carro urbano compacto) listados em enormes linhas tipográficas. Ao passar o cursor sobre uma linha, a imagem daquele carro é exibida ao lado da lista e as demais entradas ficam esmaecidas; ao clicar, abre-se uma página de detalhes dedicada, com uma introdução de posicionamento e três capítulos de texto (design, cabine, desempenho), além de uma forma de voltar à lista. Adicione uma seção de vídeo sobre a experiência da marca e um rodapé de contato com o endereço e os horários de funcionamento do centro de experiência. Mantenha uma paleta quase monocromática, combine uma fonte serifada de destaque com uma fonte monoespaçada para rótulos e use rolagem suave, com parallax sutil e transições de fade. Entregue um site estático que funcione diretamente no navegador — a rolagem, as revelações ao passar o cursor e a navegação entre páginas devem funcionar de verdade. Altere todos os textos do site para inglês, incluindo o índice em tamanho grande, o texto das páginas de detalhes e a navegação. Reajuste os tamanhos das fontes e as alturas de linha para o inglês, mantendo inalterados os visuais do shader e as interações ao passar o cursor.