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/parcelwise, working in your browser. Opens in a new tab. Also: Borough fold.

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

What you get

  • A self-contained index.html hero and an embed.html to paste into an existing site
  • Your city plan, building, street, window and car colors, fonts, logo, headline, buttons and a corner parcel line
  • 27 documented effect settings: seed, loop length, blocks, height, parks, traffic, size, the featured tower, sun angle, shadows, dusk, lit windows, survey grid, thirteen colors, caption
  • Dark night or light daytime grounds, left, right or centered layouts, with the city above the copy on phones
  • An SVG still drawn from the same city plan, for no WebGL or reduced motion
  • Contrast and layout checks at 390, 768, 1024 and 1440 px
  • A frame-perfect MP4 that loops seamlessly (1080p by default, portrait sizes too) and a poster
  • Open-source licenses for every part it builds on

Good fit

  • Proptech, zoning and real estate teams can show a proposed tower filling in floor by floor on one parcel in their accent color.
  • Urban design studios and architects can pick a pale white-model look on warm paper instead of a dark night city.
  • Mapping, mobility and smart-city products can use cars, street lamps and lit windows as atmosphere, since the city is generated and not a real place.

Not for

  • Mapping a real city or address: the plan is generated from a seed
  • Photorealistic architecture: the buildings are clean, simplified blocks
  • Full landing pages below the hero (see the Landing Pages series)

About this skill

A small city on a survey grid, in isometric view beside your headline. When the page opens the blocks rise out of the plan from the middle outward, the sun sets and long shadows sweep across the streets, windows light up floor by floor (warm homes, cool offices, shop fronts), street lamps come on and cars run every street with their headlights and tail lights. On one parcel a proposed tower in your accent color fills in floor by floor each loop, with a ring pulsing round its lot. Your agent sets the city plan, the colors, fonts, logo, headline and buttons, checks contrast at four widths and records a seamless 1080p loop.

Example request

Build an Isometric City hero for Parcelwise, a zoning and site-modelling platform: midnight navy, mint accent, the proposed tower on lot 14-B, headline 'See the block before it's built.', and record a 12-second loop.

Similar Skills

View all
web
Lava Lamp HeroClaude CodeCodexCursor+3 more agents
web
Ringed Planet HeroClaude CodeCodexCursor+3 more agents

Details

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

Generates with

Raw WebGL1 (four small hand-written shader programs, no libraries)A seeded city plan with per-pixel windows and swept shadowsMotion Heroes kitHeadless Chrome checks and frame-stepped recorderffmpeg
Good forProduct launchBrandSocial mediaWeb design

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

Write a review

FAQ

Can it show a real city or our actual site?

No. The plan is generated from a seed from 1 to 9999 (default 12), so it is not a map of any real city or address. The same seed always gives the same city, so you can try seeds until you find a skyline you like.

How tall and how busy can the city get?

You set 4 to 8 blocks per side, a height from 0.2 (a low town) to 1 (a skyline of 40-storey towers), parks on up to 0.5 of the blocks and traffic from 0 to 4 cars per lane. One loop runs 8 to 16 seconds.

What do phones and reduced-motion visitors see?

On a phone the city comes first, then the words, and the navigation pill is hidden. Visitors who ask for reduced motion get one still frame of the live hero at 8 seconds, and browsers without WebGL get an SVG still drawn from the same city plan.

Which agents is Isometric City 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: the Motion Heroes kit, the isometric city shaders and plan generator, the still picture and the examples. No third-party code is included. 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.