Hatch Your BMI

A playful, fully interactive and fully accessible BMI calculator component for Framer, built around a “hatch the egg” reveal. Users dial in their weight and height — by swipe, type, or voice — and hit “Hatch my result” to watch a glass egg fill up with their result. A friendly, inclusive alternative to a plain number-and-form calculator.

Key features:

• Fully accessible: built to be usable by everyone, including voice input as a first-class way to enter measurements; no swiping or typing required

• Three input methods total: swipe, type, or speak

• Metric (kg/cm) and Imperial (lb/ft-in) unit toggle

• Scrollable wheel pickers for weight and height, with sensible default ranges

• Animated glass-egg reveal sequence tied to the “Hatch” action

• Friendly, non-clinical framing with a built-in disclaimer (“a gentle starting point,” not a diagnosis)

• Drop-in Framer code component; no external scripts or dependencies beyond Framer itself

Use case: Ideal for wellness, fitness, and lifestyle sites that want a BMI tool with personality — instead of a sterile calculator widget — onboarding flows, health-and-wellness landing pages, or as a lead-capture moment before a consultation CTA. The voice-input option also makes it a strong fit for sites prioritizing accessibility compliance.

What’s included:

• The component file, ready to paste into any Framer project

• Property controls for customizing ranges, units, and copy