DEV Community

Akshara A
Akshara A

Posted on Edited on

The Midnight Steeper: A Slow and Steady Bedtime Pet That Sends Kids to Sleep

#devchallenge #hf26challenge

Hacktoberfest Open-Source AI Challenge Week 3: Slow and Steady Submission 🦥

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 3: Slow and Steady

The Midnight Steeper: The Slow and Steady Bedtime Pet That Sends Kids to Sleep

Most kids' mobile games and virtual pets are designed by attention engineers to do one thing: keep kids tapping forever. They use flashing streaks, infinite loops, and dopamine casino bells that make bedtime a nightly negotiation battle between parents and exhausted children.

The Midnight Steeper flips this on its head for the "Slow and Steady" theme. It is a 3D virtual talking pet game starring Sunny the Sloth that ends screen time instead of extending it.

Kids can care for Sunny like Talking Tom — give him a warm bubble bath, feed him treats, play sensory mini-games, and talk with him. But when it's bedtime, kids mix calming botanical tea, tuck Sunny in for a real-time nap, and Sunny tells them to go to sleep too. The game locks down into a tranquil night mode while forest friends secretly visit in the background. In the morning, kids wake up to a surprise collectible sticker and a kind, personalized letter written by open-weight AI!

🦥 What I Built

An open-source, privacy-first 3D virtual pet and bedtime companion designed for children aged 5–10 with zero accounts, zero ads, zero tracking, and zero cloud API keys.


flowchart TD
    subgraph DayPlay ["☀️ Daytime: Play & Care (Talking Tom Mode)"]
        A["🛁 Bubble Bath<br/>(Soap, rinse, ducky squeaks)"]
        B["🍓 Snack Bar<br/>(Feed berries, cookies, honey)"]
        C["🎮 Mini-Games Arcade<br/>(Bubble Pop, Memory Match, Catcher)"]
        D["🎤 Talking Mimic<br/>(Silly soundboard & pitch-shift)"]
    end

    subgraph BedtimeRoutine ["🌙 Bedtime: The 'Slow and Steady' Steep"]
        E["🍵 Mix Tea: Pick a Leaf & Sweet Treat"]
        F["🔮 TabPFN Alchemist Crystal Ball<br/>(Live Bayesian Rarity & Sensory Odds)"]
        G["😴 Choose Nap Length: 10s Demo, 2m, 1h, 4h, or Sleepover"]
        H["🛏️ Tuck Sunny In!"]
    end

    subgraph LockoutState ["💤 Night Lockout (Enforced Sleep)"]
        I["🔒 Screen Time Ends: Care & Games Locked"]
        J["🎶 Procedural Lofi Soundscape<br/>(Rain, Breeze, Twilight Chimes)"]
        K["⏳ Real-time Async Steep: Forest Animals Visit"]
        L["💤 Sunny Mumbles Sleepy Yawns If Tapped"]
    end

    subgraph MorningReward ["🎁 Morning: The Surprise"]
        M["✨ Sunny Wakes Up Ready!"]
        N["📜 Kind Note Written by Open-Weight Gemma"]
        O["📊 TabPFN Feature Attribution Card (XAI)<br/>(Attribution breakdown & Sensory profile)"]
        P["📖 Collectible Sticker Book"]
    end

    DayPlay --> BedtimeRoutine
    BedtimeRoutine --> LockoutState
    LockoutState --> MorningReward
    MorningReward --> DayPlay

