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

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

Example settingswhat each example above was built from

examples/holm-veyhero.json
Brand
Holm & Vey
Headline
BUILT TO BE TAKEN APART.
Colors
background #123a7a · ink #f4f7ff · accent #ffd9a0
Mode
dark
Fonts
Big Shoulders Display and Inter
examples/strandhero.json
Brand
Strand Cycles
Headline
STEEL, DRAWN TO YOUR SIZE.
Colors
background #ece6d6 · ink #232766 · accent #3a3fa8
Mode
light
Fonts
Barlow Condensed and Inter

What you get

  • A self-contained index.html hero page in your colours, fonts, logo and copy
  • An embed.html section to paste into an existing site
  • A choice of five original product drawings with dimensions, hatching, a detail view, notes and a title block
  • Up to 6 callouts in your own words that type in as the light reaches them
  • A pointer-following light with a fading trail and a scripted tour when no pointer is present
  • A layout and contrast check at 390, 768, 1024 and 1440 px, and an SVG still for reduced motion and failures
  • A frame-exact 1080p MP4 that loops seamlessly, and a poster image
  • Open-source licenses for every part it builds on

Good fit

  • Hardware and repair-friendly brands can show the parts that make their product better under a headline about how it is built.
  • Made-to-measure and workshop brands get a first screen that feels like opening their own drawings, in cyanotype or whiteprint.
  • A launch team that needs the live hero and a looping clip for social posts gets both from one hero.json.

Not for

  • Light or pastel pages, since the build refuses a background that is not dark
  • Showing your own product's real design, since the five drawings are generic
  • Centred layouts, since the drawing would sit behind the headline
  • Pages that must work without JavaScript beyond a still picture

About this skill

A dark hero section where a soft flashlight moves over a technical drawing beside your headline. Outside the light there is only a faint grid; inside it a product appears in fine white and cyan lines, with dimension lines, hatching, centre lines, numbered callouts, a magnified detail and a title block. The light leaves a short fading trail, and each callout's words type in letter by letter while it rests on them. Choose a headphone, a camera, a bicycle, a sneaker or an espresso machine, all original drawings made in code, and write your own callouts, title, drawing number and notes. On a live page the light follows the pointer; otherwise it tours the sheet, and the video loops without a seam.

Example request

Build a dark website hero for our product where a flashlight following the pointer reveals a blueprint drawing with our own callouts typing in, plus a looping video of it.

Similar Skills

View all
New
web
Liquid Lens HeroClaude CodeCodexCursor+3 more agents
New
web
Scroll Word Reveal HeroClaude CodeCodexCursor+3 more agents

Details

Output
Canvas 2D blueprint reveal · page + embed · 1080p loop
Needs
Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video
Series
Motion Heroes · 65 skills
Updated
Nov 2, 2026
Checked
Nov 1, 2026: its own commands ran and passed. That is a working check, not a security audit.

Generates with

Plain Canvas 2D with Path2D, no librariesDrawings written as SVG path data and shared with the SVG stillMotion Heroes kitHeadless Chrome checks and frame-stepped recorder, ffmpeg
Good forProduct launchBrandWeb design

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

Write a review

FAQ

Can it draw our actual product?

No. The five drawings are generic, original designs drawn in code: a headphone, a camera, a bicycle, a sneaker and an espresso machine. Pick the closest and write your own callouts, title, drawing number and notes.

How does the headline catch the light?

The headline is filled with a gradient centred on the lamp, updated every frame, so its letters warm on a cyanotype, or darken on a whiteprint, where the light passes. Both colours are checked at 3:1 over the sheet, and the drawing is knocked back behind the letters.

What does the lamp do without a pointer, and in the video?

On phones, before the pointer moves, and always in the recording, the lamp tours every callout, the detail and the title block and returns to where it started. With the default cycle of 16 seconds, a 16-second video loops without a seam.

Which agents is Blueprint Flashlight 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 on the plain Canvas 2D API with no third-party library, and the five product drawings are original designs made in code. 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.