Notes, without the noise · v4

Write it down. No AI. No feed. No streaks.

A blank page that opens in 80 ms

Cold start to cursor before your thought escapes.

0.3s

Sync across every device

End-to-end encrypted

We can't read your notes. Nobody can.

Markdown, quietly

# heading **bold** - [ ] todo

Offline first

Your notes live on your device. The cloud is a backup, not a landlord.

"The first notes app that doesn't want my attention."
— a very calm reviewer

Plain-text export

One folder of .md files. Leave whenever you like.

Widgets everywhere

The lab

How this page is built, live. Drag the slider: the card below doesn't look at the viewport, only at its container.

Container width 100%

Morning pages

3 notes · edited 2 min ago

Pin to widget

Your browser, right now

View Transitionschecking…
Scroll-driven animationschecking…
:has()checking…
Container querieschecking…
Subgridchecking…
Anchor positioningchecking…
oklch() + color-mix()checking…
CSS nestingchecking…
Popover APIchecking…

One price. Forever.

Personal €0 One device Markdown export Lifetime €29 Every device Encrypted sync

Pick a plan above; the selected card is styled with :has(input:checked).

@media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .reveal, .qn__tile { animation: e17-reveal linear both; animation-timeline: view(); animation-range: entry 0% cover 25%; } .qn__line--out { animation: e17-slide linear both; animation-timeline: scroll(root); animation-range: 0 60vh; } } }

/** Wrap a DOM change in a view transition when the browser has one; otherwise just change it. */ function transition(change: () => void) { const doc = document as DocVT const still = matchMedia('(prefers-reduced-motion: reduce)').matches || document.documentElement.classList.contains('readable') if (!doc.startViewTransition || still) return change() doc.startViewTransition(change) }

.qn__cq { container: card / inline-size; width: var(--cq); padding: 10px; border: 2px dashed color-mix(in oklch, var(--brand) 50%, transparent); border-radius: 22px; box-sizing: border-box; } .qn__cq-card { position: relative; display: grid; gap: 12px; padding: 12px; border-radius: 16px; background: var(--soft-brand); } @container card (min-width: 300px) { .qn__cq-card { grid-template-columns: 96px 1fr; } .qn__cq-art { aspect-ratio: 1; align-items: center; } } @container card (min-width: 440px) { .qn__cq-card { grid-template-columns: 160px 1fr; padding: 18px; } .qn__cq-body h3 { font-size: 24px; } }

const checks: Record<string, () => boolean> = { vt: () => 'startViewTransition' in document, sda: () => CSS.supports('animation-timeline: view()'), has: () => CSS.supports('selector(:has(a))'), cq: () => CSS.supports('container-type: inline-size'), subgrid: () => CSS.supports('grid-template-rows: subgrid'), anchor: () => CSS.supports('anchor-name: --a'), oklch: () => CSS.supports('color: color-mix(in oklch, oklch(60% 0.2 30), white)'), nesting: () => CSS.supports('selector(&)'), popover: () => HTMLElement.prototype.hasOwnProperty('popover'), } root.querySelectorAll<HTMLElement>('[data-check]').forEach((li) => { let ok = false try { ok = checks[li.dataset.check!]?.() ?? false } catch { ok = false } li.classList.add(ok ? 'is-yes' : 'is-no') li.querySelector('b')!.textContent = ok ? '✓ Supported' : '✕ Not supported' })