Key Features:

  1. Interactive 3D Virtual Pet Care (Awake Mode):
    • 🛁 Bubble Bath Mode: Lather Sunny with foamy soap bubbles, rinse with a warm shower spray, squeak the floating rubber ducky, and blow pop-able bubbles. Reaching 100% cleanliness awards +50 care XP.
    • 🍓 Snack Bar: Feed Sunny sweet strawberries, moon honey, cookies, and fruit slices with animated chewing sounds and happy reactions.
    • 🎮 3 Sensory Mini-Games:
      • Bubble Pop Bash: 30-second reflex game popping floating tea bubbles & golden stars.
      • Forest Friends Match: A 12-card cognitive memory matching game with tactile card flips.
      • Leaf & Berry Catcher: Catch falling ingredients in Sunny's basket with kid-friendly controls.
  • 🎤 Talking Sloth Mimic: Squeaky high-pitch voice mimic and a silly soundboard (animal jokes, sloth giggles, sneezing).

  1. The "Slow and Steady" Bedtime Lockout:

    • Once tea steeping begins, all distractions are strictly locked out. The activity bar is replaced by a peaceful sleep notice. The game renders a tranquil night sky with fireflies, glowing starlight particles, and soft breathing animations. Tapping Sunny only produces gentle sleepy yawns.

  2. 🔮 TabPFN Alchemist's Crystal Ball (Live Bayesian Simulator):

    • Instead of static drop rates, a live crystal ball calculates Bayesian posterior probabilities in real time for 🍃 Common, ✨ Rare, and ⭐ Legendary tea as kids select their ingredients.
    • Includes Shannon Entropy ("Mystery Index"): wild, untested blends trigger Sunny's "Enigma Blend!" forecast.
    • Features an interactive "What-If Bedtime Simulator" showing kids how getting a full night's sleep directly raises the mathematical odds of unlocking Legendary starlight tea.

  3. 🍵 Multi-Task Sensory Vector & Deep Sleepiness Regression:

    • TabPFN continuous regression predicts a 5-dimensional sensory flavor profile (Sweetness, Earthiness, Starlight Glow, Floral Harmony, Warmth) and a Deep Sleepiness Score ($0–100\%$).
    • The Three.js 3D viewport dynamically responds: when Starlight Glow exceeds $60\%$, the scene ignites with 75 radiant golden celestial sparkles!

  4. 📊 Explainable AI (XAI) Feature Attribution:

    • When waking up to claim morning tea, a transparent attribution card explains why the tea turned out magical:
      • 🌙 Bedtime Consistency Streak (+35%)
      • ⏳ Deep Sleep Duration (+30%)
      • 🌸 Herbal Ingredient Synergy (+20%)
      • 🛁 Pet Care & Bedtime Routine (+15%)
    • Positively reinforces healthy sleep habits through mathematical transparency.

  5. 🎶 Zero-Asset Procedural Generative Soundscape:

    • Web Audio API synthesizer generating real-time lofi sleep soundscapes without downloading any audio files:
      • 🌧️ Gentle Rain: Kellet pink noise through dual resonant lowpass filters.
      • 🍃 Forest Breeze: 0.12 Hz LFO breathing-rate filter sweeps.
      • 🎶 Twilight Chimes: Warm lofi chord drone (F3, C4, E4) with randomized pentatonic bell frequencies.

📺 Demo

  • Live Web App: https://the-midnight-steeper.onrender.com/
  • ⚡ Fast-Forward Judge Demo Mode:
    • In Step 3 (Nap length), select ⚡ Judge Demo (10 seconds).
    • Or click the ⚡ Fast-Forward Steep button while Sunny sleeps to instantly evaluate the morning wake-up, animal friend visits, and AI prize loot in seconds!

Visual UI Tour:

💻 Code

GitHub Repository:

GitHub logo akshara-a / The-Midnight-Steeper

🍵 The Midnight Steeper (Online Edition)

A cozy 3D bedtime tea party for kids aged 5-10, built for the "Slow and Steady" theme. Sunny the sloth is a talking, tappable 3D pet. Kids pick a leaf and a treat, tuck Sunny in for a nap, and Sunny tells them to go to sleep too. The tea steeps in real time while forest-animal friends visit, and in the morning there is a surprise sticker with a kind note from a friend.

Why it's a good bedtime game: it ends play instead of extending it. There are no ads, no accounts, no chat and no microphone.

Open-source and free to run: Gemma (open-weight) writes the notes, either in the browser (transformers.js, opt-in, ~320 MB once) or through Ollama. TabPFN predicts prize rarity. Sunny's voice is the browser's built-in speech. No API keys anywhere.

🌐 Online Architecture (Zero Logins • Pure Local Session)

…
View on GitHub

The stack is 100% open-source and free to run:

  • Frontend Framework: Next.js 16 (Turbopack, App Router), React 19, Tailwind CSS
  • 3D Graphics & Shaders: Three.js, @react-three/fiber, @react-three/drei
  • Tabular Intelligence: TabPFN (Bayesian in-context multi-task classifier & regressor)
  • Procedural Audio: Web Audio API Sound Synthesizer (0 external audio files)
  • Local Language Model: @huggingface/transformers (In-Browser Gemma 2B) & local Ollama
  • Backend & Timers: FastAPI, SQLite (embedded local-session persistence), Temporal

🧠 How I Built It

The game's architecture is engineered around asynchronous patience and local inference:

