# Text on Path Hero

> 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.

- Output: Web, Canvas 2D type ribbons · page + embed · 1080p loop
- Price: $4.99 one-time, or included in Pro
- Page: https://lookbk.dev/skills/text-on-path-hero

## What you need

- Node.js 18 or newer. Nothing to install.
- Chrome, Chromium or Edge, for the checks and the recording (the scripts find it; set `CHROME_PATH` if they don't).
- ffmpeg, for the video (`brew install ffmpeg`, `winget install ffmpeg`, `apt install ffmpeg`; or set `FFMPEG_PATH`).
- At runtime, nothing but a 2D canvas: the effect is inlined in the page. Fonts load from jsDelivr (the pinned list) or Google Fonts; without the network the page and the ribbons use system fonts. If the canvas can't run, visitors see the still.

## Install

```bash
curl -fsSL https://lookbk.dev/cli.js | node - add text-on-path-hero
```

The first run prints a sign-in link; open it, approve, and run the command again. Pro skills install for accounts that bought them or have Pro.

Where it installs:

- Run by Claude Code: `~/.claude/skills/text-on-path-hero` only, the one folder Claude Code reads.
- From your own terminal: `~/.agents/skills/text-on-path-hero`, which Codex, Gemini CLI, Copilot CLI, Cursor and OpenCode read, and also `~/.claude/skills/text-on-path-hero` when `~/.claude` exists.

Add `--claude` or `--shared` to write only one of those folders, or `--project` to install into the current folder instead. Start a new agent session afterwards so it picks up the skill.

Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.

## 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.