https://framer.com/m/Lorenzointeractiveportrait-cKcQYi.js
Io / Enhancements / LorenzoInteractivePortrait
LorenzoInteractivePortrait
LorenzoInteractivePortrait stacks two pictures and opens a soft round window through the top one wherever the pointer goes, closing again behind it.
Examples
Live specimens for every control the component exposes.
Default
baseImageUrl is what the reader sees at rest; revealImageUrl is what the window opens onto. The two should be the same crop, or the reveal will not line up.
The window
blobRadius is how wide the opening is, as a share of the frame. blobFadeSpeed is how quickly it closes once the pointer has passed.
radius 0.15
radius 0.35
slow fade
Props
The controls exposed on the instance panel.
Usage
Guidance carried over from the component definition.
Reach for LorenzoInteractivePortrait
A portrait should change under the reader’s hand rather than on a timer.
Two versions of the same shot need to be compared in place.
The reveal should feel soft rather than a hard wipe.
Both shots are the same crop, so the window lines up.
Reach for something else
The two pictures are different crops — the window will not line up.
You want an engraved treatment — use EtchedPortraitReveal.
There is no pointer to follow, as on touch.
Io — Enhancements
Every specimen above is a live component instance. Colour, type and radius resolve from the project theme tokens.