Skip to content
Founding Lifetime: every Pro skillfirst 100 members · $199 onceUpgrade
Lookbk
Sign In
Open live demo

The page this skill built from examples/col, working in your browser. Opens in a new tab. Also: Ridgeline.

12-second example rendered by this skill from examples/col · 1280×720

What you get

  • A self-contained index.html hero and an embed.html to paste into an existing site
  • A seeded landscape traced into contour and index lines with elevation figures, hillshade, lakes and a coordinate grid
  • A trail that plans real switchbacks to a named summit and draws itself on, with a profile card counting distance and climb
  • 21 documented settings: loop length, landforms, relief, drift, elevations, contour interval, water level, shade, trail steepness, grid, coordinates, colors, summit name and the profile card
  • Left, right or centered layouts, with the trail above the copy on phones
  • A seamless loop of 8 to 20 seconds, and an SVG still traced from the same land for reduced motion
  • Contrast and layout checks at 390, 768, 1024 and 1440 px
  • A frame-perfect MP4 (1080p by default, portrait sizes too) and a poster, the same on any machine
  • Open-source licenses for every part it builds on

Good fit

  • Hiking, trail-running, cycling and ski apps can show a trail that plans its own switchbacks up to a named summit beside the headline.
  • Mountain guides and outdoor brands can set plausible elevations, a contour interval and coordinates so the map figures suit their region.
  • Maps, GIS and geodata products can choose a warm paper map or a dark night survey, as decoration rather than real survey data.

Not for

  • Showing a real place: the terrain is generated, not survey data
  • Interactive maps people can pan, zoom or search
  • Full landing pages below the hero (see the Landing Pages series)

About this skill

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.

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.

Similar Skills

View all
web
Circuit Trace HeroClaude CodeCodexCursor+3 more agents
web
Confetti Launch HeroClaude CodeCodexCursor+3 more agents

Details

Output
Animated canvas hero · page + embed + 1080p video
Needs
Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video
Series
Motion Heroes · 50 skills
Updated
Oct 26, 2026
Checked
Oct 26, 2026: its own commands ran and passed. That is a working check, not a security audit.

Generates with

2D canvas (no libraries)Motion Heroes kitHeadless Chrome checks and frame-stepped recorderffmpeg
Good forProduct launchBrandWeb design

Installed it? Tell others how it went. Reviews come from people who installed this skill.

Write a review

FAQ

Is the terrain a real place?

No. The land is generated from a seed from 1 to 9999, not survey data, so it can’t show a real mountain or route. You can set the lowest and highest elevations, the summit name and the coordinates of the grid so the figures look plausible for your region.

How do I keep the contour lines from looking too busy?

Pick the interval like a real map: 10 or 20 m for hills, 25 or 50 m for mountains. The build asks for between 6 and 90 lines from the lowest to the highest ground. If it still looks busy behind the copy, raise the interval or lower the landform scale.

What do phones and reduced-motion visitors see?

On phones the trail sits above the words, and the profile card shows only on wide screens. Visitors who ask for reduced motion get one frame of the live map at 9 seconds with the whole trail drawn. If the script can’t run, an SVG still traced from the same land shows instead.

Which agents is Topo Contour Hero written for?

Any agent that reads SKILL.md folders, including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode.

Do I own what I make with it?

Yes. Everything your agent makes with this skill is yours, including for client and commercial work.

What if it doesn’t work for me?

Email support@lookbk.dev within 7 days of buying and we’ll fix it or refund you.

Credits and licensesWritten by Lookbk

Lookbk wrote this package from scratch: the terrain, the contour tracing, the trail planner, the profile card, the still, the Motion Heroes kit and the examples. The noise follows Ken Perlin's published improved-noise algorithm. Written by Lookbk, no third-party code.

Credits and licenses for the open-source software and fonts it uses are in NOTICE.md inside the download.