The page this skill built from examples/oakbarrow, working in your browser. Opens in a new tab. Also: Halcyra.
11-second example rendered by this skill from examples/oakbarrow · 1280×720
Example settingswhat each example above was built from
examples/oakbarrowhero.json
- Brand
- Oakbarrow
- Headline
- Made to stay.
- Badge
- Furniture workshop · since 2009
- Colors
- background #f3ede2 · ink #1f1a14 · accent #9e4925
- Mode
- light
- Fonts
- Newsreader and Inter
examples/halcyrahero.json
- Brand
- Halcyra
- Headline
- Notes that stay yours.
- Badge
- Private notes · version 4
- Colors
- background #0b0e17 · ink #eef1fa · accent #8ea2ff
- Mode
- dark
- Fonts
- Space Grotesk and Inter
What you get
- A self-contained index.html with the pinned word-by-word reveal
- A paste-in embed.html scoped under #mh-scroll-word-reveal
- A still of the finished paragraph for reduced motion and when scripts fail
- A frame-perfect 1920×1080 MP4 and poster of the scripted scroll
- Contrast and layout checks at 390, 768, 1024 and 1440 px
- Two complete examples, one light and one dark
- Open-source licenses for every part it builds on
Good fit
- A brand with a short manifesto, pledge or mission statement it wants every visitor to actually read rather than skim past.
- Studios, makers and privacy-minded software where the tone of voice is the product and two or three phrases deserve the accent.
- An about page or launch page that can spare 2.5 screen heights of scrolling before its buttons appear.
Not for
- Long-form copy over 60 words or several paragraphs
- Heroes built around product photos or footage
- Pages where the main buttons must show before any scrolling (unless cta is set to always)
- Embeds inside overflow-hidden containers or iframes that need pinning (use drive time there)
About this skill
A pinned statement hero that reads the brand's manifesto with the visitor. Beside a short headline, 25 to 60 words of the brand's own copy sit in large display type, every word dim, soft and set a little low. As the visitor scrolls, the hero holds still and the words light up one after another to full ink, sharpening and rising into place, while marked phrases light in the accent colour or italic. A thin progress line and word counter fill underneath, a soft canvas glow drifts and shifts from one colour to another as the reading goes on, and when the last word lights a sign-off and the buttons rise in. It is drawn on a 2D canvas with no libraries, and the finished paragraph stays as a still for reduced motion and without scripts.
Example request
Make our homepage hero read our manifesto word by word as people scroll, with the key phrases lighting up in our terracotta.
How it works
Your agent
- 1
Collect the brand
Every claim, number and name in the copy and in the manifesto must come from the person.
- 2
Write hero.json
Copy the closer example and replace everything:
examples/oakbarrow/hero.json(light, copy on the left, a furniture workshop, serif, marked words in accent italic) orexamples/halcyra/hero.json(dark, copy on the right, a private notes app, grotesque, marked words in the accent). - 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 manifesto outside 25 to 60 words or with an unclosed*mark*, a glow too bright behind the paragraph) 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, no text under 12 px. - 5
Look at it
The first two save
out/still-1440x900.pngandout/still-390x844.png: the scripted reading at 4.6 seconds, a little past half the paragraph. - 6
Record the video
It steps the scripted scroll through 11 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 4.6 s, the paragraph half lit). - 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/still-1440x900.png
- out/still-390x844.png
- out/preview.mp4
- out/poster.png
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). - Internet access when the page is opened, for the fonts only (jsDelivr, pinned versions with integrity hashes). The paragraph, the glow and the line are drawn with the browser's own 2D canvas: no libraries, no WebGL. Without the network, visitors see system fonts; the page still works.
Last checked Nov 1, 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.
effect.text has 64 wordsThe manifesto takes 25 to 60 words. Cut adjectives and repeated ideas before cutting sentences.
The type is small
The paragraph fills the space beside the copy at the largest size that fits. Shorten the manifesto, the headline or the lede, lower
leading, or usealign: "center"with a one-line headline for a wider measure.
What’s in the download
- SKILL.md17.7 KB
- examples/
- examples/halcyra/2.25 KBa private notes app, dark, mirrored · 2 files
- examples/oakbarrow/2.17 KBa furniture workshop, light · 2 files
- scripts/
- scripts/effect/the word reveal itself:
effect.mjs(its settings, checks, the word splitting and the still paragraph),effect.js(the canvas layout and drawing, the glow, the progress line and the scripted scroll),effect.css(the quieter headline, the centred layout and the buttons' rise at the end). - scripts/effect/effect.css2.68 KB
- scripts/effect/effect.js17.9 KB
- scripts/effect/effect.mjs12.1 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 scroll pinning), 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.77 KBwhere the effect comes from, and the fonts it loads.
- TESTED.json636 B
26 files · 182 KB · installs to ~/.claude/skills/scroll-word-reveal-hero for Claude Code and ~/.agents/skills/scroll-word-reveal-hero for other agents
Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.
Similar Skills
View allDetails
- Output
- Pinned manifesto hero · canvas 2D, no libraries · 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.
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
How long should the manifesto be?
Between 25 and 60 words; the build refuses anything outside that range. Short sentences with one idea each read best, and up to 12 words can be marked to light up in the accent colour, in italic, or both.
What happens to the buttons while the words are lighting?
With cta set to end, the hero's buttons and note rise in when the last word lights, and they can't be tabbed to before then. Set cta to always to show them from the start. The button in the bar is always visible.
Can it play without scrolling, for example in an iframe or a video?
Yes. Set drive to time and the words light on their own and loop without pinning the page. For the video, the recorder scrolls the page along a scripted path, so the MP4 shows the same reading on any machine.
Which agents is Scroll Word Reveal 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 as an original design; it uses no third-party code library, only the browser's 2D canvas and native CSS sticky, with fonts fetched from Fontsource 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.