Animalendar - Scientific Pet Age Calculator with Rust and WebAssembly

Pet owners around the world ask the same question: “How old is my companion in human years?” While traditional answers like “multiply by 7” persist, modern veterinary science reveals a far more complex reality. Animalendar turns that research into an interactive web application: it gives a dog’s or a cat’s age in human years, its life expectancy and its life stage, in English and in Spanish.

We architected and developed this scientific pet age calculator from the ground up using Rust, Leptos, and WebAssembly. The calculations run in real time in the browser, and the whole application is served from one site in two languages: www.animalendar.com.

The Challenge: Science Meets User Experience

Traditional pet age calculators use oversimplified formulas that ignore crucial biological factors. Veterinary research demonstrates that age progression varies dramatically based on species, breed size, and individual characteristics, but presenting this complexity without overwhelming users requires careful design.

Pet owners need:

• Scientifically accurate age calculations based on modern veterinary research, not outdated myths.
• Breed-specific data that accounts for different sizes and lifespans across dog and cat breeds.
• Real-time results with smooth, responsive interactions that feel instant.
• Visual understanding through interactive charts showing age progression over time.
• Accessible information in their native language (English/Spanish) with proper SEO optimization.

The Technical Challenge:

Building a system that combines scientific accuracy with a good user experience meant solving several problems at once: algorithms that execute instantly, an interface that updates in real time, and two complete language versions of the site that stay in step and are each indexed in their own language.

The Solution: Rust-Powered Reactive Calculations

By leveraging Rust’s performance combined with Leptos’s reactive framework and WebAssembly’s near-native speed, we created a platform where calculations happen instantly on every parameter change. The unified Axum routing system ensures predictable SEO behavior, and the translations and breed data compiled into the binary keep both language versions in step without a database.

Architecture and Technology Stack

The platform is built on server-side rendering with selective hydration: every page arrives as complete HTML, and only the calculator becomes interactive in the browser.

Key Components:

Component	Technology	Purpose
Frontend Framework	Leptos 0.8.2 (Rust)	Fully reactive UI with type safety and selective hydration
Computation Engine	Rust + WebAssembly	Scientific calculations executed client-side
Backend Server	Axum (Rust)	Unified routing system with server-side rendering
Breed Data	Rust tables compiled into the binary	Over 300 dog breeds and over 80 cat breeds, each with the source of its figures
Styling	Tailwind CSS + Font Awesome	Modern, responsive interface with dark mode support
SEO System	hreflang on every page	Each page links its English and Spanish versions on the same domain

Why Rust + Leptos + WebAssembly

Rust was the natural choice for its exceptional performance, memory safety, and compile-time guarantees. The Leptos framework provides React-level developer experience with fine-grained reactivity that updates only what changed.

Key Benefits:

• Instant calculations - The algorithms execute in the browser with near-zero latency.
• Type-safe reactive state - Compiler catches bugs before they reach users.
• One codebase on both sides - The same Rust components render on the server and run in the browser.
• Zero runtime overhead - No garbage collection pauses during calculations.

Server-Side Rendering with Selective Hydration

The application renders every page on the server and hydrates only the calculator with WebAssembly:

Performance Impact:

• Faster time-to-interactive - Static content renders immediately from SSR.
• Smaller initial payload - Only calculator component includes WASM.
• Better SEO - Search engines see fully-rendered HTML.
• Progressive enhancement - Site functions without JavaScript, calculator enhances when loaded.

Core Features

1. Scientific Age Calculation Algorithms

Every figure the calculator uses comes from a published source: a breed standard, a veterinary chart or a cohort study.

Dog Age Calculation:

• The first two years follow the AKC chart, which quotes the AVMA. The size group comes from the breed’s ideal adult weight.
• After two years, the human years left to 80 are spread over the dog’s adjusted life expectancy. A dog that reaches its life expectancy is 80 in human years.
• Life expectancy is the breed’s median lifespan in UK primary care (McMillan et al., 2024) where the study has enough dogs of that breed, and otherwise the breed’s AKC page. It is adjusted for sex and neutering (Teng et al., 2022) and for body condition (Montoya et al., 2023).

Size group (ideal adult weight)	At 1 Year	At 2 Years	Source
Small, medium and large (up to 45.4 kg)	15 human years	24 human years	AKC chart, quoting the AVMA
Giant (over 45.4 kg)	12 human years	22 human years	AKC chart, quoting the AVMA

Cat Age Calculation:

• The first two years follow the 2010 AAFP-AAHA Feline Life Stage Guidelines: 15 human years at one and 24 at two, whatever the size.
• Breed life expectancy is the median lifespan in English primary care (O’Neill et al., 2015) where the breed has enough cats, and otherwise the GCCF breed page.
• Neutering and body condition adjust it, from Teng et al. (2024) and Montoya et al. (2023).

Technical Implementation:

