MILWEB®
MILWEB®
MW/019 — THE AGE OF DRAGONSSTUDIO

THE AGE OF DRAGONS

THE AGE OF DRAGONS — home screen
STUDIO
MILWEB
TYPE
SCROLL EXPERIENCE
STATUS
LIVE
VISIT SITE ↗

02 / THE IDEA

The dragons' forbidden library · an 8-chapter interactive documentary

Mythology and pop-culture sites default to encyclopedia mode: running text, static images, zero immersion. None of the cinematic weight the subject deserves.

03 / EXPERIENCE

  1. 01 / 01

    Original SVG glyphs per fictional dragon, zero official stills. The legal constraint became the visual identity.

    THE AGE OF DRAGONS — 01

  2. 02 / 02

    Every historical artwork came from Wikimedia Commons, individually verified before upload.

    THE AGE OF DRAGONS — 02

  3. 03 / 03

    3D tilt + radial red glow driven by CSS variables, updated every frame via GSAP quickTo.

    THE AGE OF DRAGONS — 03
Cards for fiction's 10 most iconic dragons with original glyphs and mouse-tracked red light

04 / UNDER THE HOOD

  • 01The legal constraint became the project's strongest design decision. The 10 fictional dragons (Smaug, Drogon, Balerion, Alduin...) are prote…+

    The legal constraint became the project's strongest design decision. The 10 fictional dragons (Smaug, Drogon, Balerion, Alduin...) are protected IP, so each card got its own mark instead of any official still: a minimalist SVG line drawing in a color unique to its universe. The historical sections, in turn, use only public-domain art (Hokusai, Dürer, Doré, Chen Rong), curated and individually verified via the Wikimedia Commons API before going live.

  • 02The cinematic engine is a single client-side island: Lenis handles smooth scroll, ScrollTrigger fires the letter-by-letter reveals (SplitTex…+

    The cinematic engine is a single client-side island: Lenis handles smooth scroll, ScrollTrigger fires the letter-by-letter reveals (SplitText) and the timeline's horizontal pin, and each 3D card follows the cursor with a radial red light anchored to CSS variables (--mx/--my) updated every frame. It's the same damped-cursor pattern (quickTo) used in sibling projects, here art-directed toward deep black, fire red and old gold.

BUILT WITH — Next.js · TypeScript · GSAP · ScrollTrigger · Lenis · Framer Motion · Tailwind

06 / RESULT

8 chapters · 10 dragons · 6 mythologies

PERSONAL PROJECT · LIVE

[ I WANT SOMETHING LIKE THIS ]

07 / SELECTED SCREENS
Cards for fiction's 10 most iconic dragons with original glyphs and mouse-tracked red light
SCREEN 01Cards for fiction's 10 most iconic dragons with original glyphs and mouse-tracked red light
Clickable world map with the dragon's 6 mythologies
SCREEN 02Clickable world map with the dragon's 6 mythologies
Horizontal timeline pinned on scroll, from 1750 BCE to the streaming era
SCREEN 03Horizontal timeline pinned on scroll, from 1750 BCE to the streaming era
Final dragon silhouette slowly beating its wings over the closing section
SCREEN 04Final dragon silhouette slowly beating its wings over the closing section
NEXT EXPERIENCE11 / ONE PIECE

ONE PIECE

ONE PIECE

ALL WORK →

ALL WORK