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

The page this skill built from examples/lund-okafor, working in your browser. Opens in a new tab. Also: Corvel.

18-second example rendered by this skill from examples/lund-okafor · 1280×720

Example settingswhat each example above was built from

examples/lund-okaforhero.json
Brand
Lund & Okafor
Headline
Carried across.
Colors
background #ebe5d8 · ink #1d1914 · accent #b8361c
Mode
light
Fonts
Fraunces and Instrument Sans
examples/corvelhero.json
Brand
Corvel
Headline
Cargo under sail.
Colors
background #0f1513 · ink #efe6d2 · accent #c9a25a
Mode
dark
Fonts
Bricolage Grotesque and IBM Plex Sans

What you get

  • A self-contained index.html hero page in your colours, fonts, logo and copy
  • An embed.html section to paste into an existing site
  • A printed paper globe or an engraved brass one, with crisp vector coastlines and a brass meridian ring
  • 2 to 10 of your own routes as twisted threads with shadows, landing stamps and printed routes
  • A globe that turns when dragged and sways on its own otherwise
  • Checks at 390, 768, 1024 and 1440 px for text size, contrast, clearance under the bar and the old template
  • A frame-exact 18-second 1080p MP4 that loops, and a poster
  • Open-source licenses for every part it builds on

Good fit

  • A publisher, school or charity that wants to show where its books, students or gifts travel between cities.
  • A freight, travel or import business whose story is a set of real crossings it has made.
  • A brand page that needs one finished, tactile world object instead of a generic glowing map.

Not for

  • Live data feeds: the routes are fixed in hero.json
  • Dashboards that need counts, axes or a legend
  • More than 10 routes at once
  • Routes between nearly opposite sides of the globe
  • Brands that want a dark sphere of glowing dots

About this skill

A desk globe drawn in code, with your own records travelling over it. On light pages it is a varnished printed globe: water lines engraved along every coast, coasts hand-coloured, the equator as a degree scale and a window reflected in the varnish. On dark pages the same map is cut in brass under a lamp. An engraved brass meridian ring holds it on its tilted axis. Each route is a twisted silk thread that rises from one city, travels with its shadow sliding over the map, lands with two stamp rings and dries into a dashed printed route. The headline sits on the globe's limb and the threads cross in front of its letters. Land comes from Natural Earth, public domain. Drag to turn it; it loops every 18 seconds.

Example request

Use the data-globe-hero skill to build a hero for my translation press Lund & Okafor: a varnished paper globe facing the Atlantic with 10 threads, one per book, from the city it was written in to its translator's city, the headline "Carried across." on the globe's limb, the call to action "Browse the catalogue", and an 18 second loop video.

Similar Skills

View all
New
web
Pixel Grid RevealClaude CodeCodexCursor+3 more agents
New
web
Variable Weight Wave HeroClaude CodeCodexCursor+3 more agents

Details

Output
Paper or brass desk globe with your routes as threads · page + embed · 1080p loop
Needs
Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video
Series
Motion Heroes · 77 skills
Updated
Nov 2, 2026
Checked
Nov 2, 2026: its own commands ran and passed. That is a working check, not a security audit.

Generates with

three.js r180 and its RoomEnvironment add-on, pinned with integrity hashesNatural Earth 1:50m land (public domain), encoded into the package with its generatorMotion Heroes kit v2 (editorial composition with the threads in front of the headline, or split with a lit headline)Headless Chrome checks and frame-stepped recorder, ffmpeg
Good forBrandWeb designProduct launch

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

Write a review

FAQ

Where does the map come from?

The land outlines are Natural Earth 1:50m land, which is in the public domain. They are encoded into the package, and gen-land.mjs can rebuild them from the original file.

How do I add my own routes?

List 2 to 10 pairs under effect.routes in hero.json, each with a from and a to. Use a city from the table in SKILL.md or write lat, lon in degrees.

Can visitors turn the globe?

Yes. Dragging the globe turns it with a spring and inertia, and after a moment it eases back into its slow sway. Recordings and the reduced-motion still never move with the pointer.

Which agents is Data Globe 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, its Motion Heroes kit v2, the globe shaders, coastline, ring and threads; it loads three.js r180 under the MIT License and fonts from Fontsource under the SIL Open Font License 1.1, and its land outlines come from Natural Earth, which is in the public domain. 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.