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

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

Example settingswhat each example above was built from

examples/haldehero.json
Brand
Halde
Headline
Photographs to hold.
Colors
background #d4cfc3 · ink #1c1a16 · accent #b4321d
Mode
light
Fonts
Instrument Serif and Instrument Sans
examples/veldehero.json
Brand
Velde
Headline
Forty greys, no two alike.
Colors
background #15241d · ink #efe8d8 · accent #c9a45c
Mode
dark
Fonts
Fraunces and DM Sans

What you get

  • A self-contained HTML page and a paste-in embed
  • Prints drawn in code: 6 photographic processes, plus painted cards, fabric and plaster chips
  • A hand that follows the pointer on a spring and deals by distance
  • A scripted path built from your layout that never rests a print on the headline
  • Lockup and editorial compositions, with designed phone layouts
  • A frame-exact looping 1080p MP4 and stills
  • Checks for text size, contrast, clearance under the bar and the v1 template
  • Open-source licenses for every part it builds on

Good fit

  • A print lab or photographer who wants the first screen to feel like pictures laid out by hand on a table.
  • A paint, textile or materials library whose samples are the product, dealt in their own colours with names and numbers.
  • A brand with one strong line of copy that should stay readable while something tactile happens around it.

Not for

  • Showing your own product photos (the pictures are generated, not uploaded)
  • A gallery or portfolio grid people browse
  • Pages that must work without JavaScript beyond a plain still
  • Scroll-driven stories

About this skill

A hand deals prints onto a table as the pointer moves. Each print falls, slides on in the direction of travel and settles at its own angle, with a two-layer shadow from one window and a wet sheen that dries. Behind the newest one, every print fades the way photographs fade, warm first and then into the paper, until the oldest is picked up edge-on, so the trail reads as a gradient of time. Every picture is drawn in code: silver gelatin landscapes, a cyanotype fern, an instant print, a contact strip ringed in grease pencil, a still life, a stencil print, or painted cards, fabric and plaster chips. The headline is real page text on the table, and the scripted hand never rests a print on it.

Example request

Build a website hero where moving the pointer deals a trail of code-drawn prints onto a linen table: each lands at a slight angle with a real shadow, dries, fades like an old photograph and is picked up, while the headline stays readable on the table.

Similar Skills

View all
New
web
Scroll ExpandClaude CodeCodexCursor+3 more agents
New
web
Variable Weight Wave HeroClaude CodeCodexCursor+3 more agents

Details

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

Generates with

Plain Canvas 2D, no librariesMotion Heroes kit v2 (lockup and editorial compositions)Headless Chrome checks and frame-stepped recorder, ffmpeg
Good forWeb designBrandProduct launch

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

Write a review

FAQ

Can I use my own photographs?

Not in this package. Every card is drawn in code when the page opens, from 6 photographic processes or as painted cards, fabric and plaster chips in your colours, so there are no files to license or load.

Will the prints cover my headline?

Not in the scripted loop or the video. The hand's path is built from the measured layout and keeps to the free bands above and below the words. A visitor dragging the pointer can deal prints anywhere, and they fade and are picked up within seconds.

How do I get a seamless loop?

Record cycle seconds, 16 in the first example. The deals repeat every round in the same deck order and the grain is fixed, so the frame at the end of the round is the frame at 0.

Which agents is Image Trail 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 for the Motion Heroes kit v2 and it uses no library: it draws with the browser's Canvas 2D, and its fonts are 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.