The page this skill built from examples/saltbrae-regatta, working in your browser. Opens in a new tab. Also: Fernhollow cider.

10-second example rendered by this skill from examples/saltbrae-regatta · 1280×720

Example settingswhat each example above was built from

examples/saltbrae-regattahero.json

Brand: Saltbrae Regatta
Headline: Seven days of open water.
Badge: Saltbrae Week · 14 to 20 July
Colors: background #0a1322 · ink #f2eee6 · accent #f0b64a
Mode: dark
Fonts: Fraunces and Inter

examples/fernhollow-ciderhero.json

Brand: Fernhollow Cider
Headline: Old orchard, new pressing.
Badge: Pressed on the farm since 1994
Colors: background #f4efe4 · ink #1c2a20 · accent #2f6b43
Mode: light
Fonts: Bricolage Grotesque and DM Sans

What you get

A self-contained index.html hero and an embed.html to paste into an existing site
Your logo sewn onto a waving cloth flag in your colours, with weave, hems and a pole
Five cloth layouts: solid, bands, hoist band, border and stripe
A pointer gust on the live page, left out of recordings so the loop stays exact
An SVG still for reduced motion and missing WebGL
A frame-exact 1080p MP4 loop and poster
Contrast and layout checks at four widths
Open-source licenses for every part it builds on

Good fit

A regatta, club, festival or outdoor event that wants its colours flying on the first screen of its site.
A farm, brewery, estate or heritage brand whose logo reads well as one shape sewn onto cloth.
A launch or event page that needs a hero video which loops without a visible seam.

Not for

Reproducing a national or official flag
Logos that only work in full colour on a filled background (use mark original)
Calm, minimal pages that need a still hero
Sites without WebGL that need motion

About this skill

A large cloth flag waves on a pole beside the headline, with the brand's logo sewn onto the cloth. Waves leave the pole and grow toward the free end, the corners flutter, and every fold is lit from its own surface, so crests catch the light and troughs fall into shade. A fine weave, stitched hems, a sleeve round the pole and a soft satin sheen make it read as real fabric. The cloth can be one colour, two bands, a band at the pole, a frame or a stripe, all in the brand's own colours, and the pointer pushes a gust through it. Raw WebGL with no libraries, a loop that closes exactly, and an SVG still for reduced motion.

Example request

Make a hero for our sailing regatta with our logo on a coral flag waving beside the headline.

How it works

You ask
Make a hero for our sailing regatta with our logo on a coral flag waving beside the headline.
Your agent
1. 1
  Collect the brand
  Every claim, price, date and spec in the copy must come from the person.
2. 2
  Write hero.json
  Copy the closer example and replace everything: examples/saltbrae-regatta/hero.json (a sailing regatta, midnight page, a coral flag with a cream stripe and a cream sail mark, copy on the left) or examples/fernhollow-cider/hero.json (a cider farm, cream page, a green flag in a gold frame with a cream apple, copy on the right and the pole beside it).
3. 3
  Build
  It lists every problem in hero.json at once (missing fields, text over its limit, a setting out of range, colours that don't contrast, a cloth that would vanish into the page, a logo colour that won't read on the cloth) and writes nothing until they're fixed.
4. 4
  Check
  It loads the page at 390, 768, 1024 and 1440 px and must say ok at each: nothing wider than the screen or cut off, readable contrast for every line of text (the build has already checked the text against every colour the effect can put behind it), names on every link and button, one h1.
5. 5
  Look at it
  They save out/still-1440x900.png and out/still-390x844.png, the live hero at 3 seconds.
6. 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) and out/poster.png (the frame at 3 s).
7. 7
  Put it live
  As a page: upload out/index.html and out/assets/ to any static host (Cloudflare Pages, Netlify, Vercel, GitHub Pages, S3).
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_PATH if they don't).
ffmpeg, for the video (brew install ffmpeg, winget install ffmpeg, apt install ffmpeg; or set FFMPEG_PATH).
At runtime, nothing but WebGL: the shaders are inlined in the page. Fonts load from jsDelivr (the pinned list) or Google Fonts; without the network the page uses system fonts. Without WebGL visitors see the still.

Last checked Nov 1, 2026: the package’s own build and render commands ran and passed.

If something goes wrong

build: fix hero.json first
Each line names the field and what to change; colour problems suggest a colour that works.
The logo is a plain blob on the flag
It has a filled background shape, and tint paints every shape one colour. Use mark: "original", or a version of the logo without the background.
No logo on the flag
mark is none, the hero has no brand.logo, or the SVG couldn't be drawn (an external image or font inside it); the cloth then flies plain.

What’s in the download

SKILL.md15.1 KB
examples/
examples/fernhollow-cider/2.13 KBFernhollow Cider, a cider farm, light · 2 files
examples/saltbrae-regatta/2.03 KBSaltbrae Regatta, a sailing week, dark · 2 files
scripts/
scripts/effect/the flag itself: effect.mjs (its settings, checks and the still picture), effect.js (the cloth's picture, the vertex shader that bends and lights it, the pole and the backdrop), effect.css (turns the still's flag round when the copy is on the right).
scripts/effect/effect.css268 B
scripts/effect/effect.js21.0 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 recorder (record.mjs, cdp.mjs), the pinned fonts (fonts.json), the pinned three.js catalogue (three.json, unused by this effect) and KIT.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.67 KBwhere the effect comes from, and the fonts it loads.
TESTED.json848 B

26 files · 180 KB · installs to ~/.claude/skills/waving-flag-hero for Claude Code and ~/.agents/skills/waving-flag-hero for other agents

Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.

Similar Skills

View all

New

Liquid Lens Hero+3

New

Water Droplets Hero+3

Details

Output: WebGL cloth flag · page + embed · 1080p loop
Needs: Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video; your logo as an SVG
Series: Motion Heroes · 71 skills
For: Designer Ecommerce seller Founder Marketer
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

Claude Code Codex Cursor GitHub Copilot Gemini CLI OpenCode

See all 31 agents that read skill folders.

Install guides

For your agent

Generates with

Hand-written WebGL1 cloth shaders (no libraries)Motion Heroes kitHeadless Chrome checks and frame-stepped recorderffmpeg

Uses tools

WebGL FFmpeg Chrome Node.js

Good forBrand Product launch Web design

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

Write a review

FAQ

Can I choose how the flag is laid out?

Yes. The cloth can be one colour, two horizontal bands, a band at the pole, a frame or a stripe near the foot, using your cloth and field colours. The logo moves onto the open area for the hoist and stripe layouts.

What happens to a logo with a filled background?

The default tint mode paints every shape of the logo in one colour, so a logo inside a filled circle becomes a plain disc. Set mark to original to keep its own colours, or use a version of the logo without the background.

Will the recorded video loop cleanly?

Yes, when you record one whole cycle, which is 10 seconds by default. Every wave fits a whole number of times into the cycle, and the pointer's gust is left out of recordings, so the last frame meets the first.

Which agents is Waving Flag 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 cloth is three hand-written WebGL1 shader programs with no libraries, and the brands and flags in the examples are made up. 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.