• Rust-based calculation engine - Compiled to WebAssembly for maximum performance.
• Breed data compiled into the binary - Over 300 dog breeds and over 80 cat breeds. Each row records where its weights and life expectancy come from, and a test checks it.
• Real-time recalculation - Every parameter change triggers instant updates.
• Smooth animations - Visual feedback using CSS transitions and Leptos reactivity.

2. Fully Reactive User Interface

Built with Leptos’s fine-grained reactivity, the UI updates instantly without manual DOM manipulation:

Interactive Components:

• Breed selector with search - Autocomplete searches through hundreds of breeds.
• Age slider with precision control - Supports month-level granularity.
• Visual age progression chart - Interactive graph showing lifetime equivalent.
• Life expectancy indicators - Displays percentage of life lived and remaining.

Reactivity in Action:

// Simplified example showing Leptos reactivity
let (age, set_age) = signal(3.0);
let (breed, set_breed) = signal(Breed::MixedMedium);

// Human age automatically recalculates when signals change
let human_age = Memo::new(move |_| {
    calculate_human_age(age.get(), breed.get())
});

Every signal change propagates automatically through the computation graph, triggering only affected components to re-render with surgical precision.

3. One Site in Two Languages

The platform serves both languages from one domain:

• English: www.animalendar.com/en/
• Spanish: www.animalendar.com/es/, with its own paths in Spanish.

Multilingual SEO:

• hreflang on every page - Each page names its version in the other language.
• Translations compiled into the binary - Both languages ship in the same build.
• SEO-optimized URLs - Clean, descriptive paths in both languages.
• Server-side language choice - The home address sends each visitor to the language they last read, or else to the one their browser prefers.

Benefits:

• One brand, one domain - English and Spanish speakers find the same product under the same name.
• Better user experience - Each visitor lands in their own language.
• Flexible growth - Another language is another path prefix and another translation module.

4. Advanced UI/UX Features

Dark Mode Support:

• Server-side theme detection - No flash of unstyled content.
• Cookie-based persistence - Preference survives page reloads.
• Smooth transitions - Animated theme switching.

Accessibility:

• Keyboard navigation - Full keyboard support for all interactions.
• Screen reader optimized - Semantic HTML and ARIA labels.
• Designed for WCAG 2.2 AA - As the site’s accessibility statement declares.

Performance Optimizations:

• Lazy loading - Images and non-critical assets load on demand.
• Asset minification - Compressed CSS, JavaScript, and HTML.
• CDN-ready - Static assets optimized for edge delivery.

5. Advanced Mode: In-Depth Custom Calculations

For users who want to fine-tune their pet’s profile with greater precision, Animalendar offers an Advanced Mode that unlocks additional input fields and detailed health indicators.

Additional Input Fields:

• Exact birth date - Enables day-precision age calculations instead of month approximations.
• Precise weight - Allows manual weight adjustment to account for deviations from breed average.
• Sex - Male or female, which changes the life expectancy.
• Neuter status - Accounts for the effect of neutering on life expectancy.

Enhanced Health Indicators:

• Life stages progression - Visual timeline showing completed stages (Puppy, Teenager, Young, Mature, Senior) with age ranges for each.
• Current life stage description - Contextual information about the pet’s current developmental phase.
• Life expectancy - Calculated years of expected lifespan based on breed, sex, neutering and body condition.
• Years to rainbow - Estimated remaining years (life expectancy minus current age).
• Percentage of life lived vs. remaining - Visual representation of life progress.
• Health index - A score from 0 to 100 built from age, weight against the breed’s range, sex and neutering, with feedback messages.
• Safe temperature range - Species and breed-specific optimal temperature zones (ideal, hot, danger thresholds) for outdoor activities.

Technical Implementation:

• Conditional rendering - Advanced fields appear only when the mode is activated via a toggle switch.
• Reactive recalculation - All additional indicators update instantly as the user adjusts any parameter.
• Visual feedback - Color-coded indicators (green for excellent health, yellow/orange for good, red for concerns).
• Temperature visualization - Horizontal gauge showing safe, ideal, and danger zones.

This advanced functionality provides veterinarians, breeders, and dedicated pet owners with the detailed insights they need while keeping the interface clean and accessible for casual users through the optional toggle.

Results and Impact

Performance Achievements

Business Impact

Technical Achievements

Conclusion

Animalendar combines scientific rigor with modern web technology. With Rust, Leptos, and WebAssembly, we built a platform that runs its calculations instantly in the browser and serves both languages from one site.

The decision to render every page on the server and hydrate only the calculator gives the site fast initial loads and instant interactivity where it matters most.

Key Takeaways for Similar Projects

1. Selective hydration keeps WebAssembly to the one component that needs it.
2. Rust + WebAssembly delivers desktop-class calculation speed in browsers.
3. Fine-grained reactivity provides smooth UX without framework overhead.
4. Data compiled into the binary removes the database when content only changes with a release.
5. Type-safe full stack prevents entire classes of bugs at compile-time.

---