Ten small apps, each its own world

001

Dit

The streak lesson. Morse code, two letters a day, with a streak that forgives a missed day.

The brief

Pattern 001, the streak lesson. It had to prove that a daily streak can hold someone’s attention without threatening them: a lesson with an end, a missed day that costs nothing important, and no reminders.

Decisions

• The world is a signal lamp at night: navy, cream and one amber light, because Morse was sent by lamp and the subject should choose the palette.
• Two rest days cover a missed day, and one comes back every seven days, so a busy week does not erase a month.
• A long break restarts the count and keeps every letter learned, and the screen says so in those words.
• The streak rule is one function that never reads the clock, and the app accepts a day in its address, so every case (next day, missed day, long break) is tested in seconds.

What it is made of

Three files and no dependencies: index.html (95 lines), style.css (86 lines), app.js (235 lines). Sound is made with the Web Audio API, so there are no audio files. Data stays on the device, with copy and erase in Settings.

Tested

Harness result: PASS on 2026-11-10. 27 scripted steps in headless Chromium on a 390 px touch screen: no console errors, no failed or outside requests, no sideways scroll at 390, 360 or 1280 px, and nothing marked hidden left on screen. Not tested on real phones or in other browsers.

Run Dit

002

Tickfield

The habit grid. A habit tracker drawn as an allotment plan, with weekly targets instead of an unbroken chain.

The brief

Pattern 002 of Hundred Loops, the habit grid. It had to prove that a habit grid can keep the pull of a filling-in picture while dropping the all-or-nothing daily chain, so that a missed day or a holiday never reads as failure.

Decisions

• The palette comes from a land survey sheet: ruled cream paper, survey-ink green, one red boundary peg for today, because a habit is a plot you tend and a grid of plots reads at a glance.
• Each habit has a weekly target and the week is judged on its total, because that makes a missed day cost nothing while still giving the week a finish line.
• Paused days are hatched as fallow ground and the week’s target shrinks to fit, because a holiday is rest, not a gap to be punished.
• The week arithmetic and the grid builder are pure functions over date strings, and a ?day= switch moves “today”, so the test can walk through a holiday and a five-week absence in seconds.

What it is made of

index.html (91 lines), style.css (91 lines), app.js (277 lines), test.json and a README. Plain HTML, CSS and JavaScript. No libraries, no build step, no network requests, no images: every plot is inline SVG.

Tested

Harness result: PASS on 2026-11-10. 36 scripted steps in headless Chromium on a 390 px touch screen: no console errors, no failed or outside requests, no sideways scroll at 390, 360 or 1280 px, and nothing marked hidden left on screen. Not tested on real phones or in other browsers.

011

Ladderday

The daily word puzzle. A daily word ladder: the same start and end word for everyone, one letter per rung, then it is over until tomorrow.

The brief

Pattern 011 of Hundred Loops, the daily word puzzle. It had to prove that the daily-puzzle rhythm works with a different game from the coloured-tile guessing game most copies use, and that a shared puzzle can come from the date alone, with no server and no streak.

Decisions

• The palette is an orchard ladder at first light, peach sky, plum ink and timber rails, because the puzzle is a climb and the screen should draw one.
• The puzzle comes from a seeded generator and a breadth-first search over a 707-word list I typed for the app, because owning the word list is the legal line in this genre and the search makes par a true shortest length.
• One ladder a day, plain stats with no streak, and a two-tap give up that shows a shortest ladder, because the end of the puzzle is the point and a missed week should cost nothing.
• The app exposes the day’s shortest ladder to the test, so the harness can solve the puzzle on any date and prove the result text, the stopping point and the next day.

What it is made of

index.html (80 lines), style.css (79 lines), app.js (265 lines, 34 of them the word list), test.json and a README. Plain HTML, CSS and JavaScript. No libraries, no build step, no network requests.

Tested

Harness result: PASS on 2026-11-10. 28 scripted steps in headless Chromium on a 390 px touch screen: no console errors, no failed or outside requests, no sideways scroll at 390, 360 or 1280 px, and nothing marked hidden left on screen. Not tested on real phones or in other browsers.

021

Potting Shed

The match-three with a restoration layer. A match-three game on a seed tray, with a run-down greenhouse you restore one bed at a time.

The brief

Pattern 021, match-three with a restoration layer. It had to prove the genre’s two loops still work when the usual money machine is taken out: no lives, no energy timer, no pay-to-continue, no boosters for sale, and a game that ends.

Decisions

