Orbit poster editorial

Uma homepage que parece uma série de pôsteres de viagem impressos que ganharam vida. As seções alternam entre tinta escura e papel claro; o tipo é enorme e justo; um acento laranja carrega cada ação. O herói é um pequeno universo — um planeta, órbitas e cartões de papel — que se inclina na direção do mouse. Mais abaixo, as fotografias reais não são colocadas em caixas, mas impressas dentro dos pôsteres: em escala de cinza, multiplicadas sobre a cor do papel, sob letras gigantes, até que o visitante passe o mouse e a cor volte.

A compilação de referência é example/index.html (Atlasio, uma marca de viagem fictícia, em inglês). O código detalhado está em references/components.md; screenshots/ mostra cada seção no desktop e no celular.

1. Antes de projetar

Colete de 6 a 8 fotografias com pessoas em movimento (estações, quadros, estradas, janelas). Atribua a cada uma uma única função: uma pequena impressão no herói, uma por estado do pôster, uma por cartão de suporte. Nunca use a mesma foto duas vezes.
Verifique cada foto quanto a logotipos e telas de terceiros (publicidade de aeroporto, placas de marca) e corte-os.
Escolha quatro "possibilidades" para o alternador de pôsteres (formas de viajar, cidades, programas, estações) e quatro etapas para o console de rota. Cada uma precisa de um título de pôster de uma palavra, uma manchete de duas linhas, uma frase e um exemplo concreto ("Paris → Viena de trem noturno").
Comprima as fotos (veja §5). As sete fotos do exemplo têm ~750 KB no total.

2. DNA visual

Elemento	Regra
Tinta	`#101b22` página; texto papel `#edece4`; suave `#9ca6a8`; hairlines `#ffffff20`.
Papel	Seções claras `#edece4` com tons de pôster: sálvia `#cbd4b2`, argila `#d8c4b5`, névoa `#c0cfce`, lilás `#c9c2d3`; cartões de suporte `#dbe1cd` e `#e5d5c6`.
Acento	Um laranja `#ff6c3a` (planeta, discos solares, ticker, aba ativa, seção final). Um lima claro `#c6d9ab`/`#c2d3a3` apenas para o ponto final na manchete e o número da rota.
Tipo	DM Sans 800–1000 para destaque (espaçamento entre letras `-.065` a `-.09em`, altura de linha `.8–1`); 400–700 para texto corrido. IBM Plex Mono 6–9px maiúsculo para cada rótulo, coordenada e sobrancelha.
Manchete	Três linhas empilhadas: sólida, contornada (`-webkit-text-stroke:1px`), laranja; cada linha se move em uma quantidade diferente com o mouse.
Fotos	Dentro de pôsteres e cartões de suporte: `grayscale(1) contrast(1.1)` + `mix-blend-mode:multiply` em um cartão isolado com tom; hover restaura a cor e escala 1.04. Pequenas impressões (herói) permanecem em cor com uma borda de papel.
Formas	Cantos quadrados em todos os lugares, exceto planeta, discos solares, órbitas, pílulas no alternador.
Cursor	Um anel de 30px com um ponto, `mix-blend-mode:difference`; cresce sobre links. Botões magnéticos derivam em direção ao ponteiro.

3. Padrões de seção

Cabeçalho – wordmark, um link mono "edição", três âncoras, uma alternância de movimento (MOTION ON/OFF), um CTA com borda, hambúrguer abaixo de 650px. Uma barra de progresso de leitura laranja de 2px fica no topo da página.
Herói – linha mono meta, a manchete de três linhas, uma estrela asterisco, duas linhas de texto, um link sublinhado, impressão pequena. Direita: o universo orbital (planeta com anéis de latitude/longitude e uma palavra de duas letras, três órbitas, satélites, rótulos mono girados) e três cartões flutuantes: bilhete de destino (clique alterna as quatro possibilidades), cartão de carimbo de passaporte, impressão fotográfica. Barra inferior: link de rolagem, dica "mova o mouse", número do volume.
Ticker – faixa laranja de largura total girada −1.6°, palavras enormes separadas por glifos de estrela.
Possibilidades – manchete com uma frase central cinza, alternador de pílulas, depois um quadro de duas colunas: o pôster (linha de coordenada, foto mesclada, disco solar, palavra gigante, rótulo inferior) e os detalhes (número grande, sobrancelha, manchete, texto, "uma rota para começar", botão tinta, aviso mono). O pôster inclina em 3D com o mouse.
Console de rota – seção escura, manchete com uma frase laranja, quatro abas como uma linha com borda (aba ativa laranja), painel com um número gigante lima dentro de uma elipse orbital girando lentamente e o texto da etapa; uma linha "desbloquear" abaixo.
Suporte – grande estrela giratória + manchete de dois tons; dois cartões (autoatendimento e consultor pago) cada um com uma foto mesclada, uma luz que segue o cursor e um link sublinhado; uma linha "aprender um idioma" com uma palavra laranja.
Chamada final – seção laranja completa com grade, um link gigante de duas linhas ("Então, para onde ir?") com uma seta que se move ao passar o mouse, uma promessa curta, um botão tinta e uma linha de rota mono.
Rodapé – wordmark, uma frase de duas linhas, links; uma linha inferior mono com uma nota honesta quando a marca é fictícia.

