Skip to content

component

Real 3D Layered card

By Elyes Belghith

Details

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.

12001400156828/218/279/29/89/15
  • All · #5516