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

16-second example rendered by this skill from examples/dewline · 1280×720

Example settingswhat each example above was built from

examples/dewlinehero.json
Brand
Dewline
Headline
Skin that drinks like glass.
Badge
New · Glacier Water Serum
Colors
background #f3eee7 · ink #17181d · accent #a83a22
Mode
light
Fonts
Bricolage Grotesque and DM Sans
examples/quinnethero.json
Brand
Quinnet
Headline
Bitter, bright and ice cold.
Badge
Small-batch tonic · Est. 2019
Colors
background #09130f · ink #f0f4e4 · accent #c6f05a
Mode
dark
Fonts
Fraunces and Inter

What you get

  • A self-contained index.html hero and an embed.html to paste into an existing site
  • Fat macro drops on frosted glass, each showing your poster sharp and upside down, with rims, caustics and highlights
  • Heavy drops that slide in fits and starts, merge with the drops in their way and wipe clear trails
  • A poster drawn in your colors, with your headline's coloured phrase set huge in your display face
  • Settings for drop count and size, sliders, optics, frost, haze, beads, shine and the poster word
  • Contrast and layout checks at 390, 768, 1024 and 1440 px, plus an SVG still for reduced motion or no WebGL
  • A frame-exact 16-second MP4 at 1080p that loops without a seam, and a poster image
  • Open-source licenses for every part it builds on

Good fit

  • Skincare, cosmetics and wellness brands can show a hydrating product as dewy drops that hold their name upside down.
  • Drinks makers selling tonic, cold brew or sparkling water can set an ice-cold mood on a dark or light page.
  • Teams preparing a launch post can record a 16-second loop at 1080p that repeats without a visible seam.

Not for

  • Showing your product: the drops refract a drawn poster, not a photo or 3D model
  • Rainy night scenes with a city behind the glass (see Rain on Glass Hero)
  • Full landing pages below the hero
  • Very old devices without WebGL, which get the still picture

About this skill

A hero section on a pane of frosted glass, with a bold poster behind it drawn in your colors: big discs, a tilted band, fine rules and one word set huge in your headline's typeface. Through the frost it is only soft color, but a few fat macro water drops cling to the glass, and each one is a clear lens with the poster sharp, small and upside down inside it, a dark rim, a caustic and a soft-box highlight. Heavy drops slide down in fits and starts, merge with the drops in their way like liquid and wipe clear trails where the poster shows sharp. Your agent puts in your colors, fonts, logo, headline and buttons, checks contrast at four widths and records a 16-second 1080p loop that repeats without a seam.

Example request

Build a Water Droplets hero for Dewline's Glacier Water Serum: warm porcelain page, a coral, aqua and butter-yellow poster behind frosted glass, fat drops showing 'like glass' upside down, headline 'Skin that drinks like glass.', and record the 16-second loop.

Similar Skills

View all
New
web
Glass Metaballs HeroClaude CodeCodexCursor+3 more agents
New
web
Liquid Lens 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 over Canvas 2D textures (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

What do the drops show inside?

By default the poster behind the glass, sharp, small and upside down, the way a real drop on a window shows the world. The poster word is your headline's coloured phrase unless you set another word of up to 24 characters. Set optics to magnified to show the poster right behind each drop instead.

Do the drops really merge?

Yes. All drops are one liquid surface, so drops that touch fuse into one shape. Heavy sliders pull in every drop in their path as they pass and wipe a clear trail; the swallowed drops condense back before the slider returns, so the 16-second loop has no seam.

Will it run smoothly on phones?

On a phone the poster and drops move 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 Water Droplets 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 poster, the metaball drops and sliders, the refraction shader, 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.