wcm

Hover Reveal Skill — Data skill for Claude Code

Data community

Claude skill: a hover-reveal landing page — each picture hides an aligned picture of what's inside it, revealed around the cursor by ink, loupe, cyanotype, dry-brush or iridescent masks.

How to install Hover Reveal Skill

This entry records only its repository, not the path inside it, so there is no exact command to give. Open wcm/hover-reveal-skill and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Hover Reveal Skill does

Claude skill: a hover-reveal landing page — each picture hides an aligned picture of what's inside it, revealed around the cursor by ink, loupe, cyanotype, dry-brush or iridescent masks. fal pipeline included.

Alternatives in Data

06 Ink React Terminal UI — Prompt 06: Verify and Fix the Ink/React Terminal UI Pipeline 2.3k ★
AI Data Extraction — extract all your personal data history from cursor, codex, claude-code, windsurf, and trae 1.3k ★
Local News Site — Publish a local news article as a standalone Elementor page, with Google News-grade structured data and image 648 ★

README

hover-reveal — a Claude skill

![Four looks from the reference build: each picture split down the middle, surface on the left, what the cursor reveals on the right](assets/preview.jpg)

Build a **hover-reveal landing page**: every picture hides a second, perfectly aligned picture of what's inside it, and the cursor reveals it. It's the landonorris.com effect, with a different reveal for every look:

Iridescent melt: the surface melts like oil on water (a perfume bottle → the garden of its notes).
Loupe: a sapphire watchmaker's lens with magnification steps, focus pull, and callouts that light up for the part under the glass (a watch dial → its movement, running as a video loop).
Cyanotype: a blue stain that develops while you linger (a façade → its rooms).
Dry brush: paint strokes that bring the hidden picture through (a marble bust → a living person).
Ink: a liquid blob that trails the cursor (a portrait → the same face in couture).

Claude generates the aligned image pairs with fal, designs the page (editorial serif and mono type, one accent per look, technical line work drawn over each picture), and builds it as a static site with a WebGL shader. No framework.

The reference build, *Doublure*, is in `assets/examples/doublure/`.

Quick start (for humans)

Paste this into **Claude Code** (or the Claude desktop app's Code tab):

Install and use the skill from https://github.com/wcm/hover-reveal-skill — make me a hover-reveal page with four looks.

…or name your own subjects:

Install and use the skill from https://github.com/wcm/hover-reveal-skill — make a hover-reveal lookbook: a vintage camera that reveals its shutter, a violin that reveals its insides, and a greenhouse that reveals its plants.

Claude installs the skill, checks your setup, asks for your fal API key, proposes the image pairs and reveals, shows you the generated pairs before building, then designs the page and checks it in a browser.

**What you need**