GlareCard — 3D Tilt Card with Dynamic Glare Effect

GlareCard — 3D Tilt Card with Dynamic Glare Effect

GlareCard is a 3D hover card component for Framer with cursor-reactive tilt animation and multi-style glare effects. The card responds to mouse movement with smooth spring-based 3D rotation, creating a realistic depth illusion that makes your UI feel physical and interactive.

At the core is a real-time tilt system that rotates the card along both X and Y axes based on cursor position — giving the impression that light and perspective are reacting to the user in real time.

GlareCard includes three distinct glare modes, each creating a completely different visual atmosphere. Diamond mode generates sharp facet-like light spikes that radiate from the cursor, simulating the prismatic reflections of a cut gemstone. Holographic mode produces smooth hue-shifting color sweeps that change based on cursor angle, recreating the iridescent effect of a holographic foil card. Aurora mode creates soft flowing waves of purple, teal, and green light across the card surface, evoking the organic movement of the northern lights.

All three modes use layered conic gradient overlays with screen blend mode, so glare effects interact naturally with any background image. Built with Framer Motion spring physics for smooth 60fps performance.

Key Features

• Interactive 3D tilt card animation with spring physics

• Three glare styles: Diamond, Holographic, Aurora

• Cursor-reactive conic gradient overlay effects

• Dynamic starburst light effect (Diamond mode)

• Real-time light direction and glare simulation

• Optional title and subtitle text layer

• Fully customizable background image

• Adjustable tilt intensity, glare intensity, spot radius, border radius

• High performance CSS-based rendering — no external dependencies

• Demo component included for client presentations

Best For

• Product showcase cards

• Portfolio project previews

• Creative agency websites

• NFT and digital art galleries

• Landing page hero cards

• Interactive marketing sections

Where to Use

• Homepage feature sections

• Portfolio galleries

• Product highlight cards

• Interactive landing pages

• Creative studio websites

• Visual storytelling sections

How to Use

1. Add the GlareCard component to your Framer page

2. Upload your background image in the property panel

3. Choose your glare style: Diamond, Holographic, or Aurora

4. Adjust tilt intensity, glare intensity, and border radius to match your design

5. Toggle Show Text to add title and subtitle on the card