HolographicCard3D

Holographic foil effect for images

Introducing the Holographic Card component.

A trading-card holographic effect for Framer — rainbow spectrum sweep in color-dodge, 3D tilt, SVG foil texture, specular glare. Cubic-bezier ease-out on release that makes the card feel alive.

How to Use and Customize

• Drop the component at any size — width 100% / height 100% — it adapts to its frame.

• Set an Image (any aspect ratio works).

• Hover to activate: tilt, spectrum sweep, glare and lift-on-scale all kick in together.

• Spectrum A, B, C are the three colors blended in color-dodge.

• Reflection (0–1.5) is the spectrum opacity multiplier.

• Tilt (0–30°) controls the 3D rotation amplitude.

• Radius (0–60px) for the corner radius.

• Pure CSS transforms + one inline SVG <feTurbulence> — no canvas, no WebGL.

Enjoy 😃