Scroll Worldpor oso95

Scroll World Skill.

Uma viagem de câmera pré-renderizada controlada pela rolagem, não um mundo 3D em tempo real.

Animação com Scroll
Vídeo
Landing Pages

Revisão da fonte · Scroll WorldSKILL.md

Tarefa Animação com Scroll Produz • Uma landing page controlada pelo scroll, com textos de seção e uma chamada para ação final • Imagens de cena geradas, clipes de câmera e quaisquer conectores necessários • Arquivos de vídeo otimizados, pôsteres de fallback e uma revisão das transições entre clipes Antes de começar O pipeline documentado usa Higgsfield e um caminho de vídeo Monid, além de ffmpeg/ffprobe e de um ambiente de navegador. Contas em provedores, créditos, recursos dos modelos e qualquer rota opcional de imagem exigem nova verificação.

Resumo editorial · fonte revisada em 2026-10-07 · não é um exemplo gerado

01 Funcionalidades

Scroll World

Um fluxo de landing page com vídeo gerado, baseado em arquitetura de câmera, continuidade com quadros reais, scroll scrubbing e decisões explícitas sobre mobile e orçamento de renderização.

Fluxo baseado na fonteNão é um benchmark de execução

A abordagem de trabalho

Scroll World cria uma landing page em que a posição do scroll controla um voo de câmera pré-renderizado. Imagens de cena viram clipes de vídeo, e um mecanismo JavaScript associa a rolagem ao tempo de reprodução. O mundo aparentemente tridimensional é um vídeo gerado, não uma cena WebGL navegável com geometria editável. Sua portabilidade vem de um mecanismo autônomo que pode ser incorporado a diferentes stacks de frontend.

A fonte distingue um percurso contínuo para a frente de um voo por um mundo em miniatura com clipes de ligação separados. Nos dois casos, os quadros de fronteira renderizados importam mais do que reaproveitar uma imagem original parecida. O clipe seguinte deve ser condicionado por imagens reais dos clipes vizinhos, e as emendas ainda precisam ser inspecionadas. O fluxo também trata a cadeia mobile em retrato como uma decisão de produção separada, com custo extra de renderização, e não como um recorte silencioso do filme para desktop.

Entregas esperadas

Uma landing page controlada pelo scroll, com textos de seção e uma chamada para ação final
Imagens de cena geradas, clipes de câmera e quaisquer conectores necessários
Arquivos de vídeo otimizados, pôsteres de fallback e uma revisão das transições entre clipes

Ver o briefing de exemplo

Do briefing à revisão

01
Escolha a jornada
Defina o tema, as cenas em ordem, o kit de marca, a direção de arte e o estilo de câmera. Confirme se a produção será só para desktop ou nativa em retrato e aprove uma estimativa atual de renderização.
02
Estabeleça o mundo visual
Gere imagens coesas com um briefing visual compartilhado. Revise a consistência entre as cenas antes de se comprometer com uma cadeia de gerações de vídeo pagas.
03
Encadeie quadros reais
Em uma jornada para a frente, use o final do clipe anterior como entrada do próximo. Para conectores aéreos, use quadros reais renderizados dos dois clipes vizinhos, e não as imagens originais das cenas.
04
Codifique e teste a rolagem
Prepare arquivos que permitam busca (seek), monte o mecanismo portátil e inspecione o comportamento das emendas, a rolagem reversa, os pôsteres de fallback e o movimento reduzido. Teste a cadeia em retrato separadamente, se ela tiver sido encomendada.

02 Quando usar

Quando usar

O pipeline documentado usa Higgsfield e um caminho de vídeo Monid, além de ffmpeg/ffprobe e de um ambiente de navegador. Contas em provedores, créditos, recursos dos modelos e qualquer rota opcional de imagem exigem nova verificação.

Bom caso de uso

Uma jornada narrativa da marcaÚtil quando um produto ou negócio pode ser explicado como uma sequência de lugares ou etapas de um processo que se beneficiam de uma relação contínua de câmera.
Incorporações independentes de frameworkO mecanismo documentado é JavaScript puro (vanilla), então o fluxo de produção de vídeo não depende de um framework de aplicação específico.

Limites a verificar

Vídeo gerado, não evidência realO mundo é uma construção ilustrativa. Não deve ser apresentado como filmagem documental de instalações, produtos ou eventos que ele não mostra de fato.
Backends pagos e em mudançaA renderização exige acesso ao provedor e orçamento. A fonte contém observações datadas sobre provedores, então esquemas de modelos, disponibilidade, cobrança e comportamento das emendas devem ser verificados antes de uma nova produção.

