Beneath Reveal
01
Add the cursor
Drop Beneath Reveal on your page and connect the section it should reveal to Content. The window stays inside that section, and links and images in it work on their own.
Scope is This frame by default. While the section is off screen, the cursor rests.
The section keeps one layout on every breakpoint. If it changes a lot on phones, connect a phone version on the Phone breakpoint.
02
Use it across the whole page (optional)
Set Scope to Whole page and put the cursor in your layout, so every page gets it. Its box can sit anywhere, and it never takes clicks.
Then add a second Beneath Reveal, set Use as to Link area, and connect your nav, footer, buttons or images to Links. Put the Link area where they were, at the same size.
Links inside a Link area get the lens, and images keep only the outline. Everything else gets the plain window.
What sits inside a Link area looks the same on every breakpoint. If your phone nav is different, connect the phone version on the Phone breakpoint.
03
Make it yours
Look: the size, tint, texture and outline of the window.
Motion: how long the trail lingers and how it swirls, plus a splash when you press.
Lens: Pill, Line, Rim or None, and Up to, the largest link that still gets it.
Media: over photos and videos, keep only the outline, with an optional word inside.
04
Phones and reduced motion
Phones have no pointer, so the cursor stays out of the way. Turn on Motion › On phones for a splash on tap; scrolling still works.
With reduced motion, a still window follows the pointer.
05
For developers (optional)
With Scope set to Whole page, your own code components can ask for the lens without a Link area. Send a beneath:lens event from the link when the pointer enters, and again with on: false when it leaves.
link.dispatchEvent(new CustomEvent(`beneath:lens`, {
bubbles: true,
detail: {
on: true,
target: { measure: () => link.getBoundingClientRect() },
},
}))