O Departamento está aberto: construindo o site PX PUSH | Codrops

PX PUSH é um estúdio de design por assinatura criado para Freedom Tech, o movimento de descentralização e economia aberta e um dos setores mais carentes do design. As equipes que estão sendo construídas aqui agem rapidamente e enviam em público, mas as agências e estúdios ao seu redor raramente falam essa linguagem. Queríamos que o site refletisse como o próprio negócio funciona: estruturado, responsável e um pouco inexpressivo sobre tudo isso.

A identidade PX PUSH baseia-se fortemente na cultura corporativa da década de 1980: linguagem burocrática, equipamento de escritório, embalagem de software e o tipo de organização que carimbaria um documento “aprovado para uso continuado” sem ironia. Deixamos que esse período governe todo o resto: o visitante olha o site através de um antigo monitor CRT convexo, um dispositivo simulado colocado permanentemente entre ele e o conteúdo, em cada página.

O design geral deve responder à mesma pergunta: como seria isso em uma tela de 1988?

Pilha

• Nuxt 3  — SSR/SSG, roteamento baseado em arquivo, o aplicativo inteiro.
• GSAP + ScrollTrigger  — conduz quase todos os estados de revelação, paralaxe e foco baseados em rolagem no site, conectados por meio de um pequeno sistema de atributos personalizados construído uma vez e reutilizado por efeito.
• Lenis  — rolagem suave, marcada manualmente em um único gancho tickLenis no relógio GSAP, mantendo a interpolação de rolagem e cada ScrollTrigger em um batimento cardíaco. Desativado totalmente no celular em favor da rolagem nativa.
• Three.js  — três versões separadas, cada uma resolvendo um problema diferente: um logotipo cromado extrudado, um herói de voo na nuvem, um disquete na seção de preços.
• @nuxt/content  — o Journal é executado em arquivos markdown, consultados no momento da criação e da solicitação, sem CMS externo.
• Splitting.js  — divide títulos e parágrafos em linhas e palavras no DOM, alimentando as animações de revelação.

A tela que você está olhando

Para criar o efeito CRT, mantive toda a simulação dentro de um único componente, Wrapper.vue, montado acima do restante do aplicativo. O efeito é construído a partir de uma pequena pilha de sobreposições de posição fixa. Uma barra de linha de varredura varre de baixo para cima em um loop de 8 segundos, um padrão de linha de repetição tênue que simula linhas de atualização CRT, uma camada backdrop-filter: blur suave para criar um efeito de brilho claro em vidro antigo e uma tela inteira crt.png sobreposição, esticada na janela de visualização para escurecer e distorcer as bordas como o vidro curvo de um monitor antigo. Uma textura final de ruído animado adiciona uma camada restrita de estática na tela.

Todo o efeito é construído a partir de CSS e duas imagens, executadas continuamente, em qualquer lugar, durante a vida útil da sessão:

###PRE_f4d8cddd3c3ac2bf155b25c7ac7c8597###

Usei as mesmas referências de período para orientar o resto do sistema de design. O azul primário, #03049C, veio da Tela Azul da Morte. O cinza, #BABABA, foi escolhido para se assemelhar ao invólucro de plástico dos antigos computadores Macintosh e eletrônicos de escritório.

Para o herói, eu queria algo que parecesse um papel de parede do sistema operacional ou uma tela de inicialização, que levasse à cena do WebGL de vôo na nuvem. O disquete na seção de preços leva literalmente a ideia de comprar um “pacote” de design, referenciando a forma como o software já foi adquirido fisicamente em um disquete.

Three.js: Três cenas, três trabalhos

Eu construí três cenas Three.js separadas, cada uma para uma parte diferente do site. O primeiro é o logotipo PX PUSH. Carreguei o SVG por meio de SVGLoader, extrudei-o em geometria, adicionei chanfros e apliquei um material metálico e transparente sob a iluminação ambiente PMREM para criar o acabamento cromado espelhado.

À medida que a página rola, o logotipo diminui e se move do centro do herói para o cabeçalho. Também uso a velocidade de rolagem para controlar sua rotação. Rolar mais rápido aumenta o giro, enquanto inverter a direção de rolagem inverte a rotação. Assim que o logotipo chega ao cabeçalho, ele se torna o link de volta para a página inicial.

###PRE_8b71ac946abfcaae2936eef72be0ccd6###

A segunda cena é o herói do vôo nas nuvens. Ele usa cerca de 8.000 planos de nuvem combinados em uma única geometria de buffer, com um shader GLSL personalizado para esmaecer suas bordas e adicionar neblina distante. Há um ovo de páscoa flutuante na cópia do herói: passar o mouse sobre a palavra “velocidade” aumenta o multiplicador de velocidade de vôo da câmera de 0.2 para 2, depois retorna volta ao normal ao sair do mouse. É um pequeno gesto – passe o mouse sobre a palavra “velocidade”, a cena fica mais rápida – e valeu a pena o rastreamento de estado extra só por isso.

A terceira cena é o disquete na seção de preços. Ele usa um modelo GLTF com seu mapa de brilho recolorido em tempo de execução em uma tela, em vez de incorporado em uma textura estática. O modelo gira e inclina com o progresso da rolagem, posicionado ao lado da seção que apresenta o pacote mensal de design.