4. Efeitos característicos

Campo do mouse: em pointermove dentro do herói, define --px/--py (−1…1) em :root; linhas da manchete, cartões flutuantes e o sistema de órbita 3D os leem em translate3d/rotateX/Y com multiplicadores diferentes, suavizados por uma transição .6s cubic-bezier(.16,1,.3,1). Uma leitura ao vivo da coordenada X 050 / Y 050 é atualizada junto.
Rede de partículas: um canvas de 65 pontos à deriva (25 em celulares) conectados quando mais próximos que 95px; os pontos são empurrados para longe dentro de 120px do ponteiro e linhas laranjas se conectam ao ponteiro dentro de 180px. Funciona apenas enquanto o herói está visível e o movimento está ativado.
Pôsteres de foto mesclada: a foto é uma <img> posicionada absolutamente em z-index:-2 dentro de um pôster isolation:isolate; escala de cinza + multiplicação imprime a foto na cor do pôster, o disco solar é multiplicado por cima, a palavra gigante fica acima. Alternar possibilidade desvanece a foto antiga (.swap), troca o src, desvanece ao load e altera o tom do pôster e a cor do sol por meio de um atributo data-theme.
Cartões inclinados + luz do cursor: pôsteres e cartões de suporte giram até ~7–9° em direção ao ponteiro e expõem --cx/--cy para um destaque radial.
Abas acessíveis: as abas de rota usam role="tablist", tabindex percorrido, teclas Seta/Home/End.
Alternância de movimento: um botão pausa todas as animações e zera o campo do mouse; prefers-reduced-motion e ponteiros grossos desativam as mesmas coisas automaticamente.

5. Regras de compilação

Fotos: ffmpeg -i in.jpg -vf scale=1400:-2 -q:v 5 out.jpg (impressão do herói ~900px de largura). Corte logotipos e telas: -vf "crop=w:h:x:y,scale=1100:-2". Mantenha cada uma abaixo de ~170 KB.
HTML independente com doctype, charset e viewport; fontes do Google Fonts; símbolos SVG inline para setas e estrelas; nenhuma outra dependência.
Cada foto tem um alt real descrevendo a cena, exceto fotos de pôsteres, que são decorativas (alt="", aria-hidden="true") porque a palavra e os detalhes do pôster carregam o significado.
Celular: o herói empilha, o universo escala para ~66%, os cartões encolhem com suas próprias transformações, as palavras do pôster caem para 22vw com word-break:normal, as abas se tornam uma grade 2×2, o anel do cursor e a inclinação são desligados.
Sem rolagem horizontal em 390px; link de pular; contorno :focus-visible visível.

6. Escrevendo o texto

Declarações curtas em trios: "Venha com um sonho. Saia com um plano." "Encontre o lugar. Trace sua própria rota."
Rótulos mono falam como uma edição impressa: 01 / POSSIBILITIES, MODE 02 / AIR · FAR AWAY BY TOMORROW.
Exemplos devem parecer reais, mas ser rotulados como exemplos; regras legais ou de entrada sempre apontam para a fonte oficial.

7. Lista de verificação final

Cada foto é usada uma vez, creditada, cortada livre de logotipos de terceiros e compactada.
O herói inclina com o mouse; o cartão de destino e "outra possibilidade" alternam os quatro estados em sincronia com o pôster.
A foto do pôster é trocada sem um flash da imagem antiga; a cor retorna ao passar o mouse.
As abas de rota funcionam com o teclado.
A alternância de movimento, movimento reduzido e toque param o campo do mouse, o canvas, o ticker e a inclinação.
390px: nenhuma quebra de palavra dentro dos títulos do pôster, nenhuma rolagem horizontal, nenhum erro no console.
Capturas de tela regeneradas: node scripts/screenshots.mjs example screenshots.

orbit-poster-editorial

O que é orbit-poster-editorial?

Perguntar na sua IA favorita

Documentação