MILWEB®
MILWEB®
MW/019THE AGE OF DRAGONSESTUDIO

THE AGE OF DRAGONS

THE AGE OF DRAGONS — pantalla inicial
ESTUDIO
MILWEB
TIPO
EXPERIENCIA EN SCROLL
ESTADO
EN LÍNEA

02 / LA IDEA

Biblioteca prohibida de los dragones · documental interactivo en 8 capítulos

Los sitios sobre mitología y cultura pop se vuelven enciclopedia: texto corrido, imagen estática, cero inmersión. Nada del peso cinematográfico que el tema pide.

03 / EXPERIENCIA
  1. 01 / 01

    Glifos SVG originales por dragón de ficción, cero stills oficiales. La restricción legal se convirtió en identidad visual.

    THE AGE OF DRAGONS — 01
  2. 02 / 02

    Toda pieza histórica vino de Wikimedia Commons, verificada individualmente antes del upload.

    THE AGE OF DRAGONS — 02
  3. 03 / 03

    Tilt 3D + glow rojo radial en variables CSS, actualizado en cada frame vía GSAP quickTo.

    THE AGE OF DRAGONS — 03
Cards de los 10 dragones más icónicos de la ficción con glifo original y luz roja al mouse

04 / BAJO EL CAPÓ

  • 01La restricción legal se convirtió en la decisión de diseño más fuerte del proyecto. Los 10 dragones de ficción (Smaug, Drogon, Balerion, Ald…+

    La restricción legal se convirtió en la decisión de diseño más fuerte del proyecto. Los 10 dragones de ficción (Smaug, Drogon, Balerion, Alduin...) son propiedad intelectual protegida, así que cada card recibió un glifo propio en lugar de cualquier still oficial: trazo minimalista en SVG, con color exclusivo por universo. Las secciones históricas, a su vez, usan solo arte de dominio público (Hokusai, Dürer, Doré, Chen Rong), curado y verificado uno por uno en la API de Wikimedia Commons antes de entrar al sitio.

  • 02El motor cinematográfico es una única isla client-side: Lenis se encarga del scroll fluido, ScrollTrigger dispara las revelaciones letra por…+

    El motor cinematográfico es una única isla client-side: Lenis se encarga del scroll fluido, ScrollTrigger dispara las revelaciones letra por letra (SplitText) y el pin horizontal de la línea de tiempo, y cada card 3D sigue al mouse con una luz roja radial anclada en variables CSS (--mx/--my) actualizadas en cada frame. Es el mismo patrón de cursor amortiguado (quickTo) usado en los proyectos hermanos, aquí con dirección de arte gótica: negro profundo, rojo fuego, dorado antiguo.

CONSTRUIDO CONNext.js · TypeScript · GSAP · ScrollTrigger · Lenis · Framer Motion · Tailwind

06 / RESULTADO

8 capítulos · 10 dragones · 6 mitologías

PROYECTO PROPIO · EN LÍNEA

[ QUIERO ALGO PARECIDO ]

07 / PANTALLAS SELECCIONADAS
Cards de los 10 dragones más icónicos de la ficción con glifo original y luz roja al mouse
PANTALLA 01Cards de los 10 dragones más icónicos de la ficción con glifo original y luz roja al mouse
Mapa mundial clicable con las 6 mitologías del dragón
PANTALLA 02Mapa mundial clicable con las 6 mitologías del dragón
Línea de tiempo horizontal fijada al scroll, del 1750 a. C. a la era del streaming
PANTALLA 03Línea de tiempo horizontal fijada al scroll, del 1750 a. C. a la era del streaming
Silueta final del dragón batiendo las alas despacio sobre el cierre
PANTALLA 04Silueta final del dragón batiendo las alas despacio sobre el cierre
SIGUIENTE EXPERIENCIA11 / ONE PIECE

ONE PIECE

ONE PIECE

TODOS LOS PROYECTOS

TODOS LOS PROYECTOS