graph LR
    subgraph Client ["Client Browser (Zero Trackers / COPPA Compliant)"]
        UI["Next.js + React Three Fiber 3D"]
        Audio["Web Audio Synthesizer<br/>(Lofi Rain, Chimes, Pops)"]
        CrystalBall["TabPFN Crystal Ball<br/>(Live In-Context Odds)"]
        LocalAI["Transformers.js<br/>(In-Browser Gemma 2B)"]
    end

    subgraph Backend ["Self-Hosted Cloud / Local VPS"]
        API["FastAPI Orchestrator"]
        DB[(Embedded SQLite<br/>Session UUIDs)]
        TabPFN["TabPFN Multi-Task AI<br/>(CPU Rarity & Flavor Regression)"]
        Timer["Temporal / Cloud<br/>Async Scheduler"]
    end

    UI <-->|Local Web Audio| Audio
    UI <-->|Live Bayesian Odds| CrystalBall
    UI <-->|Optional Offline Notes| LocalAI
    UI <-->|Fetch Brew State| API
    API <--> DB
    API <--> TabPFN
    API <--> Timer

1. Tabular Foundation Model (TabPFN) Multi-Task Pipeline

Rather than simple hardcoded dice rolls, tea quality and harvest rarity are evaluated using TabPFN — Prior Labs' groundbreaking tabular foundation model running lightweight on CPU. We upgraded TabPFN into a multi-task tabular intelligence engine:

  • In-Context Few-Shot Learning: TabPFN operates as an instant Bayesian transformer over tabular datasets without iterative training loops. We feed it a prior table of simulated brews combined with the player's personal historical steeps.
  • Continuous Multi-Task Flavor Regression: Predicts 5 continuous flavor dimensions (Sweetness, Earthiness, Starlight Glow, Floral Harmony, Warmth) and a Deep Sleepiness Score ($0–100\%$) that directly controls the 3D lighting, steam hue, and golden celestial particles.
  • Explainable AI (XAI): We calculate marginal feature attributions by comparing counterfactual baselines, revealing exactly how much the child's bedtime consistency streak contributed to their prize.

2. In-Browser Open-Weight Gemma (Transformers.js)

When an animal friend attends the midnight tea party, they leave behind a unique note. Instead of paying an opaque cloud API or sending children's data over the wire, we run Gemma client-side in the browser via @huggingface/transformers (or self-hosted via local Ollama). It runs completely offline after the initial cache!

3. Zero-Asset Procedural Audio Synthesizer (Web Audio API)

To prevent bloat and maintain instant loading on slow mobile networks, every sound effect — bathtub water sloshes, rubber duck squeaks, chewing crunches, bubble pops, and the generative bedtime soundscape (rain, wind, chimes) — is synthesized on the fly with oscillator nodes, Kellet pink noise filters, and frequency envelopes.

4. Resilient Asynchronous Timers (Temporal)

Steeping tea for 4 or 12 hours requires resilient workflow state. The backend uses distributed async workflow timers that persist across container reboots and disconnects, gracefully waking Sunny up exactly on schedule.

🌍 Why Does Open Innovation Matter?

Open innovation is what makes The Midnight Steeper safe and accessible for kids:

  1. COPPA / Child Privacy By Design: Children's digital toys should never require accounts, logins, or telemetry. Because open-weight models (Gemma) and local foundation models (TabPFN) can run on-device or on self-hosted containers, zero personal data ever leaves the user's browser.
  2. Infinite Longevity Without Subscription Taxes: Closed-source AI APIs change pricing, deprecate endpoints, or shut down entirely. Open-source models ensure this game remains free and playable forever.
  3. Calm Computing: Commercial app stores incentivize dopamine traps to drive ad revenue. Open innovation allows developers to create software that respects user well-being and knows when to tell them: "That's enough for today. Go to sleep."

🦥 The Lazy Payoff

By turning bedtime into an effortless ritual where the virtual pet and the child sleep together, parents save 30–45 minutes of bedtime stalling and screen-time tantrums every single night. Kids are excited to put the phone down because the only way to brew magical tea for their forest friends is to let Sunny sleep in peace.

🏆 Prize Categories

  • Hacktoberfest Open-Source AI Challenge: Week 3 — Slow and Steady
  • Best Use of Open-Source Foundation Models: TabPFN (Prior Labs) & Gemma (Google)
  • Calm & Humane Tech: Privacy-first, zero-auth, zero-tracking bedtime technology for families

Top comments (0)