Today we're launching Shotbase
One place for everything Screenshots and Screen Recordings
Capture, trim, annotate, share - no exporting between four tools
Quick ideas, polished demos, team updates, social posts, and everything in between
The capture tool your Mac should have had
@beldonwolson@framer i used a combination of models like GPT 5.6 luna , 5.6 Sol and Sonnet 5 depending on the complexity of the tasks.... so overall the speed was good enough.
Prompt 1 - Custom Cursor
I already have a Hero section and a separate cursor frame on the canvas. The cursor contains a stamp border, transparent capture area, and “Click anywhere” hint.
Make the cursor frame smoothly follow the mouse position inside the Hero section while keeping the default system cursor visible. Keep the stamp centered on the pointer and make sure the custom cursor disappears outside the Hero. It should not block mouse events or interfere with clicking.
For now, only set up the mouse-tracking behavior , no additional animations.
Prompt 2 - Cursor Visibility
Update the custom cursor behavior so the stamp cursor is hidden whenever the pointer is over the navigation, CTA buttons, links, or text content in the Hero.
When the pointer returns to the rest of the Hero, show the stamp cursor again and continue tracking the mouse position smoothly.
Prompt 3 - Masking & Image Capture
Add the masking setup for the stamp cursor. Duplicate the Hero background image and keep the duplicate perfectly aligned with the original at all times.
Use the Capture Area inside the cursor frame as a moving mask over the duplicate image, so the stamp reveals the corresponding portion of the background as it moves. Keep the original background untouched underneath so it remains visible outside the stamp.
Keep the stamp border and interaction hint unchanged. For now, only set up the masking behavior , don't add click or transition animations yet.
Prompt 4 - Click Interaction
Add a subtle click interaction to the stamp. On click, make the stamp feel like a camera shutter by pressing it down slightly and temporarily reducing its shadow. Show the white overlay inside the stamp for a brief moment, then hide it again.
At the same time, fade out the “Click anywhere” hint and arrow. Keep the interaction quick and subtle.
Don't freeze the selection or move the stamp yet this prompt is only for the click feedback.
Prompt 5 - Freeze the Captured Image
After the click interaction finishes, stop the cursor from tracking the mouse and freeze the exact portion of the background visible inside the Capture Area at the moment of the click.
Turn that captured portion into a standalone image inside the stamp border so it remains fixed even when the mouse moves. The stamp should now become an independent object while staying exactly where it was clicked.
Keep the background unchanged and don't add the final transition yet.
Prompt 6 - Stamp & Background Transition
Now animate the frozen stamp into its final resting position while transitioning the Hero into its final textured background.
Use these editable values:
Stamp Resting X: 723
Stamp Resting Y: 245
Background Resting X: 833
Make the stamp movement the master animation so all background transitions stay synchronized with it. Keep the frozen stamp above the background throughout the transition and preserve the captured image inside it.
Structure the transition as four distinct phases:
Click → Fade Out → Move → Reveal
First, fade the original background smoothly to 0 opacity and pause before the stamp begins moving. Then move the frozen stamp slowly and deliberately to its resting position while positioning the textured background underneath. Once the stamp reaches its destination, gradually reveal the textured background from 0 to 1 opacity.
Keep the textured background behind the content and navigation, and use smooth, weighted easing throughout.