Aperture is a Framer code component for a hover card with real 3D depth, not a CSS trick faked with box-shadow. The card tilts toward your cursor, individual elements advance in Z as you hover, and a focus-follows-cursor blur keeps whatever you're pointing at sharp while the rest falls out of focus.
Every value is exposed in the properties panel, grouped into seven sections, so you can restyle it entirely without touching code.
Cursor-tracked tilt with corner-entry smoothing (no jump)
Depth-of-field blur that follows the pointer in real time
0, 1, or 2 CTAs, independent hover states, no bleed between them
Glass or solid background, fully recolorable
One slider controls the whole card's sense of depth
contentTitle, description
imageSource, fit, radius, height
colorsTitle, text
ctasCount, labels, colors, URLs
backgroundSolid / blur, opacity, border
layoutRadius, padding
motionSettingsTilt, translate, tilt-shift
Aperture is a Framer code component for a hover card with real 3D depth, not a CSS trick faked with box-shadow. The card tilts toward your cursor, individual elements advance in Z as you hover, and a focus-follows-cursor blur keeps whatever you're pointing at sharp while the rest falls out of focus.
Every value is exposed in the properties panel, grouped into seven sections, so you can restyle it entirely without touching code.
Cursor-tracked tilt with corner-entry smoothing (no jump)
Depth-of-field blur that follows the pointer in real time
0, 1, or 2 CTAs, independent hover states, no bleed between them
Glass or solid background, fully recolorable
One slider controls the whole card's sense of depth
contentTitle, description
imageSource, fit, radius, height
colorsTitle, text
ctasCount, labels, colors, URLs
backgroundSolid / blur, opacity, border
layoutRadius, padding
motionSettingsTilt, translate, tilt-shift
