Here’s the full breakdown of how I built the “Normal vs Upside Down” reveal effect using Framer Workshop + Nano Banana Pro — step by step, with all the prompts and tools you need to recreate it.
Framer is a no-code website builder that lets you design, animate, and publish full websites without ever touching code. You can drag-and-drop layouts, create interactions, add animations, and publish your site in seconds — all from one place.
If you want to try Framer yourself, here’s my special link + promo code:
🩵 Use code: DANIIL2025 for a discount when upgrading to Pro.
Launch your site for free at Framer and use code DANIIL2025 for a free month on Framer Pro.
Workshop is Framer’s AI-powered component builder.
You describe the component you want, and Framer writes the code, builds the structure, and returns a working interactive component.
It won’t always get things right on the first attempt — and that’s normal.
You can keep adjusting the description, asking it to fix specific logic, or request extra features until the component behaves exactly how you want.
In my case, I wanted a Cursor Mask Reveal component — two images on top of each other, with the cursor acting as a mask that reveals the background through a circle shape.
Here’s the exact prompt I used:
<aside>
Build an interactive Cursor Mask Reveal component. The user should be able to set a foreground image and background image. The mask follows the mouse and reveals the background through the shape. Include props for mask size, border radius, mask follow speed, and shape upload. The foreground remains fully visible except where the mask reveals the background. Make the motion smooth and realistic.
</aside>
You can then continue asking for improvements like: ”On click, the mask expands to reveal the entire background image with a spring animation. Clicking again restores the interactive mode. “
Workshop listens and updates the component step by step. If something doesn’t look right, use the “Something doesn’t look right” button or roll back to a previous version of the component. Pro tip: use Gemini 3