component
Real 3D Layered card
By Elyes Belghith

Details
- Elyes BelghithAuthor
- componentType
- 2026-08-20Published
- 2026-08-21Updated
- 2026-08-20Added
- CardsCategories
Summary
Beautiful glassy card that tilts
Description
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
Introduction
Beautiful glassy card that tilts
Rank history
Daily rank per list, from the first snapshot — lower is better.
- All · #5516