Guide · Agent skill
How to use the Reveal Hover Effect agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The reveal-hover-effect skill is a front-end recipe that teaches an AI agent to build a web component where a base image stays visible and a second, aligned image shows only inside a soft circular spotlight that follows the mouse pointer. It suits developers and designers who want hover-to-colour, before-and-after or x-ray effects on product or hero images without rebuilding the mask and easing logic themselves. This guide explains what the skill does, how to install it, how to trigger it and what to check before you ship.
Reveal Hover EffectMengTo/Skills · MIT Download the skill Quick start
- 1Download and unzip. Download the ZIP from this skill's page and unzip the reveal-hover-effect folder.
- 2Place the skill. Move the folder into ~/.claude/skills/ for personal use or into your project's .claude/skills/ folder. Or upload it in the Claude apps under Settings → Capabilities → Skills.
- 3Prepare two aligned images. Create or export two images with identical dimensions, composition and crop.
- 4Ask for the effect. Describe the effect in plain language and mention the spotlight or reveal, for example using the $reveal-hover-effect form.
- 5Review the output. Check the markup, the CSS mask-image and the JavaScript pointer tracking, and confirm the overlay is hidden on touch devices.
- 6Test on desktop and mobile. Hover on a fine pointer to confirm the spotlight, then check that the reveal is absent on touch screens and that no spotlight stays after the pointer leaves.
What the skill makes the agent build
Once installed, the agent can write a web component in which two images with identical dimensions and crop are stacked. The base image is always visible, for example a desaturated or line-drawing version. The second image sits directly above it and is revealed only within a soft radial spotlight around the pointer.
The skill supplies the markup, a CSS mask-image using a feathered radial gradient, and JavaScript that tracks the pointer with easing via requestAnimationFrame. It also gives guidance on matching image sizes and on accessibility. The spotlight collapses when the pointer leaves, so no stale reveal is left behind.
Install the reveal-hover-effect skill
Download the ZIP from the skill's page on this directory and unzip it. The skill folder is named reveal-hover-effect and contains SKILL.md, REFERENCES.md, agents/openai.yaml and demo/ files.
For a personal install, place the folder in ~/.claude/skills/. For a single project, place it in the project's .claude/skills/ folder. Alternatively, in the Claude apps, open Settings, go to Capabilities, and upload the skill under Skills.
- Personal install: ~/.claude/skills/reveal-hover-effect
- Project install: .claude/skills/reveal-hover-effect inside your project
- Claude apps: Settings → Capabilities → Skills, then upload
Trigger the skill with a natural request
You do not need special syntax. Describe the effect you want in plain terms and mention the reveal or spotlight. The demo prompts in the package use the form Use $reveal-hover-effect to build a cursor-following spotlight that reveals a second perfectly aligned image.
Give the agent your two images, or ask it to generate them with matching composition, crop and lighting. Say whether the effect is a hover-to-colour, before-and-after, x-ray or material reveal so the agent can pick the right treatment.
- Use $reveal-hover-effect to build a cursor-following spotlight that reveals a second perfectly aligned image.
- Build a before-and-after hover reveal for this product photo: grey linework as the base, full colour on top.
- Create a responsive full-screen hero where a plaster base image reveals an iridescent version under the cursor.
Check the requirements and prepare your images
The skill needs a web project that can use HTML, CSS mask-image and JavaScript. The package lists no external packages. You need two image files with identical dimensions and crop. The skill's own rule is that composition, crop and focal point must match, because a one-pixel mismatch becomes obvious inside the spotlight.
The skill's markup uses real img elements with width and height attributes. Keep object-fit and object-position identical on both layers.
- Two image files at the same width and height
- Same composition, crop, focal point and lighting
- A web project using HTML, CSS and JavaScript
Safety notes: scripts and network
This skill does not run scripts and does not use the network, according to its listing. The output is markup, CSS and JavaScript that you review and host yourself.
Review the generated code before deploying it, as you would any agent output. The skill keeps the native cursor unless your design explicitly needs a custom one.
- Runs scripts: no
- Uses network: no
- Licence: MIT
Tips for a reliable reveal
Use the skill's defaults unless you have a reason to change them: a desktop spotlight radius of 260px, pointer easing of 0.1, and radius easing of 0.14. For compact layouts the radius range is 140px to 220px.
Do not use the reveal on touch devices as a comparison tool. The overlay is hidden on touch and coarse-pointer devices. If the second image carries information not shown elsewhere, add visible labels or an accessible description, because the overlay is decorative by default.
- Keep the overlay decorative only when both images show the same subject
- Add visible labels when the comparison carries unique information
- Initialise the component after mount in React, Vue or Svelte and call the cleanup on unmount
What people use it for
- Hover-to-colour product photos where a desaturated base shows full colour under the cursor
- Before-and-after comparisons of a treatment on a hero image, for desktop visitors
- X-ray or material reveals, such as plaster turning into glass or chrome
- Illustrated hero sections where a line drawing gives way to a coloured version under the pointer
- Product-detail images that reveal texture or finish in a spotlight
Frequently asked questions
Is the reveal-hover-effect skill free?
The skill is listed under the MIT licence. The source does not mention pricing, so check the licence text in the package for the terms that apply to your use.
What do I need to use the reveal-hover-effect skill?
You need a web project that can use HTML, CSS mask-image and JavaScript, plus two image files with identical dimensions and crop. The package lists no external packages.
Where do I install an agent skill like this?
Unzip the folder into ~/.claude/skills/ for personal use or into a project's .claude/skills/ folder. In the Claude apps you can upload it under Settings → Capabilities → Skills.
Does the spotlight work on phones and tablets?
No. The overlay is hidden on touch and coarse-pointer devices, so the effect does nothing there. Use a touch-friendly comparison slider instead if mobile users need the comparison.
Does the skill run scripts or access the internet?
According to its listing, it runs no scripts and uses no network. It produces code that you host and review yourself.
How does this compare with a before-and-after slider?
The skill builds a cursor-following spotlight, not a draggable divider. It fits desktop hover interactions, while a slider is the better choice for touch-friendly comparisons.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you are a front-end developer or designer building a desktop hover reveal for product or hero images and want the mask and easing logic done correctly. Pick something else if your audience is mostly on touch devices or if the second image carries information that a visitor must be able to reach without hovering.
Download the skill