“Svetlio’s Math World”” – High-Fidelity Bulgarian Educational App
Core Concept & Logic:
Create a responsive, mobile-optimized React application using TypeScript, Tailwind CSS, and Vite, designed for Bulgarian primary students (Grades 1-4). The app focuses on Math Word Problems through a Socratic Hinting System, where the character guides the student with helpful questions (e.g., “”Ако имаш 7 камъчета и дадеш 2, можеш ли да броиш назад?””) instead of giving direct answers. All UI text must be in Bulgarian.
Visual Hero & Aesthetics:
Character: A single 3D Kawaii-style Elf named Svetlio with a Traffic Light hat (Red, Yellow, Green).
Costume System: The Elf changes outfits based on the selected theme: Dinosaur costume, Space suit, or Pirate outfit.
States: Implement a CharacterComponent with 4 expressive states: Idle 😊, Thinking 🤔, Happy/Dancing 🎉, and Encouraging 💪.
Style: Soft pastel palette (Mint green, soft peach, lavender, sky blue) with an AnimatedBackground featuring subtle gradients and floating sparkles.
UI/UX Flow & Components:
Welcome Screen: Grade selection (1-4 клас) with a “”Здравей, приятел!”” greeting.
Theme Selection: Visual cards showing Svetlio in different costumes (Dinosaurs, Space, Pirates).
Task Screen: Themed math stories with a Large Touch-Friendly Numeric Keypad and a Thinking Bubble for Socratic hints.
Success Screen: Celebration with dancing confetti and the Elf.
Interactive Elements: Use SquishyButton components (32px border radius, glossy highlights, scale animations on press) and Spring Animations for bouncy transitions.
Technical Specifications:
Architecture: Scalable component library for easy addition of new grades and themes.
Animations: Custom CSS keyframes for floating effects and smooth gradient shifts.
Curriculum Alignment: Problems must match the Bulgarian educational standards for each grade.
Tone: Gender-neutral, warm, and safe educational space.
Labels: “”Провери””, “”Помогни ми!””, “”Ти си супер!””, “”Нова задача””.
