https://framer.com/m/Framereveal-wqxn3o.js
Io / Enhancements / FrameReveal
FrameReveal
FrameReveal wraps your content in a panel that is invisible at rest and fades up as the pointer comes within range, so a grid of cards shows its edges only where the reader is looking.
Examples
Live specimens for every control the component exposes.
Default
The panel — fill, border, radius and shadow — sits at baseOpacity until the pointer comes within range, then rises to hoverOpacity. Your own content goes inside as layers on the canvas and stays fully visible throughout; only the frame fades.
Reveal
baseOpacity is the resting state — zero hides the frame completely. hoverOpacity is where it lands, and range is how many pixels away the pointer starts bringing it up.
base 0
base 0.3
range 200
Frame
hasBorder draws the outline and borderWidth sets its weight. Fill and border colour default to the theme’s card and border values, so a panel matches its surface without being told to.
no border
2px border
half opacity
Props
The controls exposed on the instance panel.
Usage
Guidance carried over from the component definition.
Reach for FrameReveal
A grid of cards should show edges only where the reader is looking.
The frame must fade while the content inside stays readable.
Fill and border should follow the theme rather than be set per instance.
Reach for something else
The panel should be visible at all times — set a fill and border on the frame itself.
The whole card needs to lift or tilt — use TiltCard.
There is no pointer, as on touch, so the reveal never fires.
Io — Enhancements
Every specimen above is a live component instance. Colour, type and radius resolve from the project theme tokens.