Case study · 2026-05-06

Evatosorus

Codex paléontologique premium — suite naturelle d'Eywa (même destinataire, même pattern Astro). 1500+ espèces du Mésozoïque importées de PaleoBioDB, 7 films Jurassic Park comme entries narratives, hero T-Rex généré à l'IA. Ton documentaire BBC, palette ambre / sable / terre, build statique pur sur Cloudflare Pages.

Le pitch

La même destinataire avait déjà reçu Eywa l'an passé (codex Avatar / Pandora). Pour le deuxième round, on monte d'un cran : un codex paléontologique du Mésozoïque tout entier — Trias, Jurassique, Crétacé. 1500+ espèces, paleo-art domaine public, voyage temporel cinématique, carte des fossiles trouvés. Bonus vanne maison : qui a déjà vu Avatar douze fois ne refusera pas un T-Rex en plein écran.

Mêmes briques techniques que Eywa (Astro + Tailwind), même pattern codex, mais identité visuelle opposée : là où Eywa était cyan / bioluminescent / océan, Evatosorus tape dans l'ambre / sable / terre / fossile. Pas de duplication UX verbatim — anti-pattern explicite.

Architecture

Aucun backend NestJS. Aucun NAS. Build statique pur figé au moment du deploy, hébergé sur Cloudflare Pages. Les données viennent d'APIs publiques (PaleoBioDB, Wikimedia Commons, GBIF) ingérées au build via un script Node, et les assets visuels lourds (image hero + 3 boucles MP4) viennent d'openart.ai.

Architecture
Loading diagram…
Pipeline build-time : sources publiques + assets IA → Astro statique → Cloudflare Pages.

Données — 1500+ espèces du Mésozoïque

La source principale est l'API PaleoBioDB — gratuite, riche, taxonomie exhaustive avec occurrences fossiles datées. Un script import-paleobiodb.mjs tape l'API et écrit un JSON généré, qui est mergé au build avec un seed manuel de ~24 espèces stars curées à la main (T-Rex, Vélociraptor, Brachiosaurus, Spinosaurus…).

Le seed reste la source de vérité — toute regen auto doit préserver les fiches déjà curées (merge, pas overwrite). Anti-pattern frontal : importer 1500 espèces sans paleo-art donne des fiches creuses. Solution : fallback propre « Pas d'illustration disponible » avec une silhouette stylisée plutôt qu'un trou visuel. Les images viennent de Wikimedia Commons, vérifiées domaine public ou CC-BY-SA — chaque fiche crédite la licence d'origine.

La carte interactive (Leaflet + tuiles CARTO Dark No Labels) consomme GBIF pour les points de fossiles trouvés. C'est un composant React monté en client:only="react" — Leaflet ne survit pas au SSR.

Films Jurassic Park comme entries narratives

La destinataire n'est pas paléontologue, elle est cinéphile. D'où le pari : plutôt qu'un index académique, on entre dans le codex par les 7 films Jurassic Park. Chaque film a sa fiche (synopsis, année, espèces vedettes), et chaque espèce du film renvoie vers sa propre fiche détaillée. Cross-link bidirectionnel via le seed.

C'est un wedge UX : un visiteur qui ne connaît rien aux dinosaures peut commencer par Jurassic Park (1993) et naviguer de T-Rex à Velociraptor, puis dériver vers les espèces réelles du Crétacé qu'il n'a jamais vues à l'écran. Le ton documentaire BBC du reste du site fait le contre-poids — pas de niaiserie, juste des faits sourcés et un fil narratif.

Hero T-Rex IA + 3 boucles MP4

L'image du T-Rex en hero et les trois boucles vidéo (landing / page films / page about) ont été générées sur openart.ai à partir de prompts curés. Crédit IA explicite sur ce projet : Claude Code (code) + openart.ai (assets visuels).

Cap Cloudflare Pages oblige : chaque fichier doit rester sous 25 MB. Les 3 MP4 totalisent ~40 MB mais chacun passe individuellement, et quand un fichier dépasse on le re-passe au skill optimize-mp4-web (ffmpeg H.264 web-optimisé, réduction 80-95 % sans perte visuelle perceptible). Poster fallback systématique sur hero-trex.jpg — utilisé aussi pour og-image et favicons (cropés au PIL).

La landing reproduit le pattern atmosphère temps-driven validé sur Eywa : pas de scrollytelling forcé, juste une boucle de ~75 secondes qui fait évoluer le fond pendant que le visiteur lit. L'ambiance bouge toute seule, le contenu actionnable reste en haut du viewport.

Ce que Claude Code a fait (et ce que je n'ai pas tapé)

Comme les 5 autres apps de cette série : 0 ligne de code écrite à la main. Tout le code Astro/React/CSS, les blurbs vulgarisés des fiches espèce, le script d'import PaleoBioDB, les composants cinéma (CycleBackdrop + DustField), les filtres réactifs du codex, les routes dynamiques, les fallbacks d'image, les tokens Tailwind 4 ambre/jade/rust — tout est sorti d'une conversation avec Claude Code. Direction artistique et code review côté humain ; implémentation côté Claude.

Versions épinglées (vite@7.3.2, astro@6.2.1) parce que le combo Tailwind 4 + rolldown a une fenêtre de compatibilité étroite sur tsconfigPaths. Trace écrite dans le CLAUDE.md du projet pour ne pas bumper aveuglément.

Case study mise à jour 2026-05-06 · V1 livrée, 1527 pages, dist ~27 MB.