Todas as três cenas se registram no mesmo sistema de ciclo de vida antes de começarem a carregar, que é para onde foi o esforço de engenharia.

Os fundadores giram como uma tela de seleção de personagem

Para a página Sobre, fotografamos cada fundador de quinze ângulos diferentes, estilizados como retratos corporativos dos anos 80. Conectei a sequência de imagens a um pequeno acumulador de rolagem. À medida que o visitante rola, a página avança ou retrocede nos quadros, fazendo com que cada pessoa pareça girar no lugar. O efeito funciona como uma antiga tela de seleção de personagens, mas usa fotografia real em vez de um modelo 3D.

###PRE_5251b797167d60f8b2e023ca6741e3af###

Cada perfil também carrega um código QR gerado em tempo de execução, links para o site de cada fundador – estilizado com os mesmos tokens cinza e azuis do resto da página.

A página espera pelas cenas

O principal problema de engenharia era coordenar três cenas WebGL com transições de página. Os ganchos de página do Nuxt podem me dizer quando um componente foi montado, mas não quando uma cena carregou seus ativos e renderizou seu primeiro quadro. Sem outra camada, a página poderia se revelar enquanto uma das cenas ainda estivesse em branco.

Eu construí um pequeno ciclo de vida —prepared → revealed → ready— como um sistema pub/sub simples usando eventos de janela. Qualquer componente pode registrar uma promessa através de registerPageTask(). A página espera até que todas as tarefas registradas sejam resolvidas ou até que um tempo limite seja atingido:

###PRE_2beddf429127336c6631906fd0474cf9###

O logotipo, o herói da nuvem e o disquete se registram quando são montados. Isso permite que a página aguarde todos os três sem conectar as cenas diretamente umas às outras.

Uma gaveta feita de papel

A Revista é uma lista de artigos. Em vez de abrir cada artigo como uma nova página convencional, deslizo uma gaveta sobre a lista e a estilizo como uma folha de papel de escritório. Uma textura repetitiva de grão de papel fica sobre uma textura de papelão. A borda esquerda usa uma máscara CSS ativa para criar uma linha vertical de furos transparentes:

###PRE_6aea6c5782f94b013e1f7c5a2eff1e9a###

A gaveta tem sua própria instância Lenis para rolagem interna. Ele aguarda o evento ready do ciclo de vida da página antes de abrir e só retorna a rota para /journal após a conclusão da transição de fechamento. Cada artigo ainda tem seu próprio slug, URL canônico, tags Open Graph e esquema BlogPosting. A gaveta altera a forma como o artigo aparece, mas não como ele é encaminhado ou indexado.

A página de erro

As páginas 404 e 500 recriam uma clássica Tela Azul da Morte usando um fundo azul em tela inteira, tipo monoespaçado e cópia baseada em telas de erro antigas do Windows. Uma linha abaixo diz “Pressione qualquer tecla para continuar _” – pressionar qualquer tecla limpa o erro e retorna o visitante à página inicial. Também explica a origem do azul primário do site sem adicionar outra seção ou cópia explicativa.

Os títulos do letreiro lidos uma palavra por vez

Cada título de seção principal usa o mesmo MarqueeText componente: um título grande repetido oito vezes e movendo-se continuamente pela tela. Dois efeitos baseados em rolagem percorrem o movimento constante. À medida que o título entra na janela de visualização, suas palavras aparecem individualmente em ordem aleatória, girando a partir de uma leve perspectiva 3D:

###PRE_99b991ea992857e8532be1217d6a48e9###

À medida que o mesmo título se aproxima do topo da janela de visualização, ele desaparece e fica desfocado:

###PRE_ae9fdda2df4d782efedb2a3dc0133182###

Conectei ambos os efeitos através de um pequeno sistema de atributos declarativos. Qualquer elemento pode receber um atributo como effect__titleRandom ou effect__fadeOut, e uma função encontra esses elementos e anexa a linha do tempo GSAP relevante após o carregamento de cada página.

A marca também usa effect__separatorIn para revelar suas regras superior e inferior com uma animação clip-path. O mesmo sistema lida com esmaecimento de texto, revelação de caracteres, paralaxe e outras transições no site.

Trazendo o Office dos anos 80 para o navegador

O objetivo não era recriar um site antigo, mas trazer a linguagem visual da cultura corporativa dos anos 80 para uma experiência digital moderna. As sobreposições CRT, o logotipo cromado, a cena de voo na nuvem, o disquete, a referência da Tela Azul da Morte e a gaveta de papel do Journal com furos, todos vêm do mesmo período, mas são construídos com Nuxt, Three.js e pilha GSAP atuais. Manter essas referências consistentes em todo o site ajudou os efeitos individuais a parecerem partes do mesmo sistema, em vez de ideias visuais separadas.

Créditos

Design, conceito e desenvolvimento —  Stud Creative House  ( stud.house ), dirigido por  Lewis Webber  ( wbbr.co ), em colaboração com o  PX PUSH  equipe.