The page this skill built from examples/slowglow, working in your browser. Opens in a new tab. Also: Lowtide.
12-second example rendered by this skill from examples/slowglow · 1280×720
What you get
- A self-contained index.html hero and an embed.html to paste into an existing site
- Your liquid, wax, hot-core and base colors, fonts, logo, headline, buttons and a corner spec line
- 14 documented effect settings: seed, loop length, blob count, lamp size, four colors, halo, wall arcs, shelf reflection, grain, warm-up, caption
- Dark or light walls, left, right or centered layouts, with the lamp above the copy on phones
- An SVG still picture for no WebGL or reduced motion, so the hero is never blank
- Contrast and layout checks at 390, 768, 1024 and 1440 px
- A frame-perfect MP4 that loops seamlessly (1080p by default, portrait sizes too) and a poster
- Open-source licenses for every part it builds on
Good fit
- Bars, record shops, vintage stores and radio stations can give their first screen a warm, nostalgic 70s glow beside the headline.
- Lighting brands and lamp restorers can pick liquid, wax and base colors close to their own lamps, such as brass, chrome or avocado enamel.
- Slow-living products can show lazy wax rising and sinking on a seamless loop, then record a 1080p video of it for a launch post.
Not for
- Showing a real product photo: the lamp is drawn, not photographed
- Cool, corporate or minimal brands: the look is warm and nostalgic by design
- Full landing pages below the hero (see the Landing Pages series)
About this skill
A 1970s lava lamp glowing beside your headline. Blobs of wax rise from the warm pool, stretch, split off trailing drops, hang under the meniscus and sink back, lit from the bulb below inside a tapered glass bottle on a turned brass base. The lamp throws a warm halo on the wall over a 70s rainbow of three arcs, with a glossy shelf reflection and film grain, and the bulb flickers on when the page loads. Your agent sets the liquid, wax and base colors, fonts, logo, headline and buttons, checks contrast at four widths and records a seamless 1080p loop.
Example request
Build a Lava Lamp hero for Slow Glow, a lamp restoration studio: aubergine wall, magenta liquid, orange wax, brass base, headline 'Warm light, slow time.', and record a 12-second loop.
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/slowglow/hero.json(a lamp restoration studio, aubergine wall, magenta liquid, orange wax, brass base, copy on the left) orexamples/lowtide/hero.json(a slow radio station, cream wall, teal liquid, tangerine wax, avocado base, 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, wax too close to the liquid to stand out) 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 build has already checked the text against every colour the effect can put behind it), 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 7 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 7 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, nothing but WebGL: the shader is 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 Oct 26, 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.
One big lump of wax
Blobs meet and melt; lower
blobsor try anotherseed.The lamp vanishes into a light wall
Take a deeper
liquid, a darkerbody, or lowerglow.
What’s in the download
- SKILL.md14.3 KB
- examples/
- examples/lowtide/2.03 KBLowtide Radio, a slow radio station, light · 2 files
- examples/slowglow/2.09 KBSlow Glow, a lamp restoration studio, dark · 2 files
- scripts/
- scripts/effect/the lamp itself:
effect.mjs(its settings, checks, the corner spec line and the still picture),effect.js(the metaball wax, the glass, the base, the wall and the shelf, in one WebGL1 fragment shader),effect.css(the spec line). - scripts/effect/effect.css500 B
- scripts/effect/effect.js15.6 KB
- scripts/effect/effect.mjs9.49 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.52 KBwhere the effect comes from, and the fonts it loads.
- TESTED.json666 B
26 files · 171 KB · installs to ~/.claude/skills/lava-lamp-hero for Claude Code and ~/.agents/skills/lava-lamp-hero for other agents
Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.
Similar Skills
View allDetails
- Output
- Animated WebGL hero · page + embed + 1080p video
- Needs
- Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video
- Series
- Motion Heroes · 50 skills
- Updated
- Oct 26, 2026
- Checked
- Oct 26, 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 it show our actual lamp?
No. The lamp is drawn by a WebGL shader, not photographed or modelled from your product. You choose the liquid, wax, hot core and base colors, so it can echo your lamp, but the bottle is always the same tapered glass on a turned base.
How many blobs are there, and how long is the loop?
You set 3 to 8 rising blobs (default 6), each with a trailing drop, and a loop of 8 to 16 seconds (default 12). The seed changes each blob’s timing, size and drift. If the wax clumps into one lump, lower the blob count or try another seed.
What do visitors see before or without the animation?
On load the bulb flickers on and the lamp warms up over about two and a half seconds, which you can switch off. Visitors who ask for reduced motion get one still frame at 7 seconds, and browsers without WebGL get an SVG still picture.
Which agents is Lava Lamp 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: the Motion Heroes kit, the metaball lava lamp shader, the still picture and the examples. No third-party code is included. 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.