Mesozoic: Natural History Landing
A single-page natural-history-museum concept: a full-bleed animated MESOZOIC wordmark, a video-backed hero, a scroll-revealed exploration section, and a dark collection section with an auto-cycling chapter list and an SVG sand-dissolve image transition.
A self-directed demo built to practice AI-native delivery. Not a real product or client project.
Overview
Mesozoic is an editorial natural-history-museum concept: a full-bleed animated wordmark, a video-backed hero, a scroll-revealed “Explore Our World” section, and a dark collection section with an auto-cycling chapter list and an SVG sand-dissolve image transition.
Stack & what's notable
Vite, React 19, TypeScript, Tailwind CSS 4, Framer Motion, lucide-react. Every animation runs through Motion; the chapter gallery uses a custom SVG filter (feTurbulence + feDisplacementMap) for the sand dissolve.
Project stack
TypeScript
Typed end to end
Vite
Build tool + dev server
Tailwind CSS
Utility-first styling
Motion
Animation
