O catálogo inteiro — 76 demonstrações ao vivo

Onde fica bem: títulos de hero, slogans de campanha.

Onde fica bem: história de marca, narrativa de produção, estudos de caso.

Onde fica bem: ênfase em tecnologia e inovação, títulos de seção.

Onde fica bem: textos manifesto, propostas de valor.

Experimente rolando — as camadas correm em velocidades diferentes. Onde: títulos de série e de coleção.

Passe por cima — acelera. Onde: faixas de anúncio, campanhas.

O grão gerado ao vivo faz as cores chapadas parecerem saídas da gráfica. Onde: marcas premium e retrô.

Para que serve: dados DECORATIVOS que fazem a página parecer um aparelho vivo ou um laboratório. A Mammut fez isso com o GPS e o pulso de um alpinista — o leitor se sentia na montanha. Nós fazemos com a temperatura do reator: o visitante se sente na oficina. Parte dos números é real (o relógio, a sua rolagem, o seu cursor), parte é atmosfera. Onde: páginas construídas em torno da produção ou do laboratório.

Onde: blocos de estatísticas, "nós em números".

Passe por cima — as letras dão cambalhota uma a uma. Onde: menus, links importantes.

Passe por cima. Onde: grades de produto e de coleção — deveria ser o padrão de qualquer loja.

Role — as linhas correm em sentidos opostos, inclinando-se com a velocidade da rolagem. Onde: separadores de seção, manifestos.

Onde: páginas 404, marcas infantis e de hobby, seções de "área de brincar".

Pegue e arraste. Onde: áreas de brincar de moodboard e cartela de cores, páginas de lançamento.

Onde: aberturas de seção, momentos de ênfase emocional.

A mesma animação, dois ritmos. A que anda em degraus parece "desenhada à mão" — era o segredo do Site do Ano 2021.

Onde: momentos de troca de cor ou de série, transições de tema.

Apresenta conteúdo técnico com a elegância de um cardápio de bar. Onde: conteúdos de produto e detalhes de características.

Preencher um formulário deixa de ser tarefa e passa a ser montar uma frase. Onde: páginas de contato e de inscrição.

Passe por cima — acelera. Onde: selos de canto, áreas de "carimbo de aprovação".

Onde: experiências premium e imersivas. Usado com medida, deixa um site "tocável".

Um único modelo 3D, cores infinitas. Pense no que isso significa num catálogo de 234 cores. Onde: os heros das páginas de produto.

A inscrição é dobrada como textura na placa de vídeo. Onde: seções de manifesto, slogans de marca.

As gotas se fundem como líquido de verdade quando se tocam — tudo matemática. Onde: aberturas premium no estilo FarbeLab.

Rolagem = rolo de filme. A cena gruda na tela e a câmera avança conforme você avança. Onde: narrativas da jornada de uma marca.

Um mapa de vento invisível arrasta as partículas; seus rastros viram tinta. Onde: fundos vivos, páginas 404.

Uma esfera de vidro com gotas coloridas flutuando dentro que refrata a luz de verdade. Onde: apresentações de produto premium (FarbeLab).

Um organismo 3D cuja superfície ondula sem parar e que muda de forma ao toque. Onde: o objeto central de um hero, um mascote.

Uma simulação de tecido real com 442 pontos: gravidade, vento e toque. Onde: cenas de etiqueta e bandeira, lançamentos.

Duas imagens escorrem uma dentro da outra por um mapa de ruído. Onde: hovers de galeria, transições de coleção.

Não é imitação, é física: as equações de fluidos são resolvidas a cada quadro (difusão, pressão, vorticidade). Onde: aberturas de hero — esta é a nossa assinatura.

A posição das partículas é guardada numa textura e atualizada na placa de vídeo. No E23 eram 9.000 — aqui são 262.144.

Para cada pixel é traçado um raio de luz: reflexão, refração, sombra suave. Onde: cenas de produto premium.

Bloom, desvio cromático da lente, vinheta, grão de filme. Esta camada eleva um degrau cada cena do catálogo.

Duas cenas 3D distintas, uma dentro da outra. O E27 era uma imitação disto; esta é a de verdade (stencil buffer).

Uma fotografia + um mapa de profundidade = a ilusão do 3D. Onde: fotos de ateliê, fotos de produto.

72 quadros preparados de antemão e amarrados à rolagem — como um vídeo, mas com o controle inteiro do seu lado.

Pede permissão de microfone; nada é gravado. Onde: telas de estande de feira, paredes de evento.

A inscrição vira milhares de cubos sacudidos pela física e depois se recompõe. Onde: momentos de lançamento, 404.

Dez mil cópias do mesmo objeto desenhadas de uma só vez. Onde: narrativas de capacidade e escala, a sensação de uma fábrica enorme.

Não é superfície, é volume: o raio vai recolhendo luz passo a passo enquanto atravessa a nuvem. A técnica mais cara e mais cinematográfica.