• The palette is a potting shed in late afternoon (linen, soil, terracotta, sage), because the board should read as a seed tray, not a sweet shop or a jewel box.
• The five tokens differ in shape as well as colour (bean, sprout, bulb, pea pod, bloom), so a player who cannot tell two colours apart can still play.
• Losing costs nothing and a refused swap uses no move, because the honest version of this genre makes failure a retry, not a sales moment.
• Every level comes from a seeded generator and every tray starts with no line and at least one move, so a level is fair, repeatable, and testable by playing real hinted moves.

What it is made of

index.html (82 lines), style.css (79 lines), app.js (313 lines), test.json, README.md. Plain HTML, CSS and JavaScript. No libraries, no build step, no network requests, no images: every token and bed is inline SVG.

Tested

Harness result: PASS on 2026-11-10. 32 scripted steps in headless Chromium on a 390 px touch screen: no console errors, no failed or outside requests, no sideways scroll at 390, 360 or 1280 px, and nothing marked hidden left on screen. Not tested on real phones or in other browsers.

031

Tidemill

The idle clicker. An idle clicker about a tide mill that grinds while you are away, for two hours at most, and then rests.

The brief

Pattern 031, the idle clicker. It had to prove the genre works with a cap on offline earnings, an arc that ends, and nothing for sale: no timers to skip, no reward for watching anything, no offer on the return screen.

Decisions

• The palette is an estuary at dusk (deep teal water, oak, flour white, one lit window), because a tide mill only works when the water moves and the evening is when it rests.
• Offline earnings stop at two hours and the return screen says so in one plain sentence, because an uncapped mill rewards never closing the app.
• The season ends at the eighth milestone and production stops; a new season is offered with a tenth more speed, and the screen says you can stop here.
• Every read of the time goes through one now() function that honours ?skip, and the running mill credits elapsed time rather than counting ticks, so a test can jump two or thirteen hours and get an exact answer.

What it is made of

index.html (94 lines), style.css (66 lines), app.js (227 lines), test.json, README.md. Plain HTML, CSS and JavaScript. No libraries, no build step, no network requests, no images: the mill is inline SVG.

Tested

Harness result: PASS on 2026-11-10. 28 scripted steps in headless Chromium on a 390 px touch screen: no console errors, no failed or outside requests, no sideways scroll at 390, 360 or 1280 px, and nothing marked hidden left on screen. Not tested on real phones or in other browsers.

036

Mossling

The care pet. A small moss creature that grows from four real check-ins a day and sleeps, never suffers, when you are away.

The brief

Pattern 036, the care pet. It had to prove that a creature people come back to can run without guilt: growth from the person’s own real check-ins (water, moving, going outside, rest), five visibly different stages over about twenty check-ins, a clear end to each day, and nothing that shrinks, sickens or dies after time away.

Decisions

• The palette comes from a damp stone in a shady garden: lichen paper, fern ink, one moss green and one clay accent for the capsules, so the creature is the only bright thing on the screen.
• Growth is a count that only goes up and the stage is worked out from it every time, because a creature with no stored health has nothing that can decay.
• Time away has exactly one message, “Mossling slept while you were away. Nothing was lost.”, which keeps the absence rule in one small function a reader can check.
• The five drawings are built in code from one function with the stage and a sleep flag, so each stage can be tested by counting its parts and no image files are needed.

What it is made of

• index.html (68 lines), style.css (83 lines), app.js (267 lines), test.json (137 lines, 30 steps), README.md (22 lines).
• Plain HTML, CSS and JavaScript. No libraries, no build step, no network requests.

Tested

Harness result: PASS on 2026-11-10. 30 scripted steps in headless Chromium on a 390 px touch screen: no console errors, no failed or outside requests, no sideways scroll at 390, 360 or 1280 px, and nothing marked hidden left on screen. Not tested on real phones or in other browsers.

052

Ten Past

The finite daily feed. A daily feed of ten small things to notice or try, one card at a time, that ends with “That is the lot. Ten more tomorrow.”

The brief

Pattern 052, the finite daily feed. It had to prove that a feed can be pleasant and still stop: ten cards a day from a pool I wrote myself, the same ten for everyone, one per screen, moved by a button, the keyboard or a vertical swipe, with the count always in view and a designed end.

Decisions

• The palette comes from a kitchen calendar on a sunny wall: warm paper, brown-black ink, one tomato red and five soft card tints that take turns, so each card feels like turning a page.
• The day’s ten come from a shuffle seeded by the date alone, because a set that nobody can personalise has nothing to tune for time spent and nothing to refresh.
• Position ten is the end screen and the move function clamps to it, so “no card eleven” is one line a reader can check rather than a promise.
• The small clock in the header fills one tick per card, so you can see how much is left, and no progress bar is needed.

What it is made of

• index.html (73 lines), style.css (81 lines), app.js (268 lines), test.json (145 lines, 30 steps), README.md (22 lines).
• Plain HTML, CSS and JavaScript. No libraries, no build step, no network requests.

