The dragons' forbidden library · an 8-chapter interactive documentary
THE AGE OF DRAGONS
Problem
Mythology and pop-culture sites default to encyclopedia mode: running text, static images, zero immersion. None of the cinematic weight the subject deserves.
Solution
A concept experience that opens into a forbidden ancient library: fullscreen video hero with the dragon emerging from lightning, an ember cursor, rising ash and occasional thunder, plus 8 chapters bridging myth and fiction. It covers the dragon's birth across 6 mythologies (China, Japan, medieval Europe, Norse, Maya, Celtic), fiction's 10 most iconic dragons in 3D cards with an original glyph mark each (no official stills used), a clickable world map, a horizontal timeline pinned on scroll, a gallery of public-domain engravings, a power comparison table and a final silhouette slowly beating its wings.
How it was built
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.
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.
IP-safe by design
Original SVG glyphs per fictional dragon, zero official stills. The legal constraint became the visual identity.
100% public-domain art
Every historical artwork came from Wikimedia Commons, individually verified before upload.
Cards with mouse-tracked light
3D tilt + radial red glow driven by CSS variables, updated every frame via GSAP quickTo.
More screens
Stack
- Next.js
- TypeScript
- GSAP
- ScrollTrigger
- Lenis
- Framer Motion
- Tailwind