settle

O que settle faz?

Transforme uma solicitação como "um interruptor que é realmente agradável de clicar" ou "uma curta animação em loop que mostra meu aplicativo de tarefas" em uma peça viva com movimento que se acomoda como as coisas físicas fazem. A arte do movimento é a mesma em cada peça; a aparência é criada fresca para cada solicitação, ou herdada do projeto da pessoa.

Os caminhos abaixo são relativos à pasta deste arquivo. Execute cada script da pasta de trabalho (a raiz do projeto, ou a pasta onde a peça será colocada) pelo seu caminho completo: node <esta pasta>/scripts/deal.mjs …: os scripts escrevem seus arquivos onde você os executa.

Como uma solicitação é executada

1. Leia o contexto. Descubra se você está em um projeto: um package.json que nomeia um framework, ou uma pasta de páginas HTML. Em um projeto, observe como ele escreve estilos, a aparência que seus tokens ou tema definem, e qualquer biblioteca de animação que já use. Em seguida, leia a solicitação: qual estrutura em references/kinds/ ela é, se é uma vitrine ou parte de um produto, e o que suas palavras de iniciante pedem, que references/words.md traduz.
2. Crie ou herde a aparência.
   • Um projeto com aparência própria a mantém: mapeie essa aparência nas variáveis da folha de estilo, e crie apenas o que falta com --keep palette,type.
   • Caso contrário, crie: node scripts/deal.mjs --brief "<a solicitação em uma linha>" --kind <control, data-view, composite ou flow>, com as flags que references/words.md dá para as palavras da solicitação, e --project quando você estiver em um projeto, para que peças posteriores herdem a aparência. Construa a aparência 1, a aparência criada: --pick 1. Pegue a aparência 2 ou 3 apenas quando a aparência 1 conflitar com o assunto, e nomeie o conflito: --pick 2 --because "um fundo escuro para um menu de café da manhã". references/tokens.md tem as regras.
   • Uma aparência criada tem uma direção, que veste a peça; a solicitação define sua forma. Leia sua seção em references/directions.md, e toda direção no topo, antes do resumo.
3. Escreva o resumo, ou um storyboard.
   • Para um controle, uma visualização de dados ou um composto, declare o resumo em duas linhas e construa imediatamente: o que é, o que a direção se torna para este assunto, a aparência, o momento marcante e os padrões que você escolheu. "Um timer Pomodoro para um site de estudos. Instrumento: o timer é o mostrador de um timer de cozinha, marcas de minutos ao redor de um bisel; aparência 1, massa e preto; momento marcante: o botão Iniciar se torna a barra que se esvazia; 25 minutos, pausas de 5 minutos."
   • Para um fluxo ao longo do tempo, ou uma solicitação que pode significar duas coisas muito diferentes, mostre um storyboard (references/kinds/flow.md tem o formato) e aguarde um sim.
   • Antes de construir, imagine o que qualquer solicitação semelhante receberia. Altere cada parte do resumo que corresponda a essa imagem.
4. Construa onde a peça vai.
   • Sem projeto: um arquivo HTML construído sobre assets/page.html, ou assets/reel.html para um vídeo. Ele contém a folha de estilo, as regras de página da direção, o kernel (assets/kernel.js) colado inteiro no script de módulo do cabeçalho, e as receitas de references/motion.md que a peça precisa.
   • Um projeto: um componente no framework e estilo do projeto, o kernel copiado uma vez como módulo, a folha de estilo no stylesheet global do projeto. references/stacks/ tem uma nota por stack.
   • Movimento para uma peça que já existe: mantenha sua marcação e sua aparência, e dê a cada uma de suas mudanças o movimento que a gramática nomeia (references/craft.md, seção 3), através do portal.
   • O arquivo da estrutura em references/kinds/ diz quais receitas começar, pelo tipo de mudança que cada parte faz.
