diff --git a/README.md b/README.md index 2e8e694..7330ff4 100644 --- a/README.md +++ b/README.md @@ -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.* 🌈 + +![Type](https://img.shields.io/badge/Type-Interactive_Storybook-amber) +![Stack](https://img.shields.io/badge/Built_with-React_19_Β·_Vite_7_Β·_Tailwind_4-38bdf8) +![Illustration](https://img.shields.io/badge/Art-Digital_Gouache_&_Watercolor-fda4af) +![Audience](https://img.shields.io/badge/Ages-1–9_(3_Editions)-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 +cd + +# 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."* 🌈