Nearby Walk Menu

Component

About

A line-drawn walking scene from a hotel to nearby landmarks and N Seoul Tower: landmarks rise in, walkers follow the route, hover swaps walking time for distance, with four full-page themes and a lantern cursor glow.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Nearby Walk Menu to your project and fits it to your theme.

Code

How Nearby Walk Menu is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { NearbyWalk } from "@/components/ui/nearby-walk-menu";

export default function NearbyWalkDemo() {
  return (
    <NearbyWalk
      className="min-h-dvh"
      origin="Hotel name here"
      hint="Hover a place to see how far it is"
      defaultTheme="classic"
      places={[
        { id: "myeongdong", name: "Myeongdong", km: 0.8, walkMinutes: 12 },
        { id: "station", name: "Seoul Station", km: 0.9, walkMinutes: 15 },
        { id: "gate", name: "Sungnyemun Gate", km: 0.5, walkMinutes: 8 },
        { id: "palace", name: "Deoksugung Palace", km: 1.0, walkMinutes: 15 },
        { id: "tower", name: "N Seoul Tower", km: 1.0, walkMinutes: 25 },
      ]}
    >
      <p className="m-0 text-center text-[13px] text-[var(--nw-muted)]">
        by{" "}
        <a
          href="https://aakashmehra.com/ref/nearbywalk"
          target="_blank"
          rel="noopener noreferrer"
          className="font-medium text-[var(--nw-ink)] underline-offset-4 hover:underline"
        >
          aakashmehra.com
        </a>
      </p>
    </NearbyWalk>
  );
}