Construindo uma coleção interativa de selos digitais com shaders, cartões postais e inspeção divertida | Codrops

Os selos são peças de arte em miniatura que contam histórias; eles mostram lugares, pessoas e momentos através da montagem meticulosa de tipografia, ilustração e fotografia, tudo dentro de um formato bastante restrito. Queríamos homenagear a arte de criar e colecionar selos (filatelia), trazendo selos online para um novo público desfrutar.

Quando começamos a construir o site, sabíamos que não queríamos uma galeria de imagens normal. O projeto foi inspirado em um álbum de selos real, então o site precisava manter um pouco desse sentimento também: calmo, tátil e feito para inspeção.

O fluxo principal é simples. Navegue por um campo solto de carimbos, selecione um para focalizá-lo e inspecione-o com uma lupa. Você também pode saber mais sobre cada selo e, quando terminar, pode até nos enviar uma mensagem em forma de cartão postal.

Este artigo é um estudo de caso de como o fizemos: a história por trás do projeto, o processo de design, as escolhas técnicas e algumas das interações que dão caráter ao site.

Como a coleção começou

por Marijana Pavlinić 

A coleção começou antes de existir qualquer site. Durante os bloqueios, eu estava procurando um projeto paralelo pessoal conveniente para me ajudar a praticar o desenho digital. Queria um projeto com uma ideia clara, mas com espaço suficiente para explorar diferentes estilos.

Na época, encontrei um álbum de selos que meu avô havia transmitido à minha família, e os selos dentro dele pareciam a fonte perfeita de inspiração. Sua coleção estava repleta de composições, padrões e tipografias inesperadas, então comecei a inspecioná-los e recriá-los como desenhos vetoriais, não como cópias exatas, mas como reinterpretações. Os primeiros eram monoline e, com o tempo, introduzi texturas e layouts tipográficos mais complexos à medida que aprendia novos softwares.

À medida que a coleção crescia, aprendi muito sobre desenho digital e filatelia. Tive a ideia de transformar isso em algo mais, mas ficou assim por um tempo.

Quase cinco anos depois, voltei a trabalhar com meu parceiro e começamos a construir a experiência completa. O desafio não era como mostrar os selos recriados, mas como preservar o sentimento do álbum original.

• Como mostramos a relação entre os selos originais e as recriações?
• Como podemos ter certeza de que estamos destacando o carimbo original também?
• Como podemos fazer com que pareça arquivístico, divertido e exploratório?

Esse se tornou nosso filtro: parece parte de um álbum de selos ou apenas um site mostrando imagens?

As principais interações

A maior parte do nosso tempo foi gasto em duas interações específicas: a lupa de vidro e o cartão postal de feedback. Todo o portfólio é open source no GitHub , então vamos manter isso focado apenas nas ideias principais.

Construindo a lupa

Assim que um carimbo for selecionado, a lupa ficará disponível. É aqui que a experiência muda da navegação para a inspeção.

Um efeito de zoom normal teria funcionado, mas parecia muito plano para este projeto. Queríamos que parecesse mais um objeto real colocado em cima do carimbo: uma pequena ferramenta de vidro com moldura, distorção de borda e controle de zoom.

A lupa é composta aproximadamente da seguinte forma:

<Loupe>
  <Lens>
    <Canvas>
      <LensScene>
        <ScreenQuad>
          <lensMaterial />
        </ScreenQuad>
      </LensScene>
    </Canvas>
  </Lens>
  <Dial>
    <input type="range" />
    <svg />
  </Dial>
</Loupe>

Reconstruindo a cena

A lupa não amplia a imagem original diretamente e não captura o DOM ao vivo.

Em vez disso, ele reconstrói a cena focada em uma tela fora da tela. Ele desenha a mesma grade de fundo, carrega a imagem maior do carimbo quando disponível, adiciona a sombra e renderiza o carimbo em foco no centro. Usar imagens menores para os carimbos arrastáveis ​​melhorou o desempenho, enquanto usar a imagem maior apenas para a lupa nos permitiu adicionar mais detalhes à visualização ampliada, como a textura da granulação do papel.

Essa tela é então passada para o shader de lente como uma textura. Dessa forma, a lupa amplia a cena composta do carimbo, em vez de apenas o arquivo de imagem original.

Criando o efeito de vidro

O shader mostra a textura de maneira diferente em toda a lente.

O centro permanece mais claro, enquanto as bordas ficam mais deformadas. Os canais vermelho, verde e azul são amostrados com deslocamentos ligeiramente diferentes, o que cria um efeito sutil de aberração cromática ao redor da borda.

Essa separação de cores, junto com o sombreamento da borda e os realces, fazem com que a lupa pareça mais com vidro e menos com um corte circular.

O shader não está tentando ser fisicamente preciso. Ele só precisa parecer confiável em movimento, especialmente ao redor da borda da lente.

Interação e acessibilidade

O arrasto é feito com um controlador de arrasto de movimento. À medida que a lupa se move, sua posição central é convertida em coordenadas locais e passada ao sombreador como uniformes. O shader usa essa posição para determinar qual parte da textura da tela deve aparecer sob a lente. Também pode ser movido com o teclado. As teclas de seta movem-no ao redor do carimbo selecionado e segurar Shift move-o mais rápido.

O quadro visual é um SVG. Ele dá à lupa seu formato, marcas de borda, destaques, inscrição e pequenos detalhes do mostrador.

O botão de zoom é apoiado por um elemento, proporcionando um comportamento nativo do teclado.

A acessibilidade era importante para nós porque a lupa não é apenas um efeito visual; faz parte da maneira como você inspeciona o selo.

Transformando feedback em um cartão postal

