# Topo Contour Hero

> A hero section that is a living topographic map. Contour lines breathe slowly over a generated landscape, with heavier index lines carrying their elevations, a soft hillshade, lakes and a dotted grid with coordinates. Beside the headline a hiking trail plans its own switchbacks up the steep ground to a named summit and draws itself on, with a walker at its head and a profile card counting the kilometers and meters climbed. Paper map or night survey. Your agent puts in your colors, fonts, logo, headline and buttons, checks contrast at four widths and records a smooth 1080p video of it.

- Output: Web, Animated canvas hero · page + embed + 1080p video
- Price: $6.90 one-time, or included in Pro
- Page: https://lookbk.dev/skills/topo-contour-hero

## What you need

- Node.js 18 or newer. Nothing to install.
- Chrome, Chromium or Edge, for the checks and the recording (the scripts find it; set `CHROME_PATH` if they don't).
- ffmpeg, for the video (`brew install ffmpeg`, `winget install ffmpeg`, `apt install ffmpeg`; or set `FFMPEG_PATH`).
- At runtime, nothing but a 2D canvas. Fonts load from jsDelivr (the pinned list) or Google Fonts; without the network the page uses system fonts.

## Install

```bash
curl -fsSL https://lookbk.dev/cli.js | node - add topo-contour-hero
```

The first run prints a sign-in link; open it, approve, and run the command again. Pro skills install for accounts that bought them or have Pro.

Where it installs:

- Run by Claude Code: `~/.claude/skills/topo-contour-hero` only, the one folder Claude Code reads.
- From your own terminal: `~/.agents/skills/topo-contour-hero`, which Codex, Gemini CLI, Copilot CLI, Cursor and OpenCode read, and also `~/.claude/skills/topo-contour-hero` when `~/.claude` exists.

Add `--claude` or `--shared` to write only one of those folders, or `--project` to install into the current folder instead. Start a new agent session afterwards so it picks up the skill.

Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.

## Example request

> Build a Topo Contour hero for Col Guides, our guided hiking app: warm paper map with brown contours and lakes, a red trail switchbacking up to 'Piz Arlenc', headline 'Every switchback, already walked.', a route profile card, and record a 12-second loop for the app launch.