Tested

Harness result: PASS on 2026-11-10. 31 scripted steps in headless Chromium on a 390 px touch screen: no console errors, no failed or outside requests, no sideways scroll at 390, 360 or 1280 px, and nothing marked hidden left on screen. Not tested on real phones or in other browsers.

057

Supper Deck

The swipe-to-decide deck. A finite deck of 24 vegetarian supper ideas: swipe right for could eat, left for not tonight, and three maybes end the deck with a shortlist and one pick.

The brief

Pattern 057, the swipe-to-decide deck. It had to prove that the swipe gesture can serve a decision instead of an endless session: a deck that ends at the last card or at three maybes, the same order for everyone on a given day, tag filters before dealing, a plain “Supper is” end screen, and buttons and arrow keys that do everything the drag does.

Decisions

• The palette comes from a kitchen at dusk: deep herb green, recipe-card cream and one saffron yellow, so the card reads as paper on a table.
• The drag is judged only by distance on release, at 30% of the card width, because a rule a person can predict is fairer than one tuned on speed, and a fixed rule is easy to test.
• The screen is worked out from the saved run rather than stored, so a reload always lands on the deck, the shortlist or the end.
• Every dish is vegetarian with two plain tags, so nobody is left out by default and the filter chips stay short.

What it is made of

• index.html (86 lines), style.css (91 lines), app.js (260 lines), test.json (143 lines, 30 steps), README.md (24 lines).
• Plain HTML, CSS and JavaScript. No libraries, no build step, no network requests.

Tested

Harness result: PASS on 2026-11-10. 30 scripted steps in headless Chromium on a 390 px touch screen: no console errors, no failed or outside requests, no sideways scroll at 390, 360 or 1280 px, and nothing marked hidden left on screen. Not tested on real phones or in other browsers.

081

Fivebox

The spaced-repetition flashcards. Flashcards in five boxes: known cards move up and come back later, missed cards start again, and every session ends.

The brief

Pattern 081 of Hundred Loops, spaced-repetition flashcards. It had to prove that a study app can show only what is due today, end the session with a date instead of a prompt to keep going, and treat a two-week break as nothing more than cards waiting in their boxes.

Decisions

• The palette comes from a card-index drawer on a desk, oak boxes and cream cards with one red header rule, because the boxes are the method and should look like objects you can count.
• The whole method is two small rules, a due date from the box (1, 2, 4, 8 or 16 days) and up-one-or-back-to-one grading, kept as pure functions so the guide can quote them and a learner can check them by hand.
• A session is fixed when it starts and each card is shown once, because a session that refills as you finish has no end, and the end screen names the next date instead.
• The starter deck arrives ten cards a day and ?day= moves “today”, so the test can play two sessions, a break and an edit in seconds and check every box count.

What it is made of

index.html (94 lines), style.css (82 lines), app.js (236 lines), test.json and a README. Plain HTML, CSS and JavaScript. No libraries, no build step, no network requests, no images.

Tested

Harness result: PASS on 2026-11-10. 41 scripted steps in headless Chromium on a 390 px touch screen: no console errors, no failed or outside requests, no sideways scroll at 390, 360 or 1280 px, and nothing marked hidden left on screen. Not tested on real phones or in other browsers.

088

Stillpond

The focus timer that grows something. A focus timer where each finished session opens a lily on today’s pond, and four lilies mean it is time to rest.

The brief

Pattern 088, the focus timer that grows something. It had to prove the pattern works without punishment: leaving pauses instead of killing, stopping early keeps the minutes, a day has a rest point, and nothing is sold to undo a loss.

Decisions

• The palette is a pond at first light (mist, slate water, pad green, one pink lily), because the app should feel like the quiet start of a working day, not a scoreboard.
• Nothing in the pond can die, and coming back after leaving the tab shows “Nothing was lost” and waits for a tap, because a reward that withers when you check your phone turns focus into worry.
• The timer is computed from two timestamps rather than counted in ticks, so a hidden tab or a sleeping phone never makes it wrong.
• One now() function honours ?speed and ?day, so the test can finish a real ten-minute session in about a second and prove a session that crosses midnight counts on the day it started.

What it is made of

index.html (77 lines), style.css (69 lines), app.js (225 lines), test.json, README.md. Plain HTML, CSS and JavaScript. No libraries, no build step, no network requests, no images: the pond, lilies and week view are inline SVG.

Tested

Harness result: PASS on 2026-11-10. 31 scripted steps in headless Chromium on a 390 px touch screen: no console errors, no failed or outside requests, no sideways scroll at 390, 360 or 1280 px, and nothing marked hidden left on screen. Not tested on real phones or in other browsers.