S45 · design para o gate

A peça aparece na forma em que foi criada.

Reels respiram em 9:16, fotos em 4:5 e modelos em 3:4. Nenhuma mídia é cortada: horizontal fica inteira sobre a superfície neutra. Áudio, texto e link continuam largos.

Vídeo · 9:16

Frame e player usam contain.

Foto · 4:5

Imagem inteira, inclusive horizontal.

Modelo · 3:4

Arte vertical, convite para /cards.

CENA 01

Catálogo · desktop 1280 · quatro colunas verticais

Central de Conteúdos
Encontre uma peça por assunto, cidade ou tema…
Tipo⌄ Cidade⌄ Região⌄ Tema⌄

Escolha, compartilhe e peça voto

A mídia só carrega quando você tocar.

Grade: 4 colunas · gap 20px
NEEDS ASSET · FRAME REAL Duração
Vídeo

Título da peça em vídeo

Tema · Cidade

Baixar Compartilhar
#SOU ____
NEEDS ASSET · ARTE REAL
Card

Card com seu nome

Coloque seu nome no card oficial.

Escolher este modelo →
NEEDS ASSET · FOTO REAL
Foto

Título da foto publicada

Tema da peça

Baixar Compartilhar
PEÇA HORIZONTAL
NEEDS ASSET · MÍDIA REAL Duração
Vídeo

Peça horizontal inteira

Letterbox neutro · sem corte

Baixar Compartilhar
Áudio
Áudio

Mensagem para compartilhar

Formato largo: não existe enquadramento visual a preservar.

BaixarCompartilhar

Peça no Instagram

Instagram
Instagram

Publicação na plataforma

Link largo: a plataforma é a pista, não uma moldura vazia.

Compartilhar
NEEDS ASSET
Foto

Foto compacta na linha

Thumb 96 × 120 · 4:5 inteiro

BaixarCompartilhar
Densidade decidida O board principal passa de 3 para 4 colunas em lg, mantém 2 em sm e 1 no celular. Áudio e link ocupam uma grade larga de 2 colunas; fotos compactas preservam a linha.
CENA 02

Catálogo · mobile 390 · uma coluna, sem overflow

Conteúdos

Escolha uma peça

Toque para ver, baixar ou compartilhar.

NEEDS ASSET · FRAME REAL Duração
Vídeo

Título da peça em vídeo

Reel inteiro · 9:16

BaixarCompartilhar
Ver detalhes da peça →
NEEDS ASSET · FOTO REAL
Foto

Título da foto publicada

Foto inteira · 4:5

BaixarCompartilhar
16:9 INTEIRO
NEEDS ASSET · MÍDIA REAL Duração
Vídeo

Peça horizontal inteira

Letterbox neutro · sem corte

BaixarCompartilhar
NEEDS ASSET
Foto

Foto compacta na linha

Portrait inteiro · 4:5

Baixar Compartilhar
#SOU
____
NEEDS ASSET
Card

Card com seu nome

Convite para criar, sem cromo de mídia.

Escolher →
Áudio
Áudio

Mensagem para compartilhar

Largo, sem vazio vertical.

Compartilhar

Conteúdo útil: 350px dentro de 390px, com 20px de respiro de cada lado. Nenhum elemento excede o viewport.

CENA 03

Home · desktop 1280 · até três peças verticais

Seção existente acima

Central de Conteúdos

Peça voto pra Solla 1313

Material do seu território para compartilhar.

⌖ Para seu município
NEEDS ASSET · FOTO REAL
FotoDo seu município

Título da peça local

Seu município · Tema

Compartilhar Ver esta peça →
NEEDS ASSET · FRAME REAL Duração
VídeoDa sua região

Título da peça regional

Sem autoplay

Compartilhar Ver esta peça →
Áudio
ÁudioMais recente

Mensagem recente

Mantém o bloco largo.

Compartilhar Ver esta peça →

Seção existente abaixo

CENA 04

Home · mobile 390 · thumb vertical de 124px

Central de Conteúdos

Peça voto pra
Solla 1313

Material do seu território para compartilhar.

Áudio
ÁudioRecente

Mensagem recente

Compartilhar
Ver todas as peças →
CENA 05

Página da peça · o detalhe cumpre a promessa do card

Central de Conteúdos
← Voltar para conteúdos
NEEDS ASSET · FRAME REAL Duração
Vídeo

Título da peça em vídeo

Descrição da peça publicada, preservada como hoje.

Tema
Tema da peça
Local
Município
Duração
Informada na peça
BaixarCompartilhar
Palco compartilhadoVídeo usa 9:16; foto usa 4:5. A coluna de mídia tem 360px no desktop e não cresce até dominar o texto.
Central de Conteúdos
← Voltar
NEEDS ASSET · FOTO REAL
Foto

Título da foto publicada

A foto inteira continua sendo a primeira evidência da página.

BaixarCompartilhar
CENA 06

Estados críticos · sem frame, em reprodução e horizontal inteiro

×Frame indisponível Duração
Vídeo

Sem frame

Superfície neutra, play e duração. Sem imagem quebrada e sem novo cromo.

ⅡVídeo em reprodução↗
Vídeo

Depois do toque

O vídeo toca dentro do mesmo 9:16, com contain. Não há autoplay no carregamento da página.

16:9 INTEIRO
NEEDS ASSET · MÍDIA REAL
Vídeo

Horizontal em letterbox

A superfície continua 9:16; a mídia usa contain. Nunca estica, nunca corta.

CENA 07

Decisão do gate · uma regra de enquadramento, sem redesenhar o cromo

Forma por tipo na v1

  • Vídeo/Reel: slot 9:16; frame e vídeo em object-contain.
  • Foto/carrossel: slot 4:5; imagem em object-contain.
  • Modelo S38: palco 3:4; a arte real cabe inteira e o item continua sendo convite para /cards.
  • Áudio, texto e link: largos; verticalizá-los produziria vazio sem ganho de reconhecimento.

Limites preservados

  • Sem autoplay: a mídia entra somente após o toque.
  • Play atual: 56px no card, 44px no thumb; sem o cromo futuro da C228.
  • Um CTA primário por superfície; ações do card permanecem outline.
  • Alvos de toque com pelo menos 44px; foco amarelo visível.
  • 390px: conteúdo com 20px de inset e trilhas minmax(0,1fr); overflow horizontal esperado = 0.
  • Detalhe incluído: card e página da peça usam o mesmo palco.

Por que não uma moldura única? 9:16 para tudo alongaria fotos e modelos sem necessidade; 4:5 para Reels reduziria justamente o conteúdo que precisa respirar. A família 9:16 · 4:5 · 3:4 preserva a intenção de cada tipo sem depender de nova leitura de dimensões. Uma mídia horizontal continua inteira por contain dentro da superfície neutra do seu tipo.