The page this skill built from examples/kilnhouse, working in your browser. Opens in a new tab.

5-second example rendered by this skill from examples/kilnhouse · 1280×720

Example settingswhat each example above was built from

examples/kilnhousehero.json

Brand: Kilnhouse
Kicker: Small-batch glass studio · fired on Fridays
Headline: Shaped in fire, Glass

What you get

A one-page hero and a paste-in embed with your name, words and links
The glassblower, blowpipe and glowing glass cut out of every frame and drawn over a giant outline of your word
The intro tied to the film's own clock: the italic line rises, the big word pours on white-hot and cools to amber, the kiln tag swings to rest
Stills for reduced motion, no WebGL, blocked autoplay or a slow connection, so it is never blank
A phone layout: the headline stays in the frame, the introduction and buttons move into a block underneath
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

Studios, makers and small-batch brands can open on a glassblower turning glowing glass in front of a blazing furnace in a dark workshop.
Anyone selling something made by hand gets a giant serif word poured on white-hot that cools to amber as the film plays.
Shops with a current batch or collection can name it on a paper kiln tag that swings on its wire over the furnace.

Not for

Swapping in your own video: the matte is made for this film, and the scene (a glass studio at night) is the design
Changing the colors, fonts or layout through settings (every word and link is yours; the look is fixed)
Long headlines: the big word takes up to 8 letters and the italic line up to 16 characters
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: in a dark glassblowing studio a glassblower in a leather apron turns a glowing bulb of molten amber glass on a long blowpipe while the furnace behind him blazes orange and the camera pushes in. A giant serif word is poured on white-hot and cools to amber as you watch, under a light italic line; a huge outline of the word runs behind the studio, and the glassblower, the pipe and the glowing glass are cut out of every frame and drawn in front of it. Around it are a glass-drop wordmark and links, a molten orange button, a paper kiln tag that swings on its wire and three short facts. 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 Glass Furnace hero for our ceramics studio: italic line 'Made by hand,', the big word 'Clay', our links and shop button, the batch name on the kiln tag, and record the video for our launch post.

How it works

You ask
Make a Glass Furnace hero for our ceramics studio: italic line 'Made by hand,', the big word 'Clay', our links and shop button, the batch name on the kiln tag, and record the video for our launch post.
Your agent
1. 1
  Collect the words
  Every number, price and claim must come from the person.
2. 2
  Write hero.json
  Copy <skill>/examples/kilnhouse/hero.json (Kilnhouse, a small-batch studio that blows glass to order) and replace every value.
3. 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. 4
  Check
  It serves the page on localhost and opens it at 390, 768, 1280 and 1920 px wide and with reduced motion.
5. 5
  Look at it
  Open the address it prints.
6. 6
  Record the video (optional)
  Writes out/preview.mp4 (1920×1080, 30 fps, five seconds, with the film's sound) and out/poster.png (the last moment).
7. 7
  Put it on the site
  Either use out/index.html as the page, or paste out/embed.html into an existing page and copy out/assets/ next to it (or change the four assets/ paths to where you host them).
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_PATH if they don't).
ffmpeg for the video (brew install ffmpeg, winget install ffmpeg, apt install ffmpeg; or set FFMPEG_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 out serves 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 Nov 9, 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 out and open the address. If it still shows the still, the section's data-fh-still attribute 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 add Access-Control-Allow-Origin on the CDN.
The build says a field is too long
Shorten the words. The giant word is sized for up to 8 characters and the italic line for 16.

What’s in the download

SKILL.md10.6 KBthese instructions.
examples/
examples/kilnhouse/1.11 KB1 file
scripts/
scripts/kit/the Footage Heroes kit the four scripts run (build.mjs, runtime.js for the browser, frame.css, check.mjs, serve.mjs, record.mjs, cdp.mjs); scripts/kit/KIT.md says how it fits together.
scripts/kit/build.mjs15.0 KB
scripts/kit/cdp.mjs4.90 KB
scripts/kit/check.mjs6.37 KB
scripts/kit/frame.css2.85 KB
scripts/kit/KIT.md5.57 KB
scripts/kit/record.mjs7.23 KB
scripts/kit/runtime.js8.43 KB
scripts/kit/serve.mjs2.55 KB
scripts/build.mjs146 Bchecks hero.json against template/fields.json and 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.mp4 with sound and poster.png, or one still.
scripts/serve.mjs146 Bserves a built hero on localhost to look at.
template/
template/fields.json3.29 KBevery field of hero.json with its limit, plus the film's length and the hero's colours and fonts.
template/hero.html9.73 KBthe design: its CSS, the layer behind the glassblower, the layer in front, and the GSAP timeline.
NOTICE.md1.24 KB
TESTED.json346 B

19 files · 83.5 KB · installs to ~/.claude/skills/glass-furnace-hero for Claude Code and ~/.agents/skills/glass-furnace-hero for other agents

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

Similar Skills

View all

Storm Lighthouse Hero+3

Desert Observatory Hero+3

Free Diver Hero+3

Floating Sneaker Hero+3

Dune Astronaut Hero+3

Arcade Raccoon Hero+3

Aerobics Giraffe Hero+3

Mixtape Hero+3

Details

Output: Cinematic 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 · 28 skills
For: Founder Marketer Designer Ecommerce seller Content creator
Updated: Nov 9, 2026
Checked: Nov 9, 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

Footage generated for Lookbk with Seedance 2.0, with a per-frame matte of the subjectGSAP 3.14.2 (pinned CDN, SRI)WebGL subject cut-out in the browserHeadless Chrome checks and frame-stepped recorder + ffmpeg

Uses tools

GSAP WebGL FFmpeg Chrome Node.js

Good forProduct launch Brand Social media

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

Write a review

FAQ

Can I put my own video behind the headline?

No. The matte that cuts out the glassblower and the glowing glass was made for this film, so the footage is part of the design. Every word and link is yours through hero.json; the footage, colors, fonts and layout stay as they are.

How long can the headline be?

The italic line takes up to 16 characters and the big word up to 8 letters, with a full stop added. The build lists every field that is too long and writes nothing until they are fixed, and the check fails if anything spills or overlaps.

What do visitors see if the film cannot play?

The last frame and the glassblower cut out of it, as pictures, with every word in place. That covers reduced motion, no WebGL or GSAP, blocked autoplay, a film that takes more than 8 seconds to start, or a page opened from disk instead of a web server.

Which agents is Glass Furnace 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 (an original still animated into 1080p film with Seedance 2.0, 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.