A case study
Built end-to-end
Grand Wildlife Zoo is a pure-concept brand IP. The site you’re reading is the product. This page covers the stack, the workflow, and what shipped in v1. The links to the source and the live build are at the bottom.
The shape, in one paragraph
A 16-zone wildlife park master plan, presented as a cinematic web experience for an audience that is mixed by design: IP buyers on one side, fellow designers and engineers on the other. Astro for the static surfaces, React islands on four interactive demos, Cloudflare Workers behind a small Hono API. The visual system is three Acts — dark/gold for the brand surfaces, painted/cartographic for the journey, dark/gold again for the finale — with named View Transitions between Act boundaries.
Stack
- Frontend
- Astro 5 (static-first) + React islands on the 4 demo pages
- Backend
- Cloudflare Workers + Hono + Zod, one route per file
- Hosting
- Cloudflare Pages (web) + Cloudflare Workers (api subdomain)
- Storage
- Cloudflare KV; D1 and R2 bindings reserved, unused in v1
- Tooling
- pnpm workspaces, Node 22, TypeScript strict everywhere
- Tests
- Vitest (Node env) for units, Playwright for e2e
- Typography
- Cinzel · Cormorant · Source Serif · Inter — self-hosted
Choices favoured boring, well-instrumented edges. Astro because
per-page .astro files give the cleanest possible
boundaries for parallel agents; Cloudflare because the deploy
story is one wrangler call from either side.
How it was built
Five chapters — the same order the project was actually run.
-
Deck → IA
The starting point was a 19-slide master-plan deck. I read it once, traced the natural information architecture out of it, and wrote a 5-section spec before touching any code.
-
Spec → Plan
The spec became a Phase 0 / Phase 1 / Phase 2 / Phase 3 plan with explicit agent briefs and a DO NOT TOUCH list for each one. The plan, not the code, was where partitioning happened.
-
Parallel agents
Phase 2 fanned out into batched general-purpose agents — 4 agents covering all 16 zones in parallel, 4 more for animals, 4 paired demo + worker agents, and 3 brand-page agents working concurrently. This /creator page itself is one of those batched outputs.
-
Foundation first
Phase 1 shipped 5 parallel foundation agents (tokens, base components, layouts, schemas, worker patterns) before any page batch started, so every downstream agent consumed stable shared infra and never had to refactor it.
-
Three Acts
The visual system is a film. Pages declare their Act via a body attribute; CSS tokens layer in palette per Act; the View Transitions API animates the Act boundaries.
What shipped in v1
- 16 Zone pages One Astro file each, MDX content
- 72 Animal entries IUCN-validated content collection
- 4 Interactive demos Map · Tickets · Animals · Countdown
- 3 Visual Acts Promise · Journey · Legacy
- 2 Workspaces apps/web + apps/api
- Live Production grandwildlifezoo.com
Counts read live from the project content collections at build time.
A few honest notes
- The zoo is a concept — there is no physical park. The four interactive demos (map, ticket flow, animal directory, opening countdown) carry plain “concept demo” tells; nothing on the site sells anything or holds any data that matters.
- Some assets are placeholders. Hero illustrations across the 16 zones will swap in over time; the brand logos in the press kit are SVG placeholders until final marks land.
-
Hand-on-keyboard work was done with Claude Code dispatching
general-purpose subagents. The parallel-agent partitioning is the
interesting part — every brief carried a
DO NOT TOUCHlist, which is what kept the fan-out from collapsing into refactor wars. - The site is fast on purpose. Astro ships zero JS on static pages, the four demos hydrate independently, and every page targets Lighthouse 95+ across the board on mobile.
Two ways in
The repo is public and the live build is the final argument. For commissions or a longer conversation, the contact form carries a creator routing.