scroll-craft

O que scroll-craft faz?

A rolagem é a única entrada que todo visitante já sabe usar. Este skill a trata como uma linha do tempo: a roda é um controle de posição, a página é um filme com texto real sobreposto, e cada seção se comporta de forma diferente o suficiente para que o visitante continue rolando para descobrir o que a próxima faz.

O que você produz: um briefing de entrevista, uma gramática de página, um mapa da jornada do cliente, uma curva de sentimento com um pico projetado, uma pontuação de rolagem, um movimento exclusivo, ativos gerados, uma página HTML real em um piso de design baseado em tokens, e uma tira de capturas de tela que comprovam que ela se sustenta em todas as posições de rolagem.

O que isto não é

Não é "gerar um voo panorâmico e colocar texto em cima". Essa abordagem produz um dispositivo aplicado a uma página inteira, e todo site construído dessa forma é reconhecível de imediato: mesmo diorama de massinha, mesmo texto centralizado, mesmo contador 01 / 06, mesmo incentivo "role para explorar". Cinco seções que se comportam de forma idêntica são uma seção mostrada cinco vezes.

Quatro regras decorrem disso, e são a espinha dorsal deste skill:

1. Variedade é o produto. Uma página usa pelo menos quatro famílias de dispositivos e nunca o mesmo dispositivo duas vezes seguidas. Leia references/devices.md.
2. O mundo é fotográfico a menos que a marca seja genuinamente ilustrada. Diorama de massinha low-poly com acabamento fosco suave é proibido como padrão. Leia references/worlds.md.
3. Sem cadeia contínua. Um único voo de câmera ininterrupto é a coisa mais cara e mais frágil que se pode construir, e existe apenas para esconder cortes entre cenas. Varie o dispositivo e o corte desaparece de graça, porque o visitante não está assistindo a um filme. Encadeie apenas quando o briefing for literalmente "uma jornada contínua".
4. Um mundo diferente não é uma página diferente. O kit de dispositivos varia a aparência de uma página. Estrutura é um eixo separado, e precisa ser decidido deliberadamente ou cada construção herdará o mesmo esqueleto. As primeiras quatro construções fizeram exatamente isso. Leia references/uniqueness.md.

Preferência de herói em pé

A camada dimensional é um requisito básico para um herói de marketing premium. Planeje planos de fundo, assunto, primeiro plano e atmosfera que se movem independentemente antes de solicitar ativos. Um belo fundo único com fades de texto não satisfaz esta preferência. A profundidade deve vir de separação visível, oclusão e diferenças controladas no movimento, enquanto o título permanece legível e a cena conta uma história clara.

Leia references/hero-depth.md antes de planejar o herói ou gerar seus ativos. Ele cobre planos limpos, recortes alfa genuínos, âncoras de contato compartilhadas, tipografia entre planos, coreografia de rolagem contida, direção de arte para dispositivos móveis e aceitação visual, com o exemplo aprovado do Sonder. Use a composição que se encaixa na gramática escolhida; não repita a cena do Sonder nem imponha pinning em uma gramática que o proíbe. Honre direções explícitas estáticas ou mais simples, e mantenha a profundidade na composição estática quando o movimento for reduzido.

Padrão de coleção aprovada

Leia references/approved-collection.md antes de planejar um site de marketing premium. Ele destila a reconstrução aprovada de dez sites: pesquisa de marca real, contratos de camada, profundidade significativa de ponteiro/rolagem, renderização fotográfica ou 3D apropriada, navegação e finais distintos, interações úteis, direção de arte para dispositivos móveis e evidências do pacote final. Estes são princípios de execução e exemplos práticos, não um esqueleto de página reutilizável.

Passo 0: O briefing e a autoridade criativa

Estabeleça o briefing antes de gerar qualquer coisa. Reutilize respostas e ativos já fornecidos. Quando o usuário delegar explicitamente a direção criativa (por exemplo, "use seu julgamento" ou "quero sair do seu caminho"), escreva um briefing Autoral sob delegação criativa explícita e prossiga. Cubra os oito tópicos abaixo, distinga evidências de suposições e não invente citações do usuário nem force outro ponto de verificação de entrevista/aprovação.

Caso contrário, entreviste para as decisões faltantes. Faça perguntas reais, registre as respostas e evite inferir uma marca inteira a partir do nome.

O skill é um instrumento de alcance, não um estilo de casa. O humano traz a intenção e quaisquer ativos que possui; a entrevista é onde isso se transforma no tipo certo de página: um mundo ininterrupto, cenas distintas, capítulos impressos, uma superfície viva. O skill pode fazer qualquer um deles. A entrevista decide qual.

Mantenha curto. Oito perguntas, feitas em uma única passagem:

