Stageshow

O que Stageshow faz?

Miniatura de UI de produto: uma interface verossímil, emoldurada em seu espaço, como uma imagem estática ou uma animação curta na qual uma coisa acontece. O espectador reconhece a tela e vê a coisa acontecer.

A ideia central

Lê-se como um produto real, simplificado para o que o espectador precisa, emoldurado com intenção, e cada movimento tem uma causa.

Cinco maneiras de falhar:

• Excesso. Texto real em cada linha, números por toda parte, tudo lotado. Quanto mais detalhe, mais parece gerado.
• Wireframe. Duas bolhas cinzas e um botão. Construído pequeno demais, ou sem o que o tornava reconhecível.
• Encapsulado. Uma janela inteira encolhida dentro de um card com margens iguais: um screenshot colado, não uma foto de produto.
• Plano. Todo objeto com o mesmo peso no mesmo card com borda. O olho não tem para onde ir.
• Insosso. Uma janela cinza com um cursor, seja qual for o briefing. O visual e a energia do briefing (um blueprint, vidro sobre cor, uma Dynamic Island, um mascote) são o ponto; pegue o que ele pede e construa de acordo com as regras, como examples/hero-demo faz com seu popup digitado e satélite terminal (um satélite é um segundo objeto menor, um recibo, telefone ou cartão de detalhe, que cruza a borda do herói).

A correção: uma tela completa e estruturada em cinzas suaves, palavras reais apenas no que a história aborda, linhas de preenchimento para o resto, espaço para respirar, um recorte que coloca o olho onde a história está. Simplifique as palavras, não o contexto. Um canto vazio, um vazio abaixo de uma lista, linhas espaçadas para preencher um painel, uma janela flutuando sobre um prato (um fundo ou campo matizado atrás dela): inacabado, não calmo.

Estas são ilustrações autorais, não automação de navegador: a.click() desenha o cursor pressionando, a.set() muda a cena.

Quanto apertar

Construa da maneira que um designer de produto constrói uma página de lançamento pela qual será julgado. Os exemplos-ouro em examples/ são a referência, não uma referência: se o seu está mais vazio, plano ou menor do que o ouro mais próximo, essa é a primeira correção. Depois, olhe para o enquadramento como o designer mais exigente que você conhece faria, aquele que tira um screenshot da única coisa errada e devolve com "o que é isso?": um ponto fora do avatar, uma unidade em sua própria linha, um grabber abaixo da ilha, texto encostando em um card. Se você consegue imaginar esse screenshot, você encontrou a próxima correção.

Fluxo de trabalho

Grande parte da qualidade é decidida antes de qualquer código. Escreva o plano primeiro: onde está situado, o objeto focal, a ação, o payoff, o que pode ser deixado de fora.

