# Horizontal Panels Hero

> An animated website hero that turns scrolling down into a sideways journey through four to six tall panels beside the headline. The hero pins, and each stretch of scrolling slides the next panel in, resting on it for a moment. Every panel is a poster drawn in code: an index, a large outline numeral, an art plate of arcs, an orb, stripes, a grid, a sun or waves, a title and one sentence. Inside each panel the layers drift at different speeds, and the background blends into the colour of the panel in view. You give it your steps, colors, fonts, logo and words. It builds one self-contained page plus a paste-in embed, checks it at four widths, and records a smooth 1080p video of the same scroll.

- Output: Web, Pinned sideways story panels · canvas 2D · page + embed · 1080p video of the scroll
- Price: $4.99 one-time, or included in Pro
- Page: https://lookbk.dev/skills/horizontal-panels-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`).
- Internet access when the page is opened, for the fonts only (jsDelivr, pinned versions with integrity hashes). The panels are drawn with the browser's own 2D canvas: no libraries, no WebGL. Without the network, visitors see system fonts; the page still works.

## Install

```bash
curl -fsSL https://lookbk.dev/cli.js | node - add horizontal-panels-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/horizontal-panels-hero` only, the one folder Claude Code reads.
- From your own terminal: `~/.agents/skills/horizontal-panels-hero`, which Codex, Gemini CLI, Copilot CLI, Cursor and OpenCode read, and also `~/.claude/skills/horizontal-panels-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 a Horizontal Panels hero for Ember & Clay, our pottery studio: five panels for the five days from wedging the clay to firing at 1,280 °C, cream, terracotta and olive, a 'Shop this week's firing' button, and a video for the launch post.