A state-of-the-art, Cupertino-grade Age & Life Chronometer built with Apple's Liquid Glass design language. Features real-time millisecond ticking, autonomous future-year time travel, concentric Apple Fitness activity rings, astronomical milestones, planetary ages across the Solar System, and generational cohort analytics.
✨ Live Features • 🍏 Apple Design System • 🔮 Temporal Machine • 🪐 Cosmic & Planetary • 🚀 Quick Start
Chronos reimagines the traditional age calculator into a precision biological and astronomical chronometer. Engineered under the tenets of Apple's Human Interface Guidelines (Clarity, Deference, and Depth), it combines tactile spring physics, multi-layer living mesh translucency, and continuous real-time calculation.
Whether observing your continuous age ticking in real-time, calculating when you will cross 10,000 days on Earth, exploring your age on Mars and Jupiter, or time-traveling to the year 2050, Chronos executes every computation dynamically with mathematical precision.
Chronos is crafted from the ground up utilizing genuine Apple Design standards:
┌──────────────────────────────────────────────────────────────────┐
│ APPLE LIQUID GLASS CHROME │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ Frosted Specular Glass Surface (28px blur, 190% sat) │ │
│ │ Continuous G2 Curvature Squircles (24px radius) │ │
│ │ Apple System Dynamic Colors (San Francisco Typography) │ │
│ └──────────────────────────────────────────────────────────┘ │
│ ▲ │
│ Refracts through GPU-composited 4-layer living color mesh │
└──────────────────────────────────────────────────────────────────┘
- Liquid Glass Materials: Realized with
backdrop-filter: blur(28px) saturate(190%) brightness(104%), an inner top-edge specular highlight (inset 0 1px 0 rgba(255,255,255,0.75)), and ambient grounding shadows. - Living Color Mesh Backdrop: Multi-hue radial gradient mesh with GPU-accelerated drift (
apple-mesh-drift), ensuring frosted glass has rich underlying tonal variation to refract. - Spring Physics Motion: Built on damped harmonic oscillator physics (
cubic-bezier(0.16, 1, 0.3, 1)andcubic-bezier(0.25, 1, 0.5, 1)) for tactile responsiveness and momentum handoff on taps. - Concentric Activity Rings: Inspired by the Apple Watch Fitness rings, rendering vector SVG circular arcs with glowing linear gradients and smooth progress tracking.
- Adaptive Light & Dark Modes: Seamless one-tap switching between Cupertino Light (
#f5f5f7) and Pro OLED Space Black (#000000).
- Exact Calendar Math: Accurately computes Years, Months, and Days accounting for differing month day counts, leap years, and calendar boundaries.
- Live Chronometer: Real-time ticking Hours, Minutes, Seconds, and Milliseconds with a pulsating green status indicator.
- Continuous Fractional Age: Real-time decimal readout (e.g.,
24.8193845 Years) updated on every frame. - Next Birthday Tracker:
- Exact calendar date, day of the week, and turning age.
- Live countdown in Days, Hours, Minutes, and Seconds.
- Interactive "Celebrate" button triggering lightweight Canvas confetti physics.
- Comprehensive Life Units:
- Total Months, Weeks, Days, Hours, Minutes, and Seconds lived.
- Biological & Earth Vitals:
- Estimated Heartbeats (~80 bpm average).
- Breaths Taken (~16 breaths/min).
- Sleep consolidation time (~8 hours/night).
- Orbital distance traveled around the Sun (~940,000,000 km/year).
- Interactive Future Time Machine:
- Select or slide to any coming year (2027, 2030, 2040, 2050, 2075, 2100).
- Instant reactive calculations: exact turning age, total days lived, and life phase archetype (Discovery, Mastery, Golden Horizon, Centenarian).
- Quick jump buttons for key milestones (
+5 Years,Turn 30,Turn 50,Turn 100).
- Astronomical Epoch Milestones:
- 1,000 Days on Earth (Toddler milestone).
- 5,000 Days on Earth (Youth milestone).
- 10,000 Days on Earth (The Golden Decade Epoch ~27.4 years).
- 15,000 Days on Earth (Prime Life Epoch).
- 20,000 Days on Earth (Wisdom Epoch).
- 25,000 Days & 30,000 Days on Earth.
- 1 Billion Seconds Alive (~31.7 years astronomical chronometer threshold).
- Decade Journey Tracker:
- Clean progression bars from age 10 to 100 with achievement status.
- Solar System Planetary Ages:
- Calculates your exact biological age on:
- 🪐 Mercury (Orbit: 0.24 Earth yrs)
- 🌕 Venus (Orbit: 0.62 Earth yrs)
- 🔴 Mars (Orbit: 1.88 Earth yrs)
- 🟠 Jupiter (Orbit: 11.86 Earth yrs)
- 🪐 Saturn (Orbit: 29.45 Earth yrs)
- 💎 Uranus (Orbit: 84.02 Earth yrs)
- 🌊 Neptune (Orbit: 164.79 Earth yrs)
- Computes remaining Earth days until your next planetary birthday on each world.
- Calculates your exact biological age on:
- Astrology & Cultural Wisdom:
- Western Zodiac sign, celestial symbol, astrological element, and personality keywords.
- Eastern Chinese Zodiac animal, element, and Yin/Yang energetic archetype.
- Monthly Birthstone gemstone, color hue, and metaphysical meaning.
- Traditional Day of the Week poem stanza.
- Generational Cohort classification (Gen Alpha, Gen Z, Millennial, Gen X, Baby Boomer).
- Dual Age Comparison:
- Compare two individuals side-by-side.
- Computes exact delta in Years, Months, Days, Weeks, Total Days, and age ratio.
- No Hardcoded Dates: All calculations are dynamically derived from the system clock (
Date.now()). - Coming Years Autonomous Sync: Whether opened today, in 2027, 2030, or 2050, the app automatically determines upcoming birthdays, leap year February 29 dates, and future milestones without code modifications.
| Layer | Technology | Details |
|---|---|---|
| Frontend Framework | React 19 + TypeScript | High-performance component architecture |
| Mobile & UI Toolkit | Ionic React 8.5 (iOS mode) | Cupertino native components, safe area insets |
| Styling & Materials | CSS Custom Properties + Liquid Glass | Backdrop filter, specular borders, spring physics |
| Build & Bundler | Vite 5 | Instant HMR, tree-shaking, production optimization |
| Native Integrations | Capacitor Haptics 7 | Tactile physical feedback on button interactions |
| Animations | CSS Keyframes + Canvas API | 60 FPS GPU-accelerated drift & particle bursts |
age-calculator/
├── public/ # Static assets & icons
│ ├── favicon.png
│ └── manifest.json
├── src/
│ ├── components/ # Apple-styled UI primitives
│ │ ├── ActivityRings.tsx # Apple Watch style concentric activity rings
│ │ ├── AppleHeader.tsx # Frosted glass header & theme switcher
│ │ └── ConfettiEffect.tsx # Particle celebration physics
│ ├── pages/ # Main navigation views
│ │ ├── Tab1.tsx # Chronos (Live Age, Ticker, Birthday)
│ │ ├── Tab1.css
│ │ ├── Tab2.tsx # Horizon (Time Machine, Milestones)
│ │ ├── Tab2.css
│ │ ├── Tab3.tsx # Cosmos (Planetary Ages, Zodiac, Compare)
│ │ └── Tab3.css
│ ├── theme/
│ │ └── variables.css # Apple HIG Liquid Glass tokens & animations
│ ├── utils/
│ │ └── calculator.ts # Precision mathematical calculation engine
│ ├── App.tsx # Root router with Apple tab bar
│ ├── main.tsx # Application bootstrap
│ └── vite-env.d.ts
├── index.html # Apple viewport & metadata config
├── package.json # Project dependencies & scripts
├── tsconfig.json # TypeScript configuration
└── vite.config.ts # Vite bundler configuration
- Node.js (version 18 or later recommended)
npmorpnpm
-
Clone the repository:
git clone https://github.com/Rahul08319/age-calculator.git cd age-calculator -
Install dependencies:
npm install
-
Start the local development server:
npm run dev
Open
http://localhost:5173in your browser. -
Build for production:
npm run build
The optimized production bundle will be generated in the
dist/directory.
This project is fully compatible with Capacitor for native deployment:
# Add native platforms
npx cap add ios
npx cap add android
# Build and sync web assets
npm run build
npx cap sync
# Open in Xcode or Android Studio
npx cap open ios
npx cap open androidDistributed under the MIT License. See LICENSE for details.
Crafted with elegance and precision inspired by Apple Design. Designed & Built by Rahul Kumar.