See how your child thinks. Bondly is a psychometric testing platform disguised as storytime. It measures and grows your child's real-world decision-making skills through interactive story scenarios — played together by parents and children on a shared device.
Bondly is a pair-bonding psychometric platform for long-term tracking of children (K–6). Instead of clinical questionnaires, children experience rich, illustrated story scenarios — complete with animations, background music, and vivid AI-generated imagery — designed by child psychologists to feel like a game.
Parents and children sit side-by-side and read together. At key moments in the story, the child makes a decision under a gentle time limit. Then the parent answers the same question as a mentor. Every choice is tracked and mapped to validated psychometric frameworks (MBTI, decision-making quality, empathy, safety awareness, and more).
After each session, parents get an easy-to-read insight report: personality type, skill scores, decision uniqueness, and growth trends over time.
- Stories, not worksheets — Scenarios based on real situations kids face: stranger danger, peer pressure, money decisions, emotional dilemmas
- Pair learning — Child answers first (with countdown), parent mentors second (no time limit). Same question, different perspectives
- Designed by child psychologists — Every choice maps to real decision-making dimensions. Cuteness and engagement are deliberate, not decorative
- Long-term tracking — Quarterly psychometric snapshots with weekly story sessions build a longitudinal picture of how your child grows
- Choose a story — Browse by category: Psychometric evaluations, Decision-making scenarios, or Educational adventures
- Play together — Parent and child share a device. The story unfolds with narrated scenes and illustrated moments
- Child decides — At each decision point, the child picks their answer within a countdown timer
- Parent mentors — The parent answers the same question (no time limit), then both see a comparison and discussion prompt
- See the insights — After the story, the parent dashboard shows personality traits, skill scores, and how their child's choices compare to peers
- Illustrated narrative scenes with full-bleed AI-generated art and gradient scrims
- Background music that loops during play and fades out at the finale
- Video integration — Interaction videos triggered by specific choices, plus continue videos between scenes
- Progress tracking with animated progress bar and phase indicators
| Type | Description |
|---|---|
| Multiple Choice | Text-based options with labels |
| Emoji Match | Visual grid selection with emoji and labels |
| True / False | Binary decision with large touch targets |
| Fill in the Blank | Sentence completion with word options |
| Mode | Behavior |
|---|---|
| Absolute | One correct answer. If child gets it right, parent is skipped |
| Ranked | Answers have quality ranks. Parent always answers for comparison |
| Subjective | No right or wrong. Neutral blue selection styling (no red/green). Parent discusses via mentor tips |
Subjective mode is used for psychometric evaluations (MBTI). There is no "incorrect" answer — every choice maps to a personality dimension.
The landing page includes a live preview of what parents see:
- MBTI personality type — Four-axis breakdown (E/I, S/N, T/F, J/P) with percentile bars
- Decision uniqueness — How your child's choices compare to peers (percentile ranking per story)
- Skill scores — Safety awareness, empathy, financial thinking, self-control, honesty — each with a progress bar and coaching note
- Growth trends — Month-over-month change across all dimensions
Full dashboard (demo data) with:
- Child profile and photo
- Emotion pattern tracking (calm, hesitant, frustrated, recovering)
- Progress over time (confidence, regulation, empathy, recovery)
- Scenario performance breakdowns (conflict, teamwork, ambiguity)
- Guidance cards with actionable conversation starters
A 12-question story where a child helps plan a town festival. Each decision point maps to one of the four MBTI axes:
- E/I (Extraversion / Introversion) — How do you want to plan? Big meeting or small group?
- S/N (Sensing / Intuition) — Follow the instructions or imagine something new?
- T/F (Thinking / Feeling) — Fix the problem efficiently or consider everyone's feelings?
- J/P (Judging / Perceiving) — Stick to the schedule or go with the flow?
Three questions per axis. All scored as subjective (no correct answer). Ages 5–10, ~12 minutes.
A 4-chapter adventure with Lila the fox. Questions cover science (materials, photosynthesis), reading (fill-in-the-blank), and pattern recognition. All scored as absolute (one correct answer). Ages 4–7, ~5 minutes.
| Layer | Technology |
|---|---|
| Framework | Next.js 16.2 (App Router) |
| Language | TypeScript 5 |
| Styling | Tailwind CSS 4 with custom glassmorphic utilities |
| React | React 19 |
| Image generation | Replicate API (Seedream 4.5) |
| Deployment | Vercel |
- Glassmorphism —
.glass,.glass-strong,.glass-subtle,.glass-darkutilities for frosted-glass panels - Color palette — Purple (primary), pink (accent), orange (child theme), teal (success), with light variants
- Animations — Float, wiggle, sparkle, bounce, slide-up, fade-in with staggered delay classes
- Decorative emoji — Floating butterflies, sparkles, rainbows, and flowers for a child-friendly feel
src/
├── app/
│ ├── page.tsx # Landing page
│ ├── layout.tsx # Root layout + metadata
│ ├── globals.css # Styles, animations, glass utilities
│ ├── demo/page.tsx # Redirects to /stories
│ ├── stories/
│ │ ├── page.tsx # Story catalog with category tabs
│ │ └── [slug]/page.tsx # Dynamic story player
│ ├── parent-login/page.tsx # Parent authentication
│ └── parent-dashboard/page.tsx # Analytics dashboard
├── components/
│ ├── Navbar.tsx # Fixed header with Bondly logo
│ ├── HeroSection.tsx # Landing hero with floating animations
│ ├── HowItWorks.tsx # 3-step walkthrough
│ ├── TabletDemo.tsx # Interactive demo preview
│ ├── InsightsDashboard.tsx # Sample parent report
│ ├── ValueProps.tsx # Value proposition cards
│ ├── Footer.tsx # Site footer
│ ├── BondlyLogo.tsx # Logo component
│ ├── StoriesPage.tsx # Story catalog UI
│ ├── StoryPlayer.tsx # Story loader by slug
│ ├── demo/
│ │ ├── DemoStory.tsx # Story player engine
│ │ ├── ImageSlide.tsx # Narrative scene renderer
│ │ ├── QuestionSlide.tsx # Question UI with phases
│ │ ├── storyData.ts # Types + Enchanted Forest data
│ │ ├── mbtiStory.ts # Starfall Festival MBTI story
│ │ └── storyRegistry.ts # Story catalog metadata
│ └── parent-dashboard/
│ ├── ParentDashboard.tsx # Full dashboard component
│ ├── ParentLoginForm.tsx # Login form
│ └── demoData.ts # Demo analytics data
public/
├── stories/
│ ├── enchanted-forest/ # 6 scene images + music + video
│ └── mbti/ # 11 scene images + video
├── category-*.svg # Category icons
├── story-icon-*.svg # Story card icons
└── hero-story.jpg # Landing page hero
scripts/
├── generate-story-images.mjs # Replicate Seedream 4.5 pipeline
└── dev-local.ps1 # Windows dev script
npm install
npm run devpython -m venv .venv
.\.venv\Scripts\Activate.ps1
python -m pip install nodeenv
nodeenv -p --node=20.19.0
node .\.venv\Scripts\node_modules\npm\bin\npm-cli.js ci
.\scripts\dev-local.ps1Open http://localhost:3000.
Story scene images are generated using Replicate's Seedream 4.5 model. The generation script lives at scripts/generate-story-images.mjs.
# Set your API token
echo "REPLICATE_API_TOKEN=r8_..." > .env.local
# Preview prompts without generating
node scripts/generate-story-images.mjs --dry-run
# Generate all images for a specific story
node scripts/generate-story-images.mjs --story mbti
# Generate all missing images
node scripts/generate-story-images.mjsImages are saved to public/stories/{slug}/ and referenced by story data files.
- Create the story data in
src/components/demo/(e.g.,myStory.ts) following theStoryDatainterface - Register it in
storyRegistry.tswith slug, title, category, age range, and metadata - Generate images by adding prompts to the generation script and running it
- Place audio (optional) in
public/stories/{slug}/music.mp3
The story player handles everything else: routing, phase transitions, scoring, and feedback.
| Variable | Purpose |
|---|---|
REPLICATE_API_TOKEN |
Replicate API key for image generation |
OPENROUTER_API_KEY |
OpenRouter API key (future use) |
Store in .env.local (gitignored).