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

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

Example settingswhat each example above was built from

examples/zeffrahero.json
Brand
Zeffra
Headline
Feel every field, in real time.
Badge
Magnetic field sensing for robots
Colors
background #0a1220 · ink #eef3f6 · accent #5ef2c2
Mode
dark
Fonts
Space Grotesk and Inter
examples/tinmouthhero.json
Brand
Tinmouth Type
Headline
Letters with a steady hand.
Badge
New release · Tinmouth Sans
Colors
background #f3efe7 · ink #1b1a17 · accent #d2421c
Mode
light
Fonts
Fraunces and Instrument Sans

What you get

  • A self-contained index.html hero and an embed.html to paste into an existing site
  • Thousands of dots that part around the cursor, light up and spring back with rings
  • Your short word or mark set in finer dots that gathers at the start of each loop
  • A virtual cursor on a closed path for idle visitors and the video, so the loop is exact
  • An SVG still for reduced motion
  • Contrast and layout checks at four widths, plus a frame-exact 1080p MP4 and poster
  • Open-source licenses for every part it builds on

Good fit

  • Hardware, sensor and developer brands that want a hero which visibly reacts the moment a visitor moves the mouse.
  • Type foundries and studios that can set a two to six character mark in fine dots and let it gather each loop.
  • Launch pages that need a calm 12 second 1080p loop for social posts as well as a live interactive hero.

Not for

  • Long brand names (past seven characters the word stops reading in dots)
  • Photo or video backgrounds
  • Logos with fine detail that must be exact
  • Scroll-driven stories

About this skill

A hero filled with thousands of small dots that behave like iron filings near a magnet. Dots near the cursor are pushed aside, grow and light up in the accent colour, then spring back past home and settle, so every pass leaves soft rings behind it. A slow travelling wave breathes through the grid even when nobody touches it, and the brand's short word or mark can be set in finer dots that gather from a scatter at the start of each loop. Without a pointer, and in the video, a virtual cursor glides on a closed path, so the motion loops exactly. Plain Canvas 2D with no libraries, on dark or light pages, with the field dimmed under the copy. It ships as a page, a paste-in embed and a frame-exact 1080p loop.

Example request

Make our homepage hero a field of dots that ripple away from the cursor and spell our name in mint on navy.

Similar Skills

View all
New
web
Scramble Decode HeroClaude CodeCodexCursor+3 more agents
New
web
Text on Path HeroClaude CodeCodexCursor+3 more agents

Details

Output
Canvas 2D dot field · page + embed · 1080p loop
Needs
Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video
Series
Motion Heroes · 71 skills
Updated
Nov 1, 2026
Checked
Nov 1, 2026: its own commands ran and passed. That is a working check, not a security audit.

Generates with

Plain Canvas 2D (no libraries)Motion Heroes kitHeadless Chrome checks and frame-stepped recorderffmpeg
Good forBrandProduct launchWeb design

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

Write a review

FAQ

What happens on phones or before the visitor moves the mouse?

A virtual cursor glides through the stage on a smooth closed path, with a small ring marking it, so the field always has something pushing through it. When a real pointer moves over the hero it takes over, and hands back a few seconds after it stops or leaves.

Will the video loop without a jump?

Yes, if you record cycle divided by motion.speed seconds, which is 12 by default. The cursor's path, the wave and the word's gather all repeat on that period, and each frame depends only on its time. Only the copy's intro plays once at the start.

How heavy is it to run?

It is plain Canvas 2D with no libraries. The default spacing of 18 gives about 4,000 dots on a 1440×900 screen, and only the dots near the cursor's last 1.44 seconds of path are moved each frame. It pauses off-screen and lowers its pixel ratio on slow machines.

Which agents is Dot Field 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 on a plain 2D canvas; it uses no third-party libraries, only pinned Fontsource fonts under the SIL Open Font License 1.1. 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.