The page this skill built from examples/wendmere, working in your browser. Opens in a new tab. Also: Aunvel.
11-second example rendered by this skill from examples/wendmere · 1280×720
Example settingswhat each example above was built from
examples/wendmerehero.json
- Brand
- Wendmere
- Headline
- Four sites, ten years.
- Colors
- background #e4dfd3 · ink #1c201b · accent #ad4128
- Mode
- light
- Fonts
- Instrument Serif and Instrument Sans
examples/aunvelhero.json
- Brand
- Aunvel
- Headline
- One farm, one bar.
- Colors
- background #22272a · ink #eee6d8 · accent #d39a68
- Mode
- dark
- Fonts
- Fraunces and Inter
What you get
- A self-contained HTML page and a paste-in embed
- A section that pins while 3 to 7 printed plates land as the page scrolls
- Running heads that stay readable on the pile's ledges as a contents list
- 8 plate compositions in 2 inks or copper foil
- A lamp that follows the pointer on a spring
- Checks at 4 widths and a 1080p video of the whole story
- Open-source licenses for every part it builds on
Good fit
- A design studio monograph or portfolio with 3 to 7 projects to show in order, each with a short title.
- An annual report, a season or a product range where the order of the chapters matters and should stay visible.
- A brand with a printed, tactile identity that wants its first screen to feel like paper on a desk rather than an app.
Not for
- Photo or video galleries
- More than 7 chapters
- A looping background video
- Copy that must be read on the plates themselves
About this skill
A website hero that tells a short story as the visitor scrolls. The section pins while printed plates land one by one on a desk under a single warm lamp: each new plate arrives through the air with its shadow first, settles, and pushes the earlier plates one ledge up the desk, scaled back, turned a touch and shaded. Every earlier running head stays readable on its ledge, so the pile becomes the table of contents and the progress bar at once. The plates are card stock with cut edges, paper tooth and two inks or copper foil, each a different composition drawn in code, and the headline is pressed into the same board. Editorial layout, no steps panel, 2D canvas, no libraries.
Example request
Build a pinned scroll hero for a monograph: printed plates land one by one on a desk under one lamp, earlier running heads stay readable on stepped ledges, the headline pressed into the board.
How it works
Your agent
- 1
Collect the brand and the chapters
Every name, figure and date must come from the person.
- 2
Write hero.json
Copy
examples/wendmere/hero.json(light: grey board, cream stock in forest and brick, a title plate and four landscape chapters) orexamples/aunvel/hero.json(dark: slate board, black stock in copper foil and bone, a title plate and three farms) and replace everything. - 3
Build, check, look, record
The recording scrolls the page along a script (a 0.8 second rest, the story over 9 seconds, a rest), so the video shows the whole story from the first plates to the finished pile.
- 4
Put it live
Upload
index.html, or pasteembed.htmlinto your page.
- 1
You get
- index.html
- embed.html
What you need
- Node.js 18 or newer. Nothing to install.
- Chrome, Chromium or Edge, for the checks and the recording (set
CHROME_PATHif it isn't found). - ffmpeg, for the video (or set
FFMPEG_PATH). - Internet access when the page is opened, for the fonts (pinned with integrity hashes).
- The chapters: 3 to 7 plates in order, each with a title of up to 26 characters (it must read on a ledge), and optionally a small line and a large figure.
Last checked Nov 2, 2026: the package’s own build and render commands ran and passed.
If something goes wrong
The pile is small
A wide headline or a long lede takes the board; shorten the headline's lines, keep the lede to two lines, or set
ledgesto 2.A running head is cut on its ledge
Keep titles short; under about 210 px of plate height the titles drop and only the numbers stay.
A word in the headline wraps on phones
Each line should be about 10 characters at the phone size.
What’s in the download
- SKILL.md9.42 KB
- examples/
- examples/aunvel/1.54 KBthe dark example, single-farm chocolate in copper foil. · 1 file
- examples/wendmere/1.74 KBthe light example, a landscape practice's monograph. · 1 file
- scripts/
- scripts/effect/
- scripts/effect/effect.js25.6 KBthe board, the headline's impression, the plates, the lamp and the story (2D canvas).
- scripts/effect/effect.mjs7.59 KBthe settings, the build checks, the story timing and the still picture.
- scripts/kit/the Motion Heroes kit v2, the same in every v2 package (see
KIT.md). - scripts/kit/build.mjs47.4 KB
- scripts/kit/cdp.mjs5.07 KB
- scripts/kit/check.mjs15.7 KB
- scripts/kit/fonts.json5.42 KB
- scripts/kit/KIT.md13.7 KB
- scripts/kit/record.mjs8.11 KB
- scripts/kit/runtime.js22.5 KB
- scripts/kit/shell.css18.7 KB
- scripts/kit/three.json6.35 KB
- scripts/build.mjs263 Bthe entry points; each runs the kit file of the same name.
- scripts/check.mjs179 B
- 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.md916 B
- TESTED.json866 B
24 files · 206 KB · installs to ~/.claude/skills/sticky-stack-hero for Claude Code and ~/.agents/skills/sticky-stack-hero for other agents
Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.
Similar Skills
View allDetails
- Output
- Editorial scroll story, 2D canvas · page + embed · 1080p story
- Needs
- Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video
- Series
- Motion Heroes · 77 skills
- Updated
- Nov 2, 2026
- Checked
- Nov 2, 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 does the scroll work on a real page?
The section wraps itself in a box 3 screen heights taller by default and sticks while the page scrolls through it. Progress drives the plates, so scrolling back lifts them off again. With reduced motion the page does not pin and shows the finished pile.
Where do the chapter names go for readers and search?
The plates are a picture, so name the chapters in the lede as well. The examples do this, and the running heads on the plates repeat the same titles.
Can the plates use my own artwork?
Each plate is one of 8 compositions drawn in code, set in your two inks or in foil, with your title, a small line and an optional large figure. Photos and uploaded art are not part of this package.
Which agents is Sticky Stack 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 on the Motion Heroes kit v2 with no library: the plates, board and lamp are drawn on 2 canvases, and only the pinned fonts (SIL Open Font License 1.1) load at run time. 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.