Futatoki the Learning Clock App

🌐 Try it live · 📖 Learn more · 📚 Usage guide

Important

This README describes the Futatoki brand and project. Forks MUST replace it — see branding/README.example.md for a template.

A free, open-source 24-hour analog clock app for kids learning to tell time. No install, no sign-up — runs in any browser. The app version of Futatoki the Clock — affectionately, just Futatoki.

Why another clock app?

Targets kids who read digital clocks fluently but can't yet parse analog ones. The design removes common sources of confusion and adds explicit anchors for early learners.

• Clockwise-only hand motion — no backward rotation
• Two parallel 12-hour faces (AM / PM) — same hour mapped to two distinct positions
• Activity icons placed on dial positions — clock time anchored to a child's daily routine
• Color rings as an optional helper layer — disable-able once not needed

Features

• 🌓 AM/PM stack & split — one 12-hour face, or two parallel faces for both halves of the day
• 🕛 True 24-hour design — AM face untouched (1–12); PM side adds 13–23
• ☀️ Visible clock-hand movement — a full day in ~24 seconds; sun and moon arc across a shifting sky
• 🔄 Drag-anywhere spinning — free rotation from any spot on screen; one-handed phone use works
• 🔢 Three reading stages — Badge × Simple → Slices × Detailed (1–60 minute marks) → Slices × Simple
• 🎨 Color as helper lines — six palettes (incl. colorblind-friendly), as temporary scaffolding
• 📌 Activity drops — icons on the dial as completed stamps or upcoming events that animate as the clock hand approaches
• 🎲 Random quiz — random 15-minute interval, for reading practice
• 📱 PWA — installable, offline-capable
• 🌍 Multilingual — see CONTRIBUTING.md for status
• 🔒 No ads, no tracking, no accounts — fully client-side

Available languages

Open the app directly in your language:

• English - https://play.futatoki.app/?lang=en
• 日本語 - https://play.futatoki.app/?lang=ja
• Español - https://play.futatoki.app/?lang=es
• Français - https://play.futatoki.app/?lang=fr
• Deutsch - https://play.futatoki.app/?lang=de
• Italiano - https://play.futatoki.app/?lang=it
• Português (Brasil) - https://play.futatoki.app/?lang=pt-BR
• 简体中文 - https://play.futatoki.app/?lang=zh-CN
• 繁體中文 - https://play.futatoki.app/?lang=zh-TW
• 한국어 - https://play.futatoki.app/?lang=ko
• Русский - https://play.futatoki.app/?lang=ru
• Polski - https://play.futatoki.app/?lang=pl
• Türkçe - https://play.futatoki.app/?lang=tr
• ไทย - https://play.futatoki.app/?lang=th
• العربية - https://play.futatoki.app/?lang=ar
• فارسی - https://play.futatoki.app/?lang=fa
• اردو - https://play.futatoki.app/?lang=ur
• हिन्दी - https://play.futatoki.app/?lang=hi
• বাংলা - https://play.futatoki.app/?lang=bn
• Bahasa Indonesia - https://play.futatoki.app/?lang=id

See CONTRIBUTING.md for the maintenance status of each language.

Tech stack

• SolidJS + SVG
• Vite + vite-plugin-pwa for offline support
• Tailwind CSS
• Cloudflare Workers (hosting)
• No backend, no database, no user accounts

Getting started

Prerequisites

• Bun (project uses bun.lock; scripts are run via bun run)

Development

git clone https://github.com/mrksye/futatoki-app.git
cd futatoki-app
bun install
bun dev

Build

bun run build

Deploy (Cloudflare Workers)

This repository is set up for Cloudflare Workers Builds (push-to-deploy). The actual wrangler.jsonc is gitignored; instead a wrangler.jsonc.template ships with __XXX__ placeholders that are filled in at build time from environment variables.

To deploy your own instance:

1. Create a Cloudflare Worker and connect this repository under Workers & Pages → your project → Settings → Build.
2. Set the build command to:

   bun run build:wrangler && bun run build
   

3. Add the following Build Variables (Secret type recommended):
   • WORKER_NAME — your Cloudflare Worker name
   • DATASET_NAME — your Analytics Engine dataset name
   • ROUTE_DOMAIN — your custom domain (e.g. play.example.com)
4. Push to main; CF Workers Builds regenerates wrangler.jsonc from the template and runs wrangler deploy automatically.

For a one-off manual deploy from your machine, copy wrangler.jsonc.template to wrangler.jsonc, replace the __XXX__ placeholders by hand (or export the env vars and run bun run build:wrangler), then bun run deploy.

Contributing

Found a bug, or want a language added or improved? Please open an issue first. See CONTRIBUTING.md.

Forking — go ahead

Yes, really. Fork it, rebrand it, ship it under your own name, even sell it. The branding/ directory is the only place that holds Futatoki's identity — swap its contents and the whole app (PWA manifests, OG tags, storage keys, icons) follows your fork:

1. Edit branding/brand.config.ts (domain, prefix, theme color)
2. Edit branding/brand.ts (5-axis localized names per locale)
3. Replace branding/ assets (icon.svg, og.png, etc.)
4. Replace root NOTICE and README.md from branding/*.example.md
5. Edit package.json name
6. bun run build

Verify with grep -rE "Futatoki|ふたとき" dist/ — should be 0 hits.

Two asks: pick a different name (see NOTICE for why) and don't lift the clock-face visual design onto physical clocks or toys (also in NOTICE). Everything else is MIT, go wild.

Full template with the longer walkthrough: branding/README.example.md.

License

MIT — see LICENSE

The names "Futatoki" / "Futatoki the Learning Clock App" / "Futatoki the Learning Clock" / "Futatoki the Clock", logos, branding, and the visual design of the clock face when reproduced outside the screen-based app are not covered by the MIT License — see NOTICE for details.

About

Built by Mrksye, a freelance developer based in Japan.

First released: 2026-04-21