Video Thumbnail Picker
Choose the frame that represents a video, or upload a cover image instead.
What it adds
A picker that offers candidate frames from a video and accepts a custom uploaded cover image.
What your agent is told to do
5
What your agent is told to do
5-
1
Generate candidate frames on the server as part of the video's processing pipeline, and show the user a strip of stills to choose from. Do not stream the whole file into the browser to seek it frame by frame.
-
2
Offer a scrubber for picking an exact moment in addition to the suggested stills, so someone who wants a specific frame is not limited to the ones you guessed.
-
3
Accept a custom cover image upload as an equal path, and route it through the app's existing File Upload and Image Compression handling rather than adding a second upload endpoint with its own limits.
-
4
Store one canonical still and derive the sizes each surface needs: grid tile, card, and social share preview. Reuse the app's existing image derivative and cropping behaviour, including Image Focal Point Cropping if it exists, so a face is not cropped out of the square version.
-
5
Do not block publishing on thumbnail selection. Pick a reasonable default automatically and let the user change it later, or half your videos will sit unpublished behind an unmade decision.
Edge cases it handles
8
Edge cases it handles
8- Videos often open on black, a fade-in, or a title card. Score candidate frames and skip near-blank or single-colour ones when suggesting defaults, or every automatic thumbnail will be a black rectangle.
- Replacing the source video invalidates every stored still. Regenerate candidates on replacement and clear the previous selection rather than leaving a cover image from a video that no longer exists.
- Different surfaces need different aspect ratios, and a still cropped independently per surface drifts. Store consistent, named sizes generated from one source frame so the grid, card, and share preview agree.
- A thumbnail can be requested while the video is still encoding. Show a pending state on the picker and generate candidates when processing completes, instead of failing or serving an empty image.
- An uploaded cover image is user-generated content on a public page. Enforce type and size limits on the server, run it through whatever scanning the app already applies to uploads, and treat it as moderatable.
- Reserve the thumbnail's dimensions in every layout that shows it so cards do not resize when images arrive.
- Every thumbnail needs alternative text. Default it to the video title rather than leaving it empty or filling it with a filename.
- Generating stills for a long or high-resolution video is expensive. Cap the work per video and let it fail gracefully to a single default frame rather than tying up the encoder.
Definition of done
9
Definition of done
9- Candidate frames are produced server-side and offered as a selectable strip.
- A user can also seek to an exact frame or upload a custom cover image.
- Near-blank frames are excluded from automatic suggestions.
- Replacing the source video regenerates candidates and clears the stale selection.
- One selected still produces consistent derivatives for grid, card, and share surfaces.
- A video still encoding shows a pending picker rather than an error.
- Uploaded covers pass the app's existing size, type, and scanning rules and carry alt text.
- The feature matches the existing design system.
- No existing functionality is broken.
Related features
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
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
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.