1. Meio e lugar. Estática ou animação (loop, uma vez à vista, ou hover). A página, seu fundo, sua largura. Projete no tamanho em que será visto, cerca de 720 × 340 para um herói ao lado de texto (hero-demo), 900 a 1100 de largura para um herói de largura total (linear), 400 × 300 para um card, exibido em escala 1:1; nunca abaixo de cerca de 320 de largura para uma demonstração, embora um tile de bento ou um card satélite possam ser menores. Toda demonstração que pode ficar em uma coluna de telefone deve ter um design compact na largura da coluna (358), uma reformulação, não um aperto (references/framing.md, Formatos pequenos e a página). Uma grade de tiles é um conjunto: planeje com references/bento.md.
2. Visual. Com o código ou site do produto em mãos, mapeie seus tokens para os do kit (references/looks.md); se o desenvolvedor pedir seus próprios componentes, use-os dentro do palco em vez das peças pequenas do kit. Caso contrário, um tema (claro, escuro, blueprint, vidro), uma paleta (acento, mono) e uma fidelidade: minimal são apenas barras, standard são palavras onde elas carregam significado e barras em outros lugares, realistic é conteúdo real em todo lugar. Padrão: light, accent, standard; vá para realistic em escala de herói, para um produto real nomeado, ou uma estática cujo assunto é uma lista ou página. Escreva filler uma vez com Text filler e a fidelidade decide. Os ícones próprios do produto, seu chrome real, o conteúdo que o torna reconhecível. Um briefing com um estilo (kawaii, papel, uma cor de pôster) recebe esse estilo por completo, ainda construído de acordo com essas regras.
3. A história. Sua forma (references/motion.md, História): como é usar, um fluxo, ou o que o sistema faz. Três a cinco batidas e um payoff, 10 a 16 segundos. Nenhum movimento de cursor que você não possa explicar. Dados nunca retrocedem à vista sem uma causa. Entre uma história mais rica e um enquadramento mais calmo, escolha o enquadramento.
4. Comece a partir de um exemplo. Encontre o exemplo-ouro mais próximo (a tabela Ouro abaixo) e filme-o (node scripts/film.mjs "<preview>/?capture=<gold>" --select '#example' --still --out gold.png; npm run dev serve a visualização). Copie a pasta dele para o seu projeto como ponto de partida; não reescreva de relance. O loop mais rápido: copie para examples/<seus>/ aqui, onde a visualização o pega e ?capture=<seus> o filma, depois mova para o host quando passar e corrija o caminho de importação do kit. Mantenha sua estrutura: o tamanho do palco, o corte e sangria, tamanhos de linha e tipo, espaçamento, as batidas do script, as partes do kit. Agora leia references/craft.md por completo: é curto, e contém as regras de quadro estático que o ouro não pode mostrar, os casos que seu ouro não contém. Depois substitua seu visual e conteúdo pelo produto do briefing: os tokens do passo 2, os ícones próprios do produto, chrome e palavras. Uma cópia que só muda o nome não está pronta: deve ler como o produto do briefing, não o do ouro. Se nenhum ouro conta sua história, escolha em duas partes: primeiro o layout (pegue da tabela em references/framing.md; cada layout nomeia seu exemplo), e copie esse exemplo mesmo que sua história seja diferente; depois pegue o movimento para suas batidas do exemplo cuja história é mais próxima, e construa o que nenhum tem no mesmo estilo. Depois emoldure: corte para o painel onde a história acontece, julgado no corte visível final (references/framing.md tem as regras e a tabela de layouts). A forma resumida: uma gutter, uma cheia ou bem além; apenas filler sangra; o que abre fica dentro; janelas mantêm sua forma; a página é o chão, então sem prato sob um herói em página branca ou escura e sem janela inteira com ar nos quatro lados; unframed apenas quando o desenvolvedor pede; sem cantos mortos. Filme uma estática nas duas larguras ao lado da do ouro; se a sua estiver mais vazia, plana ou mais encapsulada, corrija o enquadramento antes de qualquer movimento.
5. A tela. Conte as strings reais, geralmente 3 a 7 (references/craft.md, Restrição): um orçamento para palavras, não para elementos. Construa com os tokens do kit, Bar, Text e Row. Ajuste o texto de cada controle antes de movê-lo. Marque o que o cursor toca com data-target e data-cursor; meça com rect(), nunca código fixo.
6. Coreografe. A API Act. Mantenha o que aparece montado e alterne para que as saídas sejam animadas (Bubble e Fly fazem a transição explicitamente). Anima o relacionamento, não apenas o objeto: uma nova linha carrega as linhas abaixo dela, uma superfície que redimensiona nunca estica seu texto. Batidas se sobrepõem, grupos escalonam, o payoff segura, o loop termina onde começou ou reinicia com uma causa visível.
7. Ensaie. Defina poster primeiro: a maioria das pessoas vê apenas esse quadro (thumbnail, movimento reduzido, screenshot), então é a batida que conta a história sozinha, nunca uma capturada no meio da mudança, com o resultado deixado na tela em vez de arrumado (references/motion.md, História). Depois filme o loop, não apenas uma estática: a folha de contato na largura mostrada e em 390, e percorra cada pressionamento, menu, morph e a costura do loop (references/rehearse.md). Uma estática não pode mostrar um pop. Leia cada quadro, corrija a maior falha visível primeiro (enquadramento, depois hierarquia, depois movimento, depois polimento), refilme. Depois segure ao lado do ouro mais próximo e responda os pares de composição completa e estilo em references/teaching.md como perguntas sobre sua estática (o que o olho vê primeiro, e é o resultado? uma janela, tile ou dispositivo está claramente liderando?); qualquer "não" é a maior falha. film.mjs --gate terminando com rehearsal passed é necessário, não suficiente. Depois faça a última passada em references/rehearse.md: uma revisão de olhos frescos (references/review.md) e REHEARSAL.md junto ao componente (modelo em references/verify.md, Entrega): o ouro que você copiou, o que mudou, o que não verificou.

Falhas que voltam a cada rodada, cada uma com sua regra; verifique-as antes de entregar:

• Conteúdo que troca em vez de mover (references/motion.md, Texto e valores em mudança).
• Barras cinzas onde o olho pousa; filler pertence às bordas (references/craft.md, Restrição).
• Um prato atrás da janela, ou uma janela flutuando com ar nos quatro lados; a janela ou telefone preenche pelo menos dois terços do palco e sai por uma borda (references/framing.md, regra 5 e Formatos pequenos e a página).
• Faixas vazias, controles cortados e sombras (references/craft.md, Restrição; references/framing.md, regra 4).
• Logotipos genéricos de IA e inventados: brilhos, roxo, uma letra em um quadrado colorido (references/craft.md, Ícones e logotipos).
• Linhas ocupadas e recortes desiguais (references/craft.md, Restrição e Espaçamento e alinhamento).
• Pausas longas e um reset sem causa (references/motion.md, Loops).
• Uma seleção que não está sob a barra I (references/motion.md, Arrastos e seleção).
• Uma barra de status ou home indicator desenhados à mão; o Phone desenha ambos (references/craft.md, Chrome e dispositivos).
• Um valor centralizado com seu sinal (references/craft.md, Espaçamento e alinhamento).

Exemplos

