Pixel-Art Running Pace Calculator

Julyo .

About Project

A playful twist on a traditional running pace calculator, reimagined with pixel-art visuals and dynamic animation. Built during the Figma Makeathon (Figma × Contra), this project helps runners instantly visualize their speed, from 5K to Marathon, while a pixelated runner (or even a surprise motorcycle 🏍️) moves according to the selected pace.

Process Creation

I started by researching how existing tools like Strava display pace data, then simplified the experience into a single-screen layout built in Figma Make. The UI combines retro pixel aesthetics with responsive design logic, dual unit support (km/mi), and custom animation (create it by using Flora) triggered by pace thresholds, from “very slow” walks to “sprint” and even an “easter egg” motorcycle for paces under 2:00/km.
Try it by yourself at here 👇
Like this project

Posted Nov 7, 2025

Created a pixel-art running pace calculator with animations.

Tom Landing Page Redesign
Tom Landing Page Redesign
Sprintblock Landing Page Design
Sprintblock Landing Page Design
Redesigned Poplite’s Survey Flow to Cut Time by 96%
Redesigned Poplite’s Survey Flow to Cut Time by 96%
Collection of Live Landing Page Design
Collection of Live Landing Page Design

Join 50k+ companies and 1M+ independents

Contra Logo

© 2025 Contra.Work Inc