Prototype showcase

Interactive TagXone demo

Drop a 3-digit tag on the stylised UK map, set your location, and watch nearby tags animate in and out of radius. No external map library — pure CSS + vanilla JS.

Controls

0 Active in radius

0 Total tags

Map click mode

3-digit tag Category

Title (optional) Radius: 80 km

Click the map to drop a tag or set your pin. Tags outside the dashed radius hide smoothly. Your custom tags persist in localStorage.

In radius

Stylised UK · click to interact

How this was built with Grok Build

This page is a deliberate front-end showcase — a mini product prototype in one static folder, no map SDK and no build pipeline.

Vanilla JS modules pattern — IIFE namespaces in demo.js / script.js keep theme chrome and demo logic separate without a bundler.
CSS custom properties — full light/dark theming via data-theme tokens so map grid, pins, and cards stay readable in both modes.
requestAnimationFrame — coalesced re-renders for pin layout, radius ring, and filter updates stay smooth under resize and rapid input.
localStorage — theme preference plus saved/custom tags survive refresh so the demo feels stateful.
Haversine distance — real great-circle kilometres between user pin and tags drive the live “active in radius” counter and sorted list.
Motion-aware UI — enter/exit transforms on markers, hover cards, and prefers-reduced-motion respect.