PK
❦ Project 02 / Next.js · PWA · Web Audio / 2026

Grimoire
A Sense of Place

A notes app with a sense of place. Most notes apps are a white rectangle and a blinking cursor; Grimoire drops you into a world instead — a candlelit desk, the deep sea at night, an alchemist's bench. Nine photographic scenes, each with drifting particles, breathing light, and a soundscape synthesized live in the browser. Your words save themselves, stay on your device by default, and need no account to begin.

Role Solo — product, design & build
Stack Next.js · TypeScript · Tiptap · Supabase · Capacitor
Platforms Web PWA · iOS · Android
Status Live · grimoirenotes.app
01

Grimoire is a note-taking and journaling app that treats writing as an atmosphere, not a chore. The product bet is simple: people don't abandon their notes app because it lacks features — they abandon it because sitting down to write in it feels like opening a spreadsheet. So the app leads with mood. You pick a world, the room settles around you, and the writing surface is the calmest thing on screen.

Everything underneath is built to keep that promise honest. Notes are local-first and save as you type, so there is no account wall and no spinner between a thought and the page. The app installs to a home screen and works with the network off. Cloud sync exists, but only if you ask for it — and when it runs, it does a conflict-safe three-way merge rather than letting the last device to wake up overwrite your day.

It ships as one codebase to three places: the web app, and iOS and Android builds that wrap the same static export in a native shell. Not a port, not a rewrite — the same engine the browser build already targets, which sets the bar that the phone app has to be as good as the web one rather than merely shipped.

02

Each world is a full scene, not a color scheme: a photographic backdrop, its own palette and light, and a living particle layer that drifts with a subtle parallax as the cursor moves. Eight of the nine are pale text in a dark room lit by a single warm or cool source. One — Ancient — inverts everything into sepia ink on sunlit vellum.

Dark Academia

Candlelit study, warm hearth, old books. The default room.

Dust motes in candlelight

Ocean

Sunlit deep water, moving caustics.

Glowing plankton adrift

Ocean · Night

Moonlit sea, cold swell, a brass lamp at the edge.

Night plankton, kindling flashes

Forest

Dappled canopy light, deep moss green.

Pollen on the breeze

Alchemist's Lab

A dark bench lit from below by a glowing brew.

Embers lifting into vapour

Deep Space

Indigo cosmos, nebula haze, starlight violet.

Starfield with shooting stars

Sakura

Night-blooming cherry against a plum-violet sky.

Petals falling on the night air

Sherlock

Fog-bound Victorian London under gaslamp brass.

Fog motes, cold moon

Ancient

The one daylit world — sun on old vellum, gilt and sepia ink.

Dust in a sunbeam
03

Writing

A distraction-free rich-text page that saves itself as you type. Select text and a floating formatting menu rises; the column holds a reading measure by default, or goes full width, with font size and line height to taste.

autosavefloating menureading measure

Keeping

An archive of everything you've written, newest first, with tags surfaced above the list and instant search across titles and body as you type. A command palette jumps to any page — or back to where you left off.

archivetagsinstant search⌘K palette

The Journal

Turn the desk from notes to journal and you get one dated page per day, a calendar of entries, “on this day” echoes from past years, and a streak flame counting consecutive days. One archive underneath, one shelf at a time on top.

dated pagescalendarstreak
04

Sound with no sound files

Every world has an ambience — fire crackle, surf, rain, wind, a cosmic hum, a bubbling brew — and none of it ships as audio. It is all synthesized live with the Web Audio API and crossfades when you move between worlds, which keeps the bundle small and means the loop never audibly repeats. It is opt-in, with its own volume, because a notes app that makes noise by default is a notes app people close.

A backdrop that is alive but polite

The particle layer is a canvas of world-appropriate motes — dust, plankton, embers, pollen, petals, shooting stars — over a glow that slowly breathes, with a parallax depth split driven by the cursor. It also knows when to stop: reduced-motion and animation preferences are honored throughout, and with motion off the scene simply holds still and glows.

Local-first, sync second

Notes live in the browser, so the app is usable in the first second and offline forever. Sync is opt-in, authenticated by an emailed code that works inside the installed app, and merges three ways against a common ancestor — the device that woke up last does not get to erase the one you were actually writing on.

One codebase, three stores

The iOS and Android builds wrap the app's static export in a native shell and serve it locally, on the same webview engines the browser build already targets. Payments for the optional Patron tier run through a merchant-of-record, so nothing essential is ever gated — the app is free to use, and the tier buys extras like a clean share card.

05

Grimoire is live and free to start — no account, no download, nothing to configure. Open it, pick a world, and write a line. Source is closed; if you'd like to talk about how any of it is built, get in touch.

← Back to portfolio