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

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

Example settingswhat each example above was built from

examples/lumenfoldhero.json
Brand
Lumenfold
Headline
Light, folded into paper.
Badge
Edition 04 · Prism Field
Colors
background #07080d · ink #f2f3f7 · accent #86e9ff
Mode
dark
Fonts
Instrument Serif and Inter
examples/oriel-ninehero.json
Brand
Oriel Nine
Headline
Afterglass is out at dusk.
Badge
New album · 11 tracks
Colors
background #0e0a10 · ink #f6efe9 · accent #ffb877
Mode
dark
Fonts
Bricolage Grotesque and DM Sans

What you get

  • A self-contained index.html hero and an embed.html to paste into an existing site
  • A full-bleed sheet of crumpled foil with creased facets, fine wrinkles and a slow billow
  • A rainbow sheen in three colors of your choice that slides across the facets as the light moves
  • A light that follows the pointer on a live page and a scripted path in the video
  • A dark glass card behind the copy, tinted in your page color, with a hairline of the sheen along its top
  • Every setting documented, from crumple size and facet depth to sheen colors, glints, card tint and loop length
  • Contrast and layout checks at 390, 768, 1024 and 1440 px, an SVG still for reduced motion or no WebGL, and a frame-perfect MP4 and poster
  • Open-source licenses for every part it builds on

Good fit

  • Print studios, collectibles and packaging brands can show a holographic finish without filming a single sheet of foil.
  • Music releases and fashion drops can put a short headline on a dark glass card over a shifting rainbow sheen.
  • Teams preparing a launch post can record a seamless 12-second loop as a 1080p video.

Not for

  • Light, airy pages: the foil and its glass card are made for dark backgrounds
  • Showing your product: the foil is a drawn surface, not a photo or 3D model
  • Quiet, minimal brands that want nothing busy behind the headline
  • Very old devices without WebGL, which get the still picture

About this skill

A hero section that fills the whole first screen with a sheet of crumpled holographic foil, with your headline on a dark glass card over it. The foil is made of flat facets creased into each other, with fine wrinkles on top and a slow wave rolling through the sheet. A light glides over it on a looping path, so bands of your three sheen colors slide across the facets, the facets facing the light flare and tiny glints twinkle on the creases. Move the pointer and the light leans after it, shifting the rainbow with the tilt. Your agent puts in your colors, fonts, logo, headline and buttons, checks contrast at four widths and records a 1080p loop.

Example request

Build an Iridescent Foil hero for Lumenfold, a studio printing holographic foil art prints: near-black page, crumpled silver foil with a cyan, violet and pink sheen, the headline 'Light, folded into paper.' on a dark glass card, and record the 12-second loop.

Similar Skills

View all
web
Soap Bubble 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 foil 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 rainbow react to the visitor's pointer?

Yes. On a live page the light leans toward the pointer, so the sheen shifts as the visitor moves. Without a pointer, and in every recording, the light follows its own path that closes once per loop, so the video loops cleanly.

Can I use my own colors for the foil?

Yes. Set three sheen colors and the metal underneath: cyan, violet and pink on silver reads as classic holographic foil, while gold, rose and mint on a warm metal reads as mother of pearl. The bands run through your three colors and back.

Will the foil make my headline hard to read?

No. The copy sits on a dark glass card tinted in your page color, the foil dims under it, and the build checks every line of text at 4.5:1 before it writes the page. Raise card (0.55 to 0.95) for a darker card.

Which agents is Iridescent Foil 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 foil shader, the light's looping path, the glass card, the still, the Motion Heroes kit and the examples; it uses no libraries, and two hash functions 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.