Filme o mais próximo antes de começar (passo 4). Os exemplos-ouro são a referência de qualidade; estudos de produto são para pegar emprestada uma interação, nunca a identidade de outro produto; folhas de espécime são catálogos, não composições. Execute tudo com npm install e npm run dev. teaching/ contém pares ruim/bom (references/teaching.md) para diagnosticar um problema; as metades ruins nunca são pontos de partida.

Ouro

Necessidade	Exemplo	O que aprender
Estática ou card de funcionalidade	static-card	Hierarquia tranquila, um corte duro, um satélite, palavras reais apenas no cliente selecionado, seus vizinhos e o total
Estática escura	dark-bento	Um sinal dito uma vez; a arte do álbum mantém como app de música
Herói animado, um gesto	hero-demo	Cinco batidas, alvos nomeados, uma anotação, um terminal vindo à frente
Coreografia, sem cursor	payout-flow	Chegadas lentas sobrepostas, tempo de leitura, um payoff que segura
Conteúdo mudando no lugar	choreography	Faixas retidas, máscaras suaves, temporização dependente
Resposta de IA	ai-chat	A pergunta enviada, Pensando, a resposta chegando com sua altura, fontes por último; sem brilhos, sem roxo
IA com cards	ai-cards	Um card de múltipla escolha respondido e mantido como registro, um card de opções abrindo na thread, reservado a partir de seu próprio botão
Validação de formulário	form-error	Um erro no campo que o causou, corrigido ao arrumar, então o botão confirma em si mesmo
Arrastar para reordenar	reorder	Uma linha levantada pela alça, as outras abrindo espaço, solta no lugar
Scrub de gráfico	chart-scrub	Uma linha fina e ponto que seguem o ponteiro, o valor do título rolando para o dia sob ele
Editar em uma tabela	table-edit	Uma célula editada no lugar, então o total que ela alimenta rola uma batida depois
Carregando para conteúdo	loading	Um esqueleto na própria geometria do conteúdo, linhas resolvendo de cima para baixo, chrome real por toda parte
Herói escuro	dark-hero	Profundidade a partir de degraus de superfície no preto, uma cor iluminada, um status que muda em sua própria pill
Colaboradores ao vivo	presence	Cada pessoa uma cor em todo lugar, nomes montando seus cursores, trabalho mostrado nas próprias marcas do documento
História de sistema	subscriptions	Um chip voa para uma linha, MRR rola, uma segunda cena é o reset
Close-up	close-up	Um controle em 1,4x com o chrome de sua janela, a linha inteira, um cursor grande para combinar
Muitos de um	many-of-one	Uma grade de uma coisa saindo de cada borda, um tile em foco por profundidade, o único com palavras
Corte com fade	fade-crop	Uma janela desvanecendo em seu pé, sobre filler, em vez de sair por uma borda
Painel sobre produto	panel-annotation	Um painel de configurações sobre a margem do produto, um líder da configuração até o que mudou
Janelas sobrepostas	overlap	Um card na frente de uma janela, sua borda na linha da barra lateral da janela
Cards empilhados	stacked-cards	Dois componentes com uma largura, um pequeno espaço, o inferior saindo do fundo
Cantos opostos	opposite-corners	Um tile bento: texto no canto inferior esquerdo, o produto pendurado no canto superior direito
Pilha inclinada	tilted-stack	Uma pilha solta de papel, pequenos ângulos alternados, apenas o card do topo tem palavras
Chip de canto	corner-chip	Um pequeno chip centralizado em um canto de janela, metade para fora
Monocromático	monochrome	Produtos de outras empresas em uma linha, escala de cinza, desvanecidos no pé
Linha de janelas	window-row	Sessões lado a lado na mesma altura: foco por profundidade, vizinhos cortados pelo palco, apenas filler cortado
Janela e telefone	device-pair	Um dashboard e uma tela de bloqueio contando um evento; o telefone atravessa a margem, nunca sobre a figura
Objetos relacionados	story	Uma fatura, um plano, um conector, totais rolantes
Arrasto de calendário	calendar	Uma semana preenchida, um evento focal, um pickup medido
Arrasto livre	freeform-drag	Offset de pega, uma grade medida, um slot de soltar que encaixa
Aplicativo de telefone	phone-touch	Um card abre em sua tela como um objeto, e o loop se dobra de volta
Dynamic Island	dynamic-island	Uma forma preta, seu conteúdo uma camada separada
Mensagens	messages	Compositor, digitação, recibos, a vida útil de uma bolha
Cursores	cursors, cursor-morph, cursor-resize	Cinco estilos, tipos orientados por elemento, bordas e cantos de redimensionamento, nenhum cursor
Anotações	annotations	Líderes, dimensões, fluxos e um alvo móvel; references/annotations.md
Grade de funcionalidades	bento	Um herói, uma janela, uma estatística, um objeto, um diagrama
Grade escura com linhas	ruled-bento	Linhas compartilhadas e imagens técnicas
Grade de consumo	staggered-bento	Tiles deslocados, arte gráfica, objetos físicos
Grade herói com imagem	hero-grid	Diferentes fundos no herói, no tile, um layout de grade estrita

…

[truncado para tradução]