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

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

What you get

  • A self-contained index.html hero and an embed.html to paste into an existing site
  • Your band, ground and flash colors, fonts, logo, headline, buttons and a wave-counter label
  • 15 documented effect settings: seed, loop length, waves, front spread, spin, tile size, band weight, style, three colors, frame, pointer swell, dots, label
  • Solid, outline or three-line track bands; a rounded card or a bleed to the edges; left, right or centered layouts, with the maze above the copy on phones
  • An SVG still picture for reduced motion or a failed script, so the hero is never blank
  • 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

  • Puzzle apps, games and daily challenges can show a maze that rewires itself wave by wave, with a small pill counting the waves.
  • Brand identity studios and type-led, Swiss-style brands can get a hard-edged graphic pattern in their own band, ground and flash colors.
  • Teams that want a looping social video get a seamless MP4, since the quarter turns of all the waves cancel out over each loop.

Not for

  • Soft, organic or photographic brands: the look is hard-edged and graphic by design
  • An actual playable maze: the pattern is decorative and isn’t solvable on purpose
  • Full landing pages below the hero (see the Landing Pages series)

About this skill

A bold two-color maze beside your headline. A grid of Truchet tiles, each two thick quarter-circle arcs, joins into one continuous network of bands. Waves of quarter turns (a diagonal, a ripple, a sweep, a ring, a spiral) cross it in turn; each tile spins with a small overshoot and flashes a highlight that drains back along the band, so the maze rewires itself wave by wave, and the bands swell under the pointer. Your agent sets the band, ground and flash colors, tile size, style, fonts, logo, headline and buttons, checks contrast at four widths and records a seamless 1080p loop.

Example request

Build a Truchet Maze hero for Knotwork, a daily maze puzzle: black bands on vermillion with a cream flash on a card, headline 'One maze a day, never twice.', and record a 12-second loop.

Similar Skills

View all
web
Confetti Launch HeroClaude CodeCodexCursor+3 more agents
web
Firefly Meadow 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

Canvas 2D (hand-written tile grid and wave timing, no libraries)Truchet quarter-circle tiles with seeded waves that cancel out over the loopMotion 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 visitors actually solve the maze?

No. The pattern is decorative and isn’t solvable on purpose: it is one continuous network of bands that keeps rewiring as tiles turn. It suits brands that want a bold graphic look, not a playable puzzle.

How big are the tiles, and how do they look on phones?

You set the tile size from 32 to 160 px (default 72) on wide screens, and on phones tiles shrink to 72% of that, with the maze above the copy. If the bands look thin on a phone, raise the band weight, from 0.12 for a fine line to 0.5 for a fat pipe.

Which colors work for the bands?

Any pair with at least 3:1 between the bands and their ground, which the build insists on, plus a flash that stands off the ground. The classic look is black bands on a hot ground like vermillion, yellow or cobalt with a paper-white flash. Dark pages work too, with bright line work.

Which agents is Truchet Maze 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 Truchet tile grid and wave choreography, 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.