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

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

Example settingswhat each example above was built from

examples/orvanehero.json
Brand
Orvane
Headline
Liquids that behave like liquids.
Badge
Orvane 3 · fluid simulation
Colors
background #0a0d17 · ink #eef2fb · accent #7d96ff
Mode
dark
Fonts
Sora and Inter
examples/halcynehero.json
Brand
Halcyne
Headline
Clear skin, clear formulas.
Badge
Water-light serums
Colors
background #f3efe8 · ink #1c1712 · accent #c2441f
Mode
light
Fonts
Instrument Serif and DM Sans

What you get

  • A self-contained index.html hero and an embed.html to paste into an existing site
  • Clear glass droplets that fuse, neck and pinch apart around a heavy core drop
  • Refraction of a striped wall in your colors, with an RGB fringe, fresnel sheen, bright rim and softbox highlight
  • A soft shadow and a caustic of focused light on the wall, and stripes that fade behind the copy
  • Every setting documented, from droplet count and spread to stripe width, tint, refraction and loop length
  • Contrast and layout checks at 390, 768, 1024 and 1440 px, plus an SVG still for reduced motion or no WebGL
  • A frame-perfect MP4 (1080p by default, portrait sizes too) and a poster, with a loop that closes exactly
  • Open-source licenses for every part it builds on

Good fit

  • Software and design tools can show a fluid, premium motion beside the headline without shipping any footage.
  • Beauty, skincare and drinks brands can run warm stripes behind clear glass drops for a clean, liquid launch page.
  • Teams preparing a launch post can record a seamless 12-second loop as a 1080p video.

Not for

  • Showing your product: the glass bends drawn stripes, not a photo or 3D model
  • Full landing pages below the hero (see the Landing Pages series)
  • Very old devices without WebGL, which get the still picture
  • Quiet, minimal brands that want nothing behind the headline

About this skill

A hero section with a cluster of clear liquid glass beside your headline. A heavy core drop and a ring of smaller droplets fuse into one body like mercury, stretch into necks, pinch apart, fly out and fall back in, each on its own timing. The glass refracts a wall of bold diagonal stripes in your colors: the stripes bend through the thick middle, squeeze into the rim and split into a thin red, green and blue fringe, with a fresnel sheen, a bright rim, a softbox highlight and a soft shadow with a caustic on the wall. The pointer leans the glass a little; the video follows a scripted loop that closes exactly. Your agent puts in your colors, fonts, logo, headline and buttons, checks contrast at four widths and records a 1080p loop.

Example request

Build a Glass Metaballs hero for Orvane, a fluid solver for motion designers: near-black navy page, indigo and pale blue stripes, clear icy glass droplets fusing and splitting beside the headline 'Liquids that behave like liquids.', and record the 12-second loop.

Similar Skills

View all
New
web
Liquid Lens HeroClaude CodeCodexCursor+3 more agents
New
web
Water Droplets HeroClaude CodeCodexCursor+3 more agents

Details

Output
Animated WebGL hero · page + embed · 1080p loop
Needs
Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video
Series
Motion Heroes · 71 skills
Updated
Nov 1, 2026
Checked
Nov 1, 2026: its own commands ran and passed. That is a working check, not a security audit.

Generates with

Raw WebGL1 metaball and refraction shader (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

Does the glass react to the visitor's pointer?

Yes, a little. On a live page the cluster and its highlights lean toward the pointer. Without a pointer, and in every recording, the droplets follow their scripted loop, so each machine records the same frames and the video loops cleanly.

How do I make the glass more or less busy?

Use droplets (3 to 9) and spread to set how many drops split off and how far they fly. Lower spread keeps the glass mostly fused; raise refraction and dispersion for stronger bending and color fringes at the edges.

Will the stripes make my headline hard to read?

No. The stripes fade behind the copy, the bar and the caption, and the build checks every line of text against the faded stripes at 4.5:1 before it writes the page. Raise quiet to fade them further.

Which agents is Glass Metaballs 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 metaball choreography, the refraction shader, the striped wall, the still, the Motion Heroes kit and the examples; it uses no libraries, and one hash function is 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.