Deixe a Inspiração Virar Realidade / Bring Ideas to Life

Uma história de 20 segundos feita com recortes de papel para o OpenDesign: uma garota envia "OpenDesign, o que você pode criar?" em um avião de papel. O colega demonstra protótipos interativos, sites, PPTs, pôsteres e filmes de animação. As obras se dobram em um livro e retornam para ela: "Tudo começa com a sua ideia." Ela o abraça, acena agradecendo e, em seguida, afixa "O que você vai criar?" perto da janela como um convite ao espectador. example.html é a referência editável — comece por ela.

Fonte

Uma adaptação de uma história de um post viral de @kevin_t_ngo: https://x.com/kevin_t_ngo/status/2102437977435893771 (665 mil visualizações · 6,2 mil curtidas · 3,0 mil marcadores no X (em 13/10/2026)). A composição é inspirada no trabalho de papel da peça publicada e reconstruída em código; a trilha sonora é original. O original é um filme quadrado de 28 segundos; este é um corte de 20 segundos em formato 16:9, e seu personagem é o colega do Open Design construído a partir da marca do logo.

Arquivos de referência

Copie example.html, assets/gsap.min.js, assets/short-stack-OFL.txt, assets/short-stack-regular.ttf, assets/soundtrack.mp3 para a composição, preservando o caminho assets/. As licenças de fonte acompanham suas fontes. Use estes bytes locais congelados; nenhum script em tempo de execução ou CDN de fonte é necessário.

Direção de arte

• Combine o artesanato em papel da referência: fibras brancas irregulares e rasgadas, pinceladas amplas e direcionais de guache com cerdas secas e papel colorido em camadas ao redor dos personagens. Varie o ângulo do pincel de cada folha; evite um padrão uniforme de traços repetidos ou estilo de UI brilhante.
• Azuis noturnos #262D70 / #30398A, parede roxa #4A3A8A, janela amarelo-quente #F4C443, cortinas rosa #EE8E96, papel #FFFCF3, caneta azul #3B62B5, lápis vermelho #D8443A.
• A garota tem um corte bob marrom, presilha amarela, olhos de papel separados, suéter azul-petróleo pintado e gola branca pontuda. Cabeça, braço superior, antebraço e mão se articulam separadamente; a textura do papel permanece presa a cada peça.
• O colega do OpenDesign mantém seu bloco de logo escuro, anel branco e cursor verde. Dê a ele luvas de papel curtas e gordinhas com pontas arredondadas, cada uma desenhada como uma peça macia. Mantenha o alcance do ombro à mão abaixo de um terço da largura do corpo; sem braços finos segmentados ou mãos de pontinhos minúsculos. Mova ou incline o colega inteiro em direção a um adereço para que a mão realmente o toque: incline-se para dar um toque, flutue ao lado da fita adesiva e esconda-se atrás do livro para segurá-lo perto.
• Use Short Stack (SIL OFL, incluído) para letras de mão em inglês. Preserve a composição central íntima da fonte, enquanto estende paredes e céu para o formato 16:9.
• Dê a cada capacidade um resultado projetado reconhecível e sua própria ação. Use cortes liderados por objetos, dobradiças, vincos, contato com as mãos e sobreposição, com antecipação curta e uma pausa legível.
• Mantenha os rótulos das capacidades longe do colega durante cada entrada e ação. Dê tempo suficiente para o toque no protótipo e para a virada da página do PPT para que tanto a ação quanto o resultado sejam lidos.
• Comece o livro de coleta com espaços de página vazios. Mova as cinco obras para seus próprios espaços uma a uma; cada miniatura aparece apenas quando sua obra pousa. Feche a capa depois que todas as cinco chegarem.
• Mantenha a resposta fisicamente contínua através de sua dobra, voo e abertura. A garota o pega na altura do peito com as duas mãos; o livro que chega deve deixar seus olhos e expressão visíveis.
• Faça a nota final de convite com linhas grande o suficiente para ser lida no tamanho de pré-visualização de galeria. Levante-a e afixe-a ao lado da garota, mantenha a mão dela em contato até o soltar, e então segure o "O que você vai criar?" completo enquanto ela junta as mãos. Esta é a pergunta do público.

Mapa de batidas (20s)

• 0–1s: estabeleça a cidade noturna e a garota em sua janela.
• 1–1,5s: ela tem uma ideia e levanta o lápis.
• 1,5–3,5s: ela escreve "OpenDesign, o que você pode criar?" e segura a pergunta completa.
• 3,5–4,25s: ela dobra os cantos e asas do avião de papel.
• 4,25–4,75s: ela joga o avião de sua janela.
• 4,75–5,5s: o avião cruza o céu noturno e alcança o colega.
• 5,5–7s: o colega lê, pensa e responde com uma faísca.
• 7–8,5s: um protótipo interativo muda de página após um toque; segure a página alterada.
• 8,5–9,5s: um site em papel desdobra seu herói e blocos de conteúdo.
• 9,5–11s: a capa de um PPT se transforma em um slide de gráfico; barras sobem em sequência e se acomodam.
• 11–12s: pôsteres ilustrados se sobrepõem; o colega cola um no lugar.
• 12–13s: um avião voa através de uma película enquanto sua linha do tempo avança.
• 13–14,1s: as cinco obras pousam uma a uma nos espaços de página vazios do livro; sua capa então se fecha.

…