Experiência Interativa de Scrollytelling em Vídeo Cinematográfico

# Função e Diretrizes de Arquitetura: Experiência Interativa de Scrollytelling em Vídeo Cinematográfico Atue como um Tecnólogo Criativo e Diretor de Arte de elite. Construa uma aplicação web interativa de scrollytelling de luxo, nível Apple/Nike, alimentada por React 18+, TypeScript, Tailwind CSS, Lucide React e Motion. O conceito central é uma **Experiência de Narrativa em Vídeo Cinematográfico**, onde um vídeo de fundo subjacente sincroniza perfeitamente com uma sobreposição editorial interativa de HUD, capítulos com timecode, mecanismo de áudio ambiente e popups modais. --- ## 1. Padrões de Arquitetura de Interação e Visual 1. **Mecanismo de Cinema de Fundo:** - Elemento `<video>` responsivo de viewport total com controles de reprodução contínuos (Play/Pause, scrub, busca suave, alternância de som, loop/reinício). - Vinheta sutil, fades de gradiente cinematográfico (`from-black/80 via-transparent to-black/90`) e granulação atmosférica. - Sincronização suave e não bloqueante entre o tempo de reprodução atual do vídeo (`currentTime`) e a sobreposição de cena editorial ativa. 2. **UI Editorial e Glassmorfismo de Luxo:** - **HUD de Cabeçalho**: Marca à esquerda + pílula do capítulo atual (`Capítulo 01 · ...`), navegação minimalista de cenas ao centro/direita com sublinhados ativos, pílula de alternância de som e CTA externo da marca. - **Área de Conteúdo Principal**: - Manchetes de exibição gigantes e de alto impacto (ex.: tipografia em negrito, maiúscula, com tracking apertado). - Parágrafos de corpo limpos e equilibrados usando `[text-wrap:balance]` (evitando quebras desajeitadas ou linhas órfãs de palavra única). - Botões de CTA interativos contextuais que acionam janelas modais elegantes em glassmorfismo (ex.: Relatório da Partida, Análise Tática, Destaques, Especificações do Troféu). - **Navegação Lateral por Elevador**: Trilho vertical de pílulas com marcadores na borda direita permitindo saltos com 1 clique para capítulos específicos do vídeo. - **Barra de Cinema Inferior**: Linha do tempo em glassmorfismo com botão Play/Pause, timecode em execução (`00:01.5 / 00:18.0`), barras de progresso segmentadas por capítulo com preenchimento animado e chips de número de capítulo (`01`, `02`, `03`...). 3. **Componentes Interativos (ex.: Cartões de Player/Produto/Recurso):** - Cartões de vidro interativos com brilho radial que segue o cursor (`radial-gradient` rastreando coordenadas do mouse). - Badges limpos, avatares com manipuladores de fallback suaves, destaques de estatísticas e links de detalhes externos. 4. **Mecanismo de Áudio Web e Design de Som:** - Sintetizador integrado da Web Audio API para cliques táteis de UI, whooshes de baixo cinematográficos em transições de capítulo e suporte a áudio ambiente com alternância mestre de mudo. 5. **Arquitetura de Dados (`src/scenes.ts`):** - Crie uma matriz de configuração limpa e modular onde cada cena é definida com: ```ts interface Scene { id: string; chapterIndex: number; badge: string; title: string; supporting: string[]; metadata: string; ctaText: string; timeStart: number; timeEnd: number; jumpTime: number; } ``` - Forneça uma configuração realista de 5 cenas placeholder inicialmente para que o aplicativo compile e pareça completo imediatamente. --- ## 2. Fluxo de Trabalho Interativo de Orientação ao Usuário / Coaching Quando este prompt for submetido pela primeira vez, implemente o template completo e funcional imediatamente usando vídeo placeholder limpo e assets. Após concluir a construção inicial, **oriente o usuário em sua resposta com o seguinte plano de integração em 4 etapas**, explicando como eles podem personalizar o projeto: - **Etapa 1: Envie Seu Vídeo**: Forneça o link do seu vídeo (ou envie-o para `/public/videos/`). - **Etapa 2: Defina Seus Capítulos e Timecodes**: Diga à IA quais cenas ou momentos existem no seu vídeo (ex.: `00:00 - 00:04: Introdução`, `00:04 - 00:09: Recurso Principal`, etc.). - **Etapa 3: Adicione Seu Conteúdo e Mídia**: Forneça o nome da sua marca, manchetes, subtítulos e cartões de player/produto com fotos ou URLs. - **Etapa 4: Direção de Arte e Branding**: Escolha a cor de destaque da sua marca (ex.: Vermelho Arsenal, Ciano Cyber, Dourado Luxo, Monocromático Furtivo) e estilo tipográfico. --- Vamos começar: Construa a versão inicial pronta para produção deste aplicativo agora com cenas placeholder e recursos interativos.