Skip to content
Founding Lifetime: every Pro skillfirst 100 members · $169 onceUpgrade
Lookbk
Sign In

The page this skill built from examples/thale, working in your browser. Opens in a new tab. Also: .

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

Example settingswhat each example above was built from

examples/thalehero.json
Brand
Thale Optical
Headline
MADE FOR LOW LIGHT.
Colors
background #121213 · ink #efe9dc · accent #d9a35c · plate #121213
Mode
dark
Fonts
Jost and IBM Plex Sans
examples/cortehero.json
Brand
Corte Lenta
Headline
NOON IN THE COOL COURT.
Colors
background #efe8dc · ink #1d1a16 · accent #a8442a · plate #efe8dc
Mode
light
Fonts
Fraunces and Instrument Sans

What you get

  • A self-contained index.html and a paste-in embed.html
  • A 12 s loop of the aperture ring clicking between f/22, f/1.4 and f/4, with holds
  • The iris centred and sized from the counter of an O in your headline
  • A printed f-number scale and a pointer that turns the ring on a live page
  • Two scenes: a pier with lanterns at night and a stone courtyard with a fountain at noon
  • A baked still picture for reduced motion and when WebGL is missing
  • A 1080p MP4 of the loop and stills from record.mjs
  • Open-source licenses for every part it builds on

Good fit

  • Camera and lens makers, photographers and studios who want the product's own mechanism to be the hero.
  • Cafes, hotels and venues with a place worth looking at, shown sharp stopped down and soft wide open.
  • Brands about seeing clearly or letting the light in, from eyewear to architecture, with a headline that has an O.

Not for

  • Headlines without a round O in them
  • Pages that need a photo or video of the real product behind the type
  • Scroll-driven stories
  • Long headlines of more than 3 short lines

About this skill

A website hero seen through a real lens iris whose aperture lives in the headline. 9 curved black blades turn on their own pins, and the opening, round wide open and a sharp 9-sided window stopped down, sits in the counter of an O. At f/22 it fits inside the letter, with the scene's lights burst into 18-point stars; as the aperture ring clicks open, the scene pours out of the O and floods the frame, brighter and shallow, its lights melted into soft discs in the iris's own shape. The ring clicks to a different stop, holds and returns in one 12 s loop, and the pointer turns it on a live page. Two scenes ship: a pier with lanterns at night and a stone cloister with a fountain at noon.

Example request

Build a hero where a real 9-blade lens iris sits in the O of the headline and clicks open until the scene floods the frame.

Similar Skills

View all
Free
web
Falling LeavesClaude CodeCodexCursor+3 more agents
Free
web
Laser EtchClaude CodeCodexCursor+3 more agents
web
Arch PortalClaude CodeCodexCursor+3 more agents
New
web
Ocean Swell HeroClaude CodeCodexCursor+3 more agents
New
web
Event Horizon HeroClaude CodeCodexCursor+3 more agents
web
Rain on Glass HeroClaude CodeCodexCursor+3 more agents
web
Spotlight Type HeroClaude CodeCodexCursor+3 more agents
web
Text on Path HeroClaude CodeCodexCursor+3 more agents

Details

Output
Lens iris in the headline's O · page + embed · 1080p loop
Needs
Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video
Series
Motion Heroes · 87 skills
Updated
Nov 8, 2026
Checked
Nov 8, 2026: its own commands ran and passed. That is a working check, not a security audit.

Generates with

Raw WebGL2 shaders, no librariesA 9-blade iris solved on its pins in closed form every frameBokeh drawn in the iris's own current shape, with 18-point diffraction stars stopped downHeadline drawn in the scene, with a measured contrast guard behind every letter
Good forBrandWeb designProduct launch

Installed it? Tell others how it went. Reviews come from people who installed this skill.

Write a review

FAQ

How does the iris find the O?

The effect reads the headline's measured layout, finds the first O of the word you name in effect.word, scans the drawn letter for its counter and centres the iris there. At f/22 the opening is a little smaller than the counter, so a ring of blade shows inside the letter.

Can I change which stops the loop clicks through?

Yes. effect.loop takes 3 f-numbers from the ring, like 22 1.4 4: the stop at frame 0, the stop it clicks to, and a different stop before it returns. The whole loop is 12 s and the recording's last frame meets its first.

What happens without WebGL?

The page shows a baked still picture of the scene from the package's stills folder, with the real headline over it in your theme's ink. Reduced motion shows the first frame of the loop and stays still.

Which agents is Aperture Reveal 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, including the Motion Heroes kit v2, the iris, both scenes and the stills, with no third-party library; fonts load from pinned Fontsource packages under the SIL Open Font License 1.1. 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.