pallet

A Pokémon route-map style navigation component for React. A trail of circular nodes connected by a dotted line, each showing a pixel-art sprite for a page or section.

{
  "position": "left",
  "orientation": "vertical",
  "items": [
    {
      "label": "Home",
      "href": "/",
      "pokemonId": 133
    },
    {
      "label": "Work",
      "href": "/work",
      "pokemonId": 81
    },
    {
      "label": "Writing",
      "href": "/writing",
      "pokemonId": 137
    },
    {
      "label": "Contact",
      "href": "/contact",
      "pokemonId": 185
    }
  ],
  "theme": {
    "accentColor": "#f97316",
    "ringStyle": "solid",
    "trailPath": "wavy",
    "dotStyle": "dotted"
  }
}

Variants

Everything below is the same component under different theme settings. Click a node to change the active route. Every color comes from one accent value.

Trail path

Horizontal orientation

Labels sit below the node so the trail never runs through them. positionstays independent — it controls which end the trail packs to.

Scroll-linked trail fill

Scroll the page — the trail fills continuously in accentColor, and the highlight travels to whichever node the fill has reached. Progress is 0.00, supplied by useScrollProgress(), not read inside the component.

Custom sprites, no Pokémon

Every item takes a spriteUrl, so the component works with entirely your own artwork and never touches the bundled catalogue.