Calorie Burn
It is a production-ready Framer component that gives users a real-time estimate of their energy expenditure using standardized MET (Metabolic Equivalent of Task) values. Built for fitness apps, health dashboards, and wellness landing pages.
Users can dial in their body weight, session duration, and activity type, choosing from Walking, Running, Cycling, Swimming, Gym, or a fully custom MET value. Results update instantly with a smooth spring animation, and a motivational message and achievement badge appear based on the calorie threshold reached.
The component also includes a food equivalent card that rotates through configurable food items to put the burn in relatable terms, and a weekly goal progress bar that tracks how the current session contributes toward a target.
Everything is customizable from the Framer property panel, accent color, background, typography, border radius, padding, box shadow, animation style, and the food items list. An onCalculate event handler is also available for wiring results into other components or interactions on the canvas.
Sajjadul Kibria
