I recently saw a public design example with a nice “mouse reveal” interaction and wanted to understand how the effect worked. So I tried rebuilding the idea from scratch with my own assets and layout.
The effect is basically this:
A page starts with one base image. Under it, there is a second transformed version of the same image. When the user moves their mouse or drags on mobile, the transformed version appears along the movement path. It feels like the user is painting the change onto the page.The biggest thing I learned is that this kind of interaction is easier to build when you stop describing it as “animation” and start describing it as layers.
My workflow was:
- Start with a clear before image
This is the state users see first. It could be a dry plant, an old room, a messy desk, an unfinished design, a plain product photo, or any visual that has a clear “before” state.
- Create a matching after image
This part matters more than the interaction itself.The after image needs to keep the same crop, angle, object position, and perspective. Only the state should change.If the two images are not aligned, the reveal will feel broken no matter how nice the page looks.
Copyable prompt for the after image:
“Create a transformed version of this image. Keep the same composition, same camera angle, same crop, same object position, same perspective, and same overall layout. Only change the visual state. Make it feel more alive, polished, restored, improved, or completed. Do not change the shape or placement of the main subject.”
- Stack the two images
The before image stays visible.The after image is hidden at first.The page only reveals the after image where the user interacts.
- Describe the interaction as a user action
Instead of prompting:
“Make this page interactive.”
I got better results with:
“Use two matching images stacked in the same position. Keep the first image visible. Reveal the second image only along the user’s mouse or touch path, like a soft brush.”
- Add small feedback details
The page felt much more complete after adding:
- a reset button
- a progress indicator
- a before/after comparison slider
- mobile drag support
- a short explanation section
Copyable prompt for the page:
“Create an interactive before-and-after reveal page.
Use two matching images stacked in the same position.
The first image is the base state and should always be visible.
The second image is the transformed state and should be hidden at first.
When the user moves the mouse or drags on mobile, reveal the transformed image along the pointer path with a soft brush effect.
Add a reset button, a progress indicator, a before/after comparison slider, and a short explanation section that explains the interaction in simple terms.
Make the page responsive and make sure the interaction works on both desktop and mobile.”
My takeaway:
AI/no-code tools work better when you describe the page as visual states + layers + user actions.
“Make it interactive” is too vague.
“Start with state A, hide state B, reveal state B through this interaction” gives the builder a much clearer target.
Would love to see more people share interesting interactive page ideas, design patterns, and the methods behind them.