Product design + full-stack build · First slice shipped
MindBloom
— The Bloomverse
A calm, magical learning ecosystem for neurodivergent children — where every lesson grows a flower, every effort is celebrated, and every child is met exactly where they are.
Not an educational platform — a beautiful digital ecosystem where neurodivergent children feel safe, understood, and excited to return. Every decision answered one question: does this increase confidence?
A cohesive, navigable demo of the Bloomverse — from public introduction to the child's living home to a first academy experience. Visual-first, feeling before feature.
Routes shipped
- 01Landing (/) — public introductionHero, principles, character cast, academy previews, parent trust section
- 02My Garden (/garden) — the child's magical home screenBloom greets you, flowers grow when you tap Plant a Bloom, four little worlds beckon
- 03Reading Academy (/reading) — the Enchanted Library with QuillA gentle Tap-each-word tiny lesson — no rush, no score, just listen
System layers
- 04Design systemOKLCH-based warm cream palette — bloom, petal, sunbeam, sky, lavender, moss. Fraunces display + Nunito body. Six slow, non-overstimulating animations.
- 05Character castFive hand-painted Ghibli / Animal-Crossing–style guides: Bloom (sprout), Quill (owl), Pip (fox), Sunny (bunny), Moss (bear)
- 06Shared shellSiteHeader with soft nav, SiteFooter, reusable Cloud / Sparkle / Petal atmospheric components, per-route SEO metadata
The mission
MindBloom is not an educational platform. It is a beautiful digital ecosystem where neurodivergent children feel safe, understood, and excited to return.
Every design decision answered exactly one question: does this increase confidence? If not, it does not belong.
- Calm over chaos — no flashing, no shouting, no punishing streaks. Motion is slow. Colors are warm. Silence is a feature.
- Celebrate over correct — effort blooms something beautiful. No red X's, no scores, no failure states.
- Theirs, not ours — sensory intensity, color, pace, and text size all adjustable. The world adapts to the child.
- Character over UI — Bloom, Quill, Pip, Sunny, and Moss are friends, not mascots. They notice you, cheer for you, grow with you.
Does this increase confidence? If not, it does not belong. — the only design law of the Bloomverse.
Screen 01 — Landing
The first breath of the world. Warm cream paper, a hand-painted valley scene, and Bloom already waiting.
The copy leads with feeling — Where learning helps a whole world bloom — before it explains anything. Three plain-language principles (Safe, Celebrated, Theirs) sit above the character cast, so parents meet the tone before the features.
Feeling before feature. On a product built for neurodivergent children, tone is not decoration — it's the product itself.
Screen 02 — My Garden
The child's home. Bloom stands in a soft valley and greets them by name-tone: Welcome back, friend. Your garden missed you.
The Pick up where you left off card removes the where-do-I-start friction. Tapping Plant a bloom grows a new flower into the scene with a gentle rise animation — pure celebration, no metric attached.
Streaks are reframed as calm days and today's count is blooms grown, not lessons completed. Language is a design decision here.
- Bloom greets, doesn't test — arrival is a hello, not a dashboard
- Continue card removes friction — one obvious next thing to do
- Plant a bloom grows a flower — reward without metric
- Calm days, not streaks — reframes commitment as care, not obligation
- Four little worlds — Reading, Math, Social Skills, Life Skills, all optional entry points
Screen 03 — Reading Academy
The Enchanted Library. Quill the owl greets the child softly.
The lesson surface is stripped to its calmest possible shape — one sentence, seven tappable words, and the instruction No rush. No score. Just listen.
Progress fills a soft bar as each word is tapped. Books on the shelf are labeled by feeling — Continue, New, Bloomed, Locked — rather than by level or grade.
No rush. No score. Just listen. — the entire pedagogy of the Reading Academy fits on a card.
How it's built
The stack was chosen so the visual-first slice could ship fast and stay production-shaped: TanStack Start on React 19 + Vite 7, file-based routing under src/routes/, and Tailwind v4 with a custom OKLCH design system in src/styles.css. Colors, shadows, gradients, and animations are semantic tokens — never hardcoded.
- Framework — TanStack Start (React 19, Vite 7) with file-based routing
- Styling — Tailwind v4 with a custom OKLCH design system, all tokenized
- Typography — Fraunces (display, warmth and story) + Nunito (body, round and kid-friendly)
- Motion — six purpose-built keyframe utilities: sway, drift, float-slow, blink, sparkle, rise. 3–14s durations. Nothing snappy, nothing anxious.
- Illustrations — character and scene art in a consistent hand-painted Ghibli × Animal Crossing style, stored as static assets
- State — purely visual for this slice: React local state for garden blooms and word taps. No backend yet — accounts land with the next slice.
Ship the feeling first. Systems that hold the feeling can be built on top of a proven tone — the reverse almost never works.
What's next
The first slice proves the world. The next slices give it memory, breadth, and voice.
- Sensory Control Panel — the promised adjustments for motion, audio, color intensity, and text size
- Math Academy (Number Forest) with Pip, and Social Skills (Friendship Village) with Sunny
- Bloom as a conversational companion — reading aloud, explaining differently, cheering by name
- Accounts + persistence — a child's garden and friends persist across visits
- Parent view — a gentle, non-metric window into a child's growth (moments, not numbers)
"I want to go back." "My child actually enjoys learning." That is the measure. Joy. Confidence. Growth. That is MindBloom.
By the numbers
Built with
Application
Interface
Motion
Illustration
Selected screens
What this proves I can do
If you need something at this scale, this is the reference build.
- Design for a specific audience, not a generic userNeurodivergent children are the audience. Every decision — motion pace, streak language, sensory controls — flows from that specificity.
- Build tone before you build featuresThe visual-first first slice proves the world. Systems land later, on top of a feeling that already works.
- Reject the defaults of the categoryNo gamified streaks, no red X's, no scores. Ed-tech's default patterns are the exact patterns this audience needs the opposite of.
- Ship character IP, not mascotsBloom, Quill, Pip, Sunny, Moss — five hand-painted guides in a coherent visual world, not stock illustrations.
- Full-stack across product + brand + buildDesign system, motion, illustration direction, routing, SEO, shared shell — one person, one coherent world.