Skip to content

component

Proximity Grid

By Khizer

Details

Summary

Make Your Layouts Feel Alive Proximity Grid transforms any image collection into a tactile, cursor-reactive experience.

Description

Make Your Layouts Feel Alive Proximity Grid transforms any image collection into a tactile, cursor-reactive experience. Images scale, tilt, fade, and desaturate based on how close your visitor's cursor is; creating a premium interactive feel with zero code. What It Does Proximity Scaling: Close images grow, far images shrink; smooth spring physics, no jitter. 3D Tilt: Each image subtly rotates to face the cursor, adding real depth. Opacity & Saturation: Far images fade and desaturate, spotlighting what's near the cursor. Dynamic Border Radius: Corners round up as the cursor approaches, sharpen when it leaves. Stacked Entry: All images start piled at center, then fan out to the grid when the cursor appears. They collapse back when the cursor leaves the window. Drop Shadow: Optional soft shadow for a lifted, card-like look. Fully Configurable Any Grid Layout: Set rows and columns (1–6 each) to build 1×1, 2×3, 4×4, or anything in between. Spring Physics: Dial in stiffness and damping to make it snappy or buttery smooth. All Properties Exposed: Image size, min/max scale, tilt angle, opacity floor, saturation floor, border radius, gap; everything adjustable from Framer's property panel. Links: Attach URLs to any image for interactive navigation grids.

Introduction

Cursor-reactive grid with 3D depth.

Rank history

Daily rank per list, from the first snapshot — lower is better.

120014001600161548/148/228/309/79/15
  • All · #5693