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

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

Example settingswhat each example above was built from

examples/lumaltohero.json
Brand
Lumalto
Headline
Every curve, under the glass.
Badge
New: Lumalto Grotesk
Colors
background #f4f1ea · ink #15140f · accent #e8461e
Mode
light
Fonts
Bricolage Grotesque and Inter
examples/kelvanehero.json
Brand
Kelvane
Headline
Clear, cold and a little bent.
Badge
Sparkling tonic, Edition 01
Colors
background #0e1024 · ink #f2efe6 · accent #ff7a59
Mode
dark
Fonts
Outfit and DM Sans

What you get

  • A self-contained index.html hero and an embed.html to paste into an existing site
  • A liquid glass lens with magnification, rim refraction, RGB dispersion, a specular rim and a drop shadow
  • Four background patterns drawn in your colors: wordmark, stripes, grid and gradient bands
  • 17 documented settings, from lens size and magnification to dispersion, wobble, path travel and loop length
  • Pointer following on a spring, and a seamless Lissajous loop of 6 to 24 seconds for the video
  • 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, the same on any machine
  • Open-source licenses for every part it builds on

Good fit

  • Type foundries and studios can set a new typeface or name huge in rows and let a glass lens magnify every curve.
  • Drinks, fashion and beauty brands can run bold stripes in two accents under the lens for a playful, premium launch page.
  • Teams preparing a launch post can record a seamless loop of 6 to 24 seconds as a 1080p video.

Not for

  • Showing your product: the lens bends a drawn pattern, 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 round lens of liquid glass drifting over a bold composition drawn in your colors: your brand's word set huge in rows, diagonal stripes, a drafting grid or gradient bands. The lens magnifies what sits under it, bends the world outside into its rim and splits the edge into a thin red, green and blue fringe, with a bright specular rim, a glint and a soft drop shadow. It follows the pointer on a spring and stretches like a drop as it moves; left alone, it glides along a figure eight that loops seamlessly. The pattern calms down behind the copy so the words always read. 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 Liquid Lens hero for Lumalto's new Lumalto Grotesk typeface: warm paper page, the word Lumalto set huge in black, orange, outlined and blue rows, a glass lens drifting over them, headline 'Every curve, under the glass.', and record the 12-second loop.

Similar Skills

View all
New
web
Glass Metaballs 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 refraction shader over a 2D canvas texture (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 lens follow the visitor's pointer?

Yes. On a live page it follows the pointer on a spring, with a little overshoot, and stretches along its motion like a drop. When the pointer leaves or rests for 2.5 seconds it glides back to its Lissajous path. Recordings always use the path, so every machine gives the same frames.

Which backgrounds can the lens refract?

Four patterns drawn in code in your colors: your word set huge in rows, diagonal stripes, a drafting grid with filled cells, or gradient bands with hairlines. Big letters, stripes and grid lines show the refraction best. The pattern fades behind the copy so the headline always reads.

Will it run smoothly on phones?

On a phone the lens comes first, above the words, and the runtime lowers the pixel ratio by itself on slow devices. The effect is one shader with no libraries to download. Browsers without WebGL and visitors who ask for reduced motion get a still picture instead.

Which agents is Liquid Lens 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 background patterns, the refraction shader, the Lissajous path and pointer spring, the still, the Motion Heroes kit and the examples. It uses no libraries; 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.