1. Vibe em três a cinco palavras, além de até três referências de qualquer mídia. Um filme, uma capa de álbum, uma loja, uma revista, um jogo. Não "sites que você gosta": nomear sites é como uma página acaba parecendo um site existente.
2. A jornada de rolagem, seção por seção, nas palavras deles. O que o visitante deve ver primeiro, o que vem a seguir, qual é a última coisa. A sequência deles, não um menu que você ofereceu.
3. A curva de energia. Onde deve parecer calmo, onde deve parecer intenso. Uma página que é alta o tempo todo é tão plana quanto uma que é silenciosa o tempo todo.
4. Como alguém deve se sentir ao rolar, etapa por etapa, e qual é o ÚNICO momento que devem lembrar? Energia é volume. Isto é emoção, e os dois não se alinham: em uma página alta, o ato silencioso pode ser o mais intenso. A resposta etapa por etapa se torna a curva de sentimento, o único momento se torna o pico. Ambos são necessários em BRIEF.md. Veja references/feel.md.
5. Uma coisa que este site deve fazer que nenhum site que eles viram faz. Esta é a semente do movimento exclusivo. Insista por uma resposta real; "ser memorável" não é uma.
6. O quão longe do premium-minimal eles querem ir. Ofereça o intervalo em uniqueness.md §5: brutalista, maximalista, lúdico, retrô, denso, editorial, premium-minimal. A resposta deles governa a família estética, não o seu gosto.
7. Um mundo ininterrupto ou cenas distintas? A página inteira deve parecer um lugar contínuo pelo qual a rolagem voa (worldflight, veja references/worldflight.md), ou como cenas, capítulos ou cortes separados? Esta é a maior bifurcação estrutural, e é uma decisão deles, não um dispositivo que você escolhe depois. Ofereça ambos claramente; nenhum é o padrão.
8. Que ativos eles já têm? Filmagens, fotos, fotos de produtos, um kit de marca, clipes deles mesmos. Ativos reais ancoram o mundo e reduzem o custo de geração; a resposta decide o que será classificado e codificado versus gerado. "Nada" é uma resposta válida e significa um mundo totalmente gerado.

Escreva as respostas em <workspace>/builds/<nome>/BRIEF.md antes de qualquer planejamento de ato, nas palavras deles, não parafraseadas em prosa de marketing. Tudo a jusante lê a partir desse arquivo.

BRIEF.md deve conter, no mínimo:

• Os oito tópicos, com respostas textuais do usuário onde fornecidas e decisões autorais claramente rotuladas onde delegadas.
• A curva de sentimento. Uma linha por ato: a emoção, depois o que na tela a causa. Escrita antes dos atos existirem, adicionada à medida que a pontuação é preenchida.
• O pico. O único momento, escrito como a frase que um visitante diria a um amigo, mais em qual ato ele vive.
• A frase "diga a alguém" completa. "É o site onde ___", preenchida com uma experiência, não um nome de dispositivo.
• Qualquer silêncio autoral, para que a passagem de verificação possa distingui-lo de rolagem morta.

references/feel.md é a especificação para todos os quatro.

Se o humano estiver genuinamente inacessível e a execução for totalmente autônoma, escreva BRIEF.md você mesmo: responda a todas as oito perguntas na voz da marca, marque o arquivo Autoral, não entrevistado no topo e diga isso no relatório final. Um briefing autoral sem delegação é um fallback. Delegação explícita acima é um fluxo de trabalho normal suportado e não requer que o humano esteja inacessível.

Bootstrap

Ambiente, não uma etapa do trabalho. Faça-o depois que a entrevista for respondida e antes do Passo 1.

Execute o preflight em vez de verificar manualmente. Ele conhece os modos de falha que, de outra forma, surgem mais tarde como erros enganosos, principalmente um ffmpeg removido que relata um filtro ausente como um erro de sintaxe em seu comando:

node <skill>/scripts/doctor.mjs

Ele relata node, uma compilação completa do ffmpeg, playwright e Chrome, a chave de API e o workspace resolvido. Falhas necessárias saem com código diferente de zero. Diga claramente quais itens estão faltando, em vez de contorná-los silenciosamente.

O workspace

As construções e o registro de impressões digitais residem em um diretório, e ele é resolvido, nunca presumido:

node <skill>/scripts/workspace.mjs --ensure     # imprime, cria e semeia o registro

Ordem de resolução, o primeiro acerto vence:

1. SCROLLCRAFT_HOME
2. O .scrollcraft.json mais próximo subindo a partir do cwd, { "workspace": "..." }
3. <raiz do projeto>/scrollcraft, onde a raiz do projeto é o ancestral mais próximo que contém um .git

Portanto, uma pasta de construção é <workspace>/builds/<nome>/ e o registro é <workspace>/FINGERPRINTS.md. O registro começa vazio: a porta existe para impedir que você se repita, então sua primeira construção não tem nada a limpar.

Se você já mantém construções em outro lugar, coloque um .scrollcraft.json na raiz do seu projeto apontando para ele e nada se move.

O resto