A caixa de diálogo de feedback começou com uma ideia simples: se o projeto é sobre selos, o feedback deve parecer algo que você envia de volta.

O postal tem dois lados. A frente apresenta uma ilustração personalizada e o verso contém o formulário. Você o vira para escrever um feedback, como se estivesse virando um cartão postal real. Uma ideia inicial era usar o selo atualmente selecionado no formulário, mas depois Marijana criou um selo separado para o cartão postal, apresentando nós dois e inspirado no primeiro selo de todos os tempos, o Penny Black .

Imaginamos a pessoa escrevendo o feedback e tentamos capturá-la no momento em que o escrevemos. É por isso que a ilustração muda de acordo com o tamanho da tela: no celular, a pessoa está segurando um telefone; na área de trabalho, eles estão digitando em um teclado.

O cartão postal é construído como uma caixa de diálogo Radix acessível. A ilustração personalizada, a animação invertida e a transição do sombreador ficam no topo dessa base. O componente é composto aproximadamente da seguinte forma:

<GenieDialog>
  <GenieDialogOverlay>
    <GenieBackdrop />
  </GenieDialogOverlay>
  <GenieDialogContent>
    <FlipCard>
      <FlipCardFront>
        <Image />
      </FlipCardFront>
      <FlipCardBack>
        <FeedbackForm/>
      </FlipCardBack>
    </FlipCard>
      {...}
  </GenieDialogContent>
  <GenieDialogTrigger />
</GenieDialog>

Dessa forma, a caixa de diálogo ainda mantém os recursos de acessibilidade esperados: gerenciamento de foco, suporte de teclado e escape para fechar. A camada visual pode ser divertida, mas a interação subjacente permanece familiar.

Construindo o efeito gênio

Não escolhemos o efeito gênio porque estava diretamente relacionado aos selos. Queríamos experimentar principalmente porque era divertido. Mas acabou se encaixando perfeitamente no projeto: o cartão postal parece um pequeno objeto de papel sendo retirado da página, preenchido e enviado de volta.

O detalhe técnico importante é que o diálogo real não está sendo dobrado no DOM. Em vez disso, a animação usa uma camada de sombreamento temporária.

Quando a caixa de diálogo é aberta, o cartão postal real é montado, mas mantido oculto. Capturamos o lado visível do cartão postal com snapDOM, desenhamos essa captura em uma tela de sobreposição, transformamos em uma textura WebGL e animamos essa textura com o shader. Quando a animação termina, ocultamos a camada de shader e revelamos o diálogo real.

Ao fechar, fazemos o inverso. Capturamos o lado atual do cartão postal, ocultamos a caixa de diálogo real, animamos a textura do shader e desmontamos a caixa de diálogo.

Isso também significa que a animação de fechamento sempre usa o estado atual. Se o visitante estiver visualizando o lado da ilustração, esse lado será capturado. Se eles virarem para o lado do formulário, o lado do formulário será capturado.

Detalhes que fizeram com que parecesse um álbum

Depois que as principais interações funcionaram, foi hora de se preocupar com os detalhes.

As guias da coleção parecem divisórias de fichário. Os metadados são tratados como uma ficha de catálogo, listando o país, data de emissão, códigos de catálogo, designer original do selo e selo de referência. Ele usa uma fonte monoespaçada e uma animação de texto estilo máquina de escrever, o que dá uma sensação de arquivo.

Existem pequenas referências de colecionadores por toda parte. Os elementos do lado direito lembram um álbum Leuchtturm usado por colecionadores de selos e moedas. A maioria dos controles de grade e estados vazios usam a caligrafia de Marijana, o que os faz parecer mais anotações em um álbum do que controles de interface de usuário padrão.

O cartão postal de feedback apresenta um selo inspirado no Penny Black. A lupa tem pequenas marcas nas bordas, destaques e uma inscrição, por isso parece mais um objeto do mesmo mundo do que um controle de zoom genérico. A paleta de cores e a textura granulada trabalham juntas para imitar a aparência do papel real.

Todos esses detalhes ajudam a tornar o conceito do álbum mais completo.

Mensagens enviadas de volta

Uma das partes mais legais do lançamento do site foi ler as mensagens que as pessoas enviaram através da caixa de diálogo do cartão postal.

Esse foi um doce lembrete de por que gostamos de compartilhar nosso trabalho online. Você divulga algo pessoal e, às vezes, isso atinge as pessoas de maneiras que você não esperava. Pode levar a mensagens gentis, conversas, novas conexões e até oportunidades.

Para um projeto sobre selos e cartões postais, isso me pareceu especialmente adequado. Fizemos uma pequena experiência digital sobre coleta e envio, e as pessoas devolveram algo.

Refletindo

O projeto se tornou um bom exemplo de por que gostamos de fazer projetos paralelos juntos.

Como estamos sentados um ao lado do outro, o ciclo (trocadilho intencional) entre design e desenvolvimento é muito curto. Uma ideia visual pode rapidamente se tornar um protótipo. Uma limitação técnica pode se tornar uma nova direção de design. Uma pequena interação pode ser testada, alterada e aprimorada sem transformá-la em uma grande transferência.

A parte mais divertida foi encontrar lugares onde o tema pudesse moldar a interação sem se tornar muito literal. Algumas ideias começam como experimentos, mas ainda precisam conquistar seu lugar. A lupa pertencia imediatamente porque combinava com o ato da inspeção. A animação do gênio começou como algo divertido de experimentar, mas depois de amarrada ao cartão postal, me senti muito mais em casa.

No final, a ilustração, a interação, a acessibilidade e os shaders tiveram que trabalhar juntos. Nenhum deles poderia realizar a experiência sozinho.