5. Verifique. Faça o lint do arquivo e capture frames com snap.mjs como references/review.md descreve, no arquivo ou no servidor de desenvolvimento do projeto. Corrija o que parecer errado na folha de contato e capture novamente, no máximo três rodadas. Uma verificação que se comporta mal, como um snap de arrasto que não consegue pousar ou um servidor que não inicia, tem duas tentativas; então entregue com ele nomeado como não verificado.
6. Entregue (abaixo).

O que ler

Arquivo	Leia quando
references/craft.md	Toda construção: as regras que cada movimento segue, a lista proibida e as pegadinhas
references/tokens.md	Toda construção: como uma aparência é criada ou herdada, e como é usada
references/directions.md	Toda construção sem projeto: a seção da direção criada
references/motion.md	Toda construção: a folha de estilo, a página base e as receitas, uma por movimento
references/kinds/control.md, data-view.md, composite.md, flow.md	A estrutura da peça: sua anatomia e as receitas para iniciar
references/stacks/html.md, react-next.md, vue.md, svelte.md, astro.md	Onde a peça vai: html.md para um arquivo independente, o stack do projeto caso contrário
references/words.md	A solicitação descreve um sentimento, como "faça isso brilhar"
references/review.md	A etapa de verificação

Regras rígidas

• A peça vai onde a pessoa trabalha. Em um projeto: o framework e estilo do projeto, sem novo pacote, e a própria biblioteca de animação do projeto quando ela tiver uma, carregando o timing do settle. Sem projeto: um arquivo HTML autônomo com o kernel colado, cuja única solicitação externa é o link da fonte da aparência; ele ainda deve funcionar com a fonte do sistema. Uma foto buscada sob solicitação fica ao lado.
• A solicitação define a forma. Um controle mantém seu tamanho real, um widget fica em um cartão ou painel, e uma tela cheia vem apenas quando a solicitação pede uma tela. Uma solicitação para uma página inteira ou site recebe apenas a peça em movimento dentro dele, como o slideshow do aplicativo, construído para ser inserido na página, e a entrega deixa a página para uma habilidade de design de página. O fundo ao redor da peça permanece simples.
• A aparência vem da folha de estilo e da direção. Todo valor visual vem das variáveis da folha de estilo ou matizes delas, com um fundo, uma tinta e um ou dois acentos. A direção criada veste a peça, e um fundo escuro é para um assunto que acontece no escuro.
• Movimento do kernel. Todo movimento que responde a uma pessoa, e toda mudança de estado, executam em settle.track, settle.stretch ou settle.move com um preset do registro da aparência, settle.register().
• Tempo de settle.now(). Manipuladores definem alvos; um loop requestAnimationFrame desenha todo estilo em movimento a partir do tempo atual. snap.mjs para esse relógio para verificar frames.
• A forma é transportada. Cada novo estado é feito a partir da forma já na tela, o texto alterado passa por um breve desfoque, e um novo contêiner se abre de trás do que permanece.
• A mão lidera. Valores arrastados ficam exatamente sob o ponteiro; além de um limite, eles seguem uma banda elástica; as liberações mantêm a velocidade da mão.
• Conteúdo real. Especificidades plausíveis, e uma ação mantém seu nome através de um fluxo. Fotos vêm da pessoa, ou, quando ela pede uma foto real e não tem nenhuma, de scripts/photo.mjs com seu crédito na peça; caso contrário, desenhe no código apenas o que o código desenha nitidamente, nunca uma paisagem (references/directions.md, Imagens).
• Um momento marcante, e tudo ao redor quieto.
• Proibido a menos que a solicitação nomeie: tudo na lista proibida em references/craft.md, que o lint sinaliza.
• Para todos. Funciona por ponteiro, toque e teclado, com foco visível e alvos de 44 px. Cabe em uma tela de 360 px com nenhum texto abaixo de 11 px, e sob movimento reduzido, suas molas pousam imediatamente.
• Custo conta. Cada chamada de ferramenta gasta o uso da pessoa. Construa uma vez, verifique em no máximo três rodadas, dê a uma verificação que se comporta mal duas tentativas, e deixe os scripts em si sem depuração: nomeie o que ficou sem verificação na entrega.

