EtherealGlowCard

Interactive 3D parallax glow component.

Component Overview Fluid 3D Parallax: Utilizes micro-normalized physics (useSpring) to track cursor vectors smoothly without lagging, even on lower-end devices. Dual-Layered Lighting Physics: Combines a high-intensity Core Radius for crisp focal highlights with a broad Ambient Radius to achieve a realistic, volumetric glow. Cinematic Vignette & Overlay: Features an integrated internal shadow map (boxShadow) and an analog grain texture (mixBlendMode: "overlay") to deliver a rich, filmic look. Customizable Properties (Controls) You can seamlessly customize the behavior and appearance of the card directly from the Framer properties panel without touching a single line of code: PropertyTypeDescription📸 Image Asset ImageDrop in any premium image asset or photograph. 📐 Image Fit EnumChoose between Cover, Contain, or Fill to match your layout grid. ✨ Glow Color ColorPick a custom accent color for the adaptive interactive light source. 💧 Brightness Number (0–1)Finetune the intensity of the illumination effect upon hover. 🎯 Core Radius NumberAdjust the size of the sharp, central focal highlight. 🌫️ Ambient Radius NumberControl the spread and blooming effect of the surrounding backdrop light. 🔮 Softness (Blur) NumberDefine how smoothly the dynamic light gradients blend into the background. 🔲 Corner Radius NumberSet the card's edge sharpness (Defaults to 0 for modern, sharp layouts). 🔄 3D Tilt Intensity NumberScale the responsiveness and depth of the 3D mouse rotation. 🍿 Grain Texture BooleanToggle the cinematic fine-grain film noise overlay on or off.

Interactive 3D parallax glow component.