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

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

14-second example rendered by this skill from examples/madder · 1280×720

Example settingswhat each example above was built from

examples/madderhero.json
Brand
Madder & Weld
Headline
Three plants, every colour.
Badge
Plant-dyed in small vats
Colors
background #eef0ec · ink #1b1d1f · accent #27408f
Mode
light
Fonts
Fraunces and Instrument Sans
examples/halcynehero.json
Brand
Halcyne
Headline
A scent that opens slowly.
Badge
Eau de parfum · 50 ml
Colors
background #f6ede9 · ink #231a1d · accent #b81f5c
Mode
light
Fonts
Cormorant Garamond and Manrope

What you get

  • A self-contained index.html hero and an embed.html to paste into an existing site
  • Up to 5 drops in up to 3 dye colors that roll up, break into curls and filaments, and mix where they meet
  • 19 documented settings: loop length, each drop, the dyes, density, curl, turbulence, bloom, tendrils, fall, meet, water tint, backlight, caustics, motes, grain and the pointer swirl
  • Left, right or centered layouts, with the drops falling above the copy on phones
  • A seamless loop of 8 to 20 seconds, and an SVG still 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

  • Natural-dye studios, yarn shops and textile makers can open their site with their own colours blooming and mixing in water.
  • Fragrance, cosmetics and tea brands can let a slow plume of colour stand for a scent or a flavour opening up.
  • Ink, paint and stationery brands launching on social can record a seamless loop of 8 to 20 seconds that is the same on any machine.

Not for

  • Dark brands: the build only accepts a light background, since the water is lit from behind
  • Full landing pages below the hero (see the Landing Pages series)
  • A fluid simulation you can paint into: each frame is worked out from the time

About this skill

A hero section where drops of dye fall into clear water lit from behind, like ink photographed in a tank. Each drop punches down into a ring that rolls at its rim, trailing a hair-thin thread, then breaks up into curls inside curls and fine filaments as it drifts into the others. The dye absorbs the light like real dye, so where two colours meet they mix: indigo through yellow reads green. The pointer stirs the water with a soft swirl. Your agent puts in your colors, fonts, logo, headline and buttons, checks contrast at four widths and records a seamless 1080p video of it.

Example request

Build a Dye Drop hero for Madder & Weld, our natural-dye studio: pale backlit water, drops of indigo, weld yellow and madder red that bloom and mix behind the headline 'Three plants, every colour.', and record a 14-second loop for Instagram.

Similar Skills

View all
New
web
Ocean Swell HeroClaude CodeCodexCursor+3 more agents
New
web
Event Horizon 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 · 80 skills
Updated
Nov 10, 2026
Checked
Nov 7, 2026: its own commands ran and passed. That is a working check, not a security audit.

Generates with

Raw WebGL1 shaders (no libraries)Motion Heroes kitHeadless Chrome checks and frame-stepped recorderffmpeg
Good forProduct launchBrandWeb design

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

Write a review

FAQ

Is this a real fluid simulation?

No. Each frame is worked out from the time alone: every pixel is traced back through the flow of its ring to where the drop went in. That is why the loop is seamless and every recording matches, but you cannot paint into it.

How many drops and colors can I use?

Up to 5 drops and 3 dyes. You choose where and when each drop falls in the loop, which dye it carries and how big it grows. Each dye must reach 1.8:1 on the water, or the build stops and suggests a deeper one.

Can I use a dark background?

No. The water is lit from behind and the dye darkens it, the way ink looks on a light box, so the build only accepts a light background. The text color must reach 7:1 on it.

Which agents is Dye Drop 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 dye and water shaders, the SVG still, the Motion Heroes kit and the examples. A few hash lines 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.