Lunar Shift 🌙

Your birthday moves 11 days every year. Most people don't know this exists.

A web app that converts your Gregorian date of birth to the Hijri (Islamic) calendar, compares your solar vs lunar age, and shows how your birthday drifts backward through the year.

lunar-shift.vercel.app

---

Features

• Gregorian → Hijri — Enter your DOB, see your exact Hijri date using Umm al-Qura or Tabular calculations
• Hijri → Gregorian — Reverse lookup: convert any Hijri date back to Gregorian
• Age comparison — Solar years vs lunar years side by side (lunar-year count is higher — the year is ~354 days)
• Birthday drift timeline — See where your last 3 Hijri birthdays landed and where the next 7 will fall
• Next birthday countdown — Days until your next Hijri birthday
• Shareable URL — Every query encodes itself in the URL (?dob=1995-06-12&calendar=umalqura). Copy and share.
• Two calendar methods — Official Saudi Arabian Umm al-Qura, plus traditional Tabular (30/29 day alternating months)

Tech Stack

• Framework: Next.js 16 + React 19
• Styling: Tailwind CSS v4
• Animation: Framer Motion + WebGL (ogl)
• Calendar: Browser-native Intl.DateTimeFormat('islamic-umalqura') — zero dependencies
• Deploy: Vercel

No external calendar libraries

The conversion uses Intl.DateTimeFormat with the islamic-umalqura calendar, built into every modern browser. This is more reliable than most npm packages — moment-hijri and hijri-date have unmaintained Umm al-Qura tables.

Getting Started

npm install
npm run dev

Open http://localhost:3000.

Project Structure

src/
├── app/          — Pages, layout, OG image, manifest, sitemap
├── components/   — LunarShiftApp, DatePicker, Galaxy, HijriInput, CopyButton, Toast
└── lib/          — hijri.ts — all calendar logic (232 lines)

~1,900 lines total. One lib file handles everything.

Disclaimer

Calculated using the standard Umm al-Qura astronomical model (Saudi Arabia). Actual dates may vary by ±1 day depending on local moon-sighting traditions.