Dev Log 01: Rebuilding the homepage hero into a live race stage
How the homepage moved from a static marketing banner to a race-stage hero with checkpoint interactions, replay cues and stronger navigation feedback.
What changed in the hero
The first homepage version explained the product, but it did not demonstrate how a live map experience should feel. This update rebuilt the hero as a race-stage surface with a widescreen map, leaderboard, route line and active checkpoint signals.
The goal was not just to make the page look more animated. The goal was to let visitors understand in a few seconds that ColorMap is a running product system, not a static map tool.
Interaction details we added
Checkpoint markers now react on hover with scan-ring motion, tooltip rewards and stronger focus cues. The moving runner can also auto-trigger those states when it reaches a checkpoint so the map does not feel frozen when the user is not interacting.
We also added clearer active states to the main navigation so the site feels more controlled and readable while scrolling between sections.