Vitrine ou produto

Uma vitrine, como um vídeo para uma página inicial, recebe o movimento completo. Um controle dentro de um produto funcional se move menos quanto mais frequentemente uma pessoa o vê: nenhum para algo usado cem vezes ao dia, rápido e sutil para algo usado dezenas de vezes. references/craft.md tem a tabela (regra de frequência de Emil Kowalski).

Onde o arquivo vai

Sem projeto, escreva-o na pasta de trabalho sob um nome curto de seu assunto, como tea-timer.html, a menos que a pessoa nomeie um caminho. Em um projeto, coloque-o onde a nota do stack diz, nomeado no estilo do próprio projeto, e mostre-o em algum lugar que a pessoa possa abrir: uma página ou rota própria quando a solicitação não nomear nenhuma. Mantenha os números ajustáveis da peça juntos no topo de seu script: os dados, e qualquer timing que o registro não define.

Entrega

Responda com:

• Onde a peça está, como abri-la (o arquivo, ou a rota e o comando que inicia o servidor de desenvolvimento), e uma linha sobre o que é e seu momento marcante.
• Duas ou três coisas para experimentar: "arraste o botão além do fim", "pressione Tab, depois as teclas de seta".
• Dois parâmetros para ajustar, nomeados como aparecem no topo do script.
• Onde a foto deles vai, quando um desenho substitui uma: o elemento para trocar por uma <img> deles.
• O que ficou sem verificação, se algo, como Safari em um telefone real.
• Uma oferta para recriar uma parte da aparência (node scripts/deal.mjs --redeal palette), e para uma solicitação vaga, três variantes atrás de um seletor.

Para um vídeo, ofereça a exportação de vídeo: node scripts/export.mjs reel.html --out reel.mp4 (ou --gif) renderiza com ffmpeg, calculando a média de quatro sub-frames por frame para desfoque de movimento.

Scripts

Script	Faz
scripts/deal.mjs --brief "…" [--tone …] [--register …] [--dark] [--project]	Cria três aparências; --pick <n> imprime a folha de estilo escolhida (e a mantém como a aparência do projeto com --project); --redeal <part> recria uma parte novamente; --check verifica a biblioteca
scripts/lint.mjs <file>	Verificações estáticas de um arquivo autônomo; sai com 1 em um FALHA
scripts/snap.mjs <file or url> --out <dir> --sheet [--size WxH] [--times …] [--do "…"] [--calm]	Frames em um relógio parado com entrada real e uma folha de contato, depois as verificações da página estabilizada que seu cabeçalho lista
scripts/export.mjs <reel> [--out reel.mp4] [--gif]	Um vídeo para MP4 ou GIF com desfoque de movimento de quatro sub-frames
scripts/photo.mjs "<o que mostra>" [--out photo.jpg]	Uma foto com licença aberta (CC0, domínio público ou CC BY) salva onde executa, com a linha de crédito para a peça; apenas quando a pessoa pede uma foto real

Eles precisam do Node 22 ou posterior e um navegador Chromium: snap.mjs encontra Chrome, Chromium, Edge ou Brave em seu local habitual, e qualquer outro através de CHROME. Quando nenhum é encontrado, ele diz em uma linha: revise o código contra references/review.md e nomeie os frames como não verificados. Export também precisa de ffmpeg, e photo.mjs de uma rede. Nada para instalar.

Sem shell

Onde os scripts não podem executar, como em um chat sem shell: leia library/directions.json, library/palettes.json e library/type.json, mantenha as entradas cujos tipos e tons se encaixam na solicitação, e pegue a entrada na posição dada pelo comprimento da solicitação em caracteres, contado ao redor de cada lista, para que diferentes solicitações caiam em diferentes aparências. Construa a partir dos mesmos arquivos, revise o código contra a rubrica em references/review.md, e diga na entrega que os frames ficaram sem verificação.

Créditos

• [As habilidades de Emil

…

[truncado para tradução]