The page this skill built from examples/pinfall, working in your browser. Opens in a new tab.
5-second example rendered by this skill from examples/pinfall · 1280×720
What you get
- A one-page hero and a paste-in embed with your name, words, numbers and links
- The otter and the glitter ball cut out of every frame and drawn over the giant headline
- The intro animation tied to the film's own clock, so words and picture stay in step
- A score sheet with your bowler name and lane, marked strike by strike up to a perfect 300
- A phone layout: the headline stays in the frame, the introduction and buttons move into a block underneath
- Stills of the cheering otter for reduced motion, no WebGL, blocked autoplay or a slow connection, so it is never blank
- A 1080p MP4 with the film's sound and a poster, rendered frame by frame
- Checks at 390, 768, 1280 and 1920 px for overflow, overlaps, links and script errors
- Open-source licenses for every part it builds on
Good fit
- Bowling alleys, bars, games nights and party-booking apps can open on a felted otter in a bowling shirt sending a glitter ball down the lane and cheering by the pins.
- Anyone who wants words behind a moving subject gets a giant striped 70s block word that the otter leaves and the ball rolls over, both cut out of every frame.
- Brands with a playful streak get a lane-ticket button, a stitched name badge and a score sheet that marks ten strikes to 300 with their own bowler name and lane.
Not for
- Swapping in your own video: the matte is made for this film, and the scene (an otter bowling in a 1970s alley) is the design
- Changing the colors, fonts or layout through settings (every word, number and link is yours; the look is fixed)
- Long headlines: the block word takes up to 7 characters and the script line up to 11
- A real scoreboard: the score sheet always shows ten strikes and 300
- Sound on the live page (browsers only autoplay muted video; the MP4 keeps the sound)
- Full landing pages below the hero (see the Landing Pages series)
About this skill
A website hero on five seconds of generated footage: a felted otter in an orange-and-teal bowling shirt lets go of a glitter ball at a 1970s alley, the ball rolls down the lane toward the camera and the otter hops back to the pins and cheers under starburst lights. A giant cream block word with four 70s stripes sits behind the otter and the ball, which are cut out of every frame and drawn over it, under an orange bowling-shirt script line that stitches on. Around it: a chain-stitched name badge and links, a lane-ticket button with a tear-off stub, counting stats, a score sheet that marks ten strikes up to 300, sparkles and film grain. Your agent writes one hero.json with your words and links; the build checks every length and writes a page and an embed, and a recorder makes a 1080p MP4 with sound.
Example request
Make a Bowling Otter hero for our bar's league night: script line 'Game on', block word 'STRIKE', our links and booking button, and record the video for Instagram.
How it works
Your agent
- 1
Collect the words
Every number, price and claim in the stats must come from the person.
- 2
Write hero.json
Copy
<skill>/examples/pinfall/hero.json(Pinfall, an app for booking lanes at independent bowling alleys) and replace every value. - 3
Build
It lists every problem at once (a missing field, a word too long for its place, a bad link) and writes nothing until they're fixed.
- 4
Check
It serves the page on localhost and opens it at 390, 768, 1280 and 1920 px wide and with reduced motion.
- 5
Look at it
Open the address it prints.
- 6
Record the video (optional)
Writes
out/preview.mp4(1920×1080, 30 fps, five seconds, with the film's sound) andout/poster.png. - 7
Put it on the site
Either use
out/index.htmlas the page, or pasteout/embed.htmlinto an existing page and copyout/assets/next to it (or change the fourassets/paths to where you host them).
- 1
You get
- out/preview.mp4
- out/poster.png
- out/index.html
- out/embed.html


What you need
- Node.js 18 or newer. Nothing to install.
- Chrome, Chromium or Edge, for the checks and the video (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). - A web server for the page. Opened straight from disk (
file://) browsers won't let the page draw the film, and it shows the still;node scripts/serve.mjs outserves it on localhost. - Internet access when the page is opened: GSAP and the fonts load from jsDelivr (pinned, with an integrity hash) and Google Fonts. Without GSAP the hero shows its still with every word in place.
Last checked Oct 27, 2026: the package’s own build and render commands ran and passed.
If something goes wrong
The page shows a still picture instead of the film
It was opened from disk; run
node scripts/serve.mjs outand open the address. If it still shows the still, the section'sdata-fh-stillattribute says why (reduced-motion,no-webgl,autoplay-blocked,film-failed,film-slow,no-timeline).The film doesn't play on the live site but did locally
The film is on another domain without CORS headers. Serve
assets/from the same site as the page, or addAccess-Control-Allow-Originon the CDN.The build says a field is too long
Shorten the words. The block word is sized for up to 7 wide capitals and the script line for 11 characters.
What’s in the download
- SKILL.md13.4 KBthese instructions.
- examples/
- examples/pinfall/1.11 KB1 file
- scripts/
- scripts/kit/the Footage Heroes kit the four scripts run (
build.mjs,runtime.jsfor the browser,frame.css,check.mjs,serve.mjs,record.mjs,cdp.mjs);scripts/kit/KIT.mdsays how it fits together. - scripts/kit/build.mjs13.6 KB
- scripts/kit/cdp.mjs4.90 KB
- scripts/kit/check.mjs5.48 KB
- scripts/kit/frame.css2.24 KB
- scripts/kit/KIT.md4.52 KB
- scripts/kit/record.mjs7.23 KB
- scripts/kit/runtime.js7.94 KB
- scripts/kit/serve.mjs2.55 KB
- scripts/build.mjs146 Bchecks
hero.jsonagainsttemplate/fields.jsonand writes the page, the embed and the assets. - scripts/check.mjs146 Bserves the page and checks it at four widths and with reduced motion.
- scripts/chrome.mjs3.63 KBfinds Chrome, Chromium or Edge.
- scripts/record.mjs148 Brenders the words frame by frame and lays them on the film with ffmpeg:
preview.mp4with sound andposter.png, or one still. - scripts/serve.mjs146 Bserves a built hero on localhost to look at.
- template/
- template/fields.json3.58 KBevery field of
hero.jsonwith its limit, plus the film's length and the hero's colours and fonts. - template/hero.html12.9 KBthe design: its CSS, the layer behind the otter, the layer in front, and the GSAP timeline.
- NOTICE.md1.26 KB
- TESTED.json632 B
19 files · 85.6 KB · installs to ~/.claude/skills/bowling-otter-hero for Claude Code and ~/.agents/skills/bowling-otter-hero for other agents
Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.
Similar Skills
View allDetails
- Output
- Retro hero on generated footage · words behind the subject · page + embed · 1080p MP4 with sound
- Needs
- Node.js 18+, Chrome, and ffmpeg for the video; the page needs a web server (a local one is included)
- Series
- Footage Heroes · 17 skills
- Updated
- Oct 27, 2026
- Checked
- Oct 27, 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 put my own video behind the headline?
No. The matte that cuts out the otter and the ball was made for this film, so the footage is part of the design. Every word, number and link is yours through hero.json; the footage, colors, fonts and layout stay as they are.
How long can the words be?
The script line takes up to 11 characters, the giant block word up to 7 and the badge name up to 11. The build lists every field that is too long and writes nothing until they are fixed. The check fails if anything spills or overlaps. At the end the glitter ball covers the lower half of two letters of the block word, on purpose.
Can the score sheet show a real score?
No. It always marks ten strikes and lands on 300, a perfect game, as decoration. You choose the bowler name, the lane number and the small printed line under it. The three numbers by the buttons are yours and should be real figures, or plain values if you have none.
Which agents is Bowling Otter 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 licensesBuilt on greensock/GSAP
What Lookbk adds on top of greensock/GSAP (Standard License): the footage, which was generated for Lookbk (a still image animated into film, with the matte cut from every frame), and the layout, template and Footage Heroes kit, all written for Lookbk. GSAP (free under its Standard License) loads from a pinned CDN with SRI; the fonts are from Google Fonts.
Credits and licenses for the open-source software and fonts it uses are in NOTICE.md inside the download.