Real 3D Layered card

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

Property groups

• contentTitle, description

• imageSource, fit, radius, height

• colorsTitle, text

• ctasCount, labels, colors, URLs

• backgroundSolid / blur, opacity, border

• layoutRadius, padding

• motionSettingsTilt, translate, tilt-shift