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

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

What you get

  • A self-contained index.html hero and an embed.html to paste into an existing site
  • A drifting gradient in 3 to 6 of your colors, light or dark, the same drift for the same seed
  • A floating glass disc or pill that refracts the gradient, with dispersion, rim light, ribs and a soft shadow
  • 17 documented effect settings: seed, colors, cycle, drift, softness, warp, grain, calm, shape, lens size, ribs, refract, dispersion, rim, shadow, float and breathe
  • An SVG still for no WebGL, and one real frame for reduced motion, so the hero is never blank
  • Contrast and layout checks at 390, 768, 1024 and 1440 px, with every color tested against the ink
  • A frame-exact 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

  • Wellness, sleep and beauty brands can drift 3 to 6 soft pastel colors behind the headline, with a smooth glass disc breathing beside it.
  • SaaS and fintech teams can take deep tones on a dark page with a fluted glass pill for a sharper, more technical look.
  • Teams that need the copy to stay readable get a build that rejects any gradient color leaving the text under 4.6:1.

Not for

  • Loud, high-contrast brands: the gradient is soft by design and the build rejects colors the ink cannot read on
  • Reproducing another company's signature gradient: bring your own palette
  • Full landing pages below the hero (see the Landing Pages series)

About this skill

A hero section on a soft, slowly drifting mesh gradient: three to six of your colors blend into each other in linear light, folded by a gentle warp, with a calm patch held behind the copy so the words always read. A pane of frosted glass floats beside the copy, a disc or a pill, and bends the gradient behind it: the view inside flips and magnifies, the edges split into a faint spectrum, a bright rim and a soft highlight catch the light, and optional ribs fluted into the glass slice it into strips. Fine film grain at 24 frames a second sits over everything. Your agent sets your colors, fonts, logo and words, checks contrast at four widths and records a seamless 12-second 1080p loop.

Example request

Build a Mesh Gradient Grain hero for Stillwater, a breathwork app: peach, rose, sage, cream and periwinkle on warm paper, a glass disc beside the copy, headline 'Breathe out the whole day.', and record the 12-second loop.

Similar Skills

View all
web
Aurora Curtain HeroClaude CodeCodexCursor+3 more agents
web
CRT Terminal 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 WebGL 1 shader (no libraries)Linear-light mesh gradient with a refracting glass lensMotion 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

Can I use bright, high-contrast colors?

Not behind the text. Each gradient color must leave the text at 4.6:1 once washed toward the background by calm, so keep colors near the background’s lightness: pastels on light pages, deep tones on dark ones. The build names any color that is too far off, and raising calm helps.

Will the grain make the video files large?

Grain is hard on video encoders. The clip stays sharp at the default quality, but a heavier grain setting (0 to 1, default 0.45) makes bigger files. Record cycle seconds, 12 by default, for a clean loop at 1920×1080.

What do reduced-motion and no-WebGL visitors see?

Visitors who ask for reduced motion get one real frame of the hero at 3 seconds. Browsers without WebGL get an SVG still of blurred color fields, grain and the glass. On a phone the lens comes first, then the words.

Which agents is Mesh Gradient Grain 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: the mesh gradient, the glass lens shader, the grain, the Motion Heroes kit and the examples. No third-party code is included. 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.