Matemática real do ebru: cada gota empurra em anéis todo o desenho que está embaixo; o pente varre seguindo uma onda senoidal. Ninguém mais no mundo tem isso — um efeito assinatura saído da nossa própria cultura.

A física das cores de uma bolha de sabão (interferência em filme fino). O equivalente digital da tinta perolada da Metakrlyic.

Textura de jornal e serigrafia. Onde: marcas com clima retrô-impresso, páginas de cartaz.

Uma textura de tinta seca e envelhecimento gerada com células de Voronoi. Onde: séries vintage, narrativas de restauro.

Um fluxo suave e de baixo contraste. Onde: seções de texto longo, páginas de contato, abaixo do hero.

Duas substâncias químicas que se difundem e reagem (Gray-Scott). Listras de zebra, coral, uma mancha de tinta — tudo da mesma equação.

Na tela azul + amarelo = cinza. Na paleta azul + amarelo = verde. A diferença vem da luz ser absorvida e espalhada dentro do grão de pigmento; a indústria de tintas calcula isso desde 1931 com a equação de Kubelka-Munk. Essa equação roda na metade direita. Para uma marca de tintas não existe efeito assinatura mais certo do que este.

A assinatura da aquarela, o anel escuro da borda não é desenhado aqui — forma-se sozinho, porque a água evapora e o pigmento é arrastado para a borda e fica ali. A textura do papel também entra na conta: o pigmento se acumula nas depressões (granulação).

De cada pixel é lançado um raio na cena, e os raios ricocheteiam nas superfícies tentando chegar à luz. A esfera branca ao lado da parede vermelha puxa para o vermelho sozinho — isto não foi pintado, aconteceu porque a luz realmente ricocheteou dali. A versão de navegador do método usado nos efeitos de cinema.

Uma pincelada não é um "carimbo". Cada uma das 420 cerdas se comporta como uma mola própria: se você aperta, ela se abre; se gira, ela fica para trás; se levanta, ela se recompõe. O traço nasce onde as cerdas tocam o papel — por isso nenhuma pincelada é igual à outra.

Aquela rede luminosa e trêmula que um pote de água projeta no chão. A luz se refrata na superfície do líquido e se junta em certos pontos; dessa concentração nasce o brilho. A inclinação da superfície é calculada a cada quadro.

à simulação de fluido obstáculo foram definidos: as letras. A tinta bate nelas, contorna suas bordas e deixa redemoinhos atrás. O nome da sua marca não é o cenário da cena, é parte da física.

Duas tintas à luz do dia exatamente iguais (ΔE = 0,0). Sob a lâmpada elas se separam, e na fluorescente a diferença ΔE = 19— ou seja, evidente. O setor tem um nome para isso: desencontro metamérico — o motivo da reclamação "na loja ficou bom, em casa não". Aqui são usadas funções reais de correspondência de cor CIE e espectros reais de fontes de luz; as curvas de refletância de dois pigmentos são resolvidas de modo que sejam produzidos.

Aqui a tinta não é cor, é volume. Cada pincelada deixa uma altura; a luz se refrata conforme a inclinação dessa superfície e na borda da espátula forma-se uma crista. O relevo de um quadro a óleo, aquele que se vê olhando de lado.

Não sobre uma grade, mas 780 partículas distintas com o fluido resolvido em cima. Cada partícula mede a densidade das vizinhas e empurra ou puxa; daí nasce a tensão superficial. As gotas se fundem e se rompem de verdade — não são desenhadas.

A matemática comum à geada no vidro, a um cristal de cobre e ao raio. Partículas que vagam ao acaso congelam no primeiro ponto em que tocam o aglomerado — por isso as pontas crescem e o interior fica faminto. Ninguém desenha o padrão; ele aparece sozinho.

O raio entra no vidro e sai pela face de trás — e cada cor em outro ângulo é refratado. É daí que vem a franja de arco-íris nas bordas; o mesmo fenômeno do prisma separando a luz. A forma da garrafa também está definida como uma única superfície matemática, sem arquivo de modelo.

Dê uma cor, e com quais pigmentos em que proporção deve ser misturado. O que você vê na tela é exatamente o trabalho do colorímetro de um laboratório de tintas: Kubelka-Munk calcula a cor da mistura e as proporções são corrigidas passo a passo até ΔE diminuir. Os números correm ao vivo — a solução é encontrada na hora, não lida de uma tabela pronta.

O método com que a indústria de tintas mede o poder de cobertura: puxa-se sobre uma carta preto e branco um filme de espessura crescente e olha-se a razão entre os valores lidos sobre o fundo preto e o branco. A espessura em que a razão de contraste passa de 98% é o ponto de "cobertura total". Aqui essa equação (Kubelka-Munk sobre fundo) é resolvida pixel a pixel.

