Product · Web App

Petal

TypeProgressive Web App (PWA)
StackVanilla JS · HTML · CSS (no framework)
StatusIn Progress

Most period trackers are either clinical spreadsheets or aggressively pink apps built for teenagers. Petal is a privacy-first menstrual cycle tracker for adult women who want something elegant — no account, no cloud sync, no data sold, everything stored locally on device.

The centrepiece is a hand-built radial SVG dial that maps the full cycle as a flower-like clock face: cycle phases render as coloured arcs, hormone curves float as a second layer, and the current-day handle is draggable so you can scrub forward through the month and watch phase, hormone levels, and a phase-matched quote all update in real time. The whole thing is a single-page PWA — vanilla JS, no framework — with a frosted-glass design system (dark-luxury default, warm-blush light mode), two typefaces, and CSS custom properties for every token. Internationalisation covers 12 languages including Persian (full RTL layout), Arabic, Hindi, Japanese, and Mandarin, all shipped without a build step.

Currently in active development. Shipped features include onboarding with an animated dial intro, a history calendar for logging past periods, a curated quote database of 90+ lines from women only (tagged by cycle day), local push notifications for phase changes, and a partner-share flow that generates a pre-composed SMS or email deep link — no backend required. The constraint of zero server dependency shaped every design decision: data export is a first-class feature and the app works fully offline.

The visual language deliberately avoids anything that reads as "period-tracker pink." The dial reads closer to an astronomical instrument than a health widget, which is the point — the goal was an app a woman in her 40s would actually keep on her home screen.

Tech Stack
Vanilla JS HTML5 CSS Custom Properties SVG Web Push API PWA / Service Worker i18n (12 languages)