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

11-second example rendered by this skill from examples/kiln · 1280×720

Example settingswhat each example above was built from

examples/kilnhero.json
Brand
Ember & Clay
Headline
Five days from clay to your table.
Badge
Stoneware, fired every Friday
Colors
background #f4ece0 · ink #2a1c15 · accent #c2502b
Mode
light
Fonts
Fraunces and Manrope
examples/lullhero.json
Brand
Lull
Headline
Six quiet steps to inbox zero.
Badge
Email, sorted before you open it
Colors
background #12131c · ink #eef0f7 · accent #93a7ff
Mode
dark
Fonts
Space Grotesk and Inter

What you get

  • A self-contained hero page and a paste-in embed in your colors, fonts, logo and copy
  • A row of 4 to 6 panels that travels sideways as the visitor scrolls, resting on each one
  • Six art plates drawn in code (arcs, orb, stripes, grid, sun, waves) in your brand colors, with layered parallax and a large outline numeral
  • A background that blends into the color of the panel in view, and a progress bar with a tick per panel
  • A frame-perfect 1080p MP4 and a poster of the same scripted scroll, the same on any machine
  • A still panel for reduced motion and when scripts fail, plus checks at four widths for overflow, contrast and accessibility
  • Open-source licenses for every part it builds on

Good fit

  • Studios and makers can show a process as 4 to 6 steps that visitors scroll through one panel at a time.
  • Software teams can turn a how-it-works section into panels with a title and one sentence each, over code-drawn art in their colors.
  • Brands that want motion without photos or footage get art plates drawn in code, and a recorded video of the same scroll for launch posts.

Not for

  • Photo or video galleries (the panels are drawn art, not your images)
  • Stories longer than six steps or with long paragraphs per step
  • Heroes that sit inside a scrolling panel or an iframe (use drive "time" there)

About this skill

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.

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.

Similar Skills

View all
web
Scroll Route HeroClaude CodeCodexCursor+3 more agents
New
web
Shutter Reveal HeroClaude CodeCodexCursor+3 more agents

Details

Output
Pinned sideways story panels · canvas 2D · page + embed · 1080p video of the scroll
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

Canvas 2D and CSS position: sticky (no libraries)Motion Heroes kitHeadless Chrome checks and a scripted-scroll recorderffmpeg
Good forProduct launchBrandWeb design

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

Write a review

FAQ

How much text fits on each panel?

A title of up to 26 characters on up to 2 lines, and one sentence of up to 110 characters on up to 3 lines (2 on a phone). A sentence that does not fit ends in an ellipsis, so keep each one to a single concrete detail.

Can each panel have its own color and art?

Yes. Each panel takes its own color, text ink, art accent and art plate: arcs, orb, stripes, grid, sun or waves. The build checks that every panel's text reaches 4.5:1 on its color, and that the headline still reads on every background tint.

How is a video made from a page that scrolls?

The recorder scrolls the page along a scripted path in headless Chrome, frame by frame, resting on each panel. The suggested run is 11 seconds at 30 fps and 1920×1080. With the default 9-second tour the row reaches the last panel at 10 seconds.

Which agents is Horizontal Panels 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: the Motion Heroes kit, the panel row, the six art plates, the parallax, the SVG still and the examples. No outside library is used: native sticky pinning and a hand-drawn 2D canvas. 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.