Todas as cores que o olho humano consegue ver cabem dentro desta área em forma de ferradura. O triângulo é a parte que a sua tela consegue mostrar. Toda cor fora do triângulo está mentindo na sua tela — alguns pigmentos reais ficam exatamente ali. A forma mais honesta de dizer a um cliente "a cor que você vê na tela não é a coisa em si".

"Ao secar, a cor clareou" é a reclamação mais frequente e não é defeito da tinta: enquanto está úmida, água e meio preenchem o espaço entre os grãos de pigmento, a luz se espalha menos e a cor escura e saturada aparece. Saindo a água, entra o ar, o espalhamento aumenta e a cor clareia e fica fosca. Aqui o coeficiente de espalhamento cresce com o tempo, o resto é trabalho da equação.

Uma tecelagem não é um desenho, é uma uma instrução: qual fio de urdume passa por cima de qual trama. Aqui rodam padrões de tecelagem reais — tafetá, sarja, cetim, espinha de peixe. Se o padrão muda, muda o tecido; se as cores dos fios mudam, muda o desenho. É exatamente o núcleo de qualquer software CAD têxtil.

As sombras não foram postas "para ficar bonito": para a latitude, dia e hora calculam-se a altura e o azimute do sol e a luz é posta ali. O mesmo cálculo que os escritórios de arquitetura fazem para estudos de sombra e de insolação sobre o lote vizinho.

Onde quer que a carga caia, a força em cada barra resolvido na hora: o vermelho é tração, o azul compressão, a espessura a intensidade da força. Por trás monta-se uma matriz de rigidez real e resolve-se o sistema de equações — aplicação direta da disciplina de estática. A linha transparente mostra a deformação, exagerada.

Isto não é uma animação: uma pequena rede neural artificial está sendo treinada agora, no seu navegador. A área colorida é a decisão do modelo; a cada quadro roda a retropropagação, o erro cai e a fronteira se curva até aprender a separar as duas nuvens. O caminho mais curto para uma marca de software ou tecnologia dizer "a gente faz isso de verdade".

Centenas de corpos espalhados no vazio só de um único ponto de vista se alinham e formam a inscrição. A anamorfose descoberta no Renascimento; cada corpo foi posto a uma profundidade diferente ao longo do raio que passa por aquela única câmera. Feito sob medida para arte, galeria e espaço experiencial.

60 paradas, um veículo, a rota mais curta. Há possibilidades demais para um computador testar na força bruta (para 60 paradas, mais do que o número de átomos do universo), por isso em processo de melhoria: procuram-se dois trechos que se cruzam e invertem-se, e a rota vai encurtando. A conta de combustível de qualquer empresa que entrega cabe nesse cálculo.

A roda do ano: a janela de colheita de cada produto, por fora a verdadeira curva de duração do dia junto com ela. A duração do dia é calculada pela latitude — não é uma onda decorativa, é o próprio calendário da agricultura. Responde de relance à pergunta "o que está fresco agora?".

Na ciência dos alimentos, a A regra Q10: 10 °C a mais multiplicam a velocidade de deterioração. Essa equação roda aqui — mude a temperatura e veja a validade derreter. Embaixo está o cálculo de "o que se perde se a cadeia de frio quebrar por um dia". A forma mais convincente de explicar a um cliente as condições de armazenamento.

Azeite, mel, melado — cada um escorre diferente e o cliente quer ver isso em vídeo. Quando a gota se solta pela lei de Tate é calculado: a gota se solta no instante em que seu peso vence a tensão superficial. Um líquido viscoso deixa um fio atrás, um aquoso não.

Usado em azeite, café, mel e vinho painel sensorial exibido. Quando os perfis de dois produtos se sobrepõem, vê-se onde coincidem e onde se separam. Mostrar em vez de dizer "o nosso é mais frutado" — é a única coisa que explica a diferença de preço.

O veio não é um arquivo de textura, a geometria da tora. Aqui os anéis anuais são definidos em três dimensões e cruzados com o plano em que a tábua foi serrada: cortada no cerne dá linhas retas, cortada na tangente dá arcos de catedral — a diferença real que todo marceneiro conhece. Se a espécie muda, mudam também o espaçamento dos anéis, a cor e a textura dos poros.

A mesma madeira, três vernizes diferentes. A diferença não está na cor na distribuição do reflexo: uma superfície fosca espalha a luz amplamente, uma brilhante a junta estreita e nítida. O cliente só consegue responder a "fosco ou brilhante" quando vê os dois lado a lado.

A frase mais ouvida no e-commerce de móveis: "não imaginei o tamanho". Mostrar o produto Na mesma cena que uma pessoa de 1,75 m e mostrá-lo na perspectiva certa acaba com esse problema. Ele encolhe ao se afastar e as medidas são escritas ao vivo.

No móvel em caixa, a maior parte da carga de devoluções e suporte vem da montagem. Mostrar como as peças se encaixam em três dimensões e passo a passo afeta diretamente a confiança antes da compra e o suporte depois. Exatamente a mesma coisa é usada no setor de máquinas e peças de reposição.