Mother Nature & Father Time
Children's Picture Book
A 14-page illustrated digital reader dedicated to Bash and Willow, with love from Dad. Touch-native navigation, dark-mode native, bilingual-ready architecture. Built on Vite 8 + React 19, deployed to Cloudflare Pages.
01. Architecture
A purpose-built digital reader optimised for children's tablets. Layout, typography, and interaction model are derived from the original PDF spec — scaled to screen using CSS clamp() functions throughout.
- ▸ Vite 8 + React 19 + TypeScript — strict mode, deployed to Cloudflare Pages
- ▸ 14 pages — cover, dedication, 10 story pages, author note, back matter. Each page is a self-contained React component.
-
▸
Fluid layout — image panel
flex: 0 0 52%, text panelflex: 1. Responsive breakpoints collapse to vertical stack on mobile. - ▸ clamp() font scaling — PDF spec range 9–26px mapped to screen 15–52px. All typography scales continuously with viewport width.
- ▸ Touch + swipe navigation — ‹ › arrow overlay, swipe gesture detection, progress bar showing current page. Optimised for 10" Android tablets.
-
▸
AI illustrations — 2000×848px images,
objectFit: cover+objectPosition: center 30%for consistent focal framing - ▸ Reader selector — Bash / Willow / Dad / Guest, shown on cover page. Personalises the reading experience per reader identity.
- ▸ Dark-native — no pure blacks, warm dark palette. Bilingual-ready: text content fully separated from layout for future translation.
02. Story & Dedication
"The Spark and the Cage"
Mother Nature covers her ears while Father Time builds a fortress. A story about the tension between wildness and structure, freedom and protection — told for children who live in the space between both.
Dedicated to Bash and Willow. The dedication page is the first spread the reader encounters after the cover — before the story begins, the purpose is declared.
The author note (page 13) identifies Will Johnson, AuDHD, P31 Labs — establishing provenance and connecting the book to the broader ecosystem of evidence.
The bilingual-ready architecture means all text content is stored in a single data structure separate from the layout components. Adding a Spanish or ASL-gloss layer requires no layout changes — only a new content object.
/apps/book ↗