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.
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
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.
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
