MILWEB®
MILWEB®
MW/019THE AGE OF DRAGONSESTÚDIO

THE AGE OF DRAGONS

THE AGE OF DRAGONS — tela inicial
ESTÚDIO
MILWEB
TIPO
EXPERIÊNCIA NO SCROLL
STATUS
NO AR

02 / A IDEIA

Biblioteca proibida dos dragões · documentário interativo em 8 capítulos

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.

03 / EXPERIÊNCIA
  1. 01 / 01

    Glifos SVG autorais por dragão de ficção, zero still oficial. A restrição legal virou identidade visual.

    THE AGE OF DRAGONS — 01
  2. 02 / 02

    Toda peça histórica veio do Wikimedia Commons, verificada individualmente antes do upload.

    THE AGE OF DRAGONS — 02
  3. 03 / 03

    Tilt 3D + glow vermelho radial em variáveis CSS, atualizado a cada frame via GSAP quickTo.

    THE AGE OF DRAGONS — 03
Cards dos 10 dragões mais icônicos da ficção com glifo autoral e luz vermelha ao mouse

04 / POR BAIXO DO CAPÔ

  • 01A 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 propried…+

    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.

  • 02O motor cinematográfico é uma única ilha client-side: Lenis cuida do scroll fluido, ScrollTrigger dispara as revelações letra por letra (Spl…+

    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.

CONSTRUÍDO COMNext.js · TypeScript · GSAP · ScrollTrigger · Lenis · Framer Motion · Tailwind

06 / RESULTADO

8 capítulos · 10 dragões · 6 mitologias

PROJETO AUTORAL · NO AR

[ QUERO ALGO PARECIDO ]

07 / TELAS SELECIONADAS
Cards dos 10 dragões mais icônicos da ficção com glifo autoral e luz vermelha ao mouse
TELA 01Cards dos 10 dragões mais icônicos da ficção com glifo autoral e luz vermelha ao mouse
Mapa mundial clicável com as 6 mitologias do dragão
TELA 02Mapa mundial clicável com as 6 mitologias do dragão
Linha do tempo horizontal pinada no scroll, de 1750 a.C. à era do streaming
TELA 03Linha do tempo horizontal pinada no scroll, de 1750 a.C. à era do streaming
Silhueta final do dragão batendo asas devagar sobre o encerramento
TELA 04Silhueta final do dragão batendo asas devagar sobre o encerramento
PRÓXIMA EXPERIÊNCIA11 / ONE PIECE

ONE PIECE

ONE PIECE

TODOS OS PROJETOS

TODOS OS PROJETOS