The page this skill built from examples/halden-foundry, working in your browser. Opens in a new tab. Also: Ondes weekend.
10-second example rendered by this skill from examples/halden-foundry · 1280×720
Example settingswhat each example above was built from
examples/halden-foundryhero.json
- Brand
- Halden
- Headline
- One family, every voice in between.
- Badge
- New release · Halden Flex
- Colors
- background #100f0d · ink #f3eee4 · accent #ff6a3d
- Mode
- dark
- Fonts
- Bricolage Grotesque and Inter
examples/ondes-weekendhero.json
- Brand
- Ondes Weekend
- Headline
- A weekend for radio, sound and voice.
- Badge
- Lyon · 19–21 March 2027
- Colors
- background #f2ede3 · ink #17150f · accent #2342d1
- Mode
- light
- Fonts
- Instrument Serif and DM Sans
What you get
- A self-contained HTML page with the giant breathing word beside your headline
- A paste-in embed of the same section, scoped so it won't touch your styles
- An outline echo, baseline sway and pointer swell you can tune or switch off
- Specimen guides, per-letter meters and a live weight and width readout
- An SVG still picture for reduced motion and for when the font can't load
- A frame-exact 1080p MP4 and poster that loop seamlessly
- Two worked examples, a dark type foundry and a light sound festival
- Open-source licenses for every part it builds on
Good fit
- Type foundries and design studios that want their name to show off what variable fonts can do.
- Festivals, podcasts and sound or music brands whose identity is about rhythm, voice and movement.
- Launch pages where one short word carries the brand and the headline does the explaining beside it.
Not for
- Long phrases or sentences, since it sets one word of up to 10 letters
- Sites that must work fully offline, because the word's font loads from jsDelivr
- Brands that must use their own typeface for the big word
- Scroll-driven storytelling sections
About this skill
One giant word sits beside the headline and breathes through a variable font's own axes instead of scaling. Set in Anybody, with weight from 100 to 900 and width from 50 to 150, the word carries a wave that travels through it letter by letter: each letter thickens and widens as the crest passes, then thins and narrows again, so the whole word swells and settles. Letters near the pointer swell toward the heaviest, widest cut. An outline echo in the accent colour trails the wave a beat late or runs in counter phase, and the baseline sways a little. Hairline guides, a meter under each letter and a live axis readout frame it like a type specimen. The loop closes exactly, and the recording follows a scripted pointer path.
Example request
Use the variable-weight-wave-hero skill to build a hero for my type foundry Halden: the word HALDEN breathing through weight and width on a near-black page, a coral outline echo trailing the wave, specimen guides on, copy on the left, and a 10 second loop video.
How it works
Your agent
- 1
Collect the brand
Every claim, price, date and spec in the copy must come from the person.
- 2
Write hero.json
Copy the closer example and replace everything:
examples/halden-foundry/hero.json(an independent type foundry, near-black page, the word in warm white with a coral echo trailing the wave, copy on the left) orexamples/ondes-weekend/hero.json(a radio and sound festival in Lyon, paper page, the word in near-black with a cobalt echo in counter phase, a faster, sharper wave, 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, weightMin not below weightMax, widthMin not below widthMax, an echo colour too close to the background) 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 (the word, the guide labels and the readout too), names on every link and button, one h1. - 5
Look at it
They save
out/still-1440x900.pngandout/still-390x844.png, the live hero at 3 seconds. - 6
Record the video
It steps the hero through 8 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.2 s). - 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). - At runtime, a browser with variable fonts (every current one) and the network: the word's font, Anybody, loads from jsDelivr (Fontsource's file with both axes, at a pinned version, checked against its SRI hash). Without it the page keeps its still picture. The copy's fonts load from jsDelivr (the pinned list) or Google Fonts; without the network the page uses system fonts.
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.
The page shows the still picture, not the moving word
The Anybody font couldn't be fetched from jsDelivr, or it didn't match its hash. The browser console says which (
[motion hero] showing the still picture: …). Check the network, or a Content Security Policy that blockscdn.jsdelivr.net.The word is small
Long words and a wide
widthMaxneed room; the word is sized for its widest moment. Shorten the word, lowerwidthMaxor raisesize.
What’s in the download
- SKILL.md17.5 KB
- examples/
- examples/halden-foundry/2.10 KBHalden, an independent type foundry, dark · 2 files
- examples/ondes-weekend/2.11 KBOndes Weekend, a radio and sound festival, light · 2 files
- scripts/
- scripts/effect/the word itself:
effect.mjs(its settings, checks and the still picture),effect.js(the font loading, the advance-width table, the wave, the pointer swell, the echo, the guides, meters and readout, as DOM text) andeffect.css(their styles). - scripts/effect/effect.css1.87 KB
- scripts/effect/effect.js17.7 KB
- scripts/effect/effect.mjs10.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), the pinned three.js catalogue (three.json, unused by this effect) 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.95 KBwhere the effect comes from, and the fonts it loads.
- TESTED.json855 B
26 files · 179 KB · installs to ~/.claude/skills/variable-weight-wave-hero for Claude Code and ~/.agents/skills/variable-weight-wave-hero for other agents
Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.
Similar Skills
View allDetails
- Output
- Variable font wave · page + embed · 1080p loop
- 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
Can I use my own font for the big word?
Not as built. The effect depends on a font with both a weight axis and a width axis, and it ships pinned to Anybody so the motion and the fitting are tested. The headline, lede and buttons use whichever fonts you choose in theme.fonts.
Does the video loop without a jump?
Yes. The wave, the sway, the echo and the scripted pointer path all repeat once per cycle, which is 10 seconds by default. Record with --seconds set to cycle divided by motion.speed and the last frame leads straight into the first.
What do visitors see if the font can't load?
The page keeps an SVG still picture of the word in your headline font, with the echo behind it. The same still is used for anyone who asks for reduced motion, so the hero is never blank.
Which agents is Variable Weight Wave 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 with no code libraries; the word is set in the Anybody variable font, under the SIL Open Font License 1.1, loaded from a pinned jsDelivr URL with an integrity check. 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.