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/halden-press, working in your browser. Opens in a new tab. Also: Solvik sound.

14-second example rendered by this skill from examples/halden-press · 1280×720

Example settingswhat each example above was built from

examples/halden-presshero.json
Brand
Halden Press
Headline
Stories worth reading slowly.
Badge
Independent publisher · spring list
Colors
background #f3eee4 · ink #17130f · accent #c8402a
Mode
light
Fonts
Fraunces and Inter
examples/solvik-soundhero.json
Brand
Solvik Sound
Headline
Three nights of sound and light.
Badge
Three nights by the fjord · August
Colors
background #0c0a1a · ink #f4f1ff · accent #ff5fa2
Mode
dark
Fonts
Big Shoulders Display and Space Grotesk

What you get

  • A self-contained index.html hero and an embed.html to paste into an existing site
  • Two to four ribbons of your own phrases, each set letter by letter along a long, smoothly morphing curve
  • Ribbons that cross over and under each other, with far parts smaller and faded toward the page
  • A gentle twist that turns each band, shades it and squashes its letters, with fine rules along the edges
  • Type that scrolls by whole phrase lengths per loop, so the video loops exactly
  • An SVG still set with textPath for visitors whose browser can't run the effect
  • 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

  • Publishers, magazines and bookshops that want their categories and promises to read as moving type rather than sit in a list.
  • Festivals, venues and music labels with a handful of short lines, such as dates, stages and genres, to set in bold colour.
  • Fashion, streetwear and studio brands launching a campaign that needs a typographic hero and a 1080p loop for social posts.

Not for

  • Long sentences or paragraphs (each phrase is up to 48 characters and reads best at two to five words)
  • Photo or video backgrounds
  • Logos or wordmarks that must keep their exact drawing
  • Scroll-driven stories
  • Fonts without a sturdy weight, which thin out when set small along a curve

About this skill

A hero where the brand's own words are the ribbons. Two to four long, smooth curves sweep across the whole hero, each one a band of colour with a short phrase set letter by letter along its centre line, repeated end to end and scrolling slowly along the path. The curves morph over the loop and roll through depth, so the ribbons cross over and under each other, with the far parts smaller and faded toward the page. A gentle twist turns each band, shades it and squashes its letters, and fine rules run along the edges. With the copy on one side, the ribbons gather above the headline and fan out across the rest. Plain Canvas 2D with no libraries, on light or dark pages, shipped as a page, a paste-in embed and a frame-exact 1080p loop.

Example request

Make our homepage hero three ribbons of our taglines in vermilion, navy and ochre, sweeping across the page and crossing over each other.

Similar Skills

View all
New
web
Spotlight Type HeroClaude CodeCodexCursor+3 more agents
New
web
Dot Field HeroClaude CodeCodexCursor+3 more agents

Details

Output
Canvas 2D type ribbons · 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)SVG textPath for the still pictureMotion Heroes kitHeadless Chrome checks and frame-stepped recorder
Good forBrandProduct launchWeb design

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

Write a review

FAQ

How many phrases can it carry, and how long can they be?

Two to four ribbons, one phrase each, up to 48 characters per phrase. Each phrase repeats end to end along its curve with a separator, so two to five words read best. The build warns when a phrase is long enough that a phone shows only part of it.

Will the video loop without a jump?

Yes, if you record cycle divided by motion.speed seconds, which is 14 by default. The curves morph on that period, the type moves by whole phrase lengths per loop, and in the recording the pointer follows a closed path on the same loop. Only the copy's intro plays once at the start.

Does the text behind the headline hurt readability?

No. The ribbons pale almost to the page colour under the copy and under the bar's logo, links and button, and the build checks every line of text against the colours the ribbons can leave behind it. The check script then tests contrast and layout at 390, 768, 1024 and 1440 px.

Which agents is Text on Path 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 with SVG textPath for the still; 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.