182 lines
8.3 KiB
Markdown
182 lines
8.3 KiB
Markdown
# 🦔 Pip & the Whispering Cloud
|
||
|
||
### A Heartwarming Children's Storybook Concept & Interactive Studio Experience
|
||
|
||
> *When an inventive, cinnamon-quilled hedgehog named Pip meets Caelum — a bashful baby cloud afraid of making thunder — their paintbrush-and-heart journey shows that true kindness doesn't need to roar to make the meadow bloom.* 🌈
|
||
|
||
|
||
|
||
|
||
-a7f3d0)
|
||
|
||
---
|
||
|
||
## 📖 About the Project
|
||
|
||
**Pip & the Whispering Cloud** is a complete children's storybook concept developed as a fully functional, interactive web application. It serves **two audiences at once**:
|
||
|
||
1. **Young readers & families** — a live illustrated storybook with read-aloud narration, touch-activated sound effects, hidden-star hunts, drawing canvas, kindness challenges, and bedtime breathing exercises.
|
||
2. **Authors, illustrators & editors** — a professional production studio containing the scene-by-scene storyboard bible, art direction guide, character dossiers, age-adaptability matrix, publishing format strategy, and a print-ready editorial pitch deck.
|
||
|
||
### 🔑 Core Themes
|
||
- 🤍 **Empathy & Active Listening** — holding space for big, quiet feelings
|
||
- 🎨 **Creative Problem-Solving** — when force fails, try colors, song & play
|
||
- 🌧️ **Emotional Acceptance** — tears and softness are catalysts for blooming
|
||
- ☁️ **Unconditional Friendship** — belonging through what makes you distinct
|
||
|
||
---
|
||
|
||
## ✨ Features
|
||
|
||
| Section | Description |
|
||
|---|---|
|
||
| 📖 **Live Story Reader** | Illustrated open-book spread with page-turn sounds, **Web Speech API "Read to Me"** narration (adjustable pace), dialogue spotlight boxes, and a hidden ⭐ star hunt with confetti rewards |
|
||
| 👆 **Touch Hot-Spots** | Tap characters & objects to trigger playful **Web Audio API** synthesized sounds (pops, chimes, harp, rain, giggles) — zero audio files needed |
|
||
| 🎬 **Storyboard Bible** | 5 scenes across 3 acts with setting, characters-on-stage, dialogue + tone, key actions, camera angles, lighting keys, focal points & copyable illustration prompts |
|
||
| 🎨 **Art Direction Guide** | Master color palette with one-click hex copying, character expression rules, lighting atmosphere keys, and an interactive **illustration prompt builder** |
|
||
| 👥 **Character Vault** | Deep dossiers for Pip, Caelum, Barnaby & Squeak — anatomy, quirks, voice-actor direction with **audio auditions**, and emotional arcs |
|
||
| 🔄 **Age Adaptability Matrix** | One story, three editions: **Toddler (1–3)**, **Picture Book (4–7)**, **Early Reader (7–9)** — with live side-by-side text comparator for any scene |
|
||
| 📐 **Format Strategy** | Editorial evaluation of Picture Book / Interactive E-Book / Chapter Book / Audio editions, specs, pricing & comp-title positioning |
|
||
| 🖍️ **Activity Corner** | "Paint Your Cloud" drawing canvas (with save), kindness challenge generator, 4-4-4 bedtime cloud breathing widget & caregiver discussion guide |
|
||
| 🖨️ **Pitch Deck** | One-click print/PDF-ready editorial pitch document |
|
||
| 🌙 **Day / Bedtime Mode** | Global theme toggle — sunlit meadow by day, velvet indigo starlight by night |
|
||
|
||
---
|
||
|
||
## 🛠️ Tech Stack
|
||
|
||
|
||
|
||
|
||
| Layer | Technology |
|
||
|---|---|
|
||
| Framework | [React 19](https://react.dev/) + [Vite 7](https://vitejs.dev/) (TypeScript) |
|
||
| Styling | [Tailwind CSS 4](https://tailwindcss.com/) |
|
||
| Icons | [Lucide React](https://lucide.dev/) |
|
||
| Celebrations | [canvas-confetti](https://www.npmjs.com/package/canvas-confetti) |
|
||
| Narration | Web Speech API (SpeechSynthesis) |
|
||
| Sound FX | Web Audio API synthesizer (no external audio assets) |
|
||
| Illustrations | AI-generated digital gouache/watercolor artwork |
|
||
| Fonts | Fredoka · Nunito · Quicksand · Patrick Hand |
|
||
|
||
---
|
||
|
||
## 🚀 Getting Started
|
||
|
||
### Prerequisites
|
||
- **Node.js** 18+ and npm
|
||
|
||
### Installation
|
||
|
||
```bash
|
||
# Clone the repository
|
||
git clone <your-repo-url>
|
||
cd <project-folder>
|
||
|
||
# Install dependencies
|
||
npm install
|
||
```
|
||
|
||
### Development
|
||
|
||
```bash
|
||
# Start the dev server (hot reload)
|
||
npm run dev
|
||
```
|
||
|
||
Open [http://localhost:5173](http://localhost:5173) — tap **Read to Me** in the Story Reader and start turning pages!
|
||
|
||
### Production Build
|
||
|
||
```bash
|
||
# Build → dist/index.html (single-file bundle)
|
||
npm run build
|
||
|
||
# Preview the production build
|
||
npm run preview
|
||
```
|
||
|
||
> 📦 The build inlines all JS/CSS into a single `dist/index.html`, ready to host anywhere (GitHub Pages, Netlify, Vercel, S3...). Images are served from `public/images/`.
|
||
|
||
---
|
||
|
||
## 📂 Project Structure
|
||
|
||
```
|
||
├── index.html # Entry + Google Fonts
|
||
├── public/
|
||
│ └── images/ # Generated storybook illustrations
|
||
│ ├── cover.jpg # Book cover
|
||
│ ├── scene1.jpg # Hollow Oak Workshop
|
||
│ ├── scene2.jpg # Meeting Caelum on Clover Hill
|
||
│ ├── scene3.jpg # Creative Meadow Trials
|
||
│ ├── scene4.jpg # Rainbow Blossom Shower (climax)
|
||
│ └── scene5.jpg # Twilight & Sweet Dreams
|
||
└── src/
|
||
├── App.tsx # Root app: view router, theme state, footer
|
||
├── index.css # Font stacks, textures & whimsical animations
|
||
├── data/
|
||
│ └── storyData.ts # 📚 Full story bible: scenes, characters,
|
||
│ # palettes, age adaptations, formats,
|
||
│ # kindness challenges, discussion prompts
|
||
├── utils/
|
||
│ ├── audio.ts # 🔊 Web Audio synthesized SFX manager
|
||
│ └── speech.ts # 🗣️ Web Speech read-aloud narrator
|
||
└── components/
|
||
├── Navbar.tsx # Tabs, age edition switcher, mode toggles
|
||
├── StoryReader.tsx # Interactive illustrated book reader
|
||
├── StoryboardView.tsx # Scene-by-scene storyboard bible
|
||
├── ArtDirectionView.tsx# Palette, expressions & prompt builder
|
||
├── CharacterVault.tsx # Cast profiles + voice auditions
|
||
├── AdaptabilityView.tsx# 3-age edition matrix & comparator
|
||
├── FormatStrategyView.tsx # Publishing formats & strategy
|
||
├── ActivityCorner.tsx # Canvas, kindness, breathing, discussion
|
||
└── PitchDeckModal.tsx # Print-ready editorial pitch deck
|
||
```
|
||
|
||
---
|
||
|
||
## 🎬 The Story at a Glance
|
||
|
||
**Act I — The Beginning**
|
||
> In his warm hollow-oak workshop, Pip follows a mysterious curl of silver mist to Clover Hill, where he meets drooping little Caelum — a baby cloud ashamed that he can whisper but never boom.
|
||
|
||
**Act II — The Middle & Climax**
|
||
> With wise Barnaby Bear and spunky Squeak the bluebird, brute force fails — so Pip paints berry-warm colors across the cloud's vapor. Caelum giggles, the gray knot melts, and he releases a shimmering **rainbow blossom shower** that revives the thirsty meadow.
|
||
|
||
**Act III — The End**
|
||
> Under a velvet indigo sky, Pip sips honey chamomile tea while Caelum curls around the crescent moon — safe, accepted, and home. 🌙
|
||
|
||
---
|
||
|
||
## 🔄 Three Editions in One
|
||
|
||
| Edition | Ages | Format | Style |
|
||
|---|---|---|---|
|
||
| *Pip and Little Cloud* | 1–3 | Sensory board book | Onomatopoeia, motor prompts, touch |
|
||
| *Pip & the Whispering Cloud* | 4–7 | 32-page picture book | Lyrical prose, dialogue, search-&-find |
|
||
| *Bramblewood Chronicles* | 7–9 | 64-page chapter book | Vocabulary spotlights, comprehension checks |
|
||
|
||
---
|
||
|
||
## 🎨 Art Direction
|
||
|
||
- **Medium:** Soft digital gouache & watercolor with visible rag-paper grain
|
||
- **Palette:** Morning Meadow Mint `#a7f3d0` · Pip's Mustard `#f59e0b` · Caelum Sky Pearl `#e0f2fe` · Twilight Lavender `#c084fc` · Cozy Hearth Bark `#78350f` · Blossom Rosé `#fda4af`
|
||
- **Rule of line:** No harsh black outlines — warm umber & deep indigo only
|
||
|
||
---
|
||
|
||
## 📄 License
|
||
|
||
Story concept, characters, text & artwork are part of this project's creative portfolio. All rights reserved unless otherwise specified — feel free to reach out for licensing or collaboration.
|
||
|
||
---
|
||
|
||
## ❤️ Credits
|
||
|
||
**Concept, Story & Build** — crafted by **aimirah | mi4inc**
|
||
|
||
> *"The quietest shower made the biggest rainbow."* 🌈
|
||
|