Biblioteca proibida dos dragões · documentário interativo em 8 capítulos
THE AGE OF DRAGONS
Problema
Sites sobre mitologia e cultura pop viram enciclopédia: texto corrido, imagem estática, zero imersão. Nada do peso cinematográfico que o tema pede.
Solução
Uma experiência-conceito que entra numa biblioteca ancestral proibida: hero em vídeo fullscreen com o dragão surgindo do relâmpago, cursor de brasa, cinzas subindo e trovão ocasional, mais 8 capítulos que cruzam mito e ficção. Tem o nascimento do dragão em 6 mitologias (China, Japão, Europa medieval, Nórdica, Maia, Celta), os 10 dragões mais icônicos da ficção em cards 3D com glifo autoral próprio (sem usar still oficial de nenhuma obra), mapa mundial clicável, linha do tempo horizontal pinada no scroll, galeria de gravuras em domínio público, tabela comparativa de poder e uma silhueta final batendo asas devagar.
Como foi construído
A restrição legal virou a decisão de design mais forte do projeto. Os 10 dragões de ficção (Smaug, Drogon, Balerion, Alduin...) são propriedade intelectual protegida, então cada card recebeu um glifo próprio no lugar de qualquer still oficial: traço minimalista em SVG, com cor exclusiva por universo. As seções históricas, por sua vez, usam só arte de domínio público (Hokusai, Dürer, Doré, Chen Rong), curada e verificada uma a uma na API do Wikimedia Commons antes de entrar no site.
O motor cinematográfico é uma única ilha client-side: Lenis cuida do scroll fluido, ScrollTrigger dispara as revelações letra por letra (SplitText) e o pin horizontal da linha do tempo, e cada card 3D segue o mouse com uma luz vermelha radial ancorada em variáveis CSS (--mx/--my) atualizadas a cada frame. É o mesmo padrão de cursor amortecido (quickTo) usado nos projetos-irmãos, aqui com direção de arte gótica: preto profundo, vermelho fogo, dourado antigo.
IP-safe por design
Glifos SVG autorais por dragão de ficção, zero still oficial. A restrição legal virou identidade visual.
Arte 100% domínio público
Toda peça histórica veio do Wikimedia Commons, verificada individualmente antes do upload.
Cards com luz seguindo o mouse
Tilt 3D + glow vermelho radial em variáveis CSS, atualizado a cada frame via GSAP quickTo.
Mais telas
Stack
- Next.js
- TypeScript
- GSAP
- ScrollTrigger
- Lenis
- Framer Motion
- Tailwind