The page this skill built from examples/owl, working in your browser. Opens in a new tab. Also: Saltmarsh.
12-second example rendered by this skill from examples/owl · 1280×720
What you get
- A self-contained index.html hero and an embed.html to paste into an existing site
- A split-flap board with two pages of up to eight rows, a banner of big flaps, a flap clock and blinking status lamps
- Flaps that step through the drum to every new character, shaded as they fall, row by row
- 21 documented settings: loop length, label, column headings, both pages, banners, clock, blink word, flap font and speed, size and every board color
- Left, right or centered layouts; on phones the board drops columns to stay readable above the copy
- A seamless loop of 8 to 20 seconds, and an SVG still of the settled board for reduced motion
- Contrast and layout checks at 390, 768, 1024 and 1440 px
- A frame-perfect MP4 (1080p by default, portrait sizes too) and a poster, the same on any machine
- Open-source licenses for every part it builds on
Good fit
- Airlines, rail and sleeper-train operators can show their own departures flipping in beside the headline, the way station boards used to clatter.
- Festivals and event organizers can put a line-up, schedule or launch timeline on the board, with a second page such as Saturday then Sunday.
- Logistics and shipping brands get a board of times, codes, gates and statuses, with a lamp that blinks beside the boarding row.
Not for
- Live timetables: the board shows the rows you write, it does not fetch data
- Long text: each cell is one capital, digit or punctuation mark, and rows are short
- Full landing pages below the hero (see the Landing Pages series)
About this skill
A hero section with a mechanical split-flap departure board beside the headline. Every character is a drum of flaps that turns one flap at a time until it reaches its letter, so the board clatters in row by row with your times, destinations, codes, gates and statuses. Each flap falls, darkens and casts a shadow as it turns. A big banner row, a flap clock and a blinking lamp beside the boarding row complete it, and the board flips to a second page and back in a seamless loop. Black or cream flaps, dark or light pages. Your agent puts in your colors, fonts, logo, headline and buttons, checks contrast at four widths and records a smooth 1080p video of it.
Example request
Build a Split-Flap Board hero for Owl Line, our sleeper trains from Vienna: night page, black flaps with amber remarks, tonight's departures flipping to the next page, banner 'NIGHT TRAINS' then 'SLEEP ON IT', headline 'Board at ten. Wake up somewhere else.', and record a 12-second loop.
How it works
Your agent
- 1
Collect the brand
Every claim, price, date, time and name on the board and in the copy must come from the person.
- 2
Write hero.json
Copy the closer example and replace everything:
examples/owl/hero.json(a sleeper-train operator, night page, black flaps with an amber status, two pages of departures, copy on the left) orexamples/saltmarsh/hero.json(a music festival, cream page, cream flaps in an olive housing, Saturday and Sunday line-ups, copy on the right). - 3
Build
It lists every problem in
hero.jsonat once (missing fields, text over its limit, a setting out of range, colours that don't contrast, a clock that isn't a time) and writes nothing until they're fixed. - 4
Check
It loads the page at 390, 768, 1024 and 1440 px and must say
okat each: nothing wider than the screen or cut off, readable contrast for every line of text, names on every link and button, one h1. - 5
Look at it
They save the board settled on page one, on page two, and on a phone.
- 6
Record the video
It steps the hero through 12 seconds at 30 fps at 1920×1080, drawing each frame at exactly its time, and writes
out/preview.mp4(H.264, for X, LinkedIn, Product Hunt or a README) andout/poster.png(the frame at 3.4 s, the board just settled on page one). - 7
Put it live
As a page: upload
out/index.htmlandout/assets/to any static host (Cloudflare Pages, Netlify, Vercel, GitHub Pages, S3).
- 1
You get
- out/index.html
- out/embed.html
- out/preview.mp4
- out/poster.png
- out/assets/logo.svg
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_PATHif they don't). - ffmpeg, for the video (
brew install ffmpeg,winget install ffmpeg,apt install ffmpeg; or setFFMPEG_PATH). - At runtime, nothing but a 2D canvas. Fonts load from jsDelivr (the pinned list) or Google Fonts; without the network the page uses system fonts.
Last checked Oct 26, 2026: the package’s own build and render commands ran and passed.
If something goes wrong
build: fix hero.json firstEach line names the field and what to change; colour problems suggest a colour that works.
The board is small
It fits the longest row; shorten the destinations or leave out a column (empty in every row), or raise
size.A name is cut short on phones
The board drops the code, then the gate column, then shortens the destination to 12 characters. Abbreviate it.
What’s in the download
- SKILL.md15.6 KB
- examples/
- examples/owl/4.11 KBa sleeper-train operator · 2 files
- examples/saltmarsh/3.04 KBa music festival · 2 files
- scripts/
- scripts/effect/the board itself:
effect.mjs(its settings, checks and the still picture, laid out by the same code) andeffect.js(the pages, the layout, the flap atlas, the timing and the drawing, on a 2D canvas). - scripts/effect/effect.js25.6 KB
- scripts/effect/effect.mjs11.3 KB
- scripts/kit/the kit shared by every Motion Heroes skill: the build and checks (
build.mjs), the section's CSS (shell.css), the browser runtime (runtime.js: clock, pausing, pixel ratio, reduced motion, fallback), the recorder (record.mjs,cdp.mjs), the pinned fonts (fonts.json) andKIT.md, which explains them. - scripts/kit/build.mjs34.5 KB
- scripts/kit/cdp.mjs4.90 KB
- scripts/kit/fonts.json5.42 KB
- scripts/kit/KIT.md16.0 KB
- scripts/kit/record.mjs8.11 KB
- scripts/kit/runtime.js15.1 KB
- scripts/kit/shell.css9.41 KB
- scripts/kit/three.json6.35 KB
- scripts/build.mjs263 Bwhat you run. They call the Motion Heroes kit.
- scripts/check.mjs9.48 KBLookbk's checks, screenshots, colour maths and HTML writer.
- scripts/chrome.mjs3.63 KB
- scripts/color.mjs1.40 KB
- scripts/inline.mjs1.67 KB
- scripts/markup.mjs6.15 KB
- scripts/record.mjs255 B
- scripts/screenshot.mjs1.79 KB
- NOTICE.md1.72 KBwhere the effect comes from, and the fonts it loads.
- TESTED.json1.25 KB
25 files · 187 KB · installs to ~/.claude/skills/split-flap-board-hero for Claude Code and ~/.agents/skills/split-flap-board-hero for other agents
Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.
Similar Skills
View allDetails
- 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.
Written for
See all 31 agents that read skill folders.
Install guides
For your agent
Generates with
Installed it? Tell others how it went. Reviews come from people who installed this skill.
Write a reviewFAQ
Does the board show live departure data?
No. It shows only the rows you write in hero.json, up to 8 per page across two pages, and it never fetches timetables. Every time, name and status on it must come from you, so it is a picture of a schedule, not a live feed.
Which characters can the flaps show?
Capitals, the digits 0 to 9 and a little punctuation such as colons, dots, dashes, slashes, ampersands and plus signs. Lower case is set in capitals, accents are dropped, so Zürich shows ZURICH, and any other character shows as a blank flap. A destination holds up to 18 characters and a status 10.
How does the board look on phones?
It comes first, above the words. To stay readable it drops the code column, then the gate column, then shortens destinations to 12 characters, so keep names to 14 or fewer and abbreviate the way real boards do. Reduced-motion visitors see the board settled on page one.
Which agents is Split-Flap Board 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 board, the flap atlas and timing, the still, the Motion Heroes kit and the examples. It imitates the general look of split-flap signage, not any maker's board. 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.