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

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

Example settingswhat each example above was built from

examples/fenwrighthero.json
Brand
Fenwright
Headline
Printed in the dark.
Colors
background #e9e2d2 · ink #efe9dc · accent #ff4a2e · plate #1c1b19
Mode
light
Fonts
Instrument Serif and Inter
examples/halvardhero.json
Brand
Halvard
Headline
Seven films, after dark.
Colors
background #efe9dc · ink #efe9dc · accent #ffb020 · plate #2a2420
Mode
light
Fonts
Bricolage Grotesque 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 darkroom intro: safelight timer, letterbox, a test strip of 4 exposures and the developer
  • A reveal where the timer, test strip and easel blades stay on as parts of the hero
  • Two print styles: silver letters on paper, or a photogram with white letters on black
  • A room lamp that follows the pointer on a spring over the wet gloss, and reduced motion that opens straight on the print
  • A frame-exact 12-second 1080p MP4 that loops, and a poster
  • Open-source licenses for every part it builds on

Good fit

  • Photographers, print studios and galleries whose work really is made in the dark and printed by hand.
  • Film festivals, cinemas and production companies that want their homepage to open like the first minute of a film.
  • Launches where the first screen should feel like an event, with a single headline and one clear call to action.

Not for

  • Sites that need a real loading bar tied to network progress: the timer is choreography
  • Pages that must show a product photo or video in the first screen
  • Long headlines: it is set at up to 25% of the screen's height in 3 lines at most
  • Brands that want a bright, playful opening rather than a quiet, cinematic one

About this skill

A preloader that plays like the opening titles of a film and hands over into the hero instead of disappearing. Under a red or amber safelight an exposure timer counts in large mono digits, the blades of an enlarging easel part to a letterbox, and the headline is projected through it as a test strip of 4 exposures, each pencilled on the blade. The letters come up in the developer, then the room lamp switches on, the blades open and the finished print is the hero: the timer stays as the printer's note, the strip as a step tablet, and the blades frame the page. The headline is drawn as silver on fibre paper, or as a photogram. A live page plays it once; the video loops every 12 seconds.

Example request

Use the preloader-hero skill to build our homepage hero: a darkroom intro where a safelight timer counts, our headline is exposed as a test strip and developed, then the easel opens onto the finished print with our lede and one call to action, plus a 12-second 1080p loop.

Similar Skills

View all
New
web
Dither LaserClaude CodeCodexCursor+3 more agents
New
web
Day NightClaude CodeCodexCursor+3 more agents

Details

Output
Canvas 2D darkroom preloader 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 composition, headline drawn in the scene)IBM Plex Mono 500 shipped with the package for the timer and notesHeadless 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

Does the loader play every time someone visits the page?

On a live page the sequence plays once from the first frame and then the print holds, with the room lamp drifting or following the pointer. Set intro to false to open straight on the print. With reduced motion turned on, visitors always see the finished print.

Is the timer tied to how fast the page loads?

No. The timer counts to the exposure you set, 16 by default, and the intro is over by 6.2 s, when the print is up. It is a title sequence the page plays while the hero is already loaded, not a progress bar.

Can the headline be white on a dark print?

Yes. Set polarity to photogram and the ground develops black while the letters stay paper white with soft edges, as if they were laid on the sheet. The Halvard example uses it in a charcoal easel with an amber safelight.

Which agents is Preloader 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, its Motion Heroes kit v2 and its darkroom sequence with no third-party library; it ships IBM Plex Mono 500 (Fontsource) under the SIL Open Font License 1.1, and the shell's fonts load from Fontsource under the same licence. 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.