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

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

Example settingswhat each example above was built from

examples/saltgrasshero.json
Brand
Saltgrass Atlas
Headline
The coast, in full detail.
Colors
background #f5f2ea · ink #152c66 · accent #2b4c98 · plate #f5f2ea
Mode
light
Fonts
Fraunces and Instrument Sans
examples/lanternhero.json
Brand
Lantern House
Headline
Lit one window at a time.
Colors
background #0d0f14 · ink #efe6d2 · accent #e8c46e · plate #0d0f14
Mode
dark
Fonts
Bricolage Grotesque

What you get

  • A self-contained index.html hero page in your colours, fonts and copy
  • An embed.html section to paste into an existing site
  • A wall of bevelled flip tiles with a glazed coarse face and a printed fine back, on axles in a recessed board
  • An engraved coastal chart or a night city in black glass and gold leaf, drawn in code
  • A headline on a glass pane in front of the wall, casting its shadow on the tiles
  • Checks at 390, 768, 1024 and 1440 px for text size, contrast, clearance under the bar and the old template
  • A frame-exact 16-second 1080p MP4 that loops, and a poster
  • Open-source licenses for every part it builds on

Good fit

  • A map or atlas publisher that wants its charts seen in big pixels first and then in full engraved detail.
  • A photobook, gallery or print studio that wants a night city or a body of work revealed one tile at a time.
  • A brand page where the headline must stay legible while the whole first screen moves behind it.

Not for

  • Your own photograph or artwork as the picture: the two pictures are drawn in code
  • Long headlines: three short lines at most
  • Visitors without WebGL, who see a flat grid and the plain headline
  • Pages that need the first screen to stay still

About this skill

A website hero that is a wall of two-sided ceramic flip tiles. Each tile's glazed face is its patch of a picture fired in one glaze, so the wall reads as the picture in big pixels; its back carries the same patch printed at full resolution. When the pointer or a scripted hand rests, the tiles turn over as a ripple, opening a clean window onto the fine picture with a band of tiles caught mid-turn at its rim, and then they turn back one by one. Two pictures are drawn in code: an engraved coastal chart in printed tints, and a night river city in black glass and gold leaf. The headline sits on a glass pane in front of the wall, in the same light, casting its shadow on the tiles. It loops every 16 seconds.

Example request

Use the pixel-grid-reveal-hero skill to build a hero for our atlas: a wall of glazed flip tiles showing our coast in big pixels that turn over to reveal the engraved chart, our headline on glass in front, one call to action, and a 16-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
WebGL flip-tile wall 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

three.js r180 with RoomEnvironment and RoundedBoxGeometryTwo pictures drawn in code, classified into glazesMotion Heroes kit v2 (lockup and editorial compositions)Headless Chrome checks and frame-stepped recorder, ffmpeg
Good forBrandWeb designProduct launch

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

Write a review

FAQ

Can I put my own photograph on the tiles?

Not in this package. Both pictures, the coastal chart and the night city, are drawn in code so the glazes, the print and the headline's ground can be guaranteed. You choose the picture, its colours, the coast's seed and where the hand rests.

Does the headline stay readable while tiles turn?

Yes. It is drawn on a glass pane in front of the wall, so no joint or turning tile cuts it. Tiles behind the lettering keep the lightest or darkest glazes, and the fine print keeps a knock-out under every letter.

How does the video loop?

The scripted hand follows a closed path every 16 seconds, and each tile's angle is worked out from where the hand was over the last 7 seconds. A recording of 16 seconds ends on the frame it started with.

Which agents is Pixel Grid 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 and its Motion Heroes kit v2; it loads three.js r180 (MIT licence) pinned from jsDelivr, and fonts from Fontsource 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.