Paisagens Submersas — 3 Direções Criativas
Junho 2026

Exploração criativa · novo site · substitui ps.joaopinheiro.pt

Três Direçõesa água nunca é azul — é verde

S—01 · Como usar este hub

Explorámos três direções criativas completas para a nova homepage — cada uma é um protótipo real a funcionar, não um moodboard. Abre cada direção em ecrã inteiro, segue o guia «como avaliar» e anota o que gostas (e o que não gostas) de cada uma. A direção final não tem de ser um pacote fechado: afinamos a partir das tuas notas.

S—02 · Anatomia da marca

A marca primeiro

Símbolo490 × 433
Nunca sólido — sempre líquido
WordmarkCondensada pesada · 2 linhas
"Paisagens que respiram"
N—01

O símbolo é o fluxo

As partículas que ficam à superfície da água dos rios — basta um sopro para revelar o flow. Tem um P e um S escondidos, mas o que importa é o movimento: anima-se como líquido, nunca como peças sólidas.

N—02

Preto e branco, cor só na fotografia

A UI é estritamente monocromática — fundo branco, tipografia e botões a preto. Toda a cor entra pelas imagens e pelas cenas imersivas. E a água nunca é azul: é verde, do claro ao quase preto.

N—03

Tipografia gigante

Títulos a dois terços do ecrã, com carácter, sempre vivos — entram com o tracking aberto e fecham, como se respirassem. Display e body distintos em cada direção.

S—03 · As três direções

As direções

Direção 01galeria-viva.htmlFraunces + Archivo

Galeria Viva

O site como museu de arte viva — cada aquário é uma obra com nome de rio português

Montagem nº 01 — Sala de entrada
Conceito

A homepage é uma exposição permanente: o João Pinheiro é o curador e cada montagem é uma obra catalogada com legenda de museu («Montagem nº 04 — Rio Este»). Brancos generosos, hairlines, Fraunces editorial gigante com itálicos ópticos, e um percurso por salas — entrada, nota curatorial, coleção em scroll horizontal, sala escura do manifesto, o curador e as quatro alas. Tudo respira devagar: o símbolo flutua, as imagens têm parallax, os títulos fecham o tracking como se estivessem vivos.

Tipografia
Fraunces — display, itálicos ópticos 9..144 Archivo — grotesk de apoio, legendas-museu
Ficheirogaleria-viva.html
Destaques
  • Galeria horizontal pinada (GSAP ScrollTrigger) com 6 obras baptizadas com rios portugueses, números-fantasma, contador 01—06 e parallax interno por obra
  • Hero editorial: «Paisagens vivas» a 14vw com reveal letra-a-letra + tracking que fecha, símbolo a respirar como se flutuasse, anotação itálica «a água nunca é azul — é verde» sobre a foto
  • Sala escura: manifesto + quote Amano com reveal palavra-a-palavra em scrub, nav e pill invertem automaticamente para branco
  • Medidor de profundidade fixo (Profundidade −0,00 m → −2,40 m) que desce com o scroll — o site inteiro como mergulho
  • Footer-tabuleta: wordmark SVG gigante a toda a largura com reveal de clip, alas numeradas com ghost numbers e legendas científicas de museu
  • Rigor técnico: Lenis smooth scroll, SRI nos CDNs, canvas de poeira com DPR cap 2 + IntersectionObserver, prefers-reduced-motion com fallback de scroll nativo na galeria, zero erros de consola (verificado em desktop, 375px e reduced-motion)
Como avaliar
  1. Carrega a página e espera a entrada orquestrada do hero; repara no símbolo a flutuar e na poeira na luz; depois desce devagar até à coleção
  2. Na «Sala 02 — A coleção», continua a fazer scroll vertical: a sala estende-se para a direita (peça de bravura) — segue o contador 01—06 e as legendas com nomes de rios
  3. Continua até à sala escura: o manifesto acende-se palavra a palavra e toda a UI inverte para branco; observa o medidor «Profundidade −x,xx m» no canto inferior direito
  4. Faz hover nas 4 alas (imagens escalam, setas deslizam), clica nos links da nav para navegar com smooth scroll, e chega ao fim para ver o wordmark gigante a revelar-se como tabuleta
Preview ao vivo — 50%sem interação · abre para explorar

Preview ao vivo disponível em desktop — no telemóvel abre a direção diretamente no botão abaixo

Abrir direção — Galeria Viva →
Direção 02mergulho.htmlAnton + Instrument Sans + IBM Plex Mono

O Mergulho

A homepage é o rio: do sopro na superfície ao fundo de gravilha, sem nunca sair do scroll

Conceito

Scrollytelling contínuo que simula mergulhar num troço de rio: o símbolo do logo nasce como milhares de partículas na superfície (sopram-se com o rato e refazem-se em fluxo líquido), e a descida atravessa 7 fases com a água a escurecer de branco a quase preto — sempre verde, nunca azul. Um profundímetro lateral em mono marca de 0,00 m a −2,40 m, um cardume de tétras néon em boids reage ao rato, bolhas de fotossíntese sobem, e 4 pontos pulsantes abrem teasers de Loja, Curso, Workshops e Montagens. No fim, regresso ao branco eficiente: manifesto revelado palavra a palavra, grelha assimétrica das quatro páginas, marquee de parceiros e footer com o wordmark gigante.