1. KIE_AI_API_KEY, apenas se você estiver gerando ativos. Uma construção a partir das próprias fotos e filmagens do usuário não precisa de chave nem gastos, e essa é uma rota de primeira classe, não um fallback. Confirme o saldo com node <skill>/scripts/kie.mjs probe. Um still custa centavos e um clipe de 5s custa mais; uma página de seis atos com dois clipes é um gasto pequeno, não grande.
2. Um kit de marca se existir (cores, logotipo, tipo, fotos de produtos existentes). Se a marca tiver uma pasta neste repositório, leia-a antes de gerar qualquer coisa e obedeça às suas regras rígidas. Uma marca que proíbe números inventados significa sem contadores de estatísticas, por mais bons que pareçam.

Copie engine/scrollcraft.js e engine/scrollcraft.css para a pasta de construção. Nunca edite o mecanismo por projeto; ele é o mecanismo. Temeie-o com tokens e escreva seu próprio markup.

Passo 1: O briefing, jornada primeiro

O assunto é do usuário para declarar. Pergunte-o de forma aberta, em prosa simples, nunca como uma lista de opções fabricada de indústrias: um menu inventado os enviesa e parece que você está decidindo o negócio deles por eles.

O Passo 0 já cobriu vibe, sequência, energia e alcance. Não pergunte nada disso novamente. Pergunte apenas o que você não pode definir de forma sensata como padrão:

1. O que é isto, e para quem é? Uma ou duas frases nas palavras deles.
2. O que o visitante deve acreditar ao final? A única frase que a página existe para instalar. Não é uma lista de recursos. Se eles derem três, faça-os escolher.
3. O que o visitante faz em seguida? Uma ação. Um rótulo para ela, usado em toda a página.
4. O que você já tem? Logotipo, paleta, fotografia, fotos de produtos, filmagens, um documento de marca. Ativos reais vencem os gerados todas as vezes.
5. Direção de arte: ofereça os mundos em references/worlds.md como uma escolha real e diga que eles podem seguir seu próprio caminho.

Em seguida, escreva a jornada antes de qualquer outra coisa: quatro a sete batidas, cada uma uma mudança no que o visitante sabe ou sente.

1  Reconhecimento   eles veem sua própria manhã
2  Tensão           o custo disso, nomeado claramente
3  Virada           a coisa que muda
4  Substância       por que se sustenta
5  Alcance          o que eles podem escolher
6  Compromisso      a única ação

Batidas são a espinha dorsal. As seções servem às batidas; uma seção que não serve a nenhuma batida é cortada, por mais bonita que seja a cena. Resolva a jornada antes de gerar ativos. Mostre-a ao usuário quando suas decisões forem necessárias; sob delegação criativa explícita, registre a jornada escolhida e prossiga dentro do escopo autorizado.

Passo 2: Gramática, portão, depois pontuação

Três coisas em ordem, e as duas primeiras vêm antes de qualquer planejamento de ato. Detalhes completos em references/uniqueness.md.

Escolha uma gramática. Comece com as oito gramáticas definidas e suas restrições. Uma nova gramática é permitida quando sua navegação, sequência, final e proibições explícitas descrevem uma estrutura diferente; um novo rótulo sozinho não merece crédito. Plano-sequência fílmico é o que as primeiras quatro construções usaram, então escolhê-lo novamente significa dizer no relatório por que as outras sete não se encaixaram na entrevista. Nav, herói e encerramento decorrem todos da gramática; não são decididos separadamente.

Invente o movimento exclusivo. Uma interação personalizada que existe apenas neste site, codificada na página, não uma alteração de parâmetro para um dispositivo de kit. A Pergunta 5 da entrevista é a semente. O mecanismo permanece intocado.

Execute o portão de impressões digitais. Leia seu registro em <workspace>/FINGERPRINTS.md (veja O workspace em Bootstrap; execute node <skill>/scripts/workspace.mjs para imprimir o caminho). A construção planejada deve diferir de cada linha existente em pelo menos 4 de 6 dimensões: gramática, tratamento de nav, dispositivo de herói, forma da sequência de atos, padrão de encerramento, movimento exclusivo. Quatro contra cada linha individualmente. Se falhar, mude o plano, não o registro.

Escreva a curva de sentimento antes da tabela de pontuação. Uma linha por ato: a emoção, depois o que a causa. Curva primeiro, atos depois, porque um dispositivo escolhido antes do sentimento é um dispositivo procurando uma razão. Dois atos adjacentes com o mesmo sentimento significa que um é preenchimento, e é mais barato cortá-lo aqui do que depois que os ativos existirem. Nomeie o pico na mesma passagem e dê a ele a maior extensão na página. Método completo em references/feel.md.

Em seguida, atribua a cada batida um dispositivo. Faça-o deliberadamente e escreva-o como uma tabela:

Batida	Dispositivo	Por que este
Reconhecimento	scrub	A câmera se movendo sob a própria mão do leitor é a abertura mais forte possível
Tensão	pin + cinético	O texto se monta linha por linha enquanto o quadro fica parado
Virada	reveal	Uma janela se abre e o que estava escondido agora é o mundo inteiro