SCROLL EXPERIENCE
THE AGE OF DRAGONS
The dragons' forbidden library · an 8-chapter interactive documentary
DEMOLIVE
CONTEXT
Mythology and pop-culture sites default to encyclopedia mode: running text, static images, zero immersion. None of the cinematic weight the subject deserves.
WHAT WAS DONE
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.
8 CHAPTERS · 10 DRAGONS · 6 MYTHOLOGIES
SOLUTIONS
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.
TECHNICAL DETAIL
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.
SCREENS
01 Cards for fiction's 10 most iconic dragons with original glyphs and mouse-tracked red light 
02 Clickable world map with the dragon's 6 mythologies 
03 Horizontal timeline pinned on scroll, from 1750 BCE to the streaming era 
04 Final dragon silhouette slowly beating its wings over the closing section
RESULT
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.