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/ferrous, working in your browser. Opens in a new tab. Also: Verrine.

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

What you get

  • A self-contained index.html hero and an embed.html to paste into an existing site
  • A morphing liquid-metal blob in any metal, reflecting a studio lit in your accent color
  • 14 documented settings: loop length, droplets, morph, size, metal, glow color, dispersion, thin-film sheen, studio spin, ripple, glow, rings and a corner spec line
  • Left, right or centered layouts, with the blob above the copy on phones
  • A white studio and soft shadow on light pages, a black studio and a pool of glow on dark ones
  • A seamless loop of 8 to 20 seconds, and an SVG still of melted droplets for reduced motion or no WebGL
  • Contrast and layout checks at 390, 768, 1024 and 1440 px
  • A frame-perfect MP4 (1080p by default, portrait sizes too) and a poster, the same on any machine
  • Open-source licenses for every part it builds on

Good fit

  • Audio and tech brands launching a product can float a chrome blob with a rim light in their signal color beside the headline.
  • Jewelry, fashion and beauty houses can use gold or rose gold metal on a warm bone page for a premium look.
  • Teams preparing a product drop can record a seamless loop of 8 to 20 seconds as a 1080p video for the launch post.

Not for

  • Showing your actual product: the blob is abstract, not a 3D model of it
  • Full landing pages below the hero (see the Landing Pages series)
  • Very old devices without WebGL, which get the still picture

About this skill

A hero section with a floating blob of liquid metal beside the headline. Droplets on looping paths melt into one slowly morphing shape with a ripple running over its surface. It reflects a turning photo studio, with strip lights, a hard horizon and a rim light in your brand color, and its edges split into a thin chromatic fringe. Faint rings pulse outward behind it. Chrome, gold, rose gold or any tint, on dark or light pages. Your agent puts in your colors, fonts, logo, headline and buttons, checks contrast at four widths and records a smooth 1080p video of it.

Example request

Build a Liquid Chrome hero for Ferrous Audio's FA-1 headphone: graphite page, chrome blob with an orange rim light and faint sound rings, headline 'Sound, cast in one piece.', the driver size and weight in the corner, and record a 10-second loop for the launch post.

Similar Skills

View all
web
Confetti Launch HeroClaude CodeCodexCursor+3 more agents
web
Soap Bubble 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 raymarching shader (no libraries)Motion Heroes kitHeadless Chrome checks and frame-stepped recorderffmpeg
Good forProduct launchBrandEcommerce

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

Write a review

FAQ

Can the blob show our actual product?

No. The blob is abstract liquid metal raymarched in WebGL, not a 3D model of your product. You set the metal tint, the rim light color, how far the droplets wander and how many there are (2 to 7), so it can suggest the product’s finish and mood.

Which metals can it do?

Chrome by default, gold, rose gold or any tint you give as a hex color. Colored metals are richest in the mid tones and pale in the highlights. If gold looks brown, pick a paler, yellower gold or a light page, whose white studio brightens it.

Will it run smoothly on phones and older laptops?

On a phone the blob comes first, then the words. The runtime lowers the pixel ratio by itself on slow devices, and you can lower the size or the droplet count too. Browsers without WebGL and visitors who ask for reduced motion get a still picture instead.

Which agents is Liquid Chrome 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 raymarched blob, the studio environment, the chromatic edge, the still, the Motion Heroes kit and the examples. Two hash functions are adapted from Dave Hoskins' "Hash without Sine" (MIT). 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.