5d:I[473921,["/creators-assets/_next/static/immutable/chunks/2bxtessbrg0z1.js","/creators-assets/_next/static/immutable/chunks/3xktnaujy87te.js","/creators-assets/_next/static/immutable/chunks/3futvmn4fb096.js","/creators-assets/_next/static/immutable/chunks/24bk4ojcoor5n.js","/creators-assets/_next/static/immutable/chunks/1ozc4wc1du10z.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1n4sz3rar6_gg.js","/creators-assets/_next/static/immutable/chunks/2h_rs7nbfvb7-.js","/creators-assets/_next/static/immutable/chunks/3ly-i84yiij4i.js","/creators-assets/_next/static/immutable/chunks/3oybmd01gs-b6.js","/creators-assets/_next/static/immutable/chunks/0vxt9zvn936s0.js","/creators-assets/_next/static/immutable/chunks/1eyot9c9uwocm.js","/creators-assets/_next/static/immutable/chunks/03stgnoj58q7s.js","/creators-assets/_next/static/immutable/chunks/1cey7skpirawe.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3gipqcylfnv5h.js","/creators-assets/_next/static/immutable/chunks/3fujn21cf_mt1.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/1ftf6fdyz0hh4.js","/creators-assets/_next/static/immutable/chunks/2lxef2-u417vc.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/3uo-268z2xnq9.js","/creators-assets/_next/static/immutable/chunks/2y36h9lujf54i.js","/creators-assets/_next/static/immutable/chunks/2ch5kewqiwntv.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/3xmobvbzj3637.js","/creators-assets/_next/static/immutable/chunks/26fs9mkd8gzie.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/110hzb6dmcbdr.js","/creators-assets/_next/static/immutable/chunks/2eiu9v0ook5ln.js","/creators-assets/_next/static/immutable/chunks/1zt764sfv2wd7.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js","/creators-assets/_next/static/immutable/chunks/3gx0_q52o4oil.js","/creators-assets/_next/static/immutable/chunks/0u_jiik6ovv_e.js","/creators-assets/_next/static/immutable/chunks/2warb3xv9rce7.js","/creators-assets/_next/static/immutable/chunks/1tvhyiuh-gmez.js"],"PostDetailCard"] 5e:Tb02,

About this Component

The Spotlight Image component brings a professional, interactive spotlight effect to your Framer projects. It lets you control how an image is revealed under the cursor using customizable gradients, blend modes, and spring-based motion. Ideal for portfolios, landing pages, or any design where you want to highlight visuals with an engaging and modern interaction.

With full property control over cursor styles, overlay effects, and background fitting, this component adapts seamlessly to both subtle UI flourishes and bold, eye-catching hero effects.

Features

Spotlight Reveal Effect powered by cursor position
Customizable Gradient (inner & outer colors, opacity)
Blend Modes for overlay color (normal, multiply, overlay, screen, darken, lighten)
Cursor Styles: Default, Inverted, or Hidden
Spring Physics Option for smooth, natural cursor motion
Adjustable Spotlight Size with pixel-based control
Responsive Background Fit (cover, contain, or fill)
Configurable Image Opacity & Overlay Color
Lightweight and fully optimized for FramerAbout this
Component
The Spotlight Image component brings a professional, interactive spotlight effect to your Framer projects. It lets you control how an image is revealed under the cursor using customizable gradients, blend modes, and spring-based motion. Ideal for portfolios, landing pages, or any design where you want to highlight visuals with an engaging and modern interaction.
With full property control over cursor styles, overlay effects, and background fitting, this component adapts seamlessly to both subtle UI flourishes and bold, eye-catching hero effects.
Features
- Spotlight Reveal Effect powered by cursor position
- Customizable Gradient (inner & outer colors, opacity)
- Blend Modes for overlay color (normal, multiply, overlay, screen, darken, lighten)
- Cursor Styles: Default, Inverted, or Hidden
- Spring Physics Option for smooth, natural cursor motion
- Adjustable Spotlight Size with pixel-based control
- Responsive Background Fit (cover, contain, or fill)
- Configurable Image Opacity & Overlay Color
- Lightweight and fully optimized for Framer

5a:[["$","$L5d",null,{"post":{"id":"019a72d3-8149-7d73-bebe-6c41c99015e6","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"cb743a6c-58ff-4c1b-9465-c9a9c1b5dc54","name":"Shams Digital","slug":"shams-nahid","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/46301/avatar-IYaeECxW1oY7dsLrudldlDEpzR7iqH.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"haodzDRLDWteeE7OpFFu","resolved":true,"title":"Spotlight Cursor","body":"$5e","bodyJson":null,"introduction":"","slug":"spotlight-cursor","author":{"framerUserId":"cb743a6c-58ff-4c1b-9465-c9a9c1b5dc54","name":"Shams Digital","slug":"shams-nahid","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/46301/avatar-IYaeECxW1oY7dsLrudldlDEpzR7iqH.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/Hkdub6rMKOowXY0cfiaM/spotlight-cursor-acFWkJj4lUUTXgJZOxn3YUT78rRpW7","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-10-28T13:25:04.797Z","updatedAt":"2025-11-10T12:09:55.763Z","publishedAt":"2025-11-11T12:10:55.177Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://reliable-environment-341851.framer.app/","price":"9","paymentUrl":"https://shams-nahid.lemonsqueezy.com/buy/1959a31f-b497-4a31-b9b0-31de1666c262","workshop":false,"categories":[{"id":"c0182b81-fefe-45f5-ba00-27459f05e2a7","name":"Cursors","slug":"cursors"}],"lastSaveId":"2qYcHqS4YLwj45zRoXvD","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-11-11T12:10:55.177Z","updatedAt":"2025-11-11T12:10:55.177Z","reported":false,"type":"post"}}],"$L5f"]

Suggested for you