Tipografia
Anton — display Instrument Sans — body IBM Plex Mono — instrumentos de mergulho
Ficheiromergulho.html
Destaques
  • Símbolo do logo como ~2000 partículas em canvas: forma-se ao carregar, dispersa-se com o rato/clique e ao primeiro scroll (o «sopro» que revela o fluxo), e volta a refazer-se em movimento líquido
  • Descida scroll-driven (GSAP ScrollTrigger, scrub): fundo branco → verde-claro → verde-escuro → quase preto, com god rays brancos em CSS, neve de rio que acelera com a velocidade do scroll, e grain subtil
  • Cardume de 64 tétras néon (boids em canvas, secção pinned) com risca cyan e vermelha — a única exceção de cor viva — que fogem suavemente do rato
  • Profundímetro fixo em mono (0,00 m → −2,40 m) com régua de ticks e marcador, estilo instrumento de mergulho; nav, pill e gauge invertem de preto para branco com a profundidade
  • 4 dots pulsantes clicáveis durante a descida que abrem overlays de teaser (foto real + copy + CTA) com focus trap, Esc e backdrop blur
  • Performance e a11y: DPR cap 2, todos os canvas pausam fora do viewport (IntersectionObserver), prefers-reduced-motion com versão estática completa, alts PT-PT, focus-visible, zero erros de consola
Como avaliar
  1. No hero, passa o rato sobre o símbolo (ou clica nele) para o «soprar» e vê-lo refazer-se; depois começa a scrollar — o primeiro scroll também sopra as partículas
  2. Desce devagar e observa: a água a escurecer (nunca azul), os raios de luz a desaparecer com a profundidade, o profundímetro à direita a contar até −2,40 m, e a neve do rio a acelerar quando scrollas rápido
  3. Na fase «O cardume» (pinned), mexe o rato pelo ecrã — os néones fogem em grupo; clica nos 4 dots pulsantes ao longo da descida para abrir os teasers (fecha com Esc ou no ×)
  4. No fundo, clica «Começa a tua paisagem» para subir aos Quatro Caminhos; relê o manifesto a meio-scroll para ver o reveal palavra a palavra; testa também a 375px e com prefers-reduced-motion ativo
Preview ao vivo — 50%sem interação · abre para explorar

Preview ao vivo disponível em desktop — no telemóvel abre a direção diretamente no botão abaixo

Abrir direção — O Mergulho →
Direção 03organismo.htmlAnton + Bricolage Grotesque + Space Mono

Organismo

O site não mostra um ecossistema — comporta-se como um: tipografia brutal que respira, logo que nunca solidifica

Conceito

A energia da natureza traduzida em tipografia cinética: preto/branco radical de estúdio, com o verde a irromper apenas pela fotografia. O símbolo da marca vive em estado líquido permanente (feTurbulence + feDisplacementMap a oscilar) e todos os títulos colossais nascem com tracking aberto que fecha — a regra do «Pinhas» transformada em sistema. Tudo reage ao rato, ao scroll e ao tempo: o site é um organismo.

Tipografia
Anton — display colossal, dialoga com a condensada do wordmark Bricolage Grotesque — body orgânico Space Mono — etiquetas científicas SPM
Ficheiroorganismo.html
Destaques
  • Logo líquido herói: símbolo SVG gigante com turbulência animada que se agita quando o rato toca no título MERGULHA — nunca é sólido
  • Kinetic type system: todos os títulos gigantes entram com tracking muito aberto a fechar + palavras a subir de máscaras, via GSAP/ScrollTrigger
  • Grelha que respira: 4 painéis Loja/Curso/Workshops/Montagens onde o hover expande a célula (flex-grow), acende a foto a cores e faz o título crescer
  • Secção ESPÉCIMES: hardscape como catálogo científico numerado (SPM-001 MATSUNOKI…) com células que acendem a preto e fotos grayscale→cor
  • Dois marquees infinitos a velocidades diferentes (um invertido, em outline) separados pelo símbolo da marca; cursor-bolha que vira O₂ sobre imagens; botões magnéticos
  • Profundímetro fixo que desce de −0,00 m a −2,40 m com o scroll, citação Amano com palavras que flutuam sobre o paludário Synergy, e footer com wordmark gigante cortado
Como avaliar
  1. No hero, passa o rato sobre MERGULHA e sobre o logo — a turbulência do símbolo intensifica-se como água soprada; repara no tracking do título a fechar à entrada
  2. Faz scroll até O ECOSSISTEMA e percorre os 4 painéis com o rato — cada célula respira, expande e revela a foto a cores com CTA; repara no O₂ do cursor sobre as imagens
  3. Continua até ESPÉCIMES e passa o rato pelas células SPM — acendem a preto com a foto a ganhar cor; experimenta o botão magnético «Explorar a loja»
  4. No fim, observa o profundímetro no canto inferior direito a chegar a −2,40 m e o wordmark gigante cortado no footer; testa também a 375px (tudo empilha sem partir)
Preview ao vivo — 50%sem interação · abre para explorar

Preview ao vivo disponível em desktop — no telemóvel abre a direção diretamente no botão abaixo

Abrir direção — Organismo →
S—04 · Mix & match — como dar feedback

Mix & Match

O feedback não tem de escolher um pacote fechado. Podes gostar da descida do rio da 02 com a tipografia editorial da 01, ou querer o organismo reativo da 03 com a galeria de obras da 01. Diz o que cada direção te faz sentir, o que abrias outra vez, o que cortavas sem pena — e a direção final monta-se a partir daí. A checklist abaixo é o mapa das decisões: clica para marcar as tuas inclinações (fica guardado neste browser).

Q1

Direção base

o esqueleto do site final

Q2

Logo animado

como vive o símbolo

Q3

Tipografia

a voz visual dos títulos

Q4

Peça de bravura

o momento-assinatura da homepage

Q5

Cardume de néones

boids reativos ao rato

Q6

Profundímetro

está nas três — em que registo

Q7

Descida ao escuro

quanto preto na narrativa

Q8

Micro-interações

cursor, hovers, botões

Anota também o que NÃO funciona — cortar é tão útil como escolher