---
title: "Willemstagram"
date: 2025-08-11
language: pt
topics: ["art", "data", "design", "people", "programming", "work"]
source_url: https://willem.com/pt/2025-08-11_willemstagram/
---
# Willemstagram

*Painel de fotos 3D em flip-flap que mostra histórias*

> Na semana passada estive com um cliente a ver a nova página inicial do willem.com, onde uso uma narrativa para contar o que faço. Este cliente é um dos pensadores criativos e visionários mais brilhantes que conheço, e mesmo assim o meu texto parecia não lhe dizer nada. Ao pensar nisto, lembrei-me de uma lição importante de psicologia da universidade: eu precisava de algo diferente, algo não linear. Este artigo é sobre dar um murro visual!

## **Pensamento do hemisfério esquerdo versus direito**
Uma das coisas fixes na [minha formação](https://willem.com/en/about-me/education-certifications/) na Universidade de Amesterdão era termos aulas de várias faculdades, o que formava uma mistura interessante de ciência interdisciplinar. Um livro clássico que discutimos foi “[Mintzberg on Management](https://www.google.com/search?q=mintzberg+on+management+book)”, em que o autor explica porque é que pessoas diferentes preferem coisas diferentes, a dicotomia clássica que muitas vezes se simplifica como pensadores do hemisfério esquerdo versus direito:

- **O pensador linear (o hemisfério esquerdo)**: este é o estado natural de quem aprecia uma narrativa lógica que vai de A para B e para C. Pessoas típicas assim são contadores de histórias, arquitetos e programadores.
- **O pensador não linear (o hemisfério direito)**: este é o estado de quem não segue uma linha reta. Estas pessoas procuram impressões, ambientes e sensações emocionais. Pessoas típicas assim são os criativos, incluindo artistas e pensadores visionários.

A minha nova página inicial do willem.com funcionava bem para pensadores lineares como eu, porque a narrativa em texto serve o hemisfério esquerdo. Mas o meu design falhava para quem funciona melhor com impressões não lineares, cheias de ambiente. Eu precisava de algo que mostrasse os muitos elementos visuais de forma rica e dinâmica, viva e com uma boa dose de diversão interativa.

## **Painel Solari**
Há muitos anos conheci a minha mulher na Estação Central de Utrecht, mesmo debaixo do gigantesco painel de informação de partidas. O icónico painel azul de 7x4,20M, com cerca de 3000 quilos, tinha painéis mecânicos que faziam flip-flap e produziam um som inconfundível, que se ouvia mais ou menos de minuto a minuto no átrio central da estação. Este tipo de sinalética chama-se muitas vezes “painel Solari”, em honra da [Solari di Udine](https://en.wikipedia.org/wiki/Split-flap_display), a empresa italiana que produzia estes ícones. Hoje a estação de Utrecht tem ecrãs digitais, mas, se quiseres, ainda o podes ver no [Het Spoorwegmuseum](https://www.spoorwegmuseum.nl/). 

![O grande painel mecânico azul de partidas da Estação Central de Utrecht (foto: cc/maurits90)](https://willem.com/global/images/334ea770c6c7.webp)

Como apreciador de metáforas (dica de livro: [Metaphors we live by](https://duckduckgo.com/?t=ftsa&q=metaphors+we+live+by+book)), pensei que o painel Solari, com o seu “flip-flap”, seria uma forma deliciosa de deixar os visitantes do willem.com “partir” para vários “destinos” (as histórias) do site. Em vez de texto, escolhi de propósito usar as fotos e os elementos visuais dos artigos como portas de entrada para a secção de [reflexões](https://willem.com/en/insights/) do willem.com. Ao revelar destinos novos ao acaso, é perfeitamente não linear, e ao torná-lo interativo (com clique e toque) fica mais envolvente do que texto simples. Cada destino abre um “bilhete” que explica um pouco aquilo que estás a ver. Se gostares do que vês, podes carregar no botão grande para abrir a história mesmo na posição da imagem, que pode ser a meio de um artigo. As histórias abrem em novas janelas do navegador, para poderes voltar à “estação” e encontrar um novo destino.

![Esboço do conceito do Diário Visual: imagens em flip-flap com ligação direta a páginas do willem.com, como um painel Solari mecânico](https://willem.com/global/images/c32ce6e2d76f.webp)

## **Implementação: ThreeJS e API de imagens à medida**

Já antes tinha experimentado o motor gráfico 3D ThreeJS para visualizar dados de treino. É uma biblioteca que usa o elemento `canvas` do standard HTML5 para produzir gráficos gerados com computação espacial, uma forma elegante de dizer que permite desenhar coisas em três dimensões (x, y, z) em vez de duas, daí o nome. Oferece controlos de câmara, luz e nevoeiro e foi pensada para animações baseadas em posição e rotação simuladas. É muito fixe para brincar e bastante capaz. Vê estes dois artigos anteriores sobre as minhas experiências com ThreeJS:

Related posts:
- [Dados de treino em 3D](https://willem.com/pt/2025-03-10_dados-de-treino-em-3d/)
- [Vibe Coding](https://willem.com/pt/2025-04-15_vibe-coding/)

O minimalista que há em mim ponderou por instantes usar animações, transformações e transições CSS. Mas percebi que a perspetiva realista, em que os painéis mais afastados rodam de forma mais inclinada, e a aleatoriedade na escolha de novos elementos visuais me obrigariam a usar JavaScript de qualquer modo. Para tirar o máximo partido, quis integrá-lo mesmo na minha página inicial. Mas carregar um motor 3D completo não é coisa para levar de ânimo leve. Para minimizar o efeito no tempo de carregamento da página inicial, desenhei a coisa com cuidado para carregar de forma assíncrona e ser totalmente opcional (para quem tem o JS desativado). 

![O Diário Visual, apelidado de “Willemstagram”, em ação](https://willem.com/global/images/8a20e248d096.webp)

Para alimentar o “Diário Visual”, desenhei uma API à medida que serve imagens muito otimizadas, redimensionadas para 400x400px. Cada imagem tem um título localizado e uma ligação direta com uma âncora de hashtag (slug), que permite mergulhar nas histórias. Conto com a [minha própria plataforma lemmid](https://willem.com/en/work/lemmid/) para me dar a infraestrutura necessária para isto. Em segundo plano, um serviço `NodeJS` otimizado gera as imagens com `imagemagick`, `jpegoptim` e `pngquant`. Podes ver a API tu mesmo em https://willem.com/en/images.json, que devolve um array JSON como este:

```
[
  {
    "url": "/en/2020-07-30_upgrading-a-27-inch-imac-5k-to-14-terabytes/i_15_An-average-fly-is-bigger-than-most-screws-inside-the-iMac_400x400px.jpg",
    "title": "An average fly is bigger than most screws inside the iMac",
    "target": "/en/2020-07-30_upgrading-a-27-inch-imac-5k-to-14-terabytes/#an-average-fly-is-bigger-than-most-screws-inside-the-imac"
  },
  {
    "url": "/en/2019-06-25_assembling-a-cargo-bike/i_11_Using-filler-plates-to-make-up-for-Chinese-Precision_400x400px.jpg",
    "title": "Using filler plates to make up for Chinese Precision",
    "target": "/en/2019-06-25_assembling-a-cargo-bike/#using-filler-plates-to-make-up-for-chinese-precision"
  },
  {
    "url": "/en/2021-01-14_abandoning-my-own-tablet-os/i_05_You-know-you-re-digital-pen-is-lacking-trust-if-you-grab-for-old-fashioned-pencil-and-paper_400x400px.jpg",
    "title": "You know you're digital pen is lacking trust if you grab for old fashioned pencil and paper...",
    "target": "/en/2021-01-14_abandoning-my-own-tablet-os/#you-know-you-re-digital-pen-is-lacking-trust-if-you-grab-for-old-fashioned-pencil-and-paper"
  },
  ...
]
```

Para evitar que a coisa seja apenas um gerador aleatório de ligações, pus de propósito um pequeno popup que aparece quando tocas ou clicas em qualquer imagem. Uso as legendas das imagens que o meu [gestor de conteúdos lemmid](https://willem.com/en/work/lemmid/) mantém para revelar um pouco de informação, que te ajuda a decidir se vale a pena abrir a história. 

![O popup permite-te decidir entre mergulhar na história ou continuar a explorar outras imagens](https://willem.com/global/images/837bfdd7ff30.webp)

## **Publicar o código-fonte (AGPL)**

Embora esteja muito contente com o funcionamento do Diário Visual no meu site, [acredito mesmo em partilhar](https://willem.com/en/open-source/). É provável que tenhas uma ideia ainda melhor para um flip-flap à Solari. Por isso publico a coisa toda como software livre sob a GNU Affero General Public License (AGPL). Isso significa que a podes usar, modificar e distribuir tu mesmo. Encontras o código-fonte, o readme e ficheiros de exemplo em https://source.willem.com/visual-journal/

## **Conclusão**

A julgar pela curiosidade que desperta nos meus filhos, estou muito contente com o diário visual, a que chamei a brincar Willemstagram. Mas, ao contrário do Instagram da Meta, este serve apenas imagens para contar _as minhas_ histórias, e o código-fonte é livre. Podes vê-lo na página inicial ou carregando no botão em baixo. Que destino vais escolher?

[action1]

[Video (mp4)](https://willem.com/global/video/179d4e3b4ce0.mp4)

*Isto foi escrito à mão. Numa era de texto gerado por IA, esta é a minha forma simples de mostrar o pensamento e o esforço humanos por trás destas palavras. Para quem tiver curiosidade, o manuscrito original (em inglês) está disponível para transferência.* 

[download1]