Skip to content
Founding Lifetime: every Pro skillfirst 100 members · $199 onceUpgrade
Lookbk
Sign In
Open live demo

The page this skill built from examples/pellicle, working in your browser. Opens in a new tab. Also: Rinse.

12-second example rendered by this skill from examples/pellicle · 1280×720

What you get

  • A self-contained index.html hero and an embed.html to paste into an existing site
  • Your glow and highlight colors, film strength and thickness, fonts, logo, headline, buttons and a corner product line
  • 14 documented effect settings: seed, loop length, bubble count, size, spread, film strength, thickness, swirl, glow color and strength, highlight, depth, grain, caption
  • Glowing bubbles on dark grounds or soft pastel ones on light grounds, left, right or centered layouts, with the bubbles above the copy on phones
  • An SVG still 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

  • Skincare, beauty and cosmetics brands can float glossy, iridescent bubbles beside a product headline, with a small product line in the corner.
  • Cleaning, laundry and bath brands can use soft pastel bubbles on a pale mint, blush or cream page instead of a dark one.
  • Playful brands and kids’ toy makers get bubbles that pop gently in a bright rim and a ring of droplets, on a seamless loop.

Not for

  • Showing a real product or packshot: the bubbles are drawn, not photographed
  • Serious, sober brands: the look is playful and glossy by design
  • Full landing pages below the hero (see the Landing Pages series)

About this skill

Iridescent soap bubbles floating beside your headline. One large bubble stays, wobbling a little as its film turns; smaller ones rise from below, drift in front of it and behind it, drain thin and gold at the top and pop gently, the film snapping back in a bright rim and throwing a ring of droplets. The colors are real thin-film interference, worked out from the film's thickness and the viewing angle, so they swirl through magenta, blue, green and gold the way soap does, with a reflected window, a pin highlight and out-of-focus bubbles behind. Your agent sets the film, glow and highlight colors, fonts, logo, headline and buttons, checks contrast at four widths and records a seamless 1080p loop.

Example request

Build a Soap Bubble hero for Pellicle, a skincare serum: deep ink background, blush pink accent, rich iridescent bubbles, headline 'Skin that catches the light.', and record a 12-second loop.

Similar Skills

View all
web
Confetti Launch HeroClaude CodeCodexCursor+3 more agents
web
Product Turntable HeroClaude CodeCodexCursor+3 more agents

Details

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.

Generates with

Raw WebGL1 (one hand-written fragment shader, no libraries)Thin-film interference summed over eight wavelengthsMotion Heroes kitHeadless Chrome checks and frame-stepped recorderffmpeg
Good forProduct launchBrandSocial mediaEcommerceWeb design

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

Write a review

FAQ

Are the bubble colors physically accurate?

The film colors are worked out by thin-film interference from the film’s thickness and the viewing angle, summed over eight wavelengths, so the bands run magenta, blue, green and gold the way soap films do. The rising, drifting and popping are a stylized picture, though, not a scientific simulation.

What does the thickness setting change?

It sets the film’s thickness in nanometers, from 250 to 900 (default 480). Thin films show gold and magenta; thicker ones cycle through blue, green and pink bands. Around 300 to 500 gives the classic magenta, blue and gold, and film (0.3 to 1.2) sets how strongly the colors show.

Will it work on light pages, phones and reduced motion?

Yes. On a pale page the bubbles turn into soft pastel sheens; if they vanish, raise film or deepen the glow. On phones the bubbles come first, then the words. Reduced motion gets one still frame at 4.5 seconds, and without WebGL visitors see an SVG still.

Which agents is Soap Bubble 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 thin-film bubble 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.