Image Spotlight
Interactive image spotlight with 3D tilt and mouse-following radial reveal. Perfect for portfolios, galleries, and immersive hover effects.
Made with Workshop
Build your own component with AI
Interactive image spotlight with 3D tilt and mouse-following radial reveal. Perfect for portfolios, galleries, and immersive hover effects.
Made with Workshop
Build your own component with AI
Image Spotlight brings your visuals to life with an interactive, cinematic effect. As users move their mouse over the image, a radial spotlight follows the pointer, revealing the image in focus while the rest dims under a semi-transparent overlay. Add a 3D perspective tilt for extra depth, giving your content a premium, engaging feel.
✨ Key Features
Mouse-following spotlight — Radial reveal follows cursor precisely.
3D tilt effect — Adds subtle perspective rotation based on pointer position.
Customizable overlay — Control opacity and intensity of the darkened background.
Spotlight size control — Adjust the focus area to suit your design.
Border radius & styling — Easily match your layout with smooth rounded corners.
Performance optimized — Lightweight, CSS-driven effects for smooth interactions.
💡 Use Cases
Creative portfolios and photography showcases
Product galleries or hero sections
Interactive web campaigns
Hover-preview effects for editorial or design sites
🎨 How to Use
Drag Image Spotlight into your Framer canvas.
Select an image or upload your own.
Adjust Spotlight Size and Overlay Opacity to control the reveal effect.
Fine-tune Border Radius to match your design style.
Hover over the image to see the radial spotlight and 3D tilt in action.
Bring interactivity and depth to your images with Image Spotlight, making every hover an engaging, cinematic experience.