Traga estas informações

História do negócioDescreva o tema e as cenas em ordem, com um título e um texto explicativo conciso para cada etapa.
Câmera e direção de arteEscolha entre um percurso realista, um voo aéreo por um mundo em miniatura ou um tratamento com ângulo fixo, junto com as cores aprovadas e os elementos de marca.
Orçamento de produçãoEspecifique o acesso aos provedores, os limites de gasto e se uma cadeia em retrato separada é necessária. Reserve margem para revisar e substituir clipes malsucedidos.

03 Decisões importantes

Decisões que importam

As emendas são um ativo de produção
Quadros de fronteira extraídos tornam a continuidade uma parte inspecionável do pipeline. Um crossfade, sozinho, não esconde uma grande mudança na composição da cena.
Mobile é uma entrega explícita
Uma cadeia de câmera em retrato pode preservar o tema e a composição em celulares. Tratá-la separadamente deixa o orçamento e a troca visual claros, em vez de esconder um problema de recorte.

04 Exemplo de briefing

Experimente um briefing focado

O briefing de exemplo abaixo não foi testado. Verifique a configuração da skill antes de usá-lo.

Revise a configuração

Use as referências de mecanismo e pipeline do repositório. Verifique os recursos e preços atuais dos provedores e obtenha aprovação antes de executar qualquer geração paga.

Arquivo-fonte original

https://github.com/oso95/scroll-world/blob/71cc36d3bb150248ae36a2c552f9cbf88802a79c/skills/scroll-world/SKILL.md

Comece com uma entrega

Adapte o escopo, o material de origem e as restrições deste briefing antes de executar a skill.

Briefing de exemplo

Use Scroll World para planejar uma jornada ilustrativa, de uma fazenda de chá até a bebida pronta, em cinco cenas em miniatura. Use as cores da nossa marca fornecidas e um estilo de câmera aérea de diorama. Antes de gerar qualquer coisa, verifique o backend de renderização atual e estime a produção somente para desktop, com margem para novas tentativas. Mostre primeiro o plano de cenas e a direção das imagens. Não crie uma cadeia mobile nem gere cobranças de renderização sem aprovação.

Inspecione o resultado

Confira o resultado real com estes critérios observáveis.

Os clipes vizinhos foram revisados logo antes e depois de cada emenda, nas duas direções de rolagem.
O modo de movimento reduzido apresenta imagens estáticas utilizáveis e textos de seção legíveis.
Qualquer versão mobile declarada realmente serve arquivos em retrato, e não um recorte não informado de um vídeo em paisagem.

OpenDesign oferece um espaço de trabalho de design local para agentes de código. Esta listagem não significa que a skill esteja incluída nem que suas ferramentas externas, credenciais e dependências de software estejam inclusas.

Baixar OpenDesign Ler o guia rápido

05 Fonte e licença

Fonte e licença

Esta página descreve a revisão fixada da fonte vinculada abaixo. O comportamento e os requisitos do projeto original podem mudar.

Responsável pela fonte: oso95
Repositório: oso95/scroll-world
Arquivo da skill: skills/scroll-world/SKILL.md
Licença: MIT
Versão revisada: 2026-10-07 · 71cc36d3bb15

Resumo editorial da fonte

Um fluxo de landing page com vídeo gerado, baseado em arquitetura de câmera, continuidade com quadros reais, scroll scrubbing e decisões explícitas sobre mobile e orçamento de renderização.

Resumo original de OpenDesign, com base na fonte vinculada. As estrelas do repositório são um sinal de popularidade datado, não indicam uso da skill nem uma nota de qualidade.

06 Perguntas antes de começar

Perguntas antes de começar

Ela cria uma cena 3D em tempo real?

Não. A página controla a reprodução de um vídeo pré-renderizado. Isso produz movimento de câmera sem dar aos visitantes navegação livre por um modelo 3D ao vivo.

Por que não conectar as imagens estáticas originais?

Os clipes gerados podem diferir das referências iniciais. Quadros de fronteira realmente renderizados oferecem uma passagem visual mais próxima do que uma nova interpretação da mesma imagem estática.

Um filme mobile é incluído automaticamente?

Não. A fonte exige uma escolha separada para uma cadeia nativa em retrato. Os ajustes de reprodução específicos para celular do mecanismo são independentes da produção desse material extra.

OpenDesign

Abra espaço para a próxima iteração do seu design.

Mantenha seu briefing, o material de origem e o trabalho de design juntos em um espaço de trabalho local. Verifique a configuração da própria skill antes de adicioná-la ao seu fluxo de trabalho.

Baixar OpenDesign Ver skills de design