Update README.md
This commit is contained in:
@@ -1,2 +1,181 @@
|
|||||||
# Pip---the-Whispering-Cloud
|
# 🦔 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."* 🌈
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user