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.
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 AssetImageDrop in any premium image asset or photograph.📐 Image FitEnumChoose between Cover, Contain, or Fill to match your layout grid.✨ Glow ColorColorPick a custom accent color for the adaptive interactive light source.💧 BrightnessNumber (0–1)Finetune the intensity of the illumination effect upon hover.🎯 Core RadiusNumberAdjust the size of the sharp, central focal highlight.🌫️ Ambient RadiusNumberControl the spread and blooming effect of the surrounding backdrop light.🔮 Softness (Blur)NumberDefine how smoothly the dynamic light gradients blend into the background.🔲 Corner RadiusNumberSet the card's edge sharpness (Defaults to 0 for modern, sharp layouts).🔄 3D Tilt IntensityNumberScale the responsiveness and depth of the 3D mouse rotation.🍿 Grain TextureBooleanToggle the cinematic fine-grain film noise overlay on or off.
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.
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 AssetImageDrop in any premium image asset or photograph.📐 Image FitEnumChoose between Cover, Contain, or Fill to match your layout grid.✨ Glow ColorColorPick a custom accent color for the adaptive interactive light source.💧 BrightnessNumber (0–1)Finetune the intensity of the illumination effect upon hover.🎯 Core RadiusNumberAdjust the size of the sharp, central focal highlight.🌫️ Ambient RadiusNumberControl the spread and blooming effect of the surrounding backdrop light.🔮 Softness (Blur)NumberDefine how smoothly the dynamic light gradients blend into the background.🔲 Corner RadiusNumberSet the card's edge sharpness (Defaults to 0 for modern, sharp layouts).🔄 3D Tilt IntensityNumberScale the responsiveness and depth of the 3D mouse rotation.🍿 Grain TextureBooleanToggle the cinematic fine-grain film noise overlay on or off.
Jonghyuk
