Hover Zoom Magnifier
Show a magnified detail of an image on hover, the way product photos do.
What it adds
A hover magnifier that reveals a high-resolution detail of an image under the pointer without opening a dialog.
What your agent is told to do
5
What your agent is told to do
5-
1
Apply this only where detail genuinely matters — product photography, scans, diagrams — and not to every image in the app. A magnifier on an avatar is noise.
-
2
Treat it as an enhancement over the app's existing Image Lightbox rather than a replacement. Hovering magnifies, clicking still opens the lightbox, and the two must share the same image sources and the same alt text.
-
3
Require a source meaningfully larger than the displayed size. If the only available file is the one already on screen, skip the effect entirely instead of magnifying a blurry upscale.
-
4
Load the high-resolution source on first pointer entry and hold it, so the magnifier does not open onto a blank panel and does not re-fetch on every pass.
-
5
Do not intercept the pointer with an overlay that swallows clicks. Links, buttons, and text selection underneath the image must keep working exactly as they did.
Edge cases it handles
8
Edge cases it handles
8- Touch devices have no hover. Detect a coarse pointer and fall back to tap-to-open full view rather than firing the magnifier on a tap and trapping the user in it.
- Without a source larger than the rendered image there is nothing to magnify. Detect the missing high-resolution rendition and disable the effect quietly rather than showing an upscaled smear.
- Near the right or bottom edge of the window the magnified panel would be clipped. Flip it to the other side of the cursor and keep it fully inside the viewport.
- Preload the zoom source when the pointer first enters the image, so the first magnification shows content rather than an empty box while the file arrives.
- The magnifier must not block text selection or clicks on links and buttons layered over or beside the image.
- The effect must not be the only way to see detail. Keyboard users and screen reader users need the full view reachable without a pointer.
- Fast pointer movement across a grid of images must not queue a stack of high-resolution downloads; cancel loads for images the pointer has already left.
- Suppress the follow animation when reduced motion is requested and simply place the panel.
Definition of done
9
Definition of done
9- Hovering a qualifying image shows a magnified detail tracking the pointer.
- Images without a higher-resolution source do not show the effect at all.
- Touch and coarse-pointer devices fall back to opening the existing lightbox.
- The magnified panel stays fully within the viewport at every screen edge.
- Links, buttons, and text selection under the image continue to work.
- The high-resolution source is fetched once and the first hover is never blank.
- The full-size view is reachable by keyboard without hovering.
- The feature matches the existing design system.
- No existing functionality is broken.
Related features
Picture-in-Picture Mode
Picture-in-Picture Mode
Let viewers pop a video into a floating window and keep using the rest of the app.
What it does
A control on the video player that hands the video to the browser's floating always-on-top window.
How it works
- 1 Add the control to the app's existing video player rather than building a separate popped-out player. Two players competing over the same element is the main way this feature goes wrong.
- 2 Keep the app in sync with the floating window in both directions. Pausing, seeking, or changing volume from the floating window must update the in-page player, and closing the floating window must return playback to the page at the same position.
- 3 Decide explicitly what happens when the user navigates away from the page that owns the video. Either keep the floating window alive and reconnect when they return, or end it cleanly, but do not leave a floating window playing a video the app has forgotten about.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/picture-in-picture-mode
Audio Waveform Scrubber
Audio Waveform Scrubber
Show the shape of a track so listeners can see the quiet and loud parts and click to them.
What it does
A waveform rendered from precomputed amplitude data, doubling as the seek control on the audio player.
How it works
- 1 Compute the amplitude data on the server when the file is first stored, and serve it as a small dataset the page can draw. Do not decode the audio in the browser to build the waveform.
- 2 Replace the plain scrub bar in the app's existing Audio Player with this surface rather than adding a second seek control beside it.
- 3 Draw played and unplayed regions distinctly, and keep the playhead position exact under click, drag, and keyboard seeking on the same surface.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/audio-waveform-scrubber
Hover Video Preview
Hover Video Preview
Hovering a video card plays a short silent clip so people see what it is before clicking.
What it does
A silent, short-loop preview that plays inside a video card on deliberate hover and returns to the poster on exit.
How it works
- 1 Generate a short, low-resolution, silent preview clip during video processing and store it alongside the poster frame. Do not play the full source file behind the card.
- 2 Require a deliberate hover before doing anything. Wait several hundred milliseconds after the pointer settles, then load, so a cursor crossing a grid does not fire a dozen requests.
- 3 Give touch devices an explicit preview control on the card, since hover does not exist there. A long-press or a small preview button is fine; silently doing nothing on mobile is not.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/hover-video-preview
How it works
-
1
Copy the link
Grab the Markdown instruction URL for this feature.
-
2
Give it to your AI
Paste it into Claude Code, Cursor, v0, Lovable — whatever you build with.
-
3
It inspects, then implements
Your agent reads your existing app first, then adds the feature to fit it.
Works with your stack
These instructions are written to adapt. They tell the agent to detect your framework, match your existing design system, and reuse what you already have — rather than assuming a particular stack.
Need it tighter than that? Customize the feature